Meteor + Blaze で匿名質問サービスをつくろう：第2夜 Twitter ログインの実装 から続きです。
ルーティングを追加する
SPA には必須のルーティングを追加します。
Meteor では、iron-router を使うのが一般的ですので、特に何も考えずこれを使うことにしましょう。
他にも flow-router 等もあります。パッケージによってはどちらかの router でしか動かないものもありますので、確認しておいたほうがいいかもしれません。
迷った場合は iron-router をおすすめします。
パッケージを追加
$ meteor add iron:router
Changes to your project's package version selections:
iron:controller added, version 1.0.12
iron:core added, version 1.0.11
iron:dynamic-template added, version 1.0.12
iron:layout added, version 1.0.12
iron:location added, version 1.0.11
iron:middleware-stack added, version 1.1.0
iron:router added, version 1.1.2
iron:url added, version 1.1.0
iron:router: Routing specifically designed for Meteor
ルート定義
必要最小限のルートを決めました。
| ルート | 名前 | 機能 |
|---|---|---|
| / | Home | 新規登録、ログインはここで。ログインすると、自分宛の質問が表示される。 |
| /user/:userid | User | 特定ユーザーに投げられている質問を一覧。 |
| /user/:userid/q | Enqueue | 特定ユーザーあてに新しく質問を投げる。 |
| /q/:qid | Question | 特定の質問を表示する。回答をツイートするためのリンクもここに。 |
これに対応するルート定義ファイルを書きます。
Meteor では、client/ server/ 以外の場所にあるすべての JS ファイルは、
クライアントとサーバーのどちらでも実行できるようになります。
が、混乱を防ぐため新しく shared/ フォルダを作成し、共通の JS ファイルは
ここに置くことにしましょう。
Router.route('/', function() {
this.render('Home');
});
Router.route('/user/:userid', function() {
this.render('User');
});
Router.route('/user/:userid/q', function() {
this.render('Enqueue');
});
Router.route('/q/:qid', function() {
this.render('Question');
});
Template を作成
さきほど定義したルートに対応するテンプレートを作成します。
client/templates フォルダを作成し、ここに入れていくことにしましょう。
本来は1つのファイルの中にいくつでもテンプレートを書けるのですが、
1ファイル1テンプレートにすると、IDE との相性がよいのでおすすめです。
また、必ずしもファイル名とテンプレート名を一致させる必要はありませんが、
これも揃えてほいたほうが見やすいでしょう。
実行時には、Meteor がすべてのテンプレートを結合して1つのファイルとして出力してくれます。
<template name="Home">
</template>
UI の作り込みは第4夜にとっておいて、名前だけのテンプレートを残りの
User Enqueue Question についても作成します。
それでは第3夜はここまで。