問題
世の中、猫も杓子も iPhone です。
という訳で iPhone アプリを作ろうかと思ってしまうのが人情というものです。
ところが実際に iPhone アプリを作ろうとすると色々と障壁がありますし、
作成したアプリを公開しようにも色々と手間がかかります。
既にこの初期投資を終えているなら問題はないのですが、一から始めようとするとなかなか難しいものがあります。
となると iPhone 用のウェブアプリケーション を作る方が手っ取り早いということになります。
これなら既に手に馴染んだ言語でアプリケーションの作成ができますし、 Heroku 等を利用すれば公開もすぐにできます。
しかし、この方法には別の問題があります。
一体どうやってネイティブアプリケーションと同様のルック・アンド・フィールをクライアントサイドで実現すれば良いのでしょうか?
解答
色々と選択肢はありますが、まずは iUI を使ってみましょう。
これは iPhone のネイティブアプリケーションと同様のルック・アンド・フィールを実現するための CSS と JavaScript のフレームワークです。
一定の規則に従ってマークアップすれば普通のウェブアプリケーションから簡単に iPhone アプリライクなウェブアプリケーションに様変わりさせることができます。
チュートリアルを一通り読めばすぐに全体像は把握できるのですが、一応要点をまとめておくと以下の通りです:
<body>の子要素のうちid属性とtitle属性の両方を持つ要素がアプリケーションの画面(iUI では “screen” と呼ぶ)として使われます。<div class="panel">を使うと Settings 等と同様のグレーの縦縞の背景になります。<ul>を使うと<li>の表示が Music 等と同様のリスト表示になります。<li>の中に<a>が含まれていれば右端に>記号もちゃんと表示されます。
- アプリケーションが開かれた時、
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 編です。
＃人気の記事
＃タグ
