Pixabay API 追記
検索フォームと配列にキーワード追加・削除
index.php
<html>
<head>
<meta charset="utf-8">
<title>Pixabay API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Pixabay API Script</h1>
<form name="search">
<input name="key" type="text" placeholder="キーワードを入力してください">
<input name="btn" type="submit" value="表示確認">
</form>
<div id="result"></div>
<hr>
<script src="app.js"></script>
<!-- <?php //include("regist.php"); ?> -->
<?php
// キーワード登録処理
$keyfile = __DIR__ . '/array.js';
$msg = '';
// キーワード削除処理（delete_kwがPOSTされた場合は必ず削除）
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['delete_kw'])) {
$del_kw = $_POST['delete_kw'];
$js = file_get_contents($keyfile);
preg_match_all('/"(.*?)"/', $js, $matches);
$arr = $matches[1];
$arr = array_filter($arr, function ($v) use ($del_kw) {
return $v !== $del_kw;
});
$out = "const arr = [\n \"" . implode("\",\n \"", $arr) . "\"\n];\n";
file_put_contents($keyfile, $out);
header('Location: index.php');
exit;
}
// キーワード登録処理
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['keyword'])) {
$new = trim($_POST['keyword']);
if ($new !== '') {
// key-ran.jsを読み込み
$js = file_get_contents($keyfile);
preg_match_all('/"(.*?)"/', $js, $matches);
$arr = $matches[1];
if (!in_array($new, $arr)) {
$arr[] = $new;
$out = "const arr = [\n \"" . implode("\",\n \"", $arr) . "\"\n];\n";
file_put_contents($keyfile, $out);
$msg = '登録しました';
} else {
$msg = '既に登録済みです';
}
} else {
$msg = 'キーワードを入力してください';
}
}
?>
<h2>ランダムキーワード登録</h2>
<form method="post">
<input type="text" name="keyword" required>
<button type="submit">登録</button>
</form>
<p><?php echo htmlspecialchars($msg); ?></p>
<hr>
<h3>現在登録されているランダムキーワード</h3>
<ul>
<?php
if (file_exists($keyfile)) {
$js = file_get_contents($keyfile);
preg_match_all('/"(.*?)"/', $js, $matches);
$arr = $matches[1];
// 削除確認画面表示
if (isset($_GET['confirm_delete'])) {
$del_kw = $_GET['confirm_delete'];
echo '<form method="post"><input type="hidden" name="delete_kw" value="' . htmlspecialchars($del_kw) . '">';
echo '<p>「' . htmlspecialchars($del_kw) . '」を削除しますか？</p>';
echo '<button type="submit">削除</button>';
echo '<a href="' . $_SERVER['SCRIPT_NAME'] . '"><button type="button">キャンセル</button></a>';
echo '</form>';
} else {
foreach ($arr as $kw) {
echo '<li>' . htmlspecialchars($kw) . ' ';
echo '<a href="' . $_SERVER['SCRIPT_NAME'] . '?confirm_delete=' . urlencode($kw) . '" style="color:red;">削除</a>';
echo '</li>';
}
}
}
?>
</ul>
<hr>
<h1>Pixabay Video API Script</h1>
<form name="search_video">
<input name="key" type="text" placeholder="キーワードを入力してください">
<input name="btn" type="submit" value="表示確認">
</form>
<div id="result_video"></div>
<script src="app_video.js"></script>
</body>
</html>
app.js
(function() {
'use strict';
//フォームのボタンがクリックされたら、またはエンターキーが押されたら
document.search.btn.addEventListener('click', function(e) {
e.preventDefault(); //画面更新をキャンセル
fetch( createURL(document.search.key.value) )
.then( function( data ) {
return data.json(); //JSONデータとして取得する
})
.then( function( json ) {
createImage( json );
})
})
//リクエスト用のURLを生成する
function createURL( value ) {
var API_KEY = '***************************';// ここにAPIキー
var baseUrl = 'https://pixabay.com/api/?key=' + API_KEY;
var keyword = '&q=' + encodeURIComponent( value );
var option = '&orientation=horizontal&per_page=100';
var URL = baseUrl + keyword + option;
return URL;
}
//画像のJSONデータを画面に表示する
function createImage( json ) {
var result = document.getElementById('result');
result.innerHTML = ''; //検索するごとに画面をリセットする
//該当する画像があれば
if( json.totalHits > 0 ) {
json.hits.forEach( function( value ) {
var img = document.createElement('img');
var a = document.createElement('a');
a.href = value.pageURL; //ダウンロード用のサイトURL
a.target = '_blank';
img.src = value.previewURL; //プレビュー用の画像URL
a.appendChild( img );
result.appendChild( a );
})
}
else {
alert('該当する写真がありません');
}
}
})();
キーワード配列からランダムに取得してスライドショー
array.js
const arr = [
"sea",
"morning",
"evening",
"night",
"beauty",
"suny",
"rain",
"storm",
"summer",
"winter",
"spring",
"autumn",
"風景"
];
コメント
コメントを投稿