kansai-frontend-ug-2020

Transcript

1. Vue ×ionic 爆速モバイルアプリ制作 Kazuki-komori ⼩森 ⼀輝
2. 本題の前に・・・ 僕について。。 名前 : ⼩森 ⼀輝 / Kazuki Komori ⼤学：同志社⼤学 ⽂化情報学部 2回 専⾨：統計学・機械学習 Webエンジニア歴：9ヶ⽉ぐらい
3. 本題の前に・・・ なぜWeb業界に？ ゲームが好きでそこで蓄積した知⾒を⾃分のサイトで共有 したい！ プラグラミングめっちゃ楽しい！！ もっといろいろ知りたい！
4. Whatʼs ionic ? WEB系をふだん触っている⼈でも、モバイルアプリを作成できる しかも、ios / Android 両⽅に対応できる、クロスプラットフォーム
5. ionic とReact Nativeの⼤まかな違い (公式HPより抜粋) https://ionicframework.com/resources/articles/ionic-react-vs-react-native ・HTML CSS で任意のデザイ ンを可能に ・カスタマイズにはSwift Kotlin の知識が必要 ・PWA のサポート ・本来の UI に似せて作成 (標準の Web 技術を使⽤) ・内部で標準の ios Android を 動作させるのでパフォーマンス が良いことも ・PWA のサポートなし
6. とりあえず Vue を使って動かしてみる $ vue create ionic-sampleApp $ npm install @ionic/vue@0.0.9 $ npm run serve
7. IonicVueRouterを追加 import Vue from ‘vue’ import Home from ‘../views/Home.vue’ //Ionic 向けの Vue Router の拡張機能の追加 import { IonicVueRouter } from “@ionic/vue”; Vue.use(IonicVueRouter) const routes = [ // 省略 ] const router = new IonicVueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router router/index.js <template> <ion-app id="app"> <ion-vue-router /> </ion-app> </template> <script> export default { name: "home", }; </script> App.vue
8. Ionic プラグインの追加 // 省略 // Ionic系のプラグインを追加 import Ionic from '@ionic/vue' import '@ionic/core/css/core.css' import '@ionic/core/css/ionic.bundle.css' Vue.use(Ionic) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app’) main.js 動いた！
9. UI コンポーネントを追加してみる https://ionicframework.com/docs/components 公式ドキュメントにUIコンポーネン トがたくさん掲載されている！
10. UI コンポーネントを追加してみる(Alert) <template> <ion-vue-page> <ion-button @click="presentAlertConfirm">アラートが出るボタン！</ion-button> <div v-if="!notice"> 通知が許可されていません！ </div> <div v-if="notice"> 通知が許可されました！ </div> </ion-vue-page> </template>
11. Alertの動作 (ios版) <script> export default { //省略 methods: { presentAlertConfirm() { return this.$ionic.alertController .create({ cssClass: ‘my-custom-class’, header: ‘通知’, subHeader: ‘通知許可してくれたら嬉しい！', message: 'このアプリに通知を許可しますか？', buttons: [ { text: 'キャンセル', role: 'cancel', handler: () => { this.notice = false }, }, { text: 'OK', handler: () => { this.notice = true }, }, ], }) .then(a => a.present()) }, } } </script>
12. Alertの動作 (android版) <script> export default { //省略 methods: { presentAlertConfirm() { return this.$ionic.alertController .create({ cssClass: ‘my-custom-class’, header: ‘通知’, subHeader: ‘通知許可してくれたら嬉しい！', message: 'このアプリに通知を許可しますか？', buttons: [ { text: 'キャンセル', role: 'cancel', handler: () => { this.notice = false }, }, { text: 'OK', handler: () => { this.notice = true }, }, ], }) .then(a => a.present()) }, } } </script>
13. せっかくなので、簡単なアプリをつくってみる 作ったもの・・・ 楽天の商品検索API を使って、商品の値段と名前を表⽰してくれるアプリ
14. せっかくなので、簡単なアプリをつくってみる 必要な部品 - ヘッダー - 検索ボックス - 検索ボタン - 検索結果を表⽰する場所 - バリデーション - ローダー
15. ヘッダー、検索ボックスを追加 <template> <ion-toolbar> <ion-toolbar> <ion-title>検索ページ</ion-title> </ion-toolbar> <ion-searchbar animated></ion-searchbar> </ion-toolbar> </template> <style scoped> ion-toolbar { --background: #BF0E00; } ion-searchbar { --background: #F3F3F3; } ion-title { --color: #ffffff; } </style>
16. ヘッダー、検索ボックスを追加 <ion-title> <ion-searchbar> <ion-toolbar> <ion-toolbar>
17. ヘッダー、検索ボックスを追加 <template> <div> <ion-searchbar animated :value="value" @change="value = $event.target.value, input()"> </ion-searchbar> </div> </template> <script> export default { data() { return { value: "" } }, methods: { input(){ this.$emit('input', this.value) } } } </script> <!-- 略-->
18. 検索結果の実装 <div v-for="(val, idx) in data" :key="idx"> <ion-card> <img :src="val.image" width="100"/> <ion-card-header> <ion-card-subtitle> <span class="cardName"> {{val.name}} </span> </ion-card-subtitle> <ion-card-title> <span class="cardPrice"> {{val.price}}円 </span> </ion-card-title> </ion-card-header> </ion-card> </div>
19. 検索結果の実装 <img> <ion-card> <ion-card-header> <ion-card-subtitle> <ion-card-title>
20. ローダーを作ってみる onload(){ return this.$ionic.loadingController .create({ cssClass: 'my-custom-class', message: '更新中...', }) .then(loading => { return loading.present() }) }, offload(){ return this.$ionic.loadingController.dismiss() }
21. ローダーを使ってみる async search(val){ //ローダーを作動 await this.onload() try {//略 //API呼び出し const {data} = await axios.get(URL) //データをよしなに操作 this.data = this.editData(data) await true //ローダーを停⽌ this.offload() } },
22. バリデーションの実装 エラーが出たら ローダーを⽌める！
23. バリデーションの実装 methods: { async search(val) { this.valid.blank = false this.valid.error = false //ローダーを作動 await this.onload() if (val === ‘‘ ) { this.valid.blank = true this.valid.error = true this.offload() .catch((e) => { this.valid.error = true this.valid.message = e }) } if (!this.valid.error) { try { const {data} = await axios.get(URL) this.data = this.editData(data) await true //ローダーを停⽌ this.offload() } catch (e) { this.offload() this.valid.error = true this.valid.message = e } } <div v-if="valid.blank" class="valid"> <!-- 検索ボックスが空欄の時--> 検索ボックスに何か⼊⼒してください。 </div> <div v-if="valid.error" class="valid"> <!-- API系で何かしらのエラーが吐かれた時--> {{valid.message}} </div> data(){ return{ data: [], valid: { error: false, blank: false, message: '' } } },
24. バリデーションの実装 <div v-if="valid.blank" class="valid"> <!-- 検索ボックスが空欄の時--> 検索ボックスに何か⼊⼒してください。 </div> <div v-if="valid.error" class="valid"> <!-- API系で何かしらのエラーが吐かれた時--> {{valid.message}} </div> 検索ボックスが空の時・・・ 「検索ボックスに何か⼊⼒してください」を表⽰ 通信系でのエラーの時・・・ そのままエラーメッセージを出す
25. 完成品 iPhone X Pixel 2 XL
26. まとめ Angular で作成もしてみたけど、やっぱり Vue が書きやすい！ v-model が使えないのは結構不便かも・・ ぜひお試しを！ Webコード 1 つで両⽅の端末を実装してくれるとやっぱり速い！
27. Vue ×ionic 爆速モバイルアプリ制作 Sample App: https://front-end-kansai-kazuyan-sample-app.netlify.app Kazuki-komori ⼩森 ⼀輝 ソースコード: https://github.com/kazuki-komori/ionic-vue-sample