アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Mojitoを触ってみる!

Mojito(モヒート)は、Javascriptで記述されたWebアプリケーション用のフレームワークです。米Yahoo!オープンソースとして公開しました(2012/4/1)。

Javascriptを使う機会が増えてきた昨今、非常に興味深いフレームワークです。MojitoはMVC構造を採用しており、コードのきり分けを明確にしています。また、1つのソースで複数のデバイスへ対応させるなど、挑戦的な試みも行っています。

今回は、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プロジェクトを作成することもできるようです。