2019/11/16【Django】テンプレートを使いこなそう!《3日目》Djangoこんちゃす。今回はDjangoでテンプレートに関しての一連の処理をやっていきたいと思います!なにやら括弧内を%で囲むテンプレートタグとやらも出てきて少し複雑なので、『かみ砕いて解説していけたらなぁ...』と思ってまーす。Djangoのバージョンは2.2.6ですもくじですとりまアプリケーションを登録しよう!アプリケーションの登録は超簡単テンプレートに触ってみよう!テンプレートって何?テンプレートを書く場所は?HTMLファイルを追加して、Webページを表示させる!テンプレートを使いこなしていこう!テンプレートとレンダリング先を設計してみる。;∀;)※Djangoでのアプリケーションの意味については↓の記事にて紹介しております。【Django】初心者がviews.pyとurls.pyを解説!『2日目』Djangoで恐らく最初に疑問点を持つであろう『views.py』と『urls.py』について、簡単な役割を図を使って説明しました!プロジェクトとアプリケーションの関係についてもまとめています。登録する必要があるだけで、難しくないので気負いする必要はございません。Djangoプロジェクト(heacet_app)のフォルダ内の『setting.py』を開いてください。これを見つけてプログラムこのプログラムに『helloアプリケーション』を表記することで、Djangoに『helloアプリケーション』の存在を伝えることができます!では↓のように一行追加しましょう。変わりうるところを開けておいて、不変なところだけ形を決めてしまおう!という考え方ですね。↓の図をご覧ください。飛鳥と悟空にそれぞれメッセージカードを作ってもらうことを想定すると、こんな図になります。被るであろう所を定型文として、変わってくるところを開けている感じです。このとき飛鳥と悟空の情報をデータベースに持っているだけで、あとはDjango側でメッセージカードを完成させてしまう訳です!これによって何度も同じテキストを書く(上図の『の名前は』や『よろしくお願いします。』など)手間を省くことができます!(てか悟空あんな喋り方しないですね...wテンプレートを書く場所は?Djangoではアプリケーションごとにテンプレートを管理することになっている今回では『hello』内に書くことになりますね。上図のように『templatesフォルダ』内に『helloフォルダ』を作ってください。最後に『templatesフォルダ』内の『helloフォルダ』内に『index.html』ファイルを作成してください!↓このような構成になっていれば正解。HTMLファイルを追加して、Webページを表示させる!以下のコードをそれぞれに打てば、Webページが表示されるはずです。views.pyのプログラム上の図4に見慣れないrender関数とやらがありますね...render関数とは?render関数とは、あらかじめ作っておいたテンプレートを読み込んで、同時にDjangoの処理を上乗せします。先ほど飛鳥と悟空を例に出したメッセージカードに情報を与える部分ですね!そして引数の2つ目にディレクトリを指定しているのですが、これはtemplates下でのディレクトリを指定しているみたいで、参照の方法が特徴的なので注意が必要です!最後に『index.html』は↓のように書いてください。(※HTMLの文法説明は省きます。World』とか言っとく。index.htmlのプログラムこのようにそれぞれのファイルにプログラムを書けば、Webページに↓こんな感じになるはず。Webページを表示させる際にDjangoのローカルサーバーを起動させる方法は↓コチラへどうぞ【Django】初心者がローカルサーバを起動させるまで『1日目』DjangoというPythonで最も使われていると噂のフレームワークを使って、初心者がプロジェクト作成からローカルサーバを起動させるまでまとめました。見るスポンサードサーチテンプレートを使いこなしていこう!先ほど散々『テンプレートに値を渡すことができるのがDjangoの役割だ!!』とか言ってたのに全然使ってませんでしたね。笑テンプレートとレンダリング先を設計してみる。赤字は文字の表示に対応。青字はリンクに対応しています。上図にしたがって、『views.py』『index.html』『urls.py』を順番にプログラムを書いていきます。views.pyでパラメータを渡す!値を渡す方法は見た目を司る『views.py』さんで辞書を用いて値を渡していきます。views.pyのプログラム図6のようにそれぞれパラメータを1つの辞書(dic)にまとめて書いています。いわゆるJSON形式と似ていますが、まさにそんな感じです!※JSON形式の場合は、文字列をダブルクォーテーション(“”)で囲む必要があります。パラメータの辞書(dic)をrender関数の引数にすることによって、index.htmlにパラメータを渡します。content="ie=edge"><title>helloの{{title}}</title></head><body><h1>helloの{{title}}のページ</h1><p>『{{msg}}』とか言っとく。index.htmlのプログラムパラメータをレンダリングしている部分に色付けしています!このようにviews.pyでKeyに定義していた部分を{{}}内に書いて、Keyに対応する値を渡しているんですね~。先ほどと同様に赤字は文字列に値を渡していて、青字はhref属性に値を引き渡しています。通常はHTMLでのaタグ内のhref属性はURLを引き渡す場所となっていて、URLなどを書きます。これをテンプレートタグを用いて、パラメータからURLに変換させています。詳しくはurls.pyを見ながら説明していきますね。urls.pyのプログラムずっと疑問に思っていたであろう『引数name』の解説がここでやっとできます!!なんと引数である『nameの値』と『paramsのlinkの値』が全く同じではありませんか!!今までurls.pyで引数としてnameを使っていたのは、ここでURLと関連させてリンクを成り立たせているわけですね。%}としていて、流れとしてこんな感じ↓urlという種類のテンプレートタグを使うlinkの値を渡すurls.pyで共通しているnameの値を探してくれるurls.pyからURLを返してくれる分かりやすく言うとこんな流れです。よってリンク付きのページが2つ完成しました。実行結果は個々で確認してください。静的ファイル(CSS)を実装するDjangoのテンプレート機能によって、HTMLファイルへのレンダリングはできるようになりましたね!ですがWebページを見ても世の中のWebページとは程遠いデザインをしていますね笑ここでCSSを実装させて、色を付けていきましょう!staticフォルダを作るtemplatesフォルダと同様にstaticフォルダも作っていきます。style.css』のように作っていきましょう。templatesフォルダと比べた時、もし『なぜcssフォルダを挟んだの?』と思った方は勘が良いですね!他にも静的フォルダとして、『JSやSass』などを使うケースがあるので、『CSSはCSSで区切っておきましょう。VSCodeで作ると楽なのでオススメです。↓こんな感じ↓style.cssをイジるCSSについての詳しい話も割愛します。style.cssのプログラムさて次はindex.htmlにstaticを実装することを伝えなければいけません。index.htmlに以下を書いてください。/>と書くこれでCSSにて色付けできました!結果は作ってからのお楽しみ~ということで。今回はDjangoでのテンプレートの扱い方について一通りの基本をご紹介しました。関数や変数が複雑に関係しあっていて、一気に理解するのはかなり難しい所です。【Django】フォームの使い方を解説『クラスを定義』《4日目》Djangoにてフォームをついてプログラムと一緒に解説しました。クラスを使ってのフォーム作成も順序だてて説明しております。実際にフォームを作成したときの動画も作ったので、そちらと一緒に勉強していただけたらなと思います!!もっと見るもっと自分で『Djangoを学んでいきたい!』という方は僕も使っている↓コチラの本がオススメです。リンク最後まで読んで頂きありがとうございました。気づいたこと、記事の感想、この文章おかしい...などなどございましたら、お問い合わせページにてお問い合わせください。【C言語講座】2章前編:Cドライブの使いやすさ。ディレクトリとは?【開発者用コマンドプロンプト】...C言語講座ひろちょん電気工学を専攻している国公立の理系大学生です。大学まで学んだ知識の発信や、ゲーム攻略のブログをやっています。トレンド系のSEO、サイト制作を専門にしています。SEOメンター、サイト制作の依頼はご連絡ください。私について大学で電気工学を専攻しています。大学で学んだ知識をサイトにて、みなさまにお伝えできればと考えております。スマホゲームの攻略ブログもやってます。