HTMLをやってみよう

Last updated 4 months ago

Introduction to HTML

テンプレートって何?とあなたは思っているかもしれませんね。

テンプレートは、あらかじめ用意された共通したフォーマットのなかで異なる情報をみせるためのファイルです。 - 例えば、手紙を書く時に、中身は異なるメッセージや宛名や住所を書きますが、共通のフォーマットを使いますよね。それがテンプレートです。

Djangoのテンプレートは、HTMLという言語でできています。 (はじめのチャプターHow the Internet worksで、HTMLについては少しお話しましたね。)

What is HTML?

HTMLはシンプルなプログラムで、ChromeやFireFox、SafariといったWebブラウザが解釈して、ユーザーが読めるようにしてディスプレイに表示します。

HTML は "HyperText Markup Language"の略です。 HyperTextとは、テキストなどをクリックすると別のページに繋がるハイパーリンクが使えるということです。Markupは、目印をつけるという意味です。文章の各部分がどのような役割を果たしているかブラウザに伝えます。<>に囲まれたタグによってマークアップされたものは、要素と呼ばれます。

Your first template!

テンプレートを作成するということは、テンプレートファイルを作成するという意味です。すべてはファイルですよね?あなたは、このことにすでに気がついていることと思います。

テンプレートは blog/templates/blog ディレクトリに保存します。では、まずblogディレクトリに templates という新しいディレクトリを作成しましょう。次に、templatesディレクトリの中に、blogというディレクトリを作成します。:

blog
└───templates
└───blog

(なぜblogという名前のディレクトリが2つもあるのだろうと、疑問に思ったかもしれませんね。 - 後にわかってくると思いますが、これは複雑になりやすい物事を楽にするための、わかりやすい命名規則なのです。)

さて、blog/templates/blogディレクトリの中に、 post_list.html というファイルを作成しましょう。 (今のところは、空っぽのファイルにしておいてください。)

ここで、あなたのWebサイトがどのように見えるか確認してみましょう。: http://127.0.0.1:8000/

もし、まだTemplateDoesNotExistsというエラーが出るようでしたら、サーバーをリスタートしてみてください。コマンドラインで、Ctrl+C (Control と C ボタンを同時に押す)を押すと、サーバーが止まります。python manage.py runserver とコマンドを打って、再度スタートしてください。

Figure 11.1

エラーが出なくなりました!おめでとう!!:) しかし、あなたのWebサイトはまだ何も表示されていませんね。あなたのテンプレートにまだ何もないからです。これを修正していきましょう。

テンプレートファイルに、次のとおりにコードを追加して下さい。:

Hi there!

It works!

さて、あなたのWebサイトは今度はどのように見えるでしょうか?確認してみましょう。: http://127.0.0.1:8000/

Figure 11.2

表示されましたね!よくできました! :)

  • <html>、Webページのはじまりにつけるタグです。そして</html> はページの最後につきます。先ほどの例でお分かりのように、最初の行の<html>と、 最終行の </html> の間に、Webサイトの全てのコンテンツが書かれています。

  • <p> はパラグラフのタグです。 </p> を各パラグラフの終わりにつけます。

Head & body

すべてのHTMLページは、2つの要素が必要です。: headbody です。

  • head要素 これには、ドキュメントに必要な情報を含んでいます。ディスプレイには表示されません。

  • body要素 これには、そのほかのWebページに表示される内容が含まれます。

<head> は、ページの構成などをブラウザに伝えます。そして、<body> のタグ内の内容が、実際にページに表示されます。

例えば、次の例のように、Webページのタイトルを <head> タグの中に含めることができます。:

Ola's blog

Hi there!

It works!

ファイルを保存して、再読み込みしてみましょう。

Figure 11.3

あなたのページのタイトルが"Ola's blog"だと、ブラウザが認識してくれましたね? タグ内に書かれた <title>Ola's blog</title> をブラウザは解釈して、ブラウザのタイトルバーの文字が反映されました。(ブックマークのタイトルなどにも使われます).

おそらく既にお気づきでしょう。タグは開始タグと終了タグのペアになっていて、終了タグには/がつきます。そして要素の中にほかの要素が次々と入れ子になっています (入れ子なので、あるタグを閉じるときには、その中のタグもすべて閉じていなくてはなりません)。

これは箱にものを入れるようなイメージです。まず最初に、<html></html>という大きな箱を1つもっています。その中に、<body></body>という箱があり、また更にその中に<p></p>という小さい箱が入っています。

タグを閉じることと、入れ子にすることは、守らなければいけないルールです。タグを閉じていなかったり、入れ子になっていないと、ブラウザは正しく解釈ができないため、あなたのページは正しく表示されません。

Customize your template

テンプレートをつかって、カスタマイズしてちょっと遊んでみてください。よく使われるタグをいくつかご紹介しておきますね。:

  • <h1>見出し1</h1> - 一番大きな見出し

  • <h2>見出し2</h2> 次に大きな見出し

  • <h3>見出し3</h3> ... 見出しのレベルは1〜6まであり、<h6>が一番小さい見出しとなります。

  • <em>text</em> 要素に囲まれたテキストを強調します。文章の意味合いとして強調すべき語句やフレーズを示します。

  • <strong>text</strong> 囲まれたテキストを強く強調します。文中の特定の語句が重要であることを示します。

  • <br /> br は BReak(改行)の略です。テキストをこの位置で改行します。(brの中には、何も書いてはいけません)

  • <a href="http://djangogirls.org">link</a> リンクをつくります。

  • <ul><li>first item</li><li>second item</li></ul> リストをつくります。

  • <div></div> ブロック要素として囲みます。

以下をテンプレートとして使って下さい。:

Django Girls blog

published: 14.06.2014, 12:14

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

published: 14.06.2014, 12:14

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut f.

ここで、3つの div ブロックを作りました。

  • 最初の div 要素は、ブログのタイトルです。見出しとリンクが含まれていますね。

  • その他の2つの div 要素は、ブログ記事を投稿日時とを囲んでいます。 h2 の見出しは、リンクタグがついた記事のタイトルです。そして、2つのpパラグラフがありますね。投稿日時とブログ記事の内容です。

ブラウザで見るとこのようになります。:

Figure 11.4

わーい!うまく表示されましたね!でも、まだこのテンプレートは同じ情報を表示するだけですね。 - 先ほどお話したようにテンプレートとは、同じフォーマットで、異なる情報を表示するものです。

私たちが本来やりたいことというのは、Djangoの管理画面に追加された記事の情報を、同じフォーマットで表示することです。では、次のレベルにいってみましょう。

One more thing

このWebサイトがローカルだけでなく、同じようにHerokuでも動いているのを見たいですね。再度デプロイしてみましょう。

まずは、先ほどのデプロイから、どのファイルが更新されたか状態を確認しましょう。:

$ git status

次に、作業ディレクトリ内のすべての変更をgit に追加します。:

$ git add -A .

補足 -A ("all"の意味) とすると、削除されたファイルもgitは認識します。(デフォルトでは、新規ファイルと変更のあったファイルだけを認識します)そして、チャプター3で説明があったように、 . は、カレントディレクトリを示していますので、忘れないようにしましょう。

すべてのファイルをアップロードする前に、 git が何をアップロードしようとしているのか、確認しておきましょう。( gitがアップロードしようとしている全てのファイルが緑色で表示されます):

$ git status

あとちょっとです!がんばりましょう。gitに変更を保存しておきましょう。どのような変更を加えたかわかるように、"コミットメッセージ"をつけておきます。メッセージはなんでも構いませんが、後でなにをしたかわかるような説明をしておくとよいでしょう。

$ git commit -m "Changed the HTML for the site."

補足 コミットメッセージは、ダブルクォーテーションで囲みましょう。

この次に、やっと変更をHerokuのWebサイトにアップロード(プッシュ)することができます。:

git push heroku master

アップロードの作業は以上です。Herokuでの処理がおわれば、ブラウザ上で変更を加えられたサイトが見れるでしょう。ブラウザを再読み込みして確認してください。変更されていますね!