Edited at

Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす


はじめに

もともとWebアプリのつもりだったので、ElementUI + Vue.js でやってたのだが、周りから「どうせやるならモバイルで使えるようにせえや」と言われてフロントを変更することにした。気にはなっていたのだが、ElementUI はレスポンシブ対応ではないのである。Vue は使い続けたいのでフロントだけ替えて、とりあえず昔からちょっと気になってた OnsenUI でいくことにする。


スクリーンショット

ひとまずこれまでやってきた ElementUI のフロントを OnsenUI で作り替えてみたのがこれ。裏でやってることは基本的にこれまでと同じ。

onsen-ui.gif


OnsenUIやってみて


メジャーなUIフレームワークのAPIが揃っている

Vue, Angular, React などメジャーどころはカバーされているので移行しやすい感じ。また iOS, Android 共に結構普通に見かけるUIパーツをすぐに使える。


Pageという考え方

HTMLの中で<v-ons-page>タグで囲ったところがモバイル画面上での一つのページの扱いになる。


index.html

<template id="page1">

<v-ons-page>
<!-- Page1 contents here -->
</v-ons-page>
</template>

<template id="page2">
<v-ons-page>
<!-- Page2 contents here -->
</v-ons-page>
</template>



Vueをマップ

template を指定していつものように各ページに vue をマップ出来る感じ


index.html

<script>

const page1 = {
template: '#page1',
data() {
return {
page1_data: [{msg: "A"}, {msg: "B"}]
}
},
methods: {
//your methods here
}
}

const page2 = {
template: '#page2',
data() {
return {
page2_data: 1
}
},
methods: {
//your methods here
}
}
</script>



vue-router なしで画面遷移

これまではvue-routerで画面遷移を作ってきたが、OnsenUIだとNavigationというのがあり、これで基本的な画面遷移ができる。vue-routerなしでもだいたいできる感じ。例えば page1 から page2 へはこんな感じ。ページ遷移のアニメーションもある程度モバイルっぽい動きがサポートされている


index.html


// a method in 'const page1'
methods: {
goToPage2() {
this.$emit('push-page', page2);
}
}


ページ間での情報の受け渡し

OnsenUIの Navigation だと例えば以下のように page1 から page2data() を渡すことができる。


index.html

  methods: {

dataFromPage1ToPage2() {
this.$emit('push-page', {
extends: page2,
data() {
return {
passing_value: 10
};
}
}

今のところ使った機能、目立った違いはこのくらいだ。またアプリ開発を進める上で何か見つかったら書き足すかも。


今後

今回のようなアプリのフロントとしては OnsenUI は十分な感じがする。ひとまず UI はこの路線で、もう少し OnsenUI を使い込んでみることにする。あと、OnsenUI 使うなら Monaca で開発した方がいいのだろう。Monaca も試してみる。


シリーズ