iPadなんて怖くない！ Webサイトと大差ないWebアプリの調理
Posted: Updated:
政治ったーのiPad版を作って思ったこと
一番伝えたいことは、「作っててスゴク楽しい」ってことです。
政治ったーのiPad版は、大ざっぱに以下のような機能を備えています。据え置きで、横目で政治ツイートをチラ見できる、というのが企画の大半を占めています。手にとって、自分のアカウントからツイートしたりタイムラインを確認したりは、実はオマケ機能。
- 分類された各種の政治関係タイムラインを閲覧
- 据え置き型で、自動更新が可能
- Google Newsから最新の政治ニュースを自動取得
- Twitterと接続して、自分のアカウントからツイート
- 自分のタイムラインを簡易閲覧
HTML5とCSS3による実装への期待
先回紹介した政治ったーにせよ、個人的にiPad専用Webアプリとして最初にリスペクトしたyubichizにせよ、これからはHTML5とCSS3でつくるWebアプリが増えてくると言われています。Sencha(旧名Ext JS)に多額の資金が集まったという話題からも、それらの技術に対する周辺の期待が、事実として高まっていることが伝わってきます。
- HTML5は（ネイティブよりも!）高度なアプリケーションフレームワークだと主張するSenchaに巨額な投資が集まる
WebサイトからWebアプリへ
そんな中で、iPad専用という看板を掲げるという選択肢がある今の環境は、Webサイト制作からWebアプリ制作へ、制作の守備範囲を広げる絶好のチャンスです。iPhoneが発売された当時から、その辺の技術的な事情が大きく変わったわけではないかもしれませんが、iPadの解像度が広げた可能性は、Webアプリにも恩恵を与えています。
iPadの解像度が広げた可能性は、アプリの多機能化と、ターゲット層の拡大です。だからこそ、今の方がiPhoneの当時よりも、チャンスが訪れているのではないかと感じています。iPhoneという礎が、基礎技術も熟成されていますしね。
アウトプット
今回は政治ったーを通して、自分の元に巡ってきたそのチャンスで得た物をアウトプットする次第。ガチプログラマの立場ではなく、ゆるふわプログラマがWebサイト制作の延長線上として取り組んでいます。すごくテキストベースなので、お暇な方にご覧いただければ、それだけで満足です。
iPad専用Webアプリのメリット
- 動作確認すべき環境がオンリーワン
- HTML5が提供しているAPIを使用できる
- CSS3でトリックが必要だった表現を代替できる
- AppStoreへの申請がないから自由
- 最新技術つかい放題のワクワク感
全体的には、効率的であるというのが、メリットとしてまとめられるポイントです。iPadでHTML5でWebアプリを作ってみました。 (Yahoo! JAPAN Tech Blog) の「なぜWebアプリか」の項を実感しています。とにかく早い。
郷に入れば郷に従い、iPadネイティブUIにアジャスト
iPadっぽいというのは、ユーザービリティの面はもちろん、プロモーション的にも重要視しています。普段からiPadを使っていれば、何がiPadっぽいというのは何となく判断がつきますが、それでもAppleが配布している、iPadヒューマンインターフェースガイドラインは必読です。
説明に乏しく、使用者の勘と学習に、操作性のほとんどを預けているiPadやiPhoneにとって、ユーザーインターフェースの共通化は大きな課題です。それぞれのアプリが、てんでバラバラなUIを採用してしまえばユーザーは容易に混乱します。自分のユーザーを混乱させないためにも、ネイティブUIに合わせることは無視できないポイントだと思います。
ただし、例外的にすばらしく画期的で、ユーザーに新しいメリットをもたらしうるインターフェースを自作できるのであれば、Webアプリは特にオススメです。前述したiPad専用Webアプリのメリットとしてあげた、AppStoreの申請がない自由が存分に活かせるからです。あまりにも独自なUIを備えたAppは、審査でリジェクトされるリスクを抱えるため、Webアプリで実現できる内容であれば、そのほうが適切と言えるでしょう。
専用フレームワーク ( senchaもあるよ )
- jQTouch — jQuery plugin for mobile web development
- jQuery on iPhone - jQTouchを使ったWebアプリ開発
- Ext Japan - Sencha Touch登場 - モバイル用HTML5フレームワーク
今回はtouchstart~touchendに係る、tapイベントとしての操作に、jQTouchを採用しています。tapイベントとしての統合的な制御はもちろん、いろいろ設定するはずViewportなどの部分も、勝手に良い感じに補完してくれます。Metaタグに色々仕込めばそれでいいんですが、そのへんのテンプレートは又今度 or 余所の情報をご覧ください。
非常に便利なjQTouchですが、実際の所jQueryに依存したプラグインである都合、動作コストが掛かりすぎているのか、若干重たい印象。イベント管理を頑張って、更にパフォーマンスを気にして、となると原点に帰りネイティブAppを作るべくObjectiveCを学習したほうが効率的ではないかと感じました。
ちなみに、Sencha Touchも、つい先日試しましたが、とんでもなく素晴らしいです。自分でセコセコと実装していたインターフェースが簡単に実現できます。その上、スクロールや画面遷移の挙動がネイティブAppに負けないぐらいキビキビ動作しています。ただし、フロントエンドの実装として、Javascriptの記述が必須なので、完全なノンプログラマには苦しい印象。ゆるふわスクリプターの自分としては、次の機会はSencha Touchを採用してWebアプリを作ってみたいところです。
1本指ページ内スクロールの実装について
1本指ページ内スクロールは、iPad専用Webアプリケーションとして、HTML+CSSベースの実装をする場合、特に重要なポイントです。
2本指スクロールはなぁ...
いわゆるiframe要素や、overflowプロパティで出現するページ内スクロールですが、これらはiPhoneやiPadだと、1本指ではスクロールできず、2本指スクロールによって操作されます。この事実自体が、すごくマイナーと評判。
iPhoneならそれでも良かった（ページ内スクロールの出番が解像度的に僅少だった）のですが、iPadの広い解像度に対応してWebアプリを作り込むときには必要な機能です。iPadネイティブUI自体も、メインとサブを分割して個別にスクロールする動作が提供され、多くのAppで使用されています。
translate3Dによるアニメーション
そこで、一本指スクロールを実現する既製品のJavascriptを探すわけですが、王道のiScrollに加え、たまたまグーグル先生に紹介してもらったiFingerScrollも秀逸でした。なんとなく、軽量性とメソッド利用のシンプルさでは、iFingerScrollのほうが取り回し易いかも。
これらのスクリプトは共通して、-webkit-transform: translate3dのCSS3のプロパティを操作してスクロール表現を実現しています。（たぶん）たとえば、スクロール動作をする要素は、デフォルトで下記のような状態です。
.scroller {
-webkit-transform: translate3d(0px, 0px, 0px);
}
そこで下方向に777px移動すると、下記のような状態になります。表示位置的には、margin-top: -777pxと変わりません。
.scroller {
-webkit-transform: translate3d(0px, -777px, 0px);
}
表示位置的には変わりませんが、このプロパティで指定した場合は、エフェクトとしてアニメーションのようなスクロール動作を生み出します。touchstartからtouchendにかけて、移動量を計測して、この値を制御することで、スムーズなUXを提供しています。
translate3d適用時は、内包されるa要素をタップしても反応しない
そんな中、1本指スクロールを実装した部分で、なんだかa要素をtapしてもリンクが開かないような気がして検証してみたら、translate3dが適用されているときはa要素が起動しない仕様であることが判明しました。
前述のiScrollの説明でも、translate3d適用内のa要素にはonclickイベントを使うことがガイドされています。それに倣い、a要素にはtap時のイベントを仕込んで対応することにしました。
window.openの扱いもWebアプリモードだと異なる
しかし、Webアプリモードの場合、同ウインドウで外部リンク等を開いてしまうと、戻るボタンがない為、ユーザーの操作がそこで詰んでしまいます。外部リンクに該当するa要素をタップしたときには、下記を実行するようにイベントを設定しました。
// 普通はこれで新しいウインドウでurlを開く・・・
window.open('http://example.com');
はずなんですが、Webアプリモードになっているとwindowは唯一無二の存在になるらしく、window.openでも同ウインドウ内で開いてしまって失敗。結局、translate3dの適用外にa要素をコピーすることで、a要素とtranslate3dの間にクッションを設けて回避。
今回は苦しい形の回避を行いましたが、もっとスマートな回避方法があるかと思うと、次こそは外部リンクへの処理をもっとキレイに行いたいものです。
総論
とりあえず下記のエントリーを読むとシアワセになれます。Webアプリを実装する方は。
iPadでHTML5でWebアプリを作ってみました。 (Yahoo! JAPAN Tech Blog)
自分としては、このエントリーが出てきたの自体が、今回の開発の佳境に入ってしまっているタイミングだったので、ただただ共感するばかりでした。これからWebアプリを実装するぞ！という方は、先に熟読しておくと、心構えとしても技術的な話としても、役にたつと思います。
当初、Javascriptで必死こいてtap関連のイベントを制御するWebアプリと、OSが提供するUIに関わるAPIを利用できるネイティブアプリの間に埋めがたい溝を感じていました。
しかしながら今回の開発とSencha Touchの応答性を見たら、Webアプリで全然いいじゃん！と思うように。
ネイティブアプリにしか出来ないことも、もちろんあります。それでも、Webアプリで実現できる内容は、Webアプリとして実装したほうが工期は短いし、デバイス依存という壁も乗り越えられるので、Webで実装すべきという考えに至った次第。
WebサイトからWebアプリへ。検索性中心のリソースから、使い勝手中心のリソースへ、明確にシフトしています。使われるWebのために、守備範囲を広げるチャンスではないでしょうか。
