このドキュメントはTutorial: Creating Your First Applicationの翻訳です
このチュートリアルでは、Controllerを使って、一つのページを表示する簡単なアプリケーションを作ります。
ここで学ぶのは:
- アプリケーションを作る
- mojitを作る
- mojitを設定する
- Controllerでアクション（メソッド）を実行する
- 自動テストを実行する
アプリケーションを作る
1. アプリケーションのためのディレクトリ（今後、アプリケーションディレクトリと呼びます）を作成し、その中へ移動します
$ mkdir mojito_apps
$ cd mojito_apps
2. Mojitoアプリケーション minty_app を作成します
$ mojito create app minty_app
3. アプリケーションディレクトリに移動します
$ cd minty_app
サンプルMojitを作る
Mojit は、Module と Widget が合わさってできた言葉です。しかし Mojit は、ModuleでもWidgetでもありません。かわりに、出力のための命令の集合体、と捉えるのが良いでしょう。Mojitsは、MVCの構造をもち、二つの部分から成り立っています。それは、定義とインスタンスの設定です。
定義には、Mojitのための Controller と Model が含まれ、View や Asset と一緒に、出力のために使われます。また、コードの単体テストも含まれています。
インスタンスの設定は、それぞれのMojitのインスタンスに対する設定を意味します。例えば、RSSフィードを表示させるための RSSMojit を作ったとしましょう。そのMojitの定義には、フィードを取得するためのコードと表示するためのビューがあり、インスタンスの設定では、取得するためのURL、いくつの項目を表示するのか、そしてサムネールを表示するのかどうか、といった設定が含まれるでしょう。
では、さっそくMojitの作成に取りかかりましょう。今回のチュートリアルでは、ModelとViewは扱わないことに注意してください。
1. minty_app のためにMojitを作りましょう
$ mojito create mojit HelloMojit
Mojitoコマンドラインツールは、HelloMojit という名前のMojitを作成します。
2. HelloMojit を使うように設定するために、application.json を以下のように置き換えます。
[
{
"settings": [ "master" ],
"appPort": 8666,
"specs": {
"hello": {
"type": "HelloMojit"
}
}
}
]
これで、HelloMojit Mojitのインスタンス hello が定義され、Controllerで機能を呼び出すことができるようになりました。
3. 実行させるために新しいルーティングルールを設定しましょう。以下のようにルーティングルールを、routes.json に加えます。
[
{
"settings": [ "master" ],
"hello index": {
"verbs": ["get"],
"path": "/",
"call": "hello.index"
}
}
]
この routes.json ファイルでは、ルーティングパス、HTTPメソッドに対応した アクション の定義を行います。アクションは、設定されたパスの呼び出しがあったとき、Mojitインスタンスのどのメソッドを呼び出すかを定義したものです。
上記の routes.json の設定では、ルートパスでHTTP GETメソッドを受信したとき、application.json で設定された、hello インスタンスから index メソッドが実行されます。
4. アプリケーションディレクトリから、アプリケーションをテストしましょう。するとあなたは、いくつかのテストが失敗したことに気づくでしょう。
$ mojito test app .
サーバを立ち上げる
1. サーバを立ち上げる
$ mojito start
2. ブラウザでhttp://localhost:8666/にアクセスする
3. 開いたWebページは、"Mojito is working."と表示されているはずです。この文字列は、minty_app/mojits/HelloMojitディレクトリにあるcontroller.server.jsによって提供されています。あなたは、次の『サンプルMojitを改造する』項目で Controller について学ぶことになります
4. サーバを停止するには、ターミナルに戻って Ctrl-C を入力します
サンプルMojitを改造する
これからControllerを修正して、Controllerが呼び出すindex関数に別の結果を表示させます。
1. mojits/HelloMojitに移動します
2. controller.server.jsを編集して、'Just a simple mojit.'を'Hello World!'に置き換えましょう。編集すると、controller.server.jsはちょうど以下のようにになるでしょう
YUI.add('HelloMojit', function(Y) {
/**
* The HelloMojit module.
*
* @module HelloMojit
*/
/**
* Constructor for the Controller class.
*
* @class Controller
* @constructor
*/
Y.mojito.controller = {
init: function(config) {
this.config = config;
},
/**
* Method corresponding to the 'index' action.
*
* @param ac {Object} The action context that
* provides access to the Mojito API.
*/
index: function(actionContext) {
actionContext.done('Hello World!');
}
};
}, '0.0.1', {requires: []});
"controller"が、ちょうどJavaScriptオブジェクトに見えるように、"action"もオブジェクトから呼び出されるメソッドとなります。メソッドの結果はactionContextオブジェクトを通してMojitoに返されます
3. testディレクトリに移動しましょう
4. controller.server-tests.jsを編集して、'Mojito is working.'という文字列を'Hello World'で置き換えましょう。controller.server-test.jsは以下のようになるはずです
YUI.add('HelloMojit-tests', function(Y) {
var suite = new YUITest.TestSuite('HelloMojit-tests'), controller = null, A = YUITest.Assert;
suite.add(new YUITest.TestCase(
{
name: 'HelloMojit user tests',
setUp: function() {
controller = Y.mojito.controller;
},
tearDown: function() {
controller = null;
},
'test mojit': function() {
var actionContext, results;
A.isNotNull(controller);
A.isFunction(controller.index);
actionContext = {
done: function(data) {
results = data;
}
};
controller.index(actionContext);
A.areSame('Hello World!', results);
}
}
)
);
Mojitoでは、controller.server-tests.js によって単体テストを行います。この場合のテストでは、assert文で与えられた文字列と index アクションによって出力される文字列が同じであることを保証します。
5. アプリケーションディレクトリからテストを実行してみましょう
$ mojito test app .
6. サーバを再起動させ、もう一度ブラウザでhttp://localhost:8666/にアクセスしてください。すると、"Hello World!"表示されるでしょう
7. おめでとうございます！さあ次は、code samplesに挑戦したり、Mojito Documentationをチェックしてみましょう！