第4回　日本語対応したFirefox OSアプリ開発のポイント

l10n.jsの使い方

日本の開発者が造るアプリなので、日本語対応は当然としても、他国のユーザにもアピールできるように英語にも対応します。小さな歩みかもしれませんが、世界への第一歩となるはずです。また、多言語化を優先しなくても、l10n.jsを使えば、メッセージをソースから切り離せるので、メッセージ管理が楽になるメリットがあります。

ファイルの配置の仕方

l10n.jsを使うには、以下のようにファイルを配置します。

localesフォルダの下に、対応言語ごとにフォルダを作成して、そこにメッセージリソースファイルを配置します。

ファイルの配置

\locales
  \en-US
app.properties
\ja
app.properties
  i10n_app.ini

l10n_app.iniの記述

l10n_app.iniには、言語ごとのメッセージリソースファイルの場所を記述します。Firefox OS端末は、日本語で発売されていないので、英語を基本にして、日本語のロケールに設定されている環境では、日本語メッセージのリソースファイルを読み込む記述になっています。

l10n_app.ini：
    @import url(en-US/app.properties)

    [ja]
    @import url(ja/app.properties)

HTMLの書き方

以下のように、l10n_app.iniをリンクします。

<link rel="resource" type="application/l10n" href="locales/l10n_app.ini" />

前回紹介した、メモの削除確認ダイアログを例に、使い方をご紹介します。

HTMLコード

<form role="dialog" data-type="confirm" id="view-edit-delete-dialog">
    <section>
    <h1 data-l10n-id="view-edit-delete-dialog-title"></h1>
    <p data-l10n-id="view-edit-delete-dialog-msg"></p>
    </section>
    <menu>
        <button id="view-edit-delete-dialog-cancel" data-l10n-id="view-edit-delete-dialog-cancel"></button>
        <button id="view-edit-delete-dialog-yes" class="danger" data-l10n-id="view-edit-delete-dialog-yes"></button>
    </menu>
</form>

記述内の<h1>タグに、data-l10n-id属性があります。

ここに、メッセージリソースファイルに記述したidを指定します。ダイアログのメッセージであれば、view-edit-delete-dialog-msgを指定します。これで、システムロケールが日本語であれば、日本語リソースにあるview-edit-delete-dialog-msgの内容が表示され、システムロケールが英語であれば、英語リソースにあるview-edit-delete-dialog-msgの内容が表示されます。

メッセージリソースファイルの記述の仕方

文字コードは、UTF-16で改行コードはLFで、リソースファイルを記述します。

=（イコール）の左側は、HTMLにも記述しているdata-l10n-idです。右側は、idに対応するメッセージになります。このファイルを言語ごとに用意しておくというワケです。

en-USのapp.properties

title = Memo
view-list-header = Memo
view-edit-header-title = Edit memo
view-edit-header-delete = Delete
view-edit-content = Enter notes here
view-edit-delete-dialog-msg = Are you want delete this memo?

jaのapp.properties

title = メモ
view-list-header = メモ
view-edit-header-title = メモの編集
view-edit-header-delete = 削除
view-edit-content = ここにメモを入力します
view-edit-delete-dialog-msg = メモを削除してもよろしいですか？

localForageの使い方

次は、書き留めたメモを保存するlocalForageの使い方をご紹介します。

localForageは、いま風のキー・バリュー型データストアの実装になっています。データは、必要な時に読み・書きする実装にもできます。

今回は、読み・書きの回数を少なくしてメモリ上にデータを置くことで、レスポンスよく動作する工夫をしています。ローカルストレージへの読み・書きは、編集・削除時など、できる限り回数を少なくするような工夫もしています。

事前にlocalforage.jsをロードしておきます。

<script src="js/localforage.js"></script>

localforageがグローバル変数になっているので、localForageを使う場合は、これを使いいます。

まずは、簡単な表示保存と読み込みの例です。

保存

localforage.setItem( 'memo', 'value', callback );

読み込み

localforage.getItem( 'memo', callback );

setItemおよびgetItemともに、処理が完了したらコールバックが受けられるので、たとえば、getItemであれば、データを読み込んだ後の処理をコールバック関数に任せるという使い方ができます。

以下、拙作「メモ」の実装例をご紹介します。

以下は、メモを読み込んで、リストにメモを表示している時のコードです。

addItem : function( obj, i ) {
    var elem;
    var str = obj.get( "memo" );
    var memoItem = new MemoItem;

    if( str.length <= 0 ) {
        str = "新規メモ";
    }

    elem = "<a href='#'><p>" + str + "</p>";
    elem += "<p style='font-size:1.2rem; color:#999999'>"
         + obj.get( "updateDate" ).toLocaleDateString()
         + " "
         + obj.get( "updateDate" ).toLocaleTimeString()
         + "</p></a>";
    memoItem.$el.append( elem );
    memoItem.$el.attr( "data-id", i );
    memoItem.$el.attr( "id", "view-list-memo-item" );
    this.$( "#view-list-memo" ).append( memoItem.el );
},

updateAll : function() {
    var max = memoCollection.length;

    // 一旦クリアする
    this.$( "#view-list-memo" ).html("");
    for( var i=0 ; i < max ; i++){
        var obj = memoCollection.at( i );

        addItem( obj, i );
    }
},

loadAll : function() {
    localforage.getItem( "memo",
        function( result ) {
            var obj = JSON.parse( result );

            for( var i=0; i<obj.length; i++ ) {
                var item = new MemoItemModel();
                item.set( "memo", obj[i].memo );
                item.set( "updateDate", new Date( obj[i].updateDate ));
                memoCollection.push( item );
            }

            viewList.updateAll();
        });

},

詳しく見ていきます。

loadAllで、ローカルストレージからデータを読み込み、内容をBackbone.jsのCollectionを継承したmemoCollectionに追加しています。

メモは、それ程大きなサイズにならないだろうと考えて、memoというキーに、JSON形式で保存しています。JSONを選んだのは、デバッグをし易くするためです。

updateAllで、memoCollectionの内容を読みながら、addItemでリストの要素として追加して画面に表示しています。

また、一般的な話ですが、データを読み込みながら、画面に表示すると動作が遅いので、メモでは、ローカルストレージへの読み・書きが終わったあとに、画面に反映する実装を取っています。

今回のまとめ

今回は、l10n.jsとlocalforage.jsの使い方をご紹介しました。

l10n.jsは、多言語に対応するだけではなく、メッセージリソースを効率良く管理する手段としても活用できます。

localforage.jsは、面倒な部分はライブラリがかなり吸収してくれるので、簡単に使うことができます。メモでは、多くの件数保存されないだろうと考えて、乱暴な実装をしている部分もあります。アプリの造りで、実装方法を検討するようにして下さい。

次回は、最終回になるので、アプリを開発するうえのコツやヒントのようなものをご紹介します。