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

重要な補足：この記事は2019年6月〜7月に書かれた記事ですが、2019年8月頃には再現性がなくなっているらしいことが判明しています。
これは依存ライブラリに関係するもので、 `@ionic/vue@next` (beta 0.0.9) をインストールすることでいくつかの問題が解決します。
（が、依然としてIonIconsが正しく動作しないなどのYakShavingが必要です）

Ionicチームによれば `@ionic/vue` はVue v3.x の正式リリースを待ってメジャー v1.x の作成を開始するとのことですので、待てる人はそれを待ったほうが良いでしょう。

YakをShavingしてでも挑戦したい方にはこちらをどうぞ。

"今” IonicVueでTodoアプリを作ってみる/ "Now" create Todo app using Ionic Vue - Speaker Deck
https://speakerdeck.com/fruitriin/now-create-todo-app-using-ionic-vue

----
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122390/bc5f33fe-94f5-3865-c21b-2d591f0e8872.png)

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

### CocoaPods関連でエラーがでて起動しないとき
iOSライブラリ管理ツール「CocoaPods」の使用方法 - Qiita https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1
この記事を参考にCocoaPodsをインストール/アップデートしてください。

# 起動しました！
わーい
![スクリーンショット 2019-06-14 21.46.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122390/32722075-5d2e-3d77-e41b-a5d935ff282b.png)

Let's Ionic/Vue!

## 以降の開発について
基本的に`npm run serve` でWeb版の画面を見て開発、
`npm run build` と `npx cap copy` した上でXCodeで再ビルドしてください。

### ステータスバーが貫通する問題について
![スクリーンショット 2019-06-14 21.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122390/ebcc7ab9-f598-1b69-390a-aa06ede05893.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をたくさん書く必要はなさそうです。