@ionic/vue + Capacitorでクロスプラットフォームの未来を覗いてみる

先日行われたFrontend Conference Fukuoka 2018で [Web開発者のためのクロスプラットフォームアプリ開発] (https://speakerdeck.com/7nohe/webkai-fa-zhe-falsetamefalsekurosupuratutohuomuapurikai-fa) という内容で発表させてもらいました。

その中でも注目しているIonicですが、Vueでも使えるようになるということで、簡単ではありますが動かしてみます。

さらにそれをCapacitorでiOSアプリとして動かしてみようと思います。

環境

• node 8.12.0
• vue ^2.5.17 (vue cli)

プロジェクト作成

$ vue create ionic-vue-app  
$ cd ionic-vue-app
$ vue serve
# またはGUIからビルド
$ vue ui

これで、初期画面がブラウザで表示すれば準備OKです。

@ionic/vueの追加

$ npm install @ionic/vue

IonicのUIコンポーネントを使ってみます。

使えるコンポーネントは以下から参照できますが、@ionic/vueはまだalpha版ということもありうまく動かないものも多くあります。

// main.js
import Vue from 'vue'
import App from './App.vue'
import Ionic from '@ionic/vue';

Vue.use(Ionic);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

// App.vue
<template>
  <div id="app">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-button>Ionic Button</ion-button>
        </ion-col>
        <ion-col>
          <ion-toggle></ion-toggle>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {}
}
</script>

こんな感じでボタンを表示してみました。

Capacitorの導入

$ npm install @capacitor/core @capacitor/cli
$ npx cap init [appName] [appId]

Vueアプリのビルド

$ npm run build

iOSアプリの作成

$ mv dist www
$ npx cap add ios
$ npx cap sync

Capacitorはwwwを元にiOSアプリを作成します。
するとiosディレクトリができて、Xcodeを開いてビルドすることができます。

$ npx cap open ios

すると、Xcodeが立ち上がり、動かせましたが、すごい崩れました笑。

Androidも同様の流れで作成できます。

まとめ

まだまだ使える機能は少ないですが、

Ionic + Vue + Capacitor の組み合わせで、クロスプラットフォームアプリの可能性が少し見ることができました。

CapcaitorではElectronアプリも作れるので、早く正式リリースして欲しいです！