Meteor kitchen て?楽々ウェフ?アフ?リ開発
Download as pptx, pdf5 likes899 views
最近、ウェブアプリケーション開発フレームワークとして世界的に注目されているMeteor。クライアント側とサーバ側の処理をJavaScriptで記述します。Meteor KitchenはJSON形式の設定ファイルを書くだけで、Meteorのソースコードを出力してくれる優れものです。
![コマンドはこんな感じ
? $ 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)
Meteor kitchen て?楽々ウェフ?アフ?リ開発
- 1. YAMADA Junji
- 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 ※未完成
- 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" } ] } ], } }
- 16. 顿补迟补痴颈别飞コンポーネント
- 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が使える ? ユーザーロールによるアクセス制限ができる ? とはいえ、覚えることはそれなりに多い (^^;)