受付アプリVue2 & Onsen UI2 テンプレート/Vue2-Onsen-UI2

ピープルソフトウェア（株）で行われた「大・Monaca祭り」プレゼン資料。

Transcript

1. Vue2 & Onsen UI2 テンプレートを 触ってみました 営業本部 新規ビジネス戦略担当 井汲
2. 井汲俊介 • ちょっと技術よりな営業 • 趣味：酒、音楽、スケートボード • 業務でプログラミング禁止 • アプリ：Objctive-C少々 • IoT興味あり
3. 神保町新事務所の受付・ショールームを IT企業っぽくしたい→しろ
4. 事務所来客用の電話をアプリ化 通知 これをなくして こうしたい
5. 構成 通知 来客予定とか １５：００～ １６：００～ １７：００～ 呼ぶ
6. Monaca + Vue.js でやってみたい ↓ Monaca公式にVue2 & OnsenUI2 テンプレートあり ＆手順サイトあり ↓ 採用
7. Vue2 & Onsen UI2 テンプレート入門 https://docs.monaca.io/ja/monaca_cli/samples/vue_onsen/ npm install –g vue-cli こんな感じでコマンドたたいていって 環境準備！！
8. 環境が出来たので動かしてみる ここも手順に沿って OK コマンドたたけば
9. WEB Webブラウザで動いた
10. スマホアプリも動いた Monaca凄い
11. では次に、テンプレ環境に手を入れます いらない いらない リストUIは丁度いい 中身にBaaSからとった来客予定 リストを出したい タップでIFTTTに イベント投げたい
12. ファイル構成はこんな感じです （見えないかもm(__)m） メニューとか消すのは簡単だったので 省略。これは消した後の図 .vue の拡張子のファイルは、単一ファイルコンポーネントという テンプレートとスタイルとスクリプトをひとまとめのコンポーネントとし てカプセル化したもの 参考： 単一ファイルコンポーネント - Vue.js メイン画面は「HomePage.vue」となります
13. メイン画面のソース「HomePage.vue」ざっくり構成 <template> <v-ons-list> <v-ons-list-item v-for="item in essentialLinks" @click="goTo(item.link)" :key="item.link"> <div class=“center”>{{ item.label }}</div> ・・・ </v-ons-list-item> </v-ons-list> </template> <script> export default { name: 'home', data () { return { essentialLinks: [ { label: ‘tomas‘, link: ‘http://ikumi.love’ }] } }, methods: { goTo (url) { window.open(url, '_blank') } ・・・ }} </script> <template> HTML的に書けるとこ。なんか赤字 のとこで値を動的に埋めてる </template> <script> JS的に書けるとこ </script> data() {} data オブジェクトの値を変更すると、 ビューが”反応”し、新しい値に一致す るように更新 methods() {} メソッドを書くところ
14. となると <template> HTML的に書けるとこ </template> <script> JS的に書けるとこ </script> data() {} data オブジェクトの値を変更すると、 ビューが”反応”し、新しい値に一致す るように更新 methods() {} メソッドを書くところ ここで！ BaaSからとった来客予定リストのデータ をセット ここで！ ・BaaSからデータを取得する処理 ・IFTTTにイベント投げる処理 ここで！ BaaSからとった来客予定リストの値を DOM に対応させる タップでIFTTTに投げるメソッドを呼ぶ
15. templete 部分 タップでIFTTTに投げるメソッドを呼ぶ BaaSからとった来客予定リストの値を DOM に対応させる
16. script => data 部分 ここはタイトルに使いました BaaSからとった来客予定リストを入れる オブジェクトを定義
17. script => method 部分 BaaS@rakuza BaaSからデータをとって、schedules オブジェクトにセット
18. script => method 部分 IFTTT IFTTTにPOST ※axiosというライブラリを使いました
19. IFTTTのレシピ ・・・・・・・・・ ・・・・・・・・・ ・・・・・・・・・
20. BaaS@rakuzaのテーブル 小林さん他３名
21. 完成 タップ 通知
22. 通知来た ・・・・・・・・・
23. まとめ よさみ • Vue.jsの触りは理解。とっつきやすい • Monaca CLIでの開発。transpileやpreview。Monacaすげー • IFTTTは神便利
24. まとめ つらみ • Vue.js深淵まだ怖い。情報まだすくないかな • ES2015(ES6) & Vue 。そしてESLint（殺されました） • Monaca taranspile 遅い？ 1分くらいかかる • IFTTTのskypeBot 遅い。1，2分遅延 →使えない。。
25. バージョンアップ構想 通知 来客予定とか IoT