最近、ウェブアプリケーション開発フレームワークとして世界的に注目されているMeteor。クライアント側とサーバ側の処理をJavaScriptで記述します。Meteor KitchenはJSON形式の設定ファイルを書くだけで、Meteorのソースコードを出力してくれる優れものです。

1. YAMADA Junji

2. Meteor Kitchen

3. Meteor Kitchen とは？
 Meteor のソースコードを自動生成
 JSONで設定ファイルを書く
 コマンド一発でアプリが完成
 URL: http://www.meteorkitchen.com/
 紹介ビデオ:
https://www.youtube.com/watch?v=9k5YRxjP58Y

4. コマンドはこんな感じ
 $ meteor-kitchen [設定ファイル] [出力フォルダ名]
 $ meteor-kitchen myapp.json myapp
 myapp/ フォルダにアプリが生成される
 $ cd myapp
 $ meteor

5. メリット
 時間とお金を節約
 数時間の代わりに数分でコードをビルド
 1行もコードを書かずに完成することもある
 プロトタイピングに最適
 高品質なコード
 コンポーネントと呼ばれる部品を使ってアプリを生成
 コードは読みやすく、安定して、バグがない
 一度書けば何度でも使える

6. インストール
$ curl http://www.meteorkitchen.com/install | /bin/sh

7. 設定ファイルはこんな感じ
{
"application": {
"free_zone": {
"pages": [
{ "name": "home", "title": "Home page" },
{ "name": "about", "title": "About" }
],
"components": [
{
"name": "main_menu",
"type": "menu",
"items": [
{ "title": "Home page", "route": "home" },
{ "title": "About", "route": "about" }
]
}
]
}
}
}

8. 設定ファイルのパターン 1
 pageオブジェクトのプロパティ => name, title
 “home”という名前のページから次のファイルを生成
 home.html, home.js, home_controller.js
 ファイル名とルート名はスネークケースで書く
 my_app_name
 テンプレート名はキャメルケースで書く
 MyAppName

9. 設定ファイルのパターン2
 menuオブジェクトのプロパティ => name, class,
items
 classプロパティは<ul>要素にマッピング
 menuの各itemのプロパティ => title, route

10. サブページ
{
"name": "home",
"title": "Home page",
"pages": [
{
"name": "subpage_1",
"title": "Home - Subpage 1",
"pages": [
{
"name": "subsub_1",
"title": "Home - Subpage 1 - Sub-Sub page 1",
"pages": [
]
}
]
}
]
}

11. フロントエンドフレームワーク
bootstrap
 semantic-ui ※未完成
 materialize ※未完成

12. ビジュアルテーマ
bootswatchの各テーマ
 デフォルトは bootswatch-amelia

13. コンポーネント
コンポーネント 役割
menu navbars, navs, side-menus and tab-menus
form データの追加、更新
data_view コレクションのデータを表形式で表示 (検索、並べ替え)
tree_view 階層データをツリー形式で表示
jumbotron 大きな文字のクールなテキスト(表紙用)
markdown Markdown形式のテキスト
div <div>要素
section <section>要素

14. コレクション
 applicationオブジェクトにcollections配列を追加
{
"application": {
"title": "Example application",
"collections": [
{ "name": "customers"
"fields": [
{ "name": "name", "title": "Name", "required": true },
{ "name": "phone", "title": "Phone", "default": "-" },
{ "name": "email", "title": "E-mail", "type": "email" }
]
}
],
}
}

15. データベース関連機能
Queries クエリ
Joins ジョイン

16. DataViewコンポーネント

17. Formコンポーネント read_only

18. Formコンポーネント insert

19. Formコンポーネント update

20. OAuth
"login_with_password": true,
"login_with_google": true,
"login_with_github": true,
"login_with_linkedin": true,
"login_with_facebook": true,
"login_with_twitter": true,
"login_with_meteor": true

21. ユーザーロール
 role配列にロールを追加
"roles": ["admin", "manager", "user"],
"default_role": "user",
 ページへのアクセスを制限
"pages": [
{ "name": "home_private",
"title": "Private home page" },
{
"name": "admin_panel",
"title": "Admin panel",
"roles": ["admin"]
},
{ "name": "logout", "template": "logout" }
],

22. ロールでコレクションを制限
"collections": [
{
"name": "customers",
"roles_allowed_to_read": [],
"roles_allowed_to_insert": ["admin", "manager"],
"roles_allowed_to_update": ["admin", "manager"],
"roles_allowed_to_delete": ["nobody"],
}
],

23. ドキュメントオーナー
{
"name": "customers",
"owner_field": "ownerId",
"roles_allowed_to_read": ["admin", "owner"],
"roles_allowed_to_insert": ["admin", "user"],
"roles_allowed_to_update": ["owner"],
"roles_allowed_to_delete": ["nobody"],
}

24. まとめ
 設定ファイルだけでアプリが書ける
 ウェブアプリに必要なコンポーネントがそろってい
る
 OAuthが使える
 ユーザーロールによるアクセス制限ができる
 とはいえ、覚えることはそれなりに多い (^^;)