TAKAとAI老師の挑戦：ジャンル一覧ページ問題の解決
TAKA: 「老師、大変だ！ジャンル一覧ページが正しく表示されないんだけど、どうすればいい？」
AI老師: 「落ち着け、TAKA。問題の根本を探るのが最初の一歩だぞ。状況を詳しく話してみなさい。」
TAKA: 「今、ジャンル一覧ページを作ってるんだけど、検索フォームからクエリを入力しても何も変わらないんだ。ユーザーにとって役立つページを作りたいのに、全然動かない。」
AI老師: 「ふむ、それは困ったのう。しかし焦るでない。まず、ページがどのように設計されているのか、コード構成を教えてくれ。」
TAKA: 「HTMLでジャンル選択のUIを作って、Flaskのバックエンドで検索処理を動かそうとしてるんだけど、どこかがうまく噛み合っていないみたいなんだ。」
AI老師: 「わかった。それなら、HTMLとFlaskのコードを順番に確認しながら、どこで問題が発生しているのかを探っていこう。」
- HTML構造を確認
AI老師: 「まず、HTMLテンプレートで検索フォームの構造を確認しよう。検索ボックスとジャンルの選択リストが正しく設定されているかのう？」
TAKA: 「うん、以下のコードが現在の状態だよ。」 ジャンル: 音楽 教育 検索
AI老師: 「ふむ、HTML自体は問題なさそうだ。しかし、ジャンルの選択がサーバーに正しく送信されているかを調べる必要があるな。」
TAKA: 「どうやって調べるの？」
AI老師: 「ブラウザの開発者ツールを使うのだ。ネットワークタブを開いて、フォームを送信した際にどのようなリクエストがサーバーに送られるかを確認してみるといい。」
- Flaskのルート設定を確認
TAKA: 「リクエストはちゃんと送られているみたいだけど、結果が返ってこないんだ。」
AI老師: 「なるほど。ではFlask側のコードを確認してみよう。検索処理のロジックが正しく実装されているかが鍵だ。」
TAKA: 「こんな感じのコードを書いてるけど、これで大丈夫かな？」
@app.route(‘/search’, methods=[‘GET’])
def search():
genre = request.args.get(‘genre’)
if genre:
videos = search_videos_by_genre(genre)
return render_template(‘search_results.html’, videos=videos)
return render_template(‘search_results.html’, videos=[])
AI老師: 「うむ、シンプルでいいコードじゃな。しかし、search_videos_by_genre 関数の中身を確認しなければならない。」
TAKA: 「中身はこんな感じ。」
def search_videos_by_genre(genre):
api_url = f”https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q={genre}&key=YOUR_API_KEY”
response = requests.get(api_url)
if response.status_code == 200:
return response.json().get(‘items’, [])
return []
AI老師: 「ふむ、問題はここにあるかもしれん。APIキーが正しいか、またAPIリクエストの上限に達していないかを確認してみよう。」
- APIリクエストの確認
TAKA: 「APIキーは正しいと思うけど、リクエストが多すぎて制限に引っかかっているかも。」
AI老師: 「その場合、APIリクエストの数を制限する仕組みを導入すべきじゃな。それと並行して、キャッシュを活用してリクエスト回数を削減するのも良い手じゃ。」
TAKA: 「キャッシュの実装って難しい？」
AI老師: 「難しくないぞ。以下のように簡単なキャッシュシステムをFlaskに追加するだけじゃ。」
from flask_caching import Cache
app.config[‘CACHE_TYPE’] = ‘simple’
cache = Cache(app)
@cache.memoize(timeout=300)
def search_videos_by_genre(genre):
api_url = f”https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&q={genre}&key=YOUR_API_KEY”
response = requests.get(api_url)
if response.status_code == 200:
return response.json().get(‘items’, [])
return []
- テストと結果
TAKA: 「キャッシュを追加して試してみたよ！検索結果がすぐに表示されるようになった！」
AI老師: 「よくやったぞ、TAKA。これでユーザーにとって快適な検索体験が提供できるようになったのう。」
TAKA: 「老師のおかげだよ！でも、もっと改善できるポイントがある気がするな。」
AI老師: 「その意気じゃ。次の課題を見つけるのはお主自身だ。私はいつでも助けるぞ。」
解決した問題点
HTMLフォームからのリクエストが正しくサーバーに届かない問題。
APIリクエストの制限により、検索結果が返らない問題。
キャッシュを活用してリクエスト回数を削減。
今後の課題
検索結果のデザイン改善。
ユーザーがさらに使いやすいフィルタ機能の実装。