Help us understand the problem. What is going on with this article?

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

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

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をたくさん書く必要はなさそうです。

studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした