GAEpでiPhone向けWebアプリを作る (9)画面遷移の方法

PG GAE iPhone

前回の続きです。

もはや趣味では違うコードを書いているので、この記事のモチベーションを保つのが難しい。

画面遷移の方法

以前に書いた通り、このアプリのすべての主要な画面は、最初のアクセス時にすべてブラウザにロードするようにします。つまり、アプリ用の HTML ファイルは1枚のみです。

今回の ToDo アプリでは画面がふたつ存在します。

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

これら複数の画面を javascript を用いてどのように画面遷移するか考える必要があります。今回はjqtouchを参考にしてそれを実現することにしています。

各画面を表す HTML

まず、以下のような1枚の html ファイルを作成します。

  • body タグの直下に複数の div タグを作成
  • このひとつひとつの div タグが、1画面を表す
  • 各 div タグにはそれぞれ id 属性を付ける
  • この id 属性が画面の名前を表す
<html >
  <head>
    <title>ToDo list</title>
    <!-- 略 ||-->
  </head>
  <body >
    <div id="list" >
        <!-- ToDo 一覧を表示する画面の HTML をここに書く -->
    </div>
    
    <div id="save" >
        <!-- ひとつの ToDo 項目の編集画面 の HTML をここに書く -->
    </div>

    <!-- 
       : 
       他に画面が必要なら同様に並べる
       : 
    -->

  </body>
</html>
画面遷移はアンカーリンクで

アンカーリンクのクリックで別画面へ遷移するようにします。
例えば以下のような感じです。

    <div id="list" >
          :

        <a href="#save">New</a>

          :
    </div>

上記の例は、一覧画面(list)内から新規作成画面(save)へ遷移するアンカーリンクを表します。

css/javascript による画面遷移処理

まず、css を準備します。

  1. css で、body タグ直下のタグはすべて display:none; にする。
  2. body タグ直下で有効な current という css クラスを用意し、これは display:block; にする。

つまり、以下のようにします。
todo.css内

body > * {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
}

body > .current {
    display: block;
}

アプリロード時に(つまり、$(document).ready() で)、以下を行います。

  1. body タグ直下の一番上の タグに current クラスを付ける
    • つまり、一番上の div タグだけ表示する。それ以外のタグは display:none; なので不可視。
  2. href の値が '#' ではじまるアンカーリンクはすべてハイジャックし、画面遷移関数を呼ぶようにする

画面遷移関数では以下の処理を行います。

  1. body タグ直下のすべてのタグの current クラスをすべて削除
  2. 引数で渡された id のタグに対して current クラスを追加
  3. これにより画面遷移関数の引数に指定された id のタグだけが可視になる

言葉ではわかりにくいのでコードを書きます。
todo.js内

$(document).ready(function() {
  init();
});

function init() {
  var currentPage = undefined;
  // body タグ直下の一番上の タグに current クラスを付ける
  if($('body > .current').length === 0) {
    currentPage = $('body > *:first');
  } else {
    currentPage = $('body > .current:first');
    $('body > .current').removeClass('current');
  }
  $(currentPage).addClass('current');
  scrollTo(0, 0);

  // href の値が '#' ではじまるアンカーリンクはすべてハイジャックし、
  // 画面遷移関数を呼ぶようにする
  $("a[href^='#']").unbind('click');
  $("a[href^='#']").click(function(e) {
    e.preventDefault();
    transitTo($(this).attr('href'));
  });

  // :
  // :

}

// 画面遷移関数
function transitTo(viewid) {
  var next = $('body > ' + viewid + ':first');
  if(next) {
    // body タグ直下のすべてのタグの current クラスをすべて削除
    $('body > .current').removeClass('current');

    // +引数で渡された id のタグに対して current クラスを追加
    var currentPage = next;
    $(currentPage).addClass('current');
  }
}

これで画面遷移の用意ができました。

参考

今回はあえて使用していませんが、普通に iphone 向け Web アプリを作りたいならば、jqtouch を使うと楽です。オススメです。