iPadらしい動作

iPadアプリは画面が切り替わる時にスライドしてきたり、ダイアログがにゅるって出てきたりします。

これは操作に対する反応を視覚的に提供するようにという有名なヒューマンインターフェースガイドラインに沿った演出です。

もちろん、これは操作を受け付けた事を明確にするという役目と、実は、時間がかかる処理をなんとなく待ったという感じがしないようにする結構重要（？）な役目があります。

実際、このちょっとしたアニメーションを加えると、とたんにiPadらしい感じになります。

カルテメーカーにも試してみました。

こんな感じです。

こういった演出効果は、ネイティブなアプリ（iPhone SDKを使ったアプリ）では、ほんの数行を加えるだけで簡単に実現できます。

ですが、これがwebアプリとなると少々トリッキーな工夫が必要になります。

といってもアニメ効果自体は、safariのベースとなってるMacのwebkitの拡張機能で簡単に実現できます。

iPad、iPhoneのブラウザのsafariでは、標準のブラウザにはない様々な機能拡張がされていて、このアニメーション効果（transition）もそのひとつです。

Appleがフラッシュはいらいんと言ってるのは、この拡張機能を使うとフラッシュと同等かそれ以上のアニメーション効果を簡単にかつ軽量に実装できるからかもしれません。

この効果はページに表示されているほとんどのオブジェクトを移動、回転、消したり、それも３D空間上で操作できます。そう、あのカードをめくる様な動作を２、３行のコマンドで実現できます。

ところが、肝心のページが切り替わる時（ページ遷移）時のアニメとなると、これが難しい。

次のページがスライドインしてくる場合、今のページはスライドアウトできますが、この時点では次のページはまだ読み込まれていないので、隣り合って次のページがスライドインできません。

そう、一旦スライドアウトして空白のページが表示されてから、次のページがスライドインしてくるんですね。

通常のページ遷移では、これを回避することはできません。

では動画のように、次のページが隣り合わせでスライドさせるにはどうしたらいいでしょう。

あらかじめ次のページを用意しておけばいいんですが、こういったアプリの場合、操作の結果で次のページがインタラクティブに変化しますし、用意しなければいけないページは膨大ですから実際には無理です。

で、そこで活躍するのがAjaxです。

Ajaxのもっとも基本となるのは、画面遷移を伴わないでサーバーからデータを受け取れることです。
というか、これがすべてです。

たったひとつの「XMLHttpRequest」とうクラスのが追加されただけで、webアプリはまったく違った次元のものになりました。これが今のクラウド技術の中核をなすものです。

この機能を使って、次の画面に移動する時はHttpRequestで次のページのHTML文書を読み込んで、今のページに組み込みます。これをダイナミックHTMLといって、組み込むだけで画面が変化します。

こうして次のページを用意しておいてからスライドのアニメーションをおこなうと、ちゃんとページが続いてスライドしてくるというわけです。

あとは、古い画面データを捨てて、新しい画面の初期化など細々した処理を完了して遷移完了です。

さて、このAjaxによるページ移動ですが、もう一つ、嬉しい事があります。

それは、ブラウザの戻る、進むボタンを無効化できることです。

ページの遷移がないということはブラウザのURLも変化しません。
URLが変化しないので、移動ボタンも実質的に機能しません。

こうすることでブラウザの動作をサーバーで完全に掌握することができるようになります。

専門的にいうとコンテキストの維持が簡単になるんですね。

最近はこのようなサイトも多くなってきています。

ブラウザを注意深く見てると画面が変化してもまったくURLが変わらないサイトがありますが、このようなサイトがAjaxで動作しているサイトです。

カルテメーカーfor iPadも、このAjaxをバリバリに使ったものになります。