大阪市中央区 システムソフトウェア開発会社

営業時間:平日09:15〜18:15
MENU

ラズパイデスクトップでFlask入門(8)Template

著者:國松亜紗子
公開日:2020/02/12
最終更新日:2020/02/22
カテゴリー:技術情報

こんばんは。國松です。
今回はFlask入門の8回目、Templateをみていきたいと思います。

参考サイト
Welcome to Flask (英語版)
Flaskへようこそ (日本語版)

前回までにアプリケーションの認証ビューを作成しましたが、このままいずれかのURLにアクセスするとTemplateNotFoundとエラーが表示されてしまいます。これはビューrender_template()を呼び出しているけれどTemplateをまだ作成していないためです。
テンプレートファイルはflaskパッケージ内のtemplateディレクトリに保存されます。

テンプレートとは
文書などのコンピュータデータを作成する上で雛形となるデータのことです。
テンプレートからファイルを生成するライブラリをテンプレートエンジンと言います。

Flaskはjinja2というテンプレートエンジンを使用します。

アプリケーションでは、テンプレートを使用して、ユーザーのブラウザに表示されるHTMLをレンダリングします。Flaskではjinja2テンプレートはHTMLテンプレートでレンダリングされたデータを自動エスケープするように設定されています。

参考サイト
いまさらながらFlaskについてまとめる~Template~
Jinja2 Template Documentation

JinjaはほとんどPythonの様に見え動作します。
テンプレート内の静的データからJinja構文を区別するために特別な区切り文字を使用します。この区切り文字の事をDirectiveといいます。
{{…}}で囲まれた部分にPythonのコードを書きます。{{…}}の間にあるものはすべて最終ドキュメントに出力されます。
if文やfor文などの式を埋め込むには{%…%}を使用します。

The Base Layout
アプリケーションの各ページは同じ基本レイアウトを持ちます。
各テンプレートでHTML構造を全体を記述するのではなく各テンプレートは基本テンプレートを拡張して特定のセクションをオーバーライドします。

flaskr/templates/base.html
flaskrディレクトリの下にtemplateディレクトリを作成しその中にbase.htmlを記述していきます。

ここで定義されている3つのブロックは、他のテンプレートでオーバーライドされます。

{%block title%}は、ブラウザのタブとウィンドウのタイトルに表示されるタイトルを変更します。
{%block header%}はタイトルに似ていますが、ページに表示されるタイトルを変更します。
{%block content%}は、ログインフォームやブログ投稿など、各ページのコンテンツが移動する場所です。

base/htmlはtemplateディレクトリにBluePrintのtemplateはBluePrintと同じ名前(auth)のディレクトリに配置していきます。

Register
authディレクトリを作成してそこにregister.hmtlを作成していきます

{% extends ‘base.html’ %}
このテンプレートがbaseテンプレートのブロックを書き換える様にJinja2に指示します。
レンダリングされたコンテンツはすべてbaseテンプレートのブロックをオーバーライドする{%block%}タグ内に表示する必要があります。

ここで使用する便利なパターンは{%block title%}を{%block header%}内に配置する事です。
そうするとタイトルブロックが設定されその値がヘッダーブロックに出力されるためウィンドウとページが同じタイトルを2回書かずに共有します。
入力タグはここで必須属性を使用しています。これにより、これらのフィールドが入力されるまでフォームを送信しなしないようにブラウザに指示します。

Login
タイトルと送信ボタンを除いてRegister templateと同じです。

Register A User

認証テンプレートが作成されたのでユーザーを登録できるようになりました。
サーバーを起動させてhttp://127.0.0.1:5000/auth/registerにアクセスします。

フォームを記入せず登録(Register)ボタンをクリックしてブラウザにエラーメッセージが出ることを確認してください。
register.htmlテンプレートからrequired属性を削除してもう一度登録ボタンをクリックするとページがリロードされview内のflash()からのエラーが表示されます。
ユーザー名とパスワードを入力するとログインページにリダイレクトされます。

今回はここまでにしたいと思います。

 

 

 

コメントは受け付けていません。

上に戻る