VS CodeとFlaskで作成するToDoリストアプリ：Visual Studio Codeで始めるPythonプログラミング（2/3 ページ）

» 2018年07月31日 05時00分公開

Jinja2テンプレート

　Webページの表示に利用するJinja2テンプレートは次のようになっている（スタイルシートは使用しないバージョン）。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>To Do List sample app</title>
</head>

<body>
<h1>ToDo List</h1>
{% if not todolist %}
    <p>you can register something to do.</p>
{% else %}
    <p>your todo list:</p>
{% endif %}
<ul>
    {% for item in todolist %}
    <li {% if item.done %}style="color: lightgray"{% endif %}>
      {{ item.title }}
      <a href="/updatedone/{{ item.item_id }}">[done!]</a>
      <a href="/deleteitem/{{ item.item_id }}">[delete]</a>
    </li>
    {% endfor %}
</ul>

<form action="/additem" method="post" name="myform">
    <p>
      <input type="text" name="title">
    </p>
    <a href="javascript:document.myform.submit()" class="button">submit</a>
    <a href="/deletealldoneitems" class="button">delete all done items</a>
</form>
</body>

</html>

Webページの表示に使用するテンプレート（showtodo.htmlファイル）

　前回はJinja2が提供する構文の中で、「{{ 変数 }}」だけを使用していた。これは「{{ }}」に囲まれた変数の内容をその場所に描画するというものだ。今回はこれに加えて、以下を利用している。

{% if <条件> %}～{% else %}～{% endif %}：条件分岐
{% for <変数> in <シーケンス> %}～{% endfor %}：Pythonのシーケンス（リストなど）に含まれる項目をループする

　例えば、上のテンプレートではrender_template関数呼び出しで渡されるtodolist変数が空のリストかどうかに応じて、表示するテキストを変更している。

{% if not todolist %}
<p>you can register something to do.</p>
{% else %}
<p>your todo list:</p>
{% endif %}

todolistが空リストの場合

　Pythonでは「空リストはFalseとして扱われる」ことから、上記のように記述できる。また、todolist変数が参照するリストの各要素は次のようにして、反復処理している。

<ul>
{% for item in todolist %}
<li {% if item.done %}style="color: lightgray"{% endif %}>
    {{ item.title }}
    <a href="/updatedone/{{ item.item_id }}">[done!]</a>
    <a href="/deleteitem/{{ item.item_id }}">[delete]</a>
</li>
{% endfor %}
</ul>

リストの各要素を反復処理

　「for」に続けて記述した変数（item）を介して、上のテンプレートでは各要素のメンバの値にアクセスしている（item.title、item.item_id、item.done）。また、上のテンプレートでは、{% if %}文を使い、完了した項目については文字色をライトグレーとしている。2つの<a>要素はapp.pyファイルで定義したURL（/updatedoneと/deleteitem）へのリンクとなっている。これらをクリックすることで、それぞれupdate_todoitemdone関数とdelete_todoitem関数が呼び出される。このときには、各ToDo項目が振られているID（item_id）をURLに含めるようにしているので、「/updatedone/0」「/deleteitem/1」のようなURLへのリクエストとなるようにしている。

　ToDo項目を登録するフォームは次のようになっている。

<form action="/additem" method="post" name="myform">
<p>
<input type="text" name="title">
</p>
<a href="javascript:document.myform.submit()" class="button">submit</a>
<a href="/deletealldoneitems" class="button">delete all done items</a>
</form>

ToDo項目を登録するフォーム

　ここではサブミットにボタンを使わずに<a>要素を使っているが、それ以外はごく普通のHTMLだ。2つの<a>要素はclass属性として「button」を指定し、これを利用して同じスタイルを持った「ボタン的な表示」とする。

　この状態で、launch.jsonファイルを作成して、［Python: Flask］デバッグ構成を選択して、デバッグ実行を行うと次のような表示となる（この手順については前回を参照のこと）。

スタイルシートなしで実行したところ

　画面下部にリンクが表示されていることが分かる。次に、これをボタン風の表示にしてみよう。

CSSの作成：静的ファイルの利用

　Flaskでは、静的ファイル（スタイルシートなど）は「static」フォルダに配置しておくのが一般的だ。そこでこのフォルダを作成して、ここにsytles.cssファイルを配置しておこう。

staticフォルダにstyles.cssファイルを作成

　サンプルなので、ここではstyles.cssファイルの内容は以下だけとする。

.button {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #03A9F4;/*色*/
border: solid 1px #0f9ada;/*線色*/
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.button:active {/*押したとき*/
border: solid 1px #03A9F4;
box-shadow: none;
text-shadow: none;
}

2つの<a>要素のスタイルを指定
これはWeb上でよさげなボタン風デザインを探した結果、「CSSで作る！押したくなるボタンデザイン100（Web用）」からいただいたものだ。

　スタイルシートの準備はこれでOKだが、もう1つすることがある。showtodo.htmlテンプレートの<head>要素内に次を追加しておこう。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>To Do List sample app</title>
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='styles.css')}}" />
</head>

<body>

</body>

</html>