Fx0のTwitterアプリはWebサイトを表示するだけ。これって手抜き?

auが昨年末に発売したFirefox OS搭載ギーグ向けスマホ「Fx0 LGL25」。2015年初にはauショップや家電量販店での販売も開始され、欲しい人には行き渡る体制になってきました。ところでスマートフォンの肝はやはりアプリ。Fx0にもTwitterやFacebook、LINEなどのアプリがプリインストールされていますが、TwitterやFacebookのアプリは起動するとスマートフォンブラウザ向けのWebサイトが表示されるだけで「これがアプリ?」と思うことがあるかもしれません。

このようなアプリは単純に手を抜いているわけではなく、実は「全てをWebのオープン技術で実現する」というFirefox OSのもっとも基本的な思想が関係しています。そこで今回の連載「スマホのちょっと深いとこ」では、Firefox OSの「全てをWebで」の思想と、その思想に裏打ちされた様々なアプリの作成方法について紹介します。

【ロック画面もホーム画面も設定画面も、全てがWeb画面】

Firefox OSは簡単に言えば「Firefox Webブラウザだけが起動するOS」です。Firefox OSでは、画面に表示される全てがWebページといえます。ロック画面もホーム画面も、電話やメールの画面も、今この記事を読んでいるWebページと基本的には同じ技術で作られています(*1)。

*1: 通常のWebページにないスマートフォン固有の機能には、Webページで使用されるプログラム言語(JavaScript)を利用してアクセスできるようになっています。

firefoxos_app_001
この画面もあの画面も、Firefox OSでは全てがWebページ

【ちょっとした作業でWebサイトをアプリ化できる】

Firefox OSにおいて、Webサイトを表示するだけのアプリ作成はとても簡単です。すでにWebサイトが出来上がっているならば、アプリの設定ファイルとインストール用Webページを用意するだけでアプリ化できます。

例として筆者のブログ(http://blog.bari-ikutsu.com)をアプリ化してみました。インストールWebページにアクセスしてインストールを実行するとホーム画面にアプリアイコンが登録され、アイコンをタップすると全画面でブログの内容が表示されます。

firefoxos_app_002
インストールするとアプリのようなアイコンでWebサイト(ブログ)が表示される
firefoxos_app_003
ブログの内容をアプリとして表示する(写真=左)。設定により画面下にナビゲーションを表示できる(写真=右)

なおWebページのアプリ化に必要な設定ファイルやインストールWebページの例をGitHubで公開しています

【HTMLファイルをパッケージしたアプリも作成可能】

Firefox OSでは「Webサイトを表示するだけのアプリ」だけではなく、Webページに使われるHTMLファイルなどをひとまとめにパッケージして、アプリとして配布することができます。Webページであることに代わりありませんが、全てのファイルをパッケージして配布することでオフラインでの動作が可能となり(*3)、iOSやAndroidにより近いアプリを作りこむことが可能となります。

*3: 通常のWebサイトにもオフラインを実現する技術がありますが、必要なファイルが全て含まれるパッケージを事前にダウンロードするのが一番確実なのは直感的に理解いただけるかと思います。

今回は一例として、企業のPRアプリを想定したサンプルを作ってみました。Webページをアプリのように見せる技術(*4)を用いて、メニューリストやメニューバーの戻るボタンなど、よりアプリらしく見えるように仕立てています。

*4: 開発者向け情報:jQuery 2.1.3とjQuery Mobile 1.4.5を用いています。

firefoxos_app_004
HTMLファイルをパッケージしてアプリにすることもできる

このアプリのソースコード、およびインストールWebページのコードもGitHubで公開しています。

【良くも悪くも全てがWebなFirefox OS】

今回はFirefox OSのアプリについて紹介しました。Firefox OSでは全てのアプリはWebの技術で作成するため、Webサイト構築スキルがあれば、理論上はFirefox OSのアプリも作れることになります。一方でWeb技術には制限もあり、iOSやAndroidのネイティブアプリのような使い勝手を提供するには独特のノウハウが必要なこともまた事実です。

「Web技術でアプリ」という方向性は、開発の敷居が低い利点と、Web技術の制限による欠点の表裏一体と言えます。アプリ開発者が利点のほうをどれだけ活かせるかが、今後のFirefox OSアプリ充実の鍵となってくるでしょう。


■関連リンク
エスマックス(S-MAX)
エスマックス(S-MAX) smaxjp on Twitter
S-MAX - Facebookページ
Firefox OS(Mozilla)
Webページアプリ化のサンプルコード(GitHub)
パッケージアプリのサンプルコード(GitHub)
パッケージアプリインストールWebページのサンプルコード(GitHub)
auショップとau取扱店舗でも販売開始!auのギーグ向けFirefox OSスマホ「Fx0 LGL25」のパッケージを開封して内容を確認【レポート】 - S-MAX
auから発売されたFirefox OSスマホ「Fx0 LGL25」でスクリーンショットを撮影する方法を紹介【ハウツー】 - S-MAX
ゴールド&スケルトンボディーが魅力!au初のFirefox OSスマホ「Fx0 LGL25」の今買えるアクセサリーを探してみた【レポート】 - S-MAX
KDDI、au向け「Firefox OS」搭載機種の技術情報サイトを開設!初のFirefox OSスマホ「Fx0 LGL25」のソースコードも公開 - S-MAX
連載『吉川英一の「スマホのちょっと深いとこ」』記事一覧 - S-MAX
今日の気分はバリいくつ?