Download to read offline
![コマンドはこんな感じ
$ meteor-kitchen [設定ファイル] [出力フォルダ名]
$ meteor-kitchen myapp.json myapp
myapp/ フォルダにアプリが生成される
$ cd myapp
$ meteor](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-4-320.jpg)
![設定ファイルはこんな感じ
{
"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" }
]
}
]
}
}
}](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-7-320.jpg)
![サブページ
{
"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": [
]
}
]
}
]
}](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-10-320.jpg)
![コレクション
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" }
]
}
],
}
}](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-14-320.jpg)
![ユーザーロール
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" }
],](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-21-320.jpg)
![ロールでコレクションを制限
"collections": [
{
"name": "customers",
"roles_allowed_to_read": [],
"roles_allowed_to_insert": ["admin", "manager"],
"roles_allowed_to_update": ["admin", "manager"],
"roles_allowed_to_delete": ["nobody"],
}
],](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-22-320.jpg)
![ドキュメントオーナー
{
"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"],
}](https://image.slidesharecdn.com/meteorkitchen-151010142827-lva1-app6892/85/Meteor-kitchen-23-320.jpg)
Uploaded byJunji Yamada
Meteor kitchen で楽々ウェブアプリ開発
最近、ウェブアプリケーション開発フレームワークとして世界的に注目されているMeteor。クライアント側とサーバ側の処理をJavaScriptで記述します。Meteor KitchenはJSON形式の設定ファイルを書くだけで、Meteorのソースコードを出力してくれる優れものです。
Meteor kitchen で楽々ウェブアプリ開発
- 1.
- 2.
- 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.
- 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": "Homepage", "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.
- 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.
- 16.
- 17.
- 18.
- 19.
- 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が使える ユーザーロールによるアクセス制限ができる とはいえ、覚えることはそれなりに多い (^^;)