Return to Video

08-23 Template Inheritance

  • 0:00 - 0:02
    最後のレッスンはテンプレートの「継承」です。
  • 0:02 - 0:05
    これは使い方によっては物事を複雑にしてしまいます。
  • 0:05 - 0:08
    しかし目的に沿って正しくシンプルに使う事ができれば
  • 0:08 - 0:11
    テンプレートはずっと使いやすいものになるでしょう。
  • 0:11 - 0:14
    WEBページには共通の構造があります。
  • 0:14 - 0:19
    タイトルやフッター、そしてコンテンツです。
  • 0:19 - 0:22
    これは / でアクセスするページとしましょう。
  • 0:22 - 0:25
    似たような他のページもあります。
  • 0:25 - 0:28
    例えば/aboutページとかです。
  • 0:28 - 0:34
    このページも同じタイトルやフッターを持っていて
  • 0:34 - 0:36
    コンテンツだけが違います。
  • 0:36 - 0:39
    HTMLを生成する際に同じタイトルやフッターを
  • 0:39 - 0:42
    何度も繰り返し生成するのは理想的ではありません。
  • 0:42 - 0:45
    コードを書くときに、ファンクションやクラスによって構造化するように
  • 0:45 - 0:47
    HTMLにおいても、同じコードを繰り返し書くべきではありません。
  • 0:47 - 0:50
    テンプレートによってHTMLの構造化ができます。
  • 0:50 - 0:52
    それがここで説明しようとしていることです。
  • 0:52 - 0:54
    テンプレートの継承を使いましょう。
  • 0:54 - 1:01
    ヘッダーとフッターを含んだテンプレートを作成します。
  • 1:01 - 1:03
    そしてサブテンプレートを呼び出します。
  • 1:03 - 1:07
    サブテンプレートはこのコンテンツの部分だけを定義しなおしたものです。
  • 1:07 - 1:10
    これがHTMLコードを構造化する方法です。
  • 1:10 - 1:12
    今私たちのコードはこうなっています。
  • 1:12 - 1:16
    shopping_list.htmlとfizzbuzz.htmlがあります。
  • 1:16 - 1:18
    共通部分はないので、それを作りましょう。
  • 1:18 - 1:21
    簡単なタイトルを作成して
  • 1:21 - 1:25
    それをbase.htmlから継承することにします。
  • 1:25 - 1:28
    2つのhtmlはどちらもbase.htmlから継承し
  • 1:28 - 1:34
    base.htmlは2つのhtmlの共通部分を持っています。
  • 1:34 - 1:36
    これでコードが改善されるはずです。
  • 1:36 - 1:38
    実際にやってみせましょう。
  • 1:38 - 1:41
    最初にやることはbase.htmlの作成です。
  • 1:41 - 1:43
    2つのファイルの共通部分を追加しようと思います。
  • 1:43 - 1:47
    いいタイミングなので適切なHTMLドキュメントを作りましょう。
  • 1:47 - 1:49
    base.htmlでファイルを保存します。
  • 1:49 - 1:53
    HTMLは で開始します。
  • 1:53 - 1:56
    タグがあって<header>があります。
  • 1:56 - 2:00
    ヘッダーにはがあります。タイトルは各ページで共通です。
  • 2:00 - 2:04
    の中にがあります。
  • 2:04 - 2:06
    ここで新しい構文が登場します。
  • 2:06 - 2:09
    ここにbodyの開始タグと終了タグがあります、
  • 2:09 - 2:12
    これがHTMLの基本的な構造です。
  • 2:12 - 2:16
    そしてbodyタグの内容はページ毎に異なります。
  • 2:16 - 2:20
    titleなども変えられますが、とりあえず今はbodyについてだけ考えましょう。
  • 2:20 - 2:25
    ここで使うjinjaの構文はこのようなものです。
    {% block content %}
  • 2:25 - 2:27
    ブロックを作成する構文です。
  • 2:27 - 2:30
    ブロックは各テンプレートで共有されるものです。
  • 2:30 - 2:33
    {% block の後にブロックの名前を続けます。
  • 2:33 - 2:35
    ここでは"content"という名前にしました。
  • 2:35 - 2:38
    そして{% endblock %} で閉じます。
  • 2:38 - 2:41
    これで各テンプレートから、このcontentブロックを使えるようになりました。
  • 2:41 - 2:45
    ではshopping_list.htmlからこのbase.htmlを使ってみましょう。
  • 2:45 - 2:49
    ショッピングリストページの先頭、
  • 2:49 - 2:52
    共通テンプレートのbodyにコードを追加して
  • 2:52 - 2:55
    先頭にヘッダーが表示されるようにしましょう。
  • 2:55 - 2:57
    タイトルを追加し、
  • 2:57 - 3:00
    各ページの先頭にヘッダーを表示するようにしました。
  • 3:00 - 3:02
    h1タグと少しスタイルのCSSを追加しただけです。
  • 3:02 - 3:06
    背景色は#dddで文字色は#888です。
  • 3:06 - 3:10
    これは暗い灰色です。
  • 3:10 - 3:12
    マージンをなくして
  • 3:12 - 3:14
    50pxの高さにしました。
  • 3:14 - 3:17
    bodyにも少しスタイルを追加します。
  • 3:17 - 3:20
    レイアウトを少し整えましょう。"margin: 0" これでよし。
  • 3:20 - 3:23
    ではこのテンプレートをshopping_list.htmlから使いましょう。
  • 3:23 - 3:25
    構文はとても単純です。
  • 3:25 - 3:30
    先頭で {% extends "base.html" %} と宣言します。
  • 3:30 - 3:35
    この宣言によってこのテンプレートはbase.htmlの一部だと解釈されます。
  • 3:35 - 3:37
    実際にどう表示されるか確認しましょう。
  • 3:37 - 3:41
    コードを保存します。ハンドラーは変更していないので
  • 3:41 - 3:44
    shopping_list.htmlが出力されます。
  • 3:44 - 3:47
    ページを見てみます。まだ前のページが残っているのでリロードしましょう。
  • 3:47 - 3:51
    先ほど書いたヘッダーが表示されています。
  • 3:51 - 3:54
    灰色の背景と、濃い灰色の文字です。
  • 3:54 - 3:56
    コンテンツは表示されていません。ソースを見てみましょう。
  • 3:56 - 4:00
    これはbase.htmlの内容です。
  • 4:00 - 4:02
    しかしコンテンツは何もありません。
  • 4:02 - 4:05
    なぜならここに表示されるcontentブロックを設定していないからです。
  • 4:05 - 4:07
    テンプレートに戻って修正しましょう。
  • 4:07 - 4:09
    これはbase.htmlです。先ほどブラウザで見たソースの内容です。
  • 4:09 - 4:13
    shopping_list.htmlは実際のところ、この時点ではまだ
  • 4:13 - 4:16
    contentブロックに何も格納していません。
  • 4:16 - 4:22
    格納するにはこのようにします。
    {% block content %}
  • 4:22 - 4:25
    この行でブロックを宣言します。名前の"content"は
  • 4:25 - 4:29
    base.htmlのここと一致する必要があります。
  • 4:29 - 4:33
    最後にブロックを閉じます。
    {% endblock %}
  • 4:33 - 4:36
    ファイルを保存してブラウザに戻りましょう。
  • 4:36 - 4:38
    ページをリロードすると
  • 4:38 - 4:42
    base.htmlの中に、コンテンツが表示されました。
  • 4:42 - 4:44
    ソースを見てみると
  • 4:44 - 4:47
    base.htmlのヘッダーがあり、
  • 4:47 - 4:50
    中程にフォームのコンテンツがあり
  • 4:50 - 4:52
    下の方を見ると、
  • 4:52 - 4:55
    スクロールの都合でお見せできませんが
  • 4:55 - 4:58
    base.htmlの終わりの部分があります。簡単ですね!
  • 4:58 - 5:01
    このようにしてページに固有のコンテンツと
  • 5:01 - 5:04
    そのページ固有のテンプレートとを
  • 5:04 - 5:07
    共通のコンテンツやテンプレートから分離することができます。
  • 5:07 - 5:09
    このテクニックはこのコースでよく使います。
  • 5:09 - 5:13
    ブログを始めとして、様々なWEBアプリの作成で使うことになるでしょう。
Cím:
08-23 Template Inheritance
Leírás:

more » « less
Video Language:
English
Team:
Udacity
Projekt:
CS253 - Web Development
Duration:
05:14

Japanese subtitles

Felülvizsgálatok Compare revisions