| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YouTube検索</title> | |
| </head> | |
| <body> | |
| <h1>YouTube動画検索</h1> | |
| <form action="/" method="get"> | |
| <input type="text" name="q" value="{{ query }}" placeholder="検索キーワード"> | |
| <select name="order"> | |
| <option value="relevance" {% if order == 'relevance' %}selected{% endif %}>関連順</option> | |
| <option value="date" {% if order == 'date' %}selected{% endif %}>アップロード日時順</option> | |
| <option value="view_count" {% if order == 'view_count' %}selected{% endif %}>再生回数順</option> | |
| </select> | |
| <button type="submit">検索</button> | |
| </form> | |
| {% if videos %} | |
| <h2>検索結果</h2> | |
| <ul> | |
| {% for video in videos %} | |
| <li> | |
| <a href="{{ video.url }}" target="_blank">{{ video.title }}</a> - {{ video.uploader }} | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| <div> | |
| {% if page > 1 %} | |
| <a href="?q={{ query }}&order={{ order }}&page={{ page - 1 }}">前のページ</a> | |
| {% endif %} | |
| <a href="?q={{ query }}&order={{ order }}&page={{ page + 1 }}">次のページ</a> | |
| </div> | |
| {% endif %} | |
| </body> | |
| </html> | |