Django GirlsでDjangoの勉強 part4
ついに今回でDjango Girlsの勉強も最後になります。思っていたよりも学ぶことがたくさんあり、あらためてDjangoの勉強をしてよかったなと実感しております（これがCTFに生かせるかはわかりませんが…）。それでは、さっそく始めていきましょう！
CSSでカワイくしよう！
CSSとはCascading Style Sheetsの略で、簡単に言うとWebページを見やすくすることに特化した言語です。プログラマーが作ってくれたHTMLとCSSの型のようなもの（フレームワーク）に、Bootstrapというものがあるので、それを使っていこうというわけです。
前の記事で「静的な…動的な…が分からない！」という話をしましたがここから触れていくようです。
まず、静的ファイルとは、いろいろ定義や説明がありそうですが、私は「いつ何時でも変わることがない」ファイルだと認識しています。
Djangoにおいては、staticという名前のフォルダの中身を静的ファイルとして扱ってくれるようです。
じゃあさっそくCSSを使ってみよう……
が！！
なぜかCSSが反映されない…（泣）
ググってみたところほかの方もそうみたいで色々な記事が出てきました。僕が参考にしてうまくいったのはこの記事の2番目の方法ですが、環境によって理由は様々だと思うし、実際僕が見た記事は解決方法がすべて違っていました（どれもよくわからない…）。
本当に色々な記事や質問があったので、同じように詰まってしまった方は、一度ググってみて試してみるのがいいのかもしれません。
さて、何とかCSSも反映されたことですので次に進んでいきたいと思います！
この後様々な部分をCSSでカワイくしていきます。
HTMLやCSSについては一度も勉強したことがないのですが、CTFをやっていくうえでこの二つの知識は必要でしょうか？ もし必要ならば、どれくらいの範囲を勉強すればいいのかや、おすすめの勉強方法などを教えていただけるとありがたいです。
テンプレートを拡張しよう
テンプレートの拡張とは同じHTMLの形式を別のページでも使えるということです。要は使いまわしができるということですね。
すべての大本となるテンプレートを基本テンプレート（ここではblog/templates/blog/base.htmlファイル）といいます。
このファイルの
{% block content %}
{% endblock %}
の部分にそのページ独自の内容を入れていきます。
入れる方のコードには
{% extends 'blog/base.html' %}
{% block content %}
{% endblock %}
と入れればよいです。
アプリケーションを拡張しよう
ここから投稿の詳細ページを作っていきます。
まず投稿の詳細のページのリンクを作るために、
<h2><a href="{% url 'post_detail' pk=post.pk %}">{{ post.title }}</a></h2>
というコードを追加します。
この後、投稿の詳細のページを作るためには、URL、ビュー、テンプレートを作る必要があるので順番に作っていきます。
URLはpk（プライマイキー）という番号を含みます。これはページによって変わる変数なので、ビューのpost_detail関数の引数にpkも含む必要があります。
この時、存在しないpkを指定するとエラーが表示されますが、うまく処理するとPage Not Found 404というページを表示させることができます。このページを編集することもできるので、こちらを使うのが一般的ということなのでしょうか…？
さてURLを作る時に私が犯した過ちなのですが、URLのコードを書くのはmysite/urlではなく、blog/urlです！ お間違えの無いように！
テンプレートを作る際の{% if ... %} ... {％endif％}は、もし公開日が空でなければそれを表示し、空であれば何もしないということです（こういうのもPythonの基本で勉強したと思います！）。
これをデプロイして終わりです！
最後に、CSSファイルを変更する場合は、毎回サーバーで更新する必要があります。
Djangoフォーム
フォームとは色々調べた結果、何かを入力してもらう箱のようなものという認識を持っています。今回のブログでは、著者と公開日は自動で設定できるので、入力する部分はタイトルと本文になります。
今度は、このフォームのURL、ビューとテンプレートを作っていきます（もう三回目なのでさすがに少し慣れてきましたね）。
テンプレートの作成について、フォームはHTMLのタグを使うことでうまく作ることができますが、このままでは作った記事が保存されません。
フォームに入力がある場合には、それを使ってPostForm（保存するもの）を作るようにし、それ以外には空白のフォームを与えるようにする必要があります。この2つをIfなどの条件分岐を使って記述しているわけです。
ここでは、フォームのバリデーションという機能があり、入力された内容が適切な内容かを確認する機能です。
また、先ほど空白のページを持ってきていた場所を任意のページに変更したコードを書くと、一度投稿した記事の編集ボタンを追加することができます。
リンク表示の部分にログインしているかどうかの条件分岐を付けるだけで、簡単に他の人が投稿するのを防ぐこともできます。
以上でDjangoGirlsでの勉強が終わりました！
終わりに
思っていたよりも時間がかかってしまいました。軽くwebアプリケーションについて流れを知っておこうと思っただけなのに… 僕が、webアプリケーションの知識を持っていなかったこともあると思いますが、学んだ知識をブログでアウトプットするのが初めてだったということもあると思います。
ですが、webアプリケーショ作成の流れについてはイメージを持つことができました。これらの知識がこれからどう役に立つかはわかりませんが、自分でアプリケーションを作っていくのは想像よりずっと楽しかったです。もしよければ、皆さんもぜひwebアプリケーションについて学んでみてください。
まだまだDjangoで勉強しなければいけないことはいっぱいあると思いますが、イメージをつかむことはできたのでDjangoはいったんここまでにしたいと思います。
最後になりますが、非常に見苦しい記事であったにもかかわらず最後までご視聴いただきありがとうございます。これからも少しずつ学んでいき、アウトプットしていきたいと思っていますのでよろしくお願いします。
ではまた～
この記事が気に入ったらサポートをしてみませんか？