Ionic/Vue でiOSアプリケーションを作る

VueでネイティブアプリケーションといえばWeexが公式から案内されていますが、

とにかく採用事例を聞いたことがない。

そんな中、IonicがVueにも対応したということで挑戦してみました。

Ionic meetup で登壇した資料はこちらになります。

https://speakerdeck.com/fruitriin/how-about-ionic-vue-with-capatitor

この資料では実際に手元でやってみる上で不便かと思いますので、

記事としてまとめ直したいと思います。


Ionic とは?

Ionic v4 はWeb Componentの技術を使ってネイティブ風のUIを提供するUIフレームワークと

Capacitor及びCordvaというネイティブ層をブリッジするプラグインの組み合わせで作る

クロスプラットフォームなネイティブアプリケーション作成フレームワークです。

(あくまでWebViewにネイティブ風UIを表示するもの)

v3 以前はAngularのUIコンポーネントとして作成されていましたが、

v4からWeb Componentに変わったことにより、フレームワークを選ばなくなったことで、

Ionic/Vueも提供開始、VueでIonicのアプリケーションも作ることができるようになったという経緯があります。

Announcing the Ionic Vue Beta | The Ionic Blog

https://ionicframework.com/blog/announcing-the-ionic-vue-beta/

Ionic/Vueは2019/06/09現在 v0.0.1 でβ版という位置づけになります。


Ionic VueでWebアプリケーションを作る

下記の記事の手順が参考にしてWebアプリケーションを作ってください。

Ionic x Vueでモバイル向けWebアプリの爆速開発を始めよう! | DevelopersIO

https://dev.classmethod.jp/client-side/ionic-vue-getting-started/

iOSアプリを作る際の注意点として、Package Managerは yarnではなくnpm をチョイスしておくことをオススメします。(理由は後述します。)

また、補足として、Vue CLI 3で作ったプロジェクトであれば

yarn add @ionic/vue(npm install @ionic/vue) の代わりに

vue add vue-cli-plugin-ionic することで、Ionicの初期導入をすべて代わりにやってくれます。

(ion-vue-router周りは自分で行う必要があります)

また、下記のスライドが非常に参考になります。

@ionic/vue で Web アプリを作ってみる - Speaker Deck

https://speakerdeck.com/mikakane/vue-de-web-apuriwozuo-tutemiru


Ionic でiOSアプリを作る


ionic init する

ionic init してください。

ionic.config.json が作られます。

command not found: ionic と表示された場合には、 ionic CLIがグローバルインストールされていないので、

npm install -D ionic でローカルインストール、 npx ionic init で実行すればよいです。


ionic capacitor copy する

npx ionic capacitor copy してください。

(前述の ionic init をしていないとコケます。)

このとき、 yarn プロジェクトでも npm install @ionic/core とかしてくれるので、

yarnのprojectだとnode_modulesが混ざります。てことで最初からnpmプロジェクトにしておくことを推奨。

[error] Capacitor could not find the web assets directory (中略)/www と表示されてコケます。

capacitor.config.json が作成されているので、 webDir の項目を wwwからdistへ 編集します。


capacitor.config.json

{

"appId": "io.ionic.starter",
"appName": "vue-ionic-example",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "dist"
}

また、事前にnpm run buildでVueのプロジェクトを本番ビルドしてください。

ここまで済ませた上で、再度 npx ionic capacitor copy してください。


cap add ios する

npx cap add ios してください。

プロジェクトにios ディレクトリが切られて、iOS用のxcode projectが作られます。


cap open ios する

npx cap open ios してください。

Xcodeが起動します。


Xcodeでビルドする

image.png

ビルドボタンを押すとビルドされ、シミュレーターが起動します。


CocoaPods関連でエラーがでて起動しないとき

iOSライブラリ管理ツール「CocoaPods」の使用方法 - Qiita https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1

この記事を参考にCocoaPodsをインストール/アップデートしてください。


起動しました!

わーい

スクリーンショット 2019-06-14 21.46.38.png

Let's Ionic/Vue!


以降の開発について

基本的にnpm run serve でWeb版の画面を見て開発、

npm run buildnpx cap copy した上でXCodeで再ビルドしてください。


ステータスバーが貫通する問題について

スクリーンショット 2019-06-14 21.41.50.png

このままだとヘッダーをステータスバーが貫通します。

この問題については、public/index.html のviewportを下記のように書き換えてください。


public/index.html

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-ionic-example</title>
</head>
<body>
(以下省略)


余談: ネイティブAPIとUIコンポーネント

UIコンポーネントについて知りたいときはIonicのドキュメントを参照してください。

Ionic Framework - Ionic Documentation

https://ionicframework.com/docs

一方、ネイティブAPIを使いたいときはCapacitorのドキュメントを参照すべきで、場所が異なるので気をつけてください。

Capacitor - A Cross-platform App Runtime - Capacitor

https://capacitor.ionicframework.com/docs/


ページコンポーネントとion-app に関するお詫びと訂正

冒頭に紹介した自分のスライドで

「ページコンポーネントにも <ion-app>がないと表示されないっぽい?」と書いていますが

再度試したところちゃんと表示されました。

よくよくうまく行かなかったコードを見てみると、ion-tabs と ion-vue-routerを組み合わせた関係で

ion-tabの高さがちゃんと出ていないのが原因みたい。

その辺をよしなにしてあげればion-appをたくさん書く必要はなさそうです。