BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Fries: ネイティブのAndroidインターフェイスをHTML、JavaScript、CSSで構築する

Fries: ネイティブのAndroidインターフェイスをHTML、JavaScript、CSSで構築する

原文(投稿日:2013/06/15)へのリンク

iPhoneアプリのプロトタイピングフレームワークであるRatchetにインスパイアされて、Jaune Sarmiento氏はネイティブコードなしにHTML、JavaScript、CSSだけでAndroidアプリのUIを作成する小さなフレームワーク、Friesを作った。同様のインターフェイスを実現するものは多数あるが、FriesはネイティブのAndroid 4.0インターフェイスをかなり忠実にまねている。

Friesにはアクションバー(アップボタン、アクションボタン、アクションオーバーフロー、サブタイトルを含む)、タブ、ボタン、スピナー、リスト(2行と複数行を含む)、フォーム(フレキシブルなフォームを含む)など、多数のUIコンポーネントが定義されている。次の図はアクションとオーバーフローメニューアイテムを備えたトップのアクションバーを示している。

 

対応するHTMLコードは以下のようになる。

 

<div class="page">
  <header class="action-bar fixed-top">
    <a class="app-icon action" href="#">
      <i class="icon-fries"></i>
    </a>
    <h1 class="title">Action Buttons</h1>
    <ul class="actions pull-right">
      <li><a title="Search" class="action" href="#"><i class="icon-search"></i></a>
      <li><a title="Copy" class="action" href="#"><i class="icon-copy"></i></a>
      <li><a title="Cut" class="action" href="#"><i class="icon-scissors"></i></a>
      <li><a title="Settings" class="action" href="#"><i class="icon-settings"></i></a>
    </li></ul>
  </header>
</div>

Friesアプリは上のようなHTML「ページ」の集合であり、stack.jsを使ったリクエストによりロードされる。stack.jsはRatchetのpush.jsを改変したもので、AJAX呼び出しにより必要に応じてサーバから新しいページを取得する。Sarmiento氏によれば、stack.jsは「HTML5 History APIを使っており、Androidデバイスのバックボタン機能を壊すことはない」そうだ。

次のビデオにあるように、FriesはPhoneGapを使ってページ間の遷移を実装している。

Sarmiento氏はスクロール可能タブ、モーダル、プログレスバーなどを含む今後のロードマップを明らかにしている。

ネイティブをまねたHTML5インターフェイスを構築することには、いくつか問題がある。HTML5アプリの一番のメリットは、一度書いたら複数のモバイルOSで動かせることだ。だが、これはAndroidアプリのように見えて、iOSでは見栄えがよくないだろう。RatchetとFriesの上に抽象UIフレームワークを用意して、iOSやAndroidなど実行するOSによってデフォルトが決まれば、うまくいくかもしれない。

もう1つ大きな問題はアプリのオフライン実行についてだ。現在のところ、Friesアプリは常時インターネットアクセスもしくはデバイス自体で動作するWebサーバのいずれかを必要としている。だが、FriesがアプリケーションキャッシュやローカルストレージなどのHTML5オフライン機能を実装すれば、この問題は解決されるだろう。

この記事に星をつける

おすすめ度
スタイル

BT