続・Firefox OSアプリ開発マニュアル

第2回 Firefox OSアプリ開発で活用したいライブラリ

この記事を読むのに必要な時間:およそ 2 分

初回は,ツール群の使い方にとどまりました。今回は,もう少し踏み込んでいきます。

Firefox OSのアプリを開発するのに,世の中にごまんとあるライブラリを活用しない手はありません。先人が多くの成果を公開しており,大袈裟な話ではなく,選び方次第で開発効率が変わります。数多くあるので,どれを使うか頭を悩ませます。筆者は,以下のライブラリを活用しているので,今回は,その概要と簡単なコードをご紹介していきます。

  • Gaia(UIパーツ)
  • Backbone.js(MVCライブラリ)
  • I10n.js(多言語化ライブラリ)
  • localforage.js(ローカルストレージライブラリ)

本連載は,技術を取得していただくことを主眼に置いていますが,多くの仕組みに触れることで,さまざまな考え方や切り口を学ぶことができます。技術は,時代に合わせて変化していくものですが,考え方や切り口は,普遍的な部分があります。連載を読み進めて,こうした部分も何か感じとっていただければと考えています。

それでは,各ライブラリの概要と,簡単なサンプルコードをご紹介していきます。

Gaia

Firefox OSは,iOSのような厳しい縛りはありません。

たとえば,ユーザインターフェースのライブラリは,好みや慣れたモノが使えます。今回は,Firefox OSらしいユーザインターフェースを持つアプリを開発することが目的なので,Mozillaが開発している「Gaia」を使います。

ライブラリは,Githubで公開されているので,そこから入手します。

Firefox OSアプリの特徴でもある,アプリ上部のヘッダをGaiaで実装するには,以下のようなHTMLになります。

<section id="view-list" role="region" class="current" data-position="current">

    <header id="view-list-header">
        <menu type="toolbar">
        <a href="#"><span id="view-list-header-add" class="icon icon-add">add</span></a>
        </menu>
        <h1 data-l10n-id="view-list-header"></h1>
    </header>

</section>

Backbone.js

Gaiaは,Firefox OSらしいアプリを実現するスタイル集のようなものなので,これをハンドリングするために,フレームワークライブラリを使います。フレームワークライブラリを使う理由は,アプリ開発にMVCモデルを取り入れて,アプリの見通しを良くし,管理し易くするためです。

今回は,Backbone.jsをご紹介しますが,Knockout.jsやAngular.jsなどの他にもフレームワークライブラリは多く存在します。

Backbone.jsは,以下から入手します。

ボタンがタップされた時のイベントをハンドリングするJavaScriptのコードは,以下のようになります。

var ViewList = Backbone.View.extend({

    el : "#view-list",

    events : {
        "click #view-list-header-add" : "add_clicked",
    },
    
    add_clicked : function() {
        viewEdit.setTitle( "新しいメモ", -1 );
        showViewEdit();
        
        $("#view-edit-content").focus();
    },
});

I10n.js

I10n.jsは,アプリを多言語化するために使います。

われわれが開発するアプリなので,日本語に対応するのは当然として,最低限でも英語に,できれば,Firefox OSが多く使われているスペイン語に対応することで,アプリを使ってくれるユーザーが格段に増えるはずです。

I10n.jsは,Gaiaに含まれており,以下の場所にあります。

shared/js

I10n.jsを使った実装は,以下のようになります。

data-l10n-idに指定したIDと一致するリソースをファイルから読み込みます。このリソースがファイルは,言語ごとに用意します。

HTML:
<button id="view-edit-header-delete" data-l10n-id="view-edit-header-delete"></button>

言語リソース:
view-edit-header-title = Edit memo
view-edit-header-delete = Delete
view-edit-content = Enter notes here

localForage.js

アプリで作成したデータを保存するために,ローカルストレージをシンプルなコードで扱える「localForage.js」を使います。localForage.jsは,Mozillaが開発しているので,Firefox OSでも問題なく動作します。

localForage.jsは,以下の場所から入手します。

localForage.jsを使って,ローカルストレージからデータを読み込むJavaScriptのコードは,以下のようになります。

loadAll : function() {
    localforage.getItem( "memo",
        function( result ) {
            var obj = JSON.parse( result );
                    
            for( var i=0; i<obj.length; i++ ) {
                console.log( obj[i].memo );
            }
        });
}

メモアプリのソースコード

基本的には,これらのライブラリを活用して,アプリケーションを開発していきます。

サンプルアプリとして,Firefox Marketplaceに公開している拙作「メモ」を例にして,これを実現するための実装方法をご紹介していきます。

「メモ」は,シンプルなアプリですが,スタンダードアロンで動作し,ネットワークにもアクセスしません。これからFirefox OSのアプリやHTML5のアプリの開発に取り組む方にとっては,とっかかりが掴みやすいアプリになっていると考えています。

また,アプリのソースコードは,GitHubに公開しています。必要な方は,以下からダウンロードしてください。

著者プロフィール

傍島康雄(そばじまやすお)

5月30日生まれ。

モバイルデバイスが大好物。それで動くアプリの開発に喜びを感じている。スマートフォン前夜のWindows Mobile,PalmOSのアプリに情熱を傾けていたが,最近は停滞気味でコードを書くよりも文章を書く機会が多くなっており,文章を書くのも,プログラミングと同じくらい奥深い作業だと感じている。

ブログ:http://yasuos.com/blog/

コメント

コメントの記入