BT

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オフライン機能を実装すれば、この問題は解決されるだろう。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。