前回の記事ではpython側の処理を紹介しましたが今回はフロントサイドとの連携を解説したいと思います。
まずはベースとなるbase.html
これを使ってトップページと結果ページを作ります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{% block head%}{% endblock %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
下の方にbodyタグがありますがブラウザで表示される文章や画像はこの中に書きます。なのでそれ以外のタグ、DOCTYPE htmlとかheadなどはトップページでも結果ページでも同じものを使用。よってこのbase.htmlは使い回し用のファイルになります。
そしてこのbase.htmlを使って作成したのがこちらのindex.html
{% extends 'base.html' %}
{% block body %}
<div class="text-center" style="margin: 150px;">
<div class="container">
<h1>Github Star Rank</h1>
<h2 style="margin: 50px;">2022年月刊スターゲイザー獲得数ランキング</h2>
<form method="post" action="/results">
<select name="rank_git">
<option value="2022-09">2022-09</option>
<option value="2022-08">2022-08</option>
<option value="2022-07">2022-07</option>
<option value="2022-06">2022-06</option>
<option value="2022-05">2022-05</option>
<option value="2022-04">2022-04</option>
<option value="2022-03">2022-03</option>
<option value="2022-02">2022-02</option>
<option value="2022-01">2022-01</option>
</select>
<input class="btn btn-primary" type="submit" value="ポチッとな">
</form>
</div>
</div>
上から順に説明します。
まずは{% extends 'base.html' %}
こちらはbase.htmlの共通部分を引き継いでいるへその緒みたいなものですね。
その引き継いだ部分から{% block body %}でコードでBody部分、すなわち文章や画像などの「見える部分」を作成します。
h1やh2は見出しなどに使うタグ。この辺は説明しなくてもいいかなw
今回頑張ったのはformタグで作ったセレクトボックスです！
👆こーゆーやつ。そんで開くと。。
こんなふうに選択したい月が表示されます。
今回のアプリでは月間ランキングにしてるので月ごとに選べるようになってます。
このformではまずmethodをpostに設定してactionで次の結果ページ、results.htmlに繋げてます。
methodではpost形式とget形式が主に使われるんですが、こちらをざっと説明すると、
post、送る値（入力した名前やパスワード、日付など）をhttpのbody部分に入れることでURLに反映させない方法です。こうすることでセキュリティーが保たれる訳ですね。
get、リクエストする情報がURLに反映される方法。今回は使用してませんが、例えば検索ページで新商品の情報が欲しい場合、そのページのURLに新商品ページにつながる文字が書かれてるはずです。
https://www.○○○○.com/search.python?new-product=2ldk&yachin=80000
👆のURLの場合、真ん中の？以降の新商品ページ、new-productにダイレクトに行けるわけですね。そしてここからセレクトボックスを設定していきます。
selectタグ内のnameで指定した"rank_git"はpythonに繋げるためのキーワード。これで前回紹介したgit.pyに紐付け完了です。
そしてoptionタグでそれぞれの月を作成します。
タグで囲った紫色の日付がブラウザに表示される人間側が見れる文字、valueで指定した日付がpython側が認識する文字です。
valueで指定した日付がpythonへ行き、APIを渡って指定した日付のjson情報にたどり着ける仕組みですね。
仕上げにinputタグでボタンを作りましょう。
classはCSSのために書きました。今回はbootstrapを使いましたが筆者自身、全く使いこなせてないので今回は説明を割愛w 完全に見よう見まねで作りました汗
そして大事なのがtype。色々種類がありますがこちらは必ずsubmitに指定します。じゃないとボタンを押しても動作しません。
（ちなみに私は"button"を指定して詰みましたw）
あとはボタン上に表示させる文字をvalueで記述。ややこしいのが先ほどのoptionタグと違って今回は人間側が見れる文字としてvalueを使います。
そして最後の閉じタグで全てを囲い完成。
なんか意外と簡単にできました。postとget、nameやvalueをちょっと気をつければ使いこなせそうな感じ。
他にもテキスト入力とかチェックを入れる形式も作れるので色々試したいですね。
ここまでTOPページの解説をしましたがうまく伝わったかな？拙い文章ですがここまで読んでくださった方、ありがとうございます。
長くなりそうなので今日はここ締めます。
次回は結果を表示させるresults.htmlを解説！乞うご期待〜