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