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

夏休み特別企画実践して⾝に付けるPython #3 エンジニアカフェ　スタッフ　永石　好エンジニアカフェ主催　中高生向けコーディングイベント

前回のおさらい・pythonでwebアプリケーションを作るフレームワークとして「 Django」が最大手という話・Anacondaで仮想環境を作り、その中に DjangoとSpyderを導入し、開発する手法・画像投稿アプリを作ろう！・Djangoが持つMTVという考え方の話(モデル、テンプレート、ビュー ) ・WebアプリはWeb上で扱うもののため、 htmlのテンプレートが必須
・テンプレートを4つ作ったよ(コピーと新規で) ・htmlの中には{% (タグ名) (引数) %}という、Django特有のテンプレートタグを仕込むよ！という話・テンプレートタグを使って htmlソースを改造していくよ！というところまでテンプレートは→の画像の赤で囲んだ分を作成したよ！というところまでが前回の話でした。今回は、このテンプレートの中身を編集するところから始まります。

それでは中身を編集していきます。まずはベーステンプレートから。ファイルペインで「base.html」をダブルクリックして開き、 {% load static %} この一文を、<!doctype html>の前(つまり改行して1行目)に挿入します。ついでに、HTMLでコメントも書いておきます。
HTML内でのコメントの書き方は という書き方をします。 (　　　　がコメント部分) 最初のlord staticがなんのためにあるのかをコメントとして残しておくとよいでしょう。以下のように整えます。  {% load static %} <!doctype html> <head>～～～(以下略)

次は、HTMLタグのlang属性を日本語の値に書き換えます。 <html lang=”en” data-bs-theme=”auto”> <html lang=”ja” data-bs-theme=”auto”> 次に、headタグ内のタイトル部分のテキストを各ページのテンプレートで埋め込める形にします。

<title>Album example · Bootstrap v5.3</title> <title>{% block title %}{% endblock
%}</title> こうしておくことで、開くページによってタイトル部分を Django側で自動で変えることができるようになり、ページごとの編集が必要なくなります。この部分

赤の線で囲った部分を削除します。この部分は、Bootstrapの公開ページからCSSを読み込んだりするためのものですが、現在の状態では使えないため差し替えます。

次のように記述してください。  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script> 長くて見辛いですね！？もう少し簡単な方法を取りましょう！！

まず最初の <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。

このハッシュ値というものが "sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" という部分です。しかし、これは既に用意されていますので、以下の通りにコピペをお願いいたします。まず、Bootstrapのサイトへ行きます。テンプレートのダウンロードを行った時と同様、「ダウンロード」をクリックします。

以前ダウンロードしたのは「例」からでしたが、今度はその下の CDNとあるところ、コード欄の横にある「クリップボードにコピー」をクリックしてコピーします。

そして、削除した行にペーストしてください。整えるとこうなります。 1行が長いので、改行してコードの見た目を整えてください。長いので略

次は、 <header>内の<h4>、<p>の部分のテキストを書き換えます。 <h4>お気に入りを見つけよう！</h4> <p class=”text-body-secondary”> 誰でも参加できる画像投稿サイトです。自分で撮影した写真、作成した画像なら何でもオッケー！でも、AI生成画像やカテゴリに属さない写真・画像はNGです。コメントも付けてください！</p>
適宜改行してコード上だけでも見やすくしてみましょう。 (実際には改行タグを入れていないのでドバっと表示されます ) 会員制の写真投稿サイトであること、肖像権や著作権に注意することなどに触れながら誰でも参加しやすいような文言でアピールしましょう。

今のは、ナビゲーションメニュー (上部のにゅっと出てくるメニュー )の左側に表示される Webアプリの説明文に使う部分でした。次は、その右部分、・Follow on Twitter ・Like on
Facebook ・Email me(ここはそのまま) と書いてある部分を差し替えます。

メールのアドレスだけ差し替えます。 #と書いてある分を消して、画像と同じアドレスを書いてください。 mailto:[email protected]

次は、ナビゲーションメニュー左部分にあるトップページへのリンクを書き換えます。 (カメラアイコン) リンク先は a href=”{% url ‘imagepost:index’ %}” コメントをその文章の前に と付けておきます。整えるとこんな感じです。※シングルクォーテーションであることに注意。ついでに、下に続くコードも見やすく体裁を整えておくとよいでしょう。

次は、リンクテキストの変更。 Albumの部分を、 ImagePostと書き換えます。次は、<main>の中身を全て削除します。 (</main>の閉じタグは残します ) これは、メインコンテンツの部分を各ページのテンプレートで埋め込むためです。削除したあと、記述してください。 {% block
contents %}{% endblock %}

画像と同じようにコメントを付けながら整えてください。

最後にフッターの文章を書き換えます。画像では349行となっている2行目は全て削除してください。 348行目の文章を ImagePost is copy; Bootstrap, but please post
a lot! と書き換えます。

タイトルテンプレートの編集次はタイトルテンプレートの編集です。タイトルのテンプレートもベーステンプレートと同様、作成した時点では元のデータのコピーのままです。タイトルテンプレートに必要なのは、タイトルと 2個のナビゲーションボタン (会員登録とログイン)を表示することです。 image_title.htmlをエディタペインで開き (ファイルをダブルクリック )、
181行目までを全て削除してください。

削除したあと

次に、タイトルとボタンを出力するブロックを残し、 </section>の下の <div class=”album py-5 bg-body-tertiary”> から以降を全て削除してください。

残ったコードを編集していきます。まずは、<h1>のテキストを「ImagePost」に書き換え、 <p>のテキストを編集します。文章は好きなもので構いません。サンプルとしては「コメントを見て画像の世界に思いを馳せましょう。素敵な写真や画像、コメントをお待ちしています！」などいかがでしょうか？

次は、2つ配置されているボタンのテキストの編集です。 <a>タグの2つを「今すぐサインアップ」「登録済みの方はログイン」に書き換えます。

整えるとこんな感じです。

投稿一覧テンプレートの編集次に投稿一覧テンプレートの編集です。こちらもコピーした状態のままですので、編集していきます。投稿一覧テンプレートに必要なものは投稿された写真や画像を一覧表示することです。先ほどのタイトルテンプレートと同様、必要なブロックを残して削除し、残した部分を編集していきます。まずは、image_list.htmlをペインエディタで開き、 1行目から194行目までを削除します。

削除したあと

その下の<div class=”col”>以下を消していきますが、 </div>は3つ分残してください。 <div class=”col”>は全部で8ブロック分あります。 </div>(閉じタグ)を3つ分残すことに気を付けて削除してください。消したら、更に下の<main>以降を全て削除してください。

残ったコードを整えてみましょう。特に7行目は1行が長いので、見やすいように整えます。整えると画像のようになります。

空白の行は削除しても残しても構いません。次は中身の編集に移ります。

赤で囲んだ場所は削除してください。

画像では28行目のテキスト「Edit」を、「カテゴリ」に書き換えます。次に、29行目のテキスト「9 mins」を「UserName」に書き換えます。長いので整えた姿は実機にて！ (アーカイブ動画で確認してください ) これで、投稿一覧テンプレートは OKです。

トップページテンプレートの編集次は、トップページのテンプレートの編集です。前の 3つと違い、こちらはコピーで作成したものではなく、中身は空っぽです。まずはベーステンプレート base.htmlを適用し、ヘッダー情報のタイトルを設定してタイトルテンプレート、投稿一覧テンプレートを includeタグを使って組み込みます。 index.htmlをペインエディタで開き、次のように記述してください。

{% extends “base.html” %} 
{% block title %}Image Post{% endblock %} {% block contents %}  {% include “image_title.html” %}  {% include “image_list.html” %} {% endblock %}

画像の通りになれば OKです！

プロジェクトとアプリのURLconfを編集プロジェクトのURLconfに画像投稿アプリ(imagepost)のURLconfへのリダイレクトを設定して、 imagepostのURLconfにトップページを呼び出す仕組みをつくります。「ファイルペイン」でプロジェクトフォルダー「 imagepostProject」以下の「urls.py」を開きます。 17行目のインポート文に includeを追加し、リストurlpatternsの要素として、アプリのurls.pyにリダイレクトするURLパターンを追加します。ここに includeを追加
追加する時は、前のpathのあとにカンマを入れます。

includeを追加し、リダイレクトを追加します。画像の通りに入力してください。

リダイレクトの設定はできましたが、肝心の imagepostフォルダの中にurls.pyがありません。そこで作成します。ファイルペインで「imagepost」フォルダを右クリックし、「新規」→「pythonファイル…」を選択して「urls.py」を作成します。

作成したファイルに以下を書き込んでいきます。 (一旦中身は全て削除します ) from django.urls import path from . import
views # URLパターンを逆引きできるように名前を付ける app_name = “imagepost” # URLパターンを登録するための変数 # imagepostアプリへのアクセスはviewsモジュールのIndexViewにリダイレクトする urlpatterns = [ path(“”, views.IndexView.as_view(), name=”index”), ]

まだまだいきます。次はトップページのビューを作ります。トップページのビューとして TemplateViewクラスを継承したIndexViewクラスを定義します。ファイルペインで「imagepost」フォルダの「views.py」をダブルクリックして開きます。このようなコードが既に書かれています。 2行目以降は削除してください。

インデントはタブで記していますが、スペース 4つでも大丈夫です。ただし、同じ定義の中身のインデントは統一する必要があります。書けたら保存します。他に保存していないファイルがないか確認してください。

今まで書いてきた中身がきちんと表示されるかどうかのチェックに、開発用サーバーを起動します。コマンドプロンプト(ターミナル)を起動し、cdコマンドで「imagepostProject」に移動します。続いて「python manage.py runserver」と入力します。その後、ブラウザのアドレスバーで「 http://127.0.0.1:8000/」と入力し表示してください。 ※コマンドプロンプト内のアドレスにマウスを合わせて、 Ctrlキーを押しながらクリックしてもブラウザが開きます。

こんな感じの画面になれば OKです！！

時間が来ましたのでここまで！また次回お会いしましょう！次回は9月3日10時からを予定しています！ connpassや、エンジニアカフェのHPをチェックしてくださいね！

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

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

EngineerCafe

More Decks by EngineerCafe

Other Decks in Technology

Featured

Transcript

夏休み特別企画実践して⾝に付けるPython #3 エンジニアカフェ　スタッフ　永石　好エンジニアカフェ主催　中高生向けコーディングイベント

次は、HTMLタグのlang属性を日本語の値に書き換えます。 <html lang=”en” data-bs-theme=”auto”> <html lang=”ja” data-bs-theme=”auto”> 次に、headタグ内のタイトル部分のテキストを各ページのテンプレートで埋め込める形にします。

<title>Album example · Bootstrap v5.3</title> <title>{% block title %}{% endblock

赤の線で囲った部分を削除します。この部分は、Bootstrapの公開ページからCSSを読み込んだりするためのものですが、現在の状態では使えないため差し替えます。

次のように記述してください。  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

以前ダウンロードしたのは「例」からでしたが、今度はその下の CDNとあるところ、コード欄の横にある「クリップボードにコピー」をクリックしてコピーします。

そして、削除した行にペーストしてください。整えるとこうなります。 1行が長いので、改行してコードの見た目を整えてください。長いので略

今のは、ナビゲーションメニュー (上部のにゅっと出てくるメニュー )の左側に表示される Webアプリの説明文に使う部分でした。次は、その右部分、・Follow on Twitter ・Like on

メールのアドレスだけ差し替えます。 #と書いてある分を消して、画像と同じアドレスを書いてください。 mailto:[email protected]

次は、ナビゲーションメニュー左部分にあるトップページへのリンクを書き換えます。 (カメラアイコン) リンク先は a href=”{% url ‘imagepost:index’ %}” コメントをその文章の前に <!--

画像と同じようにコメントを付けながら整えてください。

最後にフッターの文章を書き換えます。画像では349行となっている2行目は全て削除してください。 348行目の文章を ImagePost is copy; Bootstrap, but please post

削除したあと

次に、タイトルとボタンを出力するブロックを残し、 </section>の下の <div class=”album py-5 bg-body-tertiary”> から以降を全て削除してください。

次は、2つ配置されているボタンのテキストの編集です。 <a>タグの2つを「今すぐサインアップ」「登録済みの方はログイン」に書き換えます。

整えるとこんな感じです。

削除したあと

残ったコードを整えてみましょう。特に7行目は1行が長いので、見やすいように整えます。整えると画像のようになります。

空白の行は削除しても残しても構いません。次は中身の編集に移ります。

赤で囲んだ場所は削除してください。

{% extends “base.html” %}

画像の通りになれば OKです！

includeを追加し、リダイレクトを追加します。画像の通りに入力してください。

作成したファイルに以下を書き込んでいきます。 (一旦中身は全て削除します ) from django.urls import path from . import

インデントはタブで記していますが、スペース 4つでも大丈夫です。ただし、同じ定義の中身のインデントは統一する必要があります。書けたら保存します。他に保存していないファイルがないか確認してください。

こんな感じの画面になれば OKです！！

時間が来ましたのでここまで！また次回お会いしましょう！次回は9月3日10時からを予定しています！ connpassや、エンジニアカフェのHPをチェックしてくださいね！