Mojitoフレームワークを試す

Apr 03, 2012

米国のYahoo!が開発していたMojitoが、JSConf US 2012の開催にあわせてオープンソースとしてリリースされました。Mojitoは、米国のYahoo!がCocktailsと呼ばれる自社クラウドを含む開発環境の一部として開発されたNode.js用のフレームワークです。サーバーサイドとクライアントサイド (ブラウザ) で同じコードを実行でき、マルチデバイス対応のための仕組みも実装されているのが主な特徴のようです。npmからもインストールできるようになっていたので、さっそくMojitoを試してみました。

さて、今回はNode.js v0.6.14とnpmがすでにインストールされているものとして進めていきます。まずはnpmからMojitoモジュールをインストールします。モジュールには専用のmojitoコマンドが含まれるので、-g オプションをつけてグローバルにインストールします。

$ npm install mojito -g

Mojitoモジュールがインストールできたら、さっそくmojitoコマンドを利用してアプリケーションのスケルトンを生成します。今回はアプリケーションの名前を hello_world として進めることにします。

$ mojito create app hello_world
...(省略)...
creating app called 'hello_world'
(using "default" archetype)
✔ app: hello_world created!

アプリケーションを生成したら、今度はMojitを作ります。Mojitは “Module” と “Widget” を組み合わせた造語だそうで、Mojitoにおける再利用可能な構造単位です。基本的なMojitはMVCパターンと共に設定やマークアップ、JavaScriptなども含みます。アプリケーションと同様にmojitoコマンドからスケルトンを生成します。今回は HelloMojit という名前をつけることにします。

mojito create mojit HelloMojit
...(省略)...
creating mojit called 'HelloMojit'
(using "default" archetype)
✔ mojit: HelloMojit created!
✔ mojito done.

初めてのMojitoアプリケーションなので、ひとまずは生成したMojitを編集して “Hello, World.” と表示するようにしてみましょう。生成したMojitoのコントローラーにある、indexアクションの処理を以下のように編集します。

$ vim mojits/HelloMojit/controller.server.js

index: function(ac) {
    ac.done('Hello, World.');
}

Mojitの編集が完了したら、以下のようにしてMojitoアプリケーションを起動します。デフォルトではポート8666でHTTPサーバーが起動します。

$ mojito start
...(省略)...
[DEBUG] (1333456014287) Mojito HTTP Server initialized in 525ms.

✔ 	Mojito started 'hello_world' on http://localhost:8666/

起動が完了したら、http://localhost:8666/@HelloMojit/index にアクセスして “Hello, World.” と表示されれば、無事にアプリケーションが動作したことになります。

今回は問題なく動作したので、現在の日付情報を返すアクションを追加してみたいと思います。再びHelloMojitのコントローラーを開いてindexアクションの下に、dateアクションを追加します。

$ vim mojits/HelloMojit/controller.server.js

date: function(ac) {
    ac.done('現在の時刻: ' + (new Date()));
}

再びMojitoアプリケーションを起動後、今度は http://localhost:8666/@HelloMojit/date にアクセスして日付が表示されれば、アクションの追加がうまくいったことになります。

こんな感じでさっくりとアプリケーションを作るところまでやってみました。マルチデバイス対応といったMojito本来の機能をきちんと使うところまでいっていないので、引き続きYDNのドキュメントを読みながら色々試してみたいと思います。