Mojitoを触ってみる！
Mojito（モヒート）は、Javascriptで記述されたWebアプリケーション用のフレームワークです。米Yahoo!がオープンソースとして公開しました（2012/4/1）。
Javascriptを使う機会が増えてきた昨今、非常に興味深いフレームワークです。MojitoはMVC構造を採用しており、コードのきり分けを明確にしています。また、１つのソースで複数のデバイスへ対応させるなど、挑戦的な試みも行っています。
今回は、Mojitoを使ってHello worldアプリを作成してみます。
OSはLinux系（ここではMac OS X使用）、Node.jsが入っていることを前提とします。インストールには、npmコアマンド（Node.jsのパッケージ管理ツール）を使います。
$ sudo npm install mojito -g
ちなみに、今回使用したMojitoのバージョンは0.3.26です。バージョンは以下のコマンドで確認できます。
$ mojito version
早速、Hello worldアプリを作成してみましょう。mojitoでのアプリケーション作成は次の手順となります。
① アプリの生成
② 機能単位の生成（mojit）
③ 各種機能の実装
④ デバイス毎の実行
ここではサーバ側で稼働するアプリを作成します。
① アプリの生成
適当なディレクトリを作成・移動し、以下のコマンドを実行します。Mojitoの処理は、このmojitoコマンドで実行します（詳しくは、YahooのドキュメントMojito Command Line）。
$ mojito create app sample_app
これでカレントディレクトリの中にsample_appディレクトリが作成されます。このsample_appディレクトリ内に、mojitoアプリ用のファイルやディレクトリが生成されています。ディレクトリを移動しましょう。
$ cd sample_app
ディレクトリ中を見てみると以下のようになっています。
├── application.json [アプリ全体の設定]
├── assets [アプリ共通のリソース]
│ └── favicon.ico
├── index.js [アプリをサーバ上で起動するスクリプト]
├── mojits [アプリの各種機能]
├── package.json [デプロイ時の設定]
├── routes.json [ルーティング設定]
└── server.js [Mojitoサーバ生成スクリプト]
この段階では、サーバ側で表示する内容が何もありません。各種設定ファイルは後ほど編集します。次に実行することは、実際に表示する内容を作成することです。
② 各種機能（mojit）の生成
アプリを生成した後は、必要な機能を生成していきます。Mojitoでは、機能単位としてmojitを生成します。名前が紛らわしいのですが、mojit（最後の”o”がありません）であり、mojitoではありません。mojitとは、モジュールのようなものです。公式サイトによると、mojitという単語は、モジュール（module）とウィジェット（widget）を組み合わせて作られたそうです。
実際に作ってみます。以下のコマンドでHelloWorld mojitを生成します。
$ mojito create mojit HelloWorld
mojitはmojitsディレクトリ内に生成されます。実際に、mojitsディレクトリを確認すると次のようになっています。
mojits
└── HelloWorld [mojitのルートディレクトリ]
├── assets [mojit内のリソース]
│ └── index.css
├── binders
│ └── index.js
├── controller.server.js [サーバ用のコントローラ]
├── definition.json
├── models [モデルディレクトリ]
│ └── foo.server.js
├── tests [ユニットテスト用ディレクトリ]
│ ├── binders
│ │ └── index.common-tests.js
│ ├── controller.server-tests.js
│ └── models
│ └── foo.server-tests.js
└── views [ビューディレクトリ]
└── index.mu.html
mojit（ここではHelloWorld）はその内部にMVC構造を持っています。ここからコントローラ、モデル、ビューや各種設定を編集していきます。
③ 各種機能の実装
単純にHello Worldと表示する機能を実装します。mojits/HelloWorld/controller.server.jsを以下のように編集します。実際には、index: function(ac) {…}の部分を変更しただけです（コメント部分は割愛しています）。
mojit/HelloWorld/controller.server.js
YUI.add('HelloWorld', function(Y, NAME) {
Y.mojito.controllers[NAME] = {
init: function(config) {
this.config = config;
},
index: function(ac) {
ac.done('Hello world');
}
};
}, '0.0.1', {requires: ['mojito', 'HelloWorldModelFoo']});
Javascriptファイルの編集はこれだけです。後は、アプリケーションの設定を行います。アプリのルートディレクトリにある、2つの設定ファイル（application.json、route.json）を編集します。まずは、application.jsonに、インスタンス（アプリ内で使用するmojit）を設定します。
application.json
[
{
"settings": [ "master" ],
"appPort": 8666,
"specs": {
"hello": {
"type": "HelloWorld"
}
}
},
{
"settings": [ "environment:development" ],
"staticHandling": {
"forceUpdate": true
}
}
]
appPortで使用するポート番号を設定できます。また、specsで指定したオブジェクトにインスタンス名（”hello”）とその内容（”HelloWorld” mojitを使用）を記述します。これでHelloWorld mojitを使用する準備が整いました。
次に、URLとインスタンスを紐づけるルーティングの設定を行います。route.jsonを次のように編集します。
route.json
[{
"settings": [ "master" ],
"hello-world": {
"verbs": ["get"],
"path" : "/",
"call" : "hello.index"
}
}]
hello-worldル ートを作り、対象メソッドにGET、パスに”/”を指定しています。そして”call”部分で、このルートに紐付けるmojitとメソッドを設定します。ここではhello.indexと記述することで、helloインスタンス（HelloWorld mojit）のindexメソッドを指定しています（localhost:8666/にアクセスされると実行）。
④ デバイス毎の実行
最後に、サーバを起動してブラウザからアクセスしてみます。サーバの起動は、sample_appディレクトリ直下にて次のコマンドを実行します。
$ mojito start
ブラウザから、localhost:8666にアクセスすると、Hello worldと表示されます。もし、何らかのエラーが発生したら、コンソール画面に表示されます（console.logもコンソール画面に表示されます）。
ちなみに、ここまでで作成したコードからHTML5アプリを生成することもできます（Hello worldではあまり意味ないですけど）。
$ mojito build html5app
すると、sample_app内にartifactsディレクトリが生成され、この中のhtml5appディレクトリ内にHTML5アプリが作成されます。内部を少し見ると、以下のようになります。route.jsonの中で、”/”パスに指定した画面がindex.htmlとして生成されています。
├── application.json
├── artifacts
│ └── builds
│ └── html5app
│ ├── cache.manifest
│ ├── index.html
│ ├── index.js
│ └── static
│ ├── HTMLFrameMojit
│ │ └── definition.json
│ ├── HelloWorld
│ │ ├── assets
│ │ │ └── index.css
│ │ ├── binders
│ │ │ └── index.js
│ │ ├── controller.server.js
│ │ ├── definition.json
│ │ ├── models
│ │ │ └── foo.server.js
│ │ └── views
│ │ └── index.mu.html
...
今回は、サーバ側の単純なアプリ作成の紹介でした。実際には、モデルやビューを作成して画面を作ることになり、もっと本格的なアプリを作ることも可能です。また、mojitoからxcodeプロジェクトを作成することもできるようです。
