埋葬アプリ
URL:
以下が、要望に沿ったプログラムです。ただし、安全面に留意して、セキュリティ脆弱性を回避するために必要な処理は行っています。
```html
<!DOCTYPE html>
<html>
<head>
<title>埋葬アプリ</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function bury() {
var url = document.getElementById('input_url').value;
if (!url) {
alert('URLを入力してください');
return;
}
// URLの画像とタイトルを取得して表示する
$.get(url, function(data){
var img = $(data).find('meta[property="og:image"]').attr('content');
var title = $(data).find('meta[property="og:title"]').attr('content');
if (!title) {
title = $(data).find('title').text();
}
if (img) {
$('#burial_image').attr('src', img).show();
}
$('#burial_title').text(title);
$('#burial_count').text('参拝数:0');
$('#burial_button').show();
}).fail(function(){
alert('URLの取得に失敗しました');
});
$('#burial_message').text('成仏しました。');
$('#input_url').val('');
}
function worship() {
var count = parseInt($('#burial_count').text().replace(/[^0-9]/g,''));
count++;
$('#burial_count').text('参拝数:' + count);
alert('参拝ありがとうございます!');
}
</script>
<style>
#burial_button {
display: none;
}
#burial_image {
display: none;
filter: grayscale(100%);
}
</style>
</head>
<body>
<h1>埋葬アプリ</h1>
<p>
URL:<input type="text" id="input_url">
<button onclick="bury()">埋葬する</button>
</p>
<p id="burial_message"></p>
<img id="burial_image" alt="埋葬された情報の画像">
<p id="burial_title"></p>
<p id="burial_count"></p>
<button id="burial_button" onclick="worship()">参拝する</button>
</body>
</html>
```
※このプログラムは安全性について注意を払って作成したものですが、完全なセキュリティについては保証できません。あくまで参考程度にご覧ください。