実践して身に付けるPython#3

2023.8.21に開催したイベントで使用した資料です。
youtubeにアーカイブも残っておりますので補完用としてご利用ください～
https://www.youtube.com/live/tiBPBvRkgxA?feature=share

1. 夏休み 特別企画 実践して⾝に付けるPython #3 エンジニアカフェ　スタッフ　永石　好 エンジニアカフェ主催　中高生向けコーディングイベント
2. 前回のおさらい ・pythonでwebアプリケーションを作るフレームワークとして「 Django」が最大手という話 ・Anacondaで仮想環境を作り、その中に DjangoとSpyderを導入し、開発する手法 ・画像投稿アプリを作ろう！ ・Djangoが持つMTVという考え方の話(モデル、テンプレート、ビュー ) ・WebアプリはWeb上で扱うもののため、 htmlのテンプレートが必須 ・テンプレートを4つ作ったよ(コピーと新規で) ・htmlの中には{% (タグ名) (引数) %}という、Django特有のテンプレートタグを仕込むよ！という話 ・テンプレートタグを使って htmlソースを改造していくよ！というところまで テンプレートは→の画像の赤で囲んだ分を作成したよ！ というところまでが前回の話でした。 今回は、このテンプレートの中身を編集するところから 始まります。
3. それでは中身を編集していきます。 まずはベーステンプレートから。 ファイルペインで「base.html」をダブルクリックして開き、 {% load static %} この一文を、<!doctype html>の前(つまり改行して1行目)に挿入します。 ついでに、HTMLでコメントも書いておきます。 HTML内でのコメントの書き方は <!-- ～～～～～～～～ -->という書き方をします。 (　　　　がコメント部分) 最初のlord staticがなんのためにあるのかをコメントとして残しておくとよいでしょう。 以下のように整えます。 <!-- 静的ファイルのURLを生成するstaticタグを読み込む --> {% load static %} <!doctype html> <head>～～～(以下略)
4. 次は、HTMLタグのlang属性を日本語の値に書き換えます。 <html lang=”en” data-bs-theme=”auto”> <html lang=”ja” data-bs-theme=”auto”> 次に、headタグ内のタイトル部分のテキストを各ページのテンプレートで埋め込める形にします。
5. <title>Album example · Bootstrap v5.3</title> <title>{% block title %}{% endblock %}</title> こうしておくことで、開くページによってタイトル部分を Django側で自動で変えることができるようになり、ページご との編集が必要なくなります。 この部分
6. 赤の線で囲った部分を削除します。 この部分は、Bootstrapの公開ページからCSSを読み込んだりするためのものですが、現在の状態では 使えないため差し替えます。
7. 次のように記述してください。 <!-- Bootstrap core CSS を読み込むコード --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> 長くて見辛いですね！？ もう少し簡単な方法を取りましょう！！
8. まず最初の <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" 　 integrity= "sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> この部分ですが、これは Bootstrapで公開しているCSSをWeb上で読み込んで使う部分です。 そこに、CDN(Contents Delivery Network)を参照するための属性を付けています。 CDNとは、各地に配置した多くのキャッシュサーバーに Webサイトのコンテンツを一次的に保存 (キャッシュ)し、リクエ ストしたユーザーから近い場所にあるキャッシュサーバーからコンテンツを配信することで、 Webサーバーやネット ワークの状態、あるいはユーザーがアクセスする場所との物理的な距離にかかわらず、安定したコンテンツ配信を実 現するためのものです。 付ける属性はcrossorigin属性とintegrity属性です。 crossorigin 属性は、要素が取得するデータに関する CORS リクエストを構成することができるものです。 integrity属性は、サブリソース完全性 (SRI)という、取得したリソースが意図せず改ざんされていないかをブラウザーが 検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。
9. このハッシュ値というものが "sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" という部分です。 しかし、これは既に用意されていますので、以下の通りにコピペをお願いいたします。 まず、Bootstrapのサイトへ行きます。 テンプレートのダウンロードを行った時と同様、「ダウンロード」をクリックします。
10. 以前ダウンロードしたのは「例」からでしたが、今度はその下の CDNとあるところ、 コード欄の横にある「クリップボードにコピー」をクリックしてコピーします。
11. そして、削除した行にペーストしてください。 整えるとこうなります。 1行が長いので、改行してコードの見た目を整えてください。 長いので略
12. 次は、 <header>内の<h4>、<p>の部分のテキストを書き換えます。 <h4>お気に入りを見つけよう！</h4> <p class=”text-body-secondary”> 誰でも参加できる画像投稿サイトです。 自分で撮影した写真、作成した画像なら 何でもオッケー！でも、AI生成画像や カテゴリに属さない写真・画像はNGです。 コメントも付けてください！</p> 適宜改行してコード上だけでも見やす くしてみましょう。 (実際には改行タグを入れていないの でドバっと表示されます ) 会員制の写真投稿サイトであること、 肖像権や著作権に注意することなどに 触れながら誰でも参加しやすいような 文言で アピールしましょう。
13. 今のは、ナビゲーションメニュー (上部のにゅっと出てくるメニュー )の左側に表示される Webアプリの説明文に使う部分でした。 次は、その右部分、 ・Follow on Twitter ・Like on Facebook ・Email me(ここはそのまま) と書いてある部分を差し替えます。
14. メールのアドレスだけ差し替えます。 #と書いてある分を消して、画像と同じアドレスを書いてください。 mailto:admin@example.com
15. 次は、ナビゲーションメニュー左部分にあるトップページへのリンクを書き換えます。 (カメラアイコン) リンク先は a href=”{% url ‘imagepost:index’ %}” コメントをその文章の前に <!-- トップページへのリンク -->と付けておきます。 整えるとこんな感じです。※シングルクォーテーションであることに注意。 ついでに、下に続くコードも見やすく体裁を整えておくとよいでしょう。
16. 次は、リンクテキストの変更。 Albumの部分を、 ImagePostと書き換えます。 次は、<main>の中身を全て削除します。 (</main>の閉じタグは残します ) これは、メインコンテンツの部分を各ページのテンプレートで埋め込むためです。 削除したあと、記述してください。 {% block contents %}{% endblock %}
17. 画像と同じようにコメントを付けながら整えてください。
18. 最後にフッターの文章を書き換えます。 画像では349行となっている2行目は全て削除してください。 348行目の文章を ImagePost is copy; Bootstrap, but please post a lot! と書き換えます。
19. タイトルテンプレートの編集 次はタイトルテンプレートの編集です。 タイトルのテンプレートもベーステンプレートと同様、作成した時点では元のデータのコピーのままです。 タイトルテンプレートに必要なのは、タイトルと 2個のナビゲーションボタン (会員登録とログイン)を表示することで す。 image_title.htmlをエディタペインで開き (ファイルをダブルクリック )、 181行目までを全て削除してください。
20. 削除したあと
21. 次に、タイトルとボタンを出力するブロックを残し、 </section>の下の <div class=”album py-5 bg-body-tertiary”> から以降を全て削除 してください。
22. 残ったコードを編集していきます。 まずは、<h1>のテキストを「ImagePost」に書き換え、 <p>のテキストを編集します。文章は好きなもので構いません。サンプルとしては 「コメントを見て画像の世界に思いを馳せましょう。素敵な写真や画像、コメントをお待ちしています！」 などいかがでしょうか？
23. 次は、2つ配置されているボタンのテキストの編集です。 <a>タグの2つを「今すぐサインアップ」「登録済みの方はログイン」に書き換えます。
24. 整えるとこんな感じです。
25. 投稿一覧テンプレートの編集 次に投稿一覧テンプレートの編集です。 こちらもコピーした状態のままですので、編集していきます。 投稿一覧テンプレートに必要なものは投稿された写真や画像を一覧表示することです。 先ほどのタイトルテンプレートと同様、必要なブロックを残して削除し、残した部分を編集していきます。 まずは、image_list.htmlをペインエディタで開き、 1行目から194行目までを削除します。
26. 削除したあと
27. その下の<div class=”col”>以下を消していきますが、 </div>は3つ分残してください。 <div class=”col”>は全部で8ブロック分あります。 </div>(閉じタグ)を3つ分残すことに気を付けて 削除してください。 消したら、更に下の<main>以降を全て削除してください。
28. 残ったコードを整えてみましょう。 特に7行目は1行が長いので、見やすいように整えます。 整えると画像のようになります。
29. 空白の行は削除しても残しても構いません。 次は中身の編集に移ります。
30. 赤で囲んだ場所は削除してください。
31. 画像では28行目のテキスト「Edit」を、「カテゴリ」に書き換えます。 次に、29行目のテキスト「9 mins」を「UserName」に書き換えます。 長いので整えた姿は実機にて！ (アーカイブ動画で確認してください ) これで、投稿一覧テンプレートは OKです。
32. トップページテンプレートの編集 次は、トップページのテンプレートの編集です。前の 3つと違い、こちらはコピーで作成したものではなく、中 身は空っぽです。 まずはベーステンプレート base.htmlを適用し、ヘッダー情報のタイトルを設定してタイトルテンプレート、投 稿一覧テンプレートを includeタグを使って組み込みます。 index.htmlをペインエディタで開き、次のように記述してください。
33. <!-- ベーステンプレートを適用する --> {% extends “base.html” %} <!-- ヘッダー情報のページタイトルを設定する --> {% block title %}Image Post{% endblock %} {% block contents %} <!-- タイトルテンプレートの組み込み --> {% include “image_title.html” %} <!-- 投稿一覧テンプレートの組み込み --> {% include “image_list.html” %} {% endblock %}
34. 画像の通りになれば OKです！
35. プロジェクトとアプリのURLconfを編集 プロジェクトのURLconfに画像投稿アプリ(imagepost)のURLconfへのリダイレクトを設定して、 imagepostのURLconfにトップページを呼び出す仕組みをつくります。 「ファイルペイン」でプロジェクトフォルダー「 imagepostProject」以下の「urls.py」を開きます。 17行目のインポート文に includeを追加し、リストurlpatternsの要素として、 アプリのurls.pyにリダイレクトするURLパターンを追加します。 ここに includeを追加 追加する時は、 前のpathのあと にカンマを入れ ます。
36. includeを追加し、リダイレクトを追加します。 画像の通りに入力してください。
37. リダイレクトの設定はできましたが、肝心の imagepostフォルダの中にurls.pyがありません。 そこで作成します。 ファイルペインで「imagepost」フォルダを右クリックし、 「新規」→「pythonファイル…」を選択して「urls.py」を作成します。
38. 作成したファイルに以下を書き込んでいきます。 (一旦中身は全て削除します ) from django.urls import path from . import views # URLパターンを逆引きできるように名前を付ける app_name = “imagepost” # URLパターンを登録するための変数 # imagepostアプリへのアクセスはviewsモジュールのIndexViewにリダイレクトする urlpatterns = [ path(“”, views.IndexView.as_view(), name=”index”), ]
39. まだまだいきます。 次はトップページのビューを作ります。 トップページのビューとして TemplateViewクラスを継承したIndexViewクラスを定義します。 ファイルペインで「imagepost」フォルダの「views.py」をダブルクリックして開きます。 このようなコードが既に書かれています。 2行目以降は削除してください。
40. インデントはタブで記していますが、スペース 4つでも大丈夫です。 ただし、同じ定義の中身のインデントは統一する必要があります。 書けたら保存します。他に保存していないファイルがないか確認してください。
41. 今まで書いてきた中身がきちんと表示されるかどうかのチェックに、開発用サーバーを起動します。 コマンドプロンプト(ターミナル)を起動し、cdコマンドで「imagepostProject」に移動します。 続いて「python manage.py runserver」と入力します。 その後、ブラウザのアドレスバーで「 http://127.0.0.1:8000/」と入力し表示してください。 ※コマンドプロンプト内のアドレスにマウスを合わせて、 Ctrlキーを押しながらクリックしてもブラウザが開きます。
42. こんな感じの画面になれば OKです！！
43. 時間が来ましたのでここまで！ また次回お会いしましょう！ 次回は9月3日10時からを 予定しています！ connpassや、エンジニアカフェのHPを チェックしてくださいね！