さとし日記

都内大学院生のブログ

松濤から道玄坂にかけての街の雰囲気の変化が面白い

同じ区内でここまで街の雰囲気が異なるのはかなり珍しい方なのではないかと思う。

 

中高大と東京の学校だったが、基本的に同じ路線を使っていたので、その域外の東京の地理にはかなり暗い方だった。

最近になってようやく、よく聞くけどどこにあるのかわからない地名の位置関係が把握できてきた。

 

世田谷区はもう少し西にあるイメージがあったし、港区はもう僅かに北にあるイメージがあった。

 

そして東京都は意外と狭い。

香川県、大阪府に次いで狭いことは知識としては知っていたが、実感を伴って理解できた。

 

調べてみると、出身地である千葉県の面積は全国28位で、東京都と神奈川県を合わせたよりも広い。さすが我らが千葉県。すごいぞ千葉県。

 


 

そんなわけで、かなり間が空いてしまったが、今日は久しぶりにwebアプリ制作の続きに取り組んだ。

 

前回は、モデルの定義と、それを元にバックエンドのデータベースにテーブルを作る(migration)ところまでやったので今回はその続きから。

 

まずは、データーベースに対して、ブラウザからデータを投入するための管理画面を作っていく。

プロジェクトのルーティング設定(urls.py)を見ると、adminが管理用のインターフェースと定義されているので、ブラウザでポート番号の次に「/admin」と入力すると、『Django管理サイト』が表示される。

 

$ python manage.py createsuperuser
でログインIDを作成する(ユーザー名、メールアドレス、パスワード)。

 

次に、アプリケーション内のadmin.pyにmodels.pyで定義したクラスをインポートする。

 

この状態のまま何かを投稿しても、「Content object」としか表示されないので、複数の投稿を判別できるように、「Content object」となっている箇所にタイトルの文字列を返す設定をする。

 

そのために、models.pyで記述したクラス内に、タイトルを返す関数
def __str__(self)
を追加する。返り値はreturn self.titleとする。

(Classはデータのテンプレートのこと、ObjectはClassから生成された各データのこと。)

 

続いて、今書いている「はてなブログ」のように、アプリケーションの一番上のページにタイトルだけではなく、投稿の一覧も表示するようにプログラムを改変していく。

 

そのためにテンプレートエンジンを使う。
やや煩雑で曖昧な部分もあるけど、とりあえず先に進めながら仕組みを理解していく。
多分データベースから取り出した値を変数に入れ、それをHTMLファイルに渡すという感じだと思う。

 

f:id:satoshi86:20200313094949p:plain

テンプレートエンジン

Wikipedia - Template processor」より。

 

そのために、現在models.pyからデータを取り出すコードがviews.pyにあるので、それをさらにHTMLファイルに渡す設定をする。

つまり、現在「models.py → views.py」となっているデータの流れを、「models.py → views.py → index.html」とする。

 

これはviews.py内のindex関数でレンダリングをする前にクラスから取り出した値をテンプレートに転送するコードを追加することで実現できる。

そして、HTMLファイルの方では、テンプレートエンジン特有の文法で記述する必要がある。
制御文は{% %}
データの表示は{{変数名}}
となる。

 

タイトルだけでなく、投稿日や本文なども同様の方法で記述していく。

本文に関しては、全文ではなく、部分的に表示した方が見やすいので、アプリケーション内のmodels.pyにサマリーを返す関数def summary(self)を追加する。返り値はreturn self.body[:50]とする(表示する文字数は適当。とりあえず50文字にしてみた)。


投稿の一覧に、タイトル、投稿日、本文を表示したので、次は添付している画像も表示できるようにする。

そのために、index.htmlのテンプレートの投稿日と本文の間にイメージタグ(img)を追加する。

{% for post in posts.all %}

        {{ post.title }}
        <br /><br />
        <img src="{{ post.image.url }}">
        {{ post.published }}
        <br /><br />
        {{ post.summary }}
        <br /><br />
{% endfor %}

 

次に、「webapp/all_media」内からデータを静的なデータを表示するための設定をしていく。

設定すべき項目は2つ。
「どのようなURLで呼び出すかという関連付け(呼び出すURL設定)」、そして「そのURLの下にどのフォルダーを関連付けるか(フォルダ指定)」。

 

その為に、webapp/webappの中のurls.pyとsettings.pyを編集していく。

 

まずは、urls.pyに静的なファイルを扱うための宣言を追加する。

from django.conf.urls.static import static
from django.conf import settings

from django.conf.urls.static import staticで静的なファイルを扱うためのプログラムを呼び出し、その後にfrom django.conf import settingsでsettings.pyのファイルを読み込む(この順番は逆にしない)。

 

次にurlpatternを下記のように変更する。
urlpatterns = [
        url(r'^contents/', include('contents.urls')),
        url(r'^admin/', admin.site.urls),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)で静的なファイルを表示するためのURLの設定と、そのデータをどこに保持しているか、という2つの設定を渡すことができる。

 

MEDIA_URLはどういう名前で静的ファイルにアクセスさせるか、というアドレスの設定で、document_rootは「静的ファイル一番上の階層をどこに置くのか」、そしてこれをsettings.MEDIA_ROOT、settings.pyのMEDIA_ROOTというエントリーで与える。


続いて、settings.pyの設定をする。

settings.pyの一番下に、静的ファイルのURLについて定義してるところがある。

STATIC_URL = ‘/static/’
となっているところに、上記のMEDIA_URL(どういう名前で呼び出すかというアドレスの指定)と、MEDIA_ROOT(メディアのファイルをどの階層に配置しているか)という2つの宣言をしていく。

 

まず、MEDIA_URLに関しては、
MEDIA_URL = ‘/pics/’
として、静的ファイルはpicsの下に関連付けられるようにする。

 

次に、MEDIA_ROOTに関しては、settings.pyの上の方で、BASE_DIRという名前で、OSから取得しているので、これを使い、settings.pyの一番下の行に、
MEDIA_ROOT = BASE_DIR
を追加する。

 

all_mediaについては、content/models.pyにおいて、image = models.ImageField(upload_to= 'all_media/')で定義されている。

 

そして、このall_mediaというフォルダはプロジェクトの直下にある、という関連付けができた。

これを保存すると、ブラウザ上で、添付写真が表示される。

念の為、このページのソースを確認する。 

f:id:satoshi86:20200327091435p:plain

静的ファイルを表示するための関連付け

 

img src =の次にpicsというURLを仮想的に作っておいて、その下に、all_media/gakki_tea.jpgのように、アドレスを動的に生成している。
そしてこのURLをクリックすると、写真を参照することができることができる。

f:id:satoshi86:20200327091833p:plain

URLから画像の表示

 

このようにDjangoで写真を表示する為には、静的なファイルの配置、settings.pyの変更、そしてurlpatterns内のstaticの所でURLのルートと、ドキュメントルートを指定をする必要がある。 

 

続きはまた次回ということで。