HTML 入門

テンプレートとは何でしょうか？

テンプレートは、異なる情報を統一された形式で示すために繰り返し使われるファイルです。例えば、テンプレートは手紙を書く際に役立ちます。それぞれの手紙のメッセージは様々で、宛先も別々かもしれませんが、どの手紙も同じフォーマットを共有できるのです。

Djangoのテンプレートのフォーマットは、HTMLと呼ばれる言語 (最初のチャプター「インターネットのしくみ」で触れたHTMLのことです) で書かれています。

HTMLとは？

HTMLは、ChromeやFirefox、Safariなどのウェブブラウザで解読され、利用者にウェブページを表示するためのコードです。

HTMLは、「HyperText Markup Language」の頭文字を取ったものです。 HyperTextはWebページ間を結びつけるハイパーリンクをサポートするテキスト形式という意味です。 Markupとは、一つの書類について、コードで修飾を付けて、何かに(この場合、ブラウザに) どう解釈するかを伝えることを意味します。 HTMLコードは、 <で始まり、 >で終わるタグで構成されています。 これらのタグが、markup修飾の要素なのです。

最初のテンプレート

テンプレートを作るとは、テンプレートのファイルを作ることです。すべてはファイルですよね。皆さんは、たぶん、このことに、もう気づいていると思います。

テンプレートは、blog/templates/blogディレクトリに保存されています。 それでは、最初に、自分のblogディレクトリの中にtemplatesという名前のディレクトリを作成してください。 次に、自分のtemplatesディレクトリの中にblogという名前のディレクトリを作ります。

blog
└───templates
    └───blog

（なぜ、両方ともblogという名前の付いたディレクトリを2つ作成する必要があるのか不思議に思う人もいるかもしれません。あとで分かると思いますが、簡単に言うと、これは、もっと複雑なことをやろうとした時に、それが楽にできるようにしてくれる便利な命名法なのです。）

それでは、blog/templates/blogディレクトリの中に、post_list.htmlファイル(とりあえず何も書かれていないファイルにしておきます)を作成しましょう。

あなたのウェブサイトを見てみてください: http://127.0.0.1:8000/

もし、TemplateDoesNotExistが引き続き表示されるようなら、自分のサーバーを再起動してみてください。 コマンドラインから、Ctrl+C(ControlとCのキーを同時に)を押してサーバーを止め、python manage.py runserverコマンドを動かして再度サーバーを動かします。

図 11.1

もうエラーはありませんか！おめでとうございます:)。しかし、あなたのウェブサイトは実際には空白のページ以外は何も表示していないでしょう。テンプレートも空白だからです。それを直していく必要があります。

この新しく作ったファイルをコードエディタで開いて、次の内容を書き加えます。

blog/templates/blog/post_list.html

<html>
<body>
    <p>Hi there!</p>
    <p>It works!</p>
</body>
</html>

さあ、あなたのウェブサイトはどう見えるでしょうか？以下を開いて確認してみましょう: http://127.0.0.1:8000/

図 11.2

うまく動いています！よくできました:)

  • どんなウェブページでも、最も基本的なタグである<html>から始まり、そして常に、</html>で終わります。 みなさん見てとれるように、ウェブサイトの全てのコンテンツは、開始タグの<html>と閉じタグ</html>の間にあります。
  • <p>は、段落要素のためのタグです; </p> でそれぞれの段落を閉じます。

HeadとBody

それぞれのHTMLページはheadとbodyという要素によって2つにわけられています.

  • headは文書についての情報を含む要素で、画面には表示されません。

  • bodyはWebページの一部として表示されるすべてを含む要素です。

<head>でページの設定をブラウザに伝え、<body>でページの内容を伝えます。

例えば、ウェブページのタイトル要素は<head>の中に書きます。こんな感じですね。

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Ola's blog</title>
    </head>
    <body>
        <p>Hi there!</p>
        <p>It works!</p>
    </body>
</html>

ファイルを保存し、ページを更新してください。

図 11.3

ブラウザは、どうやって、"Ola's blog"があなたのウェブサイトのタイトルだと理解したのか分かりましたか？ ブラウザは、<title>Ola's blog</title>の意味を解釈して、あなたのブラウザのタイトルバーに文を配置したのです(この文はブックマークなどにも利用されます)。

各々の開始タグは閉じタグとセットで、閉じタグには/が付いていて、タグの要素は入れ子になっていることに気がついたことと思います(つまり、ある特定のタグを閉じるには、その中にある全てのタグも閉じられていないとだめなのです)。

箱の中にものを詰め込むのと同じですね。 大きな箱、 <html></html>があります; その中に<body></body>があり、さらにもっと小さな<p></p>が入っているのです。

こうした閉じタグと、入れ子のルールを守らなくてはいけません - そうしないと、ブラウザはタグを適切に解釈することができず、あなたのウェブページが正しく表示されなくなるのです。

テンプレートのカスタマイズ

それでは、ちょっぴり楽しくテンプレートを作り変えてみましょう！次のようないくつか便利なタグがあります。

  • <h1>ヘッダー</h1> 最も重要性の高い見出し
  • <h2>サブのヘッダー</h2> その次のレベルの見出し
  • <h3>サブのサブのヘッダー</h3>... など<h6>まで
  • <p>文章の段落</p>
  • <em>文章</em>で文章を強調する
  • <strong>文章</strong>でさらに文章を強調する
  • <br>は改行(brタグの中には何も書いてはいけません。閉じタグも無しです)
  • <a href="https://djangogirls.org">リンク</a> はリンクを生成します
  • <ul><li>第１の項目</li><li>第２の項目</li></ul> でリストを作成する、こんな感じに！
  • <div></div>はページ内のセクションを定義

いろんな要素をまとめたテンプレートの例がこれです。コピーしてblog/templates/blog/post_list.htmlに貼り付けてみましょう:

blog/templates/blog/post_list.html

<html>
    <head>
        <title>Django Girls blog</title>
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div>
            <p>published: 14.06.2014, 12:14</p>
            <h2><a href="">My first post</a></h2>
            <p>Aenean eu leo quam. こんにちは！ よろしくお願いします！ </p>
        </div>

        <div>
            <p>公開日: 2014/06/14, 12:14</p>
            <h2><a href="">2番目の投稿</a></h2>
            <p> こんにちは！ よろしくお願いします！ </p>
        </div>
    </body>
</html>

ここで3つの div セクションを作成しました。

  • 最初の div 要素には、私たちのブログのタイトルが含まれています。見出しとリンクです。
  • その他の２つのdiv要素には、このブログにポストされた記事が公開日とともに記載されています。h2はクリック可能な記事のタイトルです。２つのp(段落) は、１つが日付で、１つがブログにポストされた記事です。

その結果、次のような結果が得られます。

図 11.4

いぇーい！ ところが今のところ、私たちのテンプレートは、常に完全に同じ情報だけしか表示できません。一方で、以前は、テンプレートを使えば、異なる情報を同じ形式で表示できるようになるとお伝えしていたのですが。

本当にやりたいことは、Djangoのadminに追加された本物の記事を表示することです。そして、それが次にやるべきことなのです。

もう一つ: デプロイしましょう！

ここまでやったことを公開して、インターネットで動かしてみると楽しいですよね。PythonAnywhereでデプロイしてみましょう。

Githubに自分のコードをPushしてみよう

まずは、最後に実行したときから、どのファイルを変更したか見てみましょう(以下のコマンドを、PythonAnywhereではなく、自分のパソコンで実行してください。)。

command-line

$ git status

djangogirls ディレクトリにいることを確認して、 git に対してこのディレクトリ内の変更を全て反映させるよう指示してください:

command-line

$ git add --all .

ノート --all をつけると、 git は、ファイルを削除したかどうかも判定します (これがない初期設定の状態では、新しいファイルと変更されたファイルしか認識しません)。 . が、今いるディレクトリを表すということも思い出してくださいね(第３章にありました)。

全てのファイルをアップロードする前に、gitが何をアップロードするのかチェックしておきましょう(gitがアップロードする全ファイルは緑で表示されます):

command-line

$ git status

ほぼ完了です。どこを変更したかを履歴に保存するよう指示してみましょう。 何を変更したのか説明するコミットメッセージを残しましょう。 この時、どんな内容を好みで打ち込んでも構いませんが、何をしたかを具体的に書き込んでおけば、将来、作業内容を思い出す助けになるでしょう。

command-line

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

ノート コミットメッセージは二重クォート記号で囲みましょう。

ここまで終われば、GitHubに変更部分をアップロード(push) しましょう。

command-line

$ git push

新しいコードをPythonAnywhereにpullして、自分のウェブアプリを再度実行させる

  • PythonAnywhereのコンソールページを開き、Bash コンソールに移動してください (または新たなBash コンソールを開始してください)。それから次を実行してください。

PythonAnywhere command-line

$ cd ~/<your-pythonanywhere-domain>.pythonanywhere.com
$ git pull
[...]

<your-pythonanywhere-domain>を、山カッコ<>をつけずに、実際のPythonAnywhereのサブドメイン名に置き換える必要があります。 通常、サブドメイン名はPythonAnywhereユーザー名ですが、場合によっては多少異なることがあります（ユーザー名に大文字が含まれている場合など）。 このコマンドが機能しない場合は、ls（ファイルを一覧にする）コマンドを使用して、実際のサブドメイン名とフォルダ名を見つけ、そこに cd します。

では、自分のコードがダウンロードされたことを確認しましょう。 それをチェックしたい場合は、「Files」ページ に移動して、自分のコードをPythonAnywhereの中で見てみましょう（コンソールページのメニューボタンからPythonAnywhereの他のページにアクセスできます）。

  • 最後に、「Web」ページへ移動して、自分のアプリのReloadボタンをクリックします。

あなたのアプリが更新され、動いています！ウェブサイトを開いて、再読込してみましょう。どう変わったのか、見えるはずです。:)

results matching ""

    No results matching ""