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

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

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

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

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

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

Gaia

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

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

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

mozilla-b2g/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は、以下から入手します。

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 API Reference

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 Marketplace

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

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

yasuos/Memo