1. ホーム
  2. Blog
  3. 調整さんのChrome Webアプリを作りました

調整さんのChrome Webアプリを作りました

神保 嘉秀

神保 嘉秀

お知らせ

はじめまして。MTLメンバーの神保です。

皆さん、調整さん というサービスはご存知でしょうか？

調整さんはMTLで公開しているサービスの一つで、飲み会や打ち合わせなどの面倒な日程調整を簡単スムーズに行うことができるという優れもののツールです。

今回は、その調整さんを Chrome Web Apps 化してみたよ、というお話です。
（なお、現在 Chrome Web Store のオープン待ちということで、リリースした時点と内容が異なる可能性があります。あらかじめご了承ください。）

Chrome Web Apps とは

Chromeブラウザをお使いの方は、機能拡張をインストールすることによって、様々な便利な機能を追加することができるのはご存知かと思います。
Chrome Web Apps は、その機能拡張の親戚のようなものです。その名のとおり、いわゆるWebアプリケーションですが、機能拡張と同様、Chromeブラウザにインストールして利用することになります。Chrome Web Apps は Chrome Web Store で見つけることができます。

Chrome Web Store とは

2010年12月にアメリカで Webアプリのマーケットプレイスである Chrome Web Store が立ち上げられました。Chrome Web Store では、上記のWebアプリのほか、機能拡張やテーマが取り扱われており、有料・無料さまざまなアプリを見つけることができます。2011年3月末時点では、アメリカのみですが、2011年上旬には、日本を含む各国で公開される予定となっています。

開発者にとっての Chrome Web Store の魅力は、課金や利用ライセンスの仕組みが提供されている点です。また、国際化の仕組みもサポートされているため、世界各国に対して自分の作ったアプリを公開することができます。Chrome ブラウザ上で動かすため、ブラウザ間の互換性を気にすることなく、HTML5 や CSS3 で提供されている最新の技術を思う存分利用することができることも、開発者に取っては嬉しいポイントだと思います。

Hosted Apps か Packaged Apps か

Chrome Web Apps には「Hosted Apps」と「Packaged Apps」の2種類のタイプがあります。

Hosted Apps は、自分のWebサーバーからWebアプリをホスティングします。Gmail や NYTimes など、アプリを起動するとロケーションバーにURLが表示されるのはこのタイプです。すでに存在しているWebサービスを、いくつかの手順を踏んで Chrome Web Store にアップロードするだけで、Hosted Apps 化することができるため、Chrome Web Store に並ぶアプリの多くがこのタイプだという印象です。

一方、Packaged Apps は、Webアプリに必要なファイル（HTMLやJS、CSSファイルなど）をユーザーのローカル環境にインストールする形を取ります。こちらのメリットとしては、Google Extensions API が使えるという点です。これにより、


  • ブラウザのブックマークを操作する

  • ブラウザ内の Cookie を操作する

  • バックグラウンドで常駐してイベントを監視する

  • 右クリックで表示するコンテキストメニューにメニューを追加する

  • デスクトップに通知する


といったことが可能になるため、これまでの Webアプリとはひと味違う、デスクトップアプリにより近い機能を提供することができます。

調整さんアプリは、Packaged Apps として開発することを選択しました。バックグラウンドで常駐させて、既存の調整さんサイトとの連携を行ったり、オフラインにもある程度対応したかったというのがその理由です。

調整さんアプリの特徴

調整さんアプリの機能のうち、特徴的なものは以下のようになります。
  1. これまで作成したイベントが一覧で管理できる
  2. Twitter と連携（参加者をフォロワーから選択して、招待をDMで送信できる）
  3. 国際化に対応（日本語、英語）

1. については、既存のWebサイト（chouseisan.com）とデータ連携しているため、Webサイト側で作成したイベントをアプリ側で編集することも、逆にアプリで作成したイベントをWebサイト側で編集することも可能です。（ただし、Cookie ベースでのデータ連携となるため、異なる端末で作成すると、データ連携はできないという制約があります。）
2. については、OAuth認証を以下のライブラリを使って実装しています。
» http://oauth.googlecode.com/svn/code/javascript/
3. については、詳細を後述します。

調整さんアプリのシステム構成

では、調整さんアプリがどのような構成になっているか、いくつかご紹介します。

chouseisan-app-architecture.png

アプリ側は大きく分けて、


  • index.html

  • background.html


の2つの HTML ファイルで構成されています。
index.html が実際にユーザーが操作する画面の処理を担当し、background.html がバックグラウンドでの処理を担当します。

データストレージに関しては、ローカル側のデータストレージとして、HTML5 の Web Storage のうち、localStorage を利用しています。当初は Web SQL Database での開発を進めていたのですが、途中でW3C が仕様策定を断念したことを知り、将来性を考えて localStorage に変更をしました。また、Web SQL Database を使った場合、アプリケーションのバージョンアップ時のテーブル定義変更が難しくなるという点も、Web SQL Database を避けた理由の一つです。（一応、migration の機能も実装したのですが・・・）

また、サーバー（既存の調整さんサイト）のストレージをマスター、ローカル（アプリ）のストレージをスレーブという関係にして、既存サービスとのデータ整合性を保つとともに、参照時の応答を可能なかぎり早める工夫をしています。

テンプレートエンジンは mustache.js を採用

具体的な処理は、すべて JavaScript で実装しています。簡単なMVCモデルを採用しており、View 部分は mustache.js という、Twitter や LinkedIn でも使われているテンプレートエンジンを使っています。
例）

index.html

<div id="detail_panel"></div>

<div id="detail_panel_template" class="hide">

    <header>

        <hgroup>

            <h1>{{name}}</h1>

            <h2>{{comment}}</h2>

        </hgroup>

    </header>

</div>

controller.js

var template = $('#detail_panel_template').html();

$('#detail_panel').html(Mustache.to_html(template, {

	name: "foo",

	comment: "bar"

}));

国際化（i18n）の対応

調整さんアプリでは最初から国際化に対応するように設計しました。国際化には、chrome.i18n という API を使っていますが、HTML5 で採用された独自データ属性 を利用することで、管理がラクになるようにしています。例えば、
_locales/en/messages.json
{
    "app_name":  {
        "message": "Chouseisan"
    }
}
_locales/jp/messages.json
{
    "app_name":  {
        "message": "調整さん"
    }
}
と、ロケールファイルで定義し、 
<h1 data-i18n="app_name"></h1>
というふうに、index.html には、data-i18n という独自の属性の値に挿入したいメッセージのキーを指定しておくと、 
<h1 data-i18n="app_name">Chouseisan</h1>
<h1 data-i18n="app_name">調整さん</h1>
という感じで、ブラウザの言語環境に応じてメッセージが切り替わるようになっています。ちなみに JavaScript 側の処理は以下のようになっています。 
chouseisan.utils.i18n = (function (app, chrome, $){
    var get = (function(key){
        return chrome.i18n.getMessage(key);
    });
    $('*[data-i18n]').each(function() {
        var name = $(this).attr('data-i18n');
        var message = get(name) || name;
        switch( this.tagName.toLowerCase() ){
            case 'img' : 
                $(this).attr('alt', message);
                break;
            case 'input' :
                $(this).attr('placeholder', message);
                break;
            case 'textarea' :
                $(this).attr('placeholder', message);
                break;
            default:
                $(this).text( message );
        }
    });
    return {
        get : get
    };
})(chouseisan, chrome, jQuery);

Chrome Web Store の日本ローンチに合わせてリリースする予定ですので、それまでお楽しみにお待ちください！

最後になりますが、この度の東北地方太平洋沖地震で亡くなられた皆様に心よりお見舞い申し上げます。また、被災された皆様、そのご家族の方々に対して、深くお悔やみを申し上げます。毎日、被災地の悲痛な状況に心を痛めると同時に、自分に何ができるのか、自問自答を繰り返しながら、でも必ずやこの国を復興させてみせるという強い誓いを胸に抱き日々を過ごしています。皆さん、協力しあってこの状況を乗り越えていきましょう。

トップへ戻る