Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

意識低くMeteor紹介

5,074 views

Published on

Meteor prototyping presentation

Published in: Software
  • Login to see the comments

意識低くMeteor紹介

  1. 1. Meteorの紹介 @hashedrock
  2. 2. Webアプリ作れますか
  3. 3. Webアプリ作れますか 泥酔状態で
  4. 4. 「理想のインターフェースは、 泥酔状態でも使える」 - 増井俊之
  5. 5. • 飲みながら何か思いつく • Mac取り出してコーディング始める • 動かない • お会計です エンジニア飲み会
  6. 6. 酔っ払って
 コード書くことを想像する
  7. 7. • ログイン • ルーティング • サーバサイド設計(REST, ORM,…) • WebSocket いろいろ考えることがある…
  8. 8. ちょっと難しい
  9. 9. 難しいところは
 省略したい
  10. 10. Meteor
  11. 11. Vue.js 作者
  12. 12. Meteorは酔ってても
 組めるくらい
 コードが少ない
  13. 13. ざっくり概要
  14. 14. データモデル ビューモデル ビュー イベント 反映 反映 登場人物少ない
  15. 15. テンプレート {{#each items}}
 <p>{{_id}} {{name}}</p>
 {{/each}} だいたいMustache(Handlebars) #ifと#eachで大抵なんとかなる
  16. 16. 一方向バインディング Template.main.helpers({
 items: callback
 }) itemsがViewに一方向バインディングされる 「ヘルパ」と呼ばれる
  17. 17. リアクティブ&リアルタイム Template.main.helpers({
 items: function(){
 return Items.find();
 }
 }) 「カーソル」 変更があれば、再計算される
  18. 18. イベント Template.main.events({
 submit .addItem : callback
 }) .addItemがSubmitされたら、 設定したCallbackが実行される
  19. 19. 酔ってても使える! ポイント1 サーバ書かなくてもいい
  20. 20. データモデル クライアント ビューとか 変更通知
  21. 21. データモデル (ソース) データモデル (コピー) サーバ クライアント 同期 ビューとか 変更通知
  22. 22. MongoDB Minimongo サーバ クライアント 同期 MongoDBとAPIを似せたブラウザ上のDB「Minimongo」 Minimongoに対してコレクション操作することで、 サーバへの通信を待たずにViewに変更を反映させることができる。 サーバ(MongoDB)への差分はあとで送ればよい
  23. 23. データモデル (ソース) データモデル (コピー) サーバ クライアント 同期 ビューとか 変更通知 忘れてよい (意識しなくていい作り)
  24. 24. 酔ってても使える! ポイント2 モックから作り込める
  25. 25. 酔っていると 抽象度の高い思考は無理
  26. 26. 現物をプレビュー しながら作業するのがよい ※Meteorは標準でLiveReload機能が有効
  27. 27. 作成の4ステップ 頭を使わず、スムーズに開発できる手順
  28. 28. 1. 見た目をまず作る 2. 変数をモックする 3. モックをDBに差し替え 4. イベントの定義
  29. 29. 見た目をまず作る <h1>TODO</h1>
 <ul>
 <li>Task 1</li>
 <li>Task 2</li>
 <li>Task 3</li>
 </ul>
 <form>
 <input name= name >
 </form>
  30. 30. <h1>TODO</h1>
 <ul>
 {{#each items}}
 <li>{{name}}</li>
 {{/each}}
 </ul>
 <form>
 <input name= name >
 </form> #ifや#eachなどを使う (1)View
  31. 31. (2)バインディング Template.main.helpers({
 items: function(){
 return [
 {name: Task 1 },
 {name: Task 2 },
 {name: Task 3 }
 ]
 }
 }) View上の「items」に 一方向バインド
  32. 32. (3)コレクションのロード Task = new Meteor.Collection( tasks );
 Template.main.helpers({
 items: function(){
 return [
 {name: Task 1 },
 {name: Task 2 },
 {name: Task 3 }
 ]
 }
 }) ※Meteorでは、クライアント、サーバ双方から 参照する変数は、varを付けずに初期化する
  33. 33. DBからfetch Task = new Meteor.Collection( tasks );
 Template.main.helpers({
 items: function(){
 return Task.find();
 }
 }) findの他にも、insert, updateなどのメソッドがある
  34. 34. 補足 リアルタイム更新の仕組み Task = new Meteor.Collection( tasks );
 Template.main.helpers({
 items: function(){
 return Task.find();
 }
 }) 「カーソル」 DBに変更があれば、itemsは再計算される Viewも更新される
  35. 35. (4)イベント Template.main.events({
 submit form : function(e){
 e.preventDefault();
 Task.insert({
 name: e.target.name.value
 })
 e.target.name.value = ;
 }
 }) 特別なことは何もなし e.targetで、form内のパラメータを取る
  36. 36. MongoDB Collection (もしくはSession) Helpers View Template イベント 反映 反映 Events 変更
  37. 37. まとめ
  38. 38. • 全てがリアルタイムに自動同期 • サーバを書く手間がない • プロトタイピングに特化したワークフロー =いろいろ考えなくて済む
  39. 39. 意識低い状態で 物が作れる
  40. 40. ・泥酔時 ・眠い時
 ・帰宅後 ・お風呂で
  41. 41. サブウェポンとして 便利
  42. 42. FAQ
  43. 43. Q 認証どうすんの?
  44. 44. A プロジェクト作成直後は、
 セキュアではないプラグインが有効。
 (autopublishとinsecure)
 
 プロトタイピング終了後それらを削除し、 コレクションごとに許可する操作を 設定していくことになる。 参考:Meteor利用時に留意すべきセキュリティリスク
  45. 45. A なお、Meteorには標準の アカウント制御プラグインがある。 OAuthもしくはパスワードによる認証を 組み込むことができ、登録ユーザは「users」コレク ション内で管理される。 詳しくはMeteor Accountsを参照
  46. 46. Fun!

×