BT

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

| 作者: Abel Avram フォローする 7 人のフォロワー , 翻訳者 笹井 崇司 フォローする 0 人のフォロワー 投稿日 2013年6月20日. 推定読書時間: 3 分 |

原文(投稿日: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

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

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

このスレッドのメッセージについてEmailでリプライする

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

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT