TIM Labs

iPhone アプリライクなルック・アンド・フィールのウェブアプリケーションを作る(iUI 編)

| コメント(0) | トラックバック(0)

問題

世の中、猫も杓子も iPhone です。 という訳で iPhone アプリを作ろうかと思ってしまうのが人情というものです。 ところが実際に iPhone アプリを作ろうとすると色々と障壁がありますし、 作成したアプリを公開しようにも色々と手間がかかります。 既にこの初期投資を終えているなら問題はないのですが、一から始めようとするとなかなか難しいものがあります。

となると iPhone 用のウェブアプリケーション を作る方が手っ取り早いということになります。 これなら既に手に馴染んだ言語でアプリケーションの作成ができますし、 Heroku 等を利用すれば公開もすぐにできます。

しかし、この方法には別の問題があります。 一体どうやってネイティブアプリケーションと同様のルック・アンド・フィールをクライアントサイドで実現すれば良いのでしょうか?

解答

色々と選択肢はありますが、まずは iUI を使ってみましょう。 これは iPhone のネイティブアプリケーションと同様のルック・アンド・フィールを実現するための CSS と JavaScript のフレームワークです。 一定の規則に従ってマークアップすれば普通のウェブアプリケーションから簡単に iPhone アプリライクなウェブアプリケーションに様変わりさせることができます。 チュートリアルを一通り読めばすぐに全体像は把握できるのですが、一応要点をまとめておくと以下の通りです:

  • <body> の子要素のうち id 属性と title 属性の両方を持つ要素がアプリケーションの画面(iUI では "screen" と呼ぶ)として使われます。
  • アプリケーションが開かれた時、 selected 属性の値が true になっている画面(要素)があればその画面が最初に表示されます(ただし別の画面の URI を直接開かれた場合はその画面が表示されます)。
  • <body> の子要素に <div class="toolbar"> があると、それが画面上端で常に表示され続けるヘッダー的なものになります。
    • 画面の title や以前の画面への「戻る」ボタンは適宜表示・更新されます。
    • このヘッダーは全画面共通ですが、画面の要素の直下に <div class="toolbar"> 等を記述すれば特定の画面用にヘッダーをカスタマイズすることもできます。
  • JavaScript からプログラム的に何かをさせたい場合は API リファレンスを参照すると良いです。

また、若干ハマりそうな点としては以下のものが挙げられます:

  • CSS での設定がイケてないのか、画面の title に日本語を含めると iPhone で表示した際にベースラインが下の方にズレて表示されるため悲しいことになります。以下のような定義を追加しておくと悲しみが薄まります:

    .toolbar
    {
      line-height: 22px;
    }
    
  • 画面の id_? は含められません? はともかく _ は結構ハマります。 iUI のコードを確認しないと分からないですし。

これを応用すればハートオブクラウン用のサプライ選択ツール (*)を初め、 iPhone アプリライクなルック・アンド・フィールのウェブアプリケーションを量産し放題です。やりましたね。

(*) ... これ自体はアイデアを思いついてから iUI について調べつつ2時間くらいで作った代物なので、 iUI の使い方の例としてはかなり歪なことをしているので参考にしない方が良いです。

補足

  • iUI は簡素にまとまっていてとっつき易くできています。単純なアプリケーションであれば iUI で十分事足ります。その一方で少しでも凝ったことを始めようとすると途端にアレやコレやと必要な機能が足りないことに気付きます。これはそういう設計思想なので仕方がありませんが、とはいえ、ある程度以上の規模のアプリケーションを作ろうとすると iUI では力不足であることは否めません。その際は他のフレームワークを利用することを検討しましょう。
  • という訳で次回は jQuery Mobile 編です。

トラックバック(0)

トラックバックURL: http://labs.timedia.co.jp/mt/mt-tb.cgi/299

コメントする

このブログ記事について

このページは、kanaが2012年6月16日 00:00に書いたブログ記事です。

ひとつ前のブログ記事は「Apache JMeterでASP.NETアプリをテストする、またはレスポンスの値をPOST/GET値に含める方法」です。

次のブログ記事は「Gitで特定のコミットを指定する108の方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。