GAEpでiPhone向けWebアプリを作る (10)各画面を書く

PG GAE iPhone

前回の続きです。

今回はビューの作成です。普段仕事で html/css を使う機会がないので、その奥深さに戦きます。

各画面を書く

続いて、各画面の html/css を書いていきます。今回の ToDo アプリでは画面がふたつ存在します。

  • ToDo 一覧を表示する画面
  • ひとつの ToDo 項目の編集画面

最終的な html は、こちら。css は todo.cssとiphone.css。

ToDo 一覧画面

この画面の見た目は、以下の通りです。

この画面の html は以下の通りです。

views.html内

    <div id="list" >
      <div class="navBar">
        <h1 ><a href="main">ToDo list</a></h1>
        <a class="barButton right" href="#save">Add</a>
      </div>
      
      <div class="userinfo">
        Welcome, <span class="user-nickname">guest</span>.&nbsp;
        (<a class="user-logout" href="/todo/main">logout</a>)
      </div>

      <ul class="todoitem-list" >
      </ul>

      <ul class="todoitem-template" >
        <li class="todoitem" >
          <span class="todoitem-delete" >Delete</span>
          <a class="todoitem-anchor" href="#save">
            <span class="todoitem-title">This is a todo item area.</span>
            <em class="todoitem-deadline">YYYY-MM-dd</em>
          </a>
          <div class="clear">
        </li>
      </ul>
    </div>

まずは、ナビゲーションバー部分です。

      <div class="navBar">
        <h1 ><a href="main">ToDo list</a></h1>
        <a class="barButton right" href="#save">Add</a>
      </div>

タイトルと右ボタンを配置しています。タイトルをクリックするとリロードします。右ボタンをクリックすると"#save"画面に遷移します。

次に、ユーザ情報の表示部です。ナビゲーションバーのすぐ下にログインユーザ名とログアウトのリンクを表示します。

      <div class="userinfo">
        Welcome, <span class="user-nickname">guest</span>.&nbsp;
        (<a class="user-logout" href="/todo/main">logout</a>)
      </div>

特に難しい部分はありません。ログアウトのアドレスは適当です。あとで jquery で正しい値を入れます。そのために span タグと a タグには jquery で処理する用のクラス名を指定しておきます。

それから、一覧表示部分です。

      <ul class="todoitem-list" >
      </ul>

      <ul class="todoitem-template" >
        <li class="todoitem" >
          <span class="todoitem-delete" >Delete</span>
          <a class="todoitem-anchor" href="#save">
            <span class="todoitem-title">This is a todo item area.</span>
            <em class="todoitem-deadline">YYYY-MM-dd</em>
          </a>
          <div class="clear">
        </li>
      </ul>

この辺は少しトリッキーです。まず、実際の一覧表示部分は、"ul.todoitem-list" タグです。"ul.todoitem-template" タグには、リストアイテムのテンプレート "li.todoitem" を格納しています。
javascript で行う以下の処理を行う意図です。

  1. ToDo アイテムの個数分、ul.todoitem-template から li.todoitem タグをコピー
  2. Web API から得たデータを各 li.todoitem 内の要素にバインド
  3. ul.todoitem-list タグにその li.todoitem タグを挿入

"todoitem-template" クラスは css 内にて非表示にしてあります。

.todoitem-template {
  display: none;
}

また、"li.todoitem" のレイアウトにはけっこう苦労しています。iOS SDK でいうところの、UITableViewCell の UITableViewCellStyleSubtitle のスタイルにボタンを追加したレイアウトを再現しようとしています。

  1. [Delete] ボタンを載せて、右に寄せる (float:right;)
  2. 要素全体は a タグで1要素全体でリンクの働きをするように
  3. 1要素内でタイトルと締め切り(deadline)の2行となるように

もっときれいな css の書き方があるかもしれない。

ToDo 編集画面

この画面の見た目は、以下の通り。

こちらは特に難しい部分はありません。
この画面の html は以下の通り。

views.html内

    <div id="save"  >
      <div class="navBar" >
        <h1>Edit ToDo</h1>
        <a class="barButton back" href="#list">Cancel</a>
      </div>

      <form method="post" class="todo-ctrl" action="/todo/savereq" >
        <ul>
          <li>
            <label>Title:</label>
            <input type="text" name="todo-title" />
          </li>
          <li>
            <label>Deadline:</label>
            <input type="text" placeholder="YYYY-MM-dd" name="todo-deadline" />
          </li>
          <li>
            <label>Detail:</label>
            <textarea name="todo-detail"></textarea>
          </li>
          <li>
            <input type="hidden" name="todo-key" value="" />
            <input type="submit" value="Save" />
          </li>
        </ul>
      </form>
    </div>

「戻る」ボタンがついたナビゲーションバーと、あとは単純なフォーム送信画面です。特にこれと言って特殊なことはしていません。
強いてあげるなら、css で label タグの幅を 100 % にして、入力部分を次の行に折り返しているくらいです。


これでビューの作成は終わり。次回から javascript です。

参考

普通に iphone 向け Web アプリを作りたいならば、jqtouch を使うと楽です。オススメです。iphone っぽい見た目の部品もテーマとしてきれいにまとまっている印象です。