, ,

Ionic + VueでiOSアプリ開発の準備手順

Capacitorを導入する

Capacitorをインストールする。

# yarnの場合
$ yarn global add ionic

# npmの場合
$ npm install ionic

Webアプリも同時に作成する場合

Webアプリを作成する。実行時、Angular、React、Vueの３パターンから選択できるが、ここではVueを選択する。

ionic start myApp tabs --capacitor

既存のWebアプリに追加する場合

既存のWebアプリにインストールする。

ionic integrations enable capacitor

動かしてみる

ローカルで起動して動作確認。

ionic serve

アプリ情報を設定する

アプリ名とアプリIDを設定する。
例：appName、 jp.example.appname

npx cap init [アプリ名] [アプリID]

以下のエラーが出た場合の処置

[error] Cannot run init for a project using a non-JSON configuration file.
        Delete capacitor.config.ts and try again.

前述でWEBアプリを作成したため、「capacitor.config.ts」ファイルがすでに作成され、上書きできないエラーが発生している。

「capacitor.config.ts」を編集していない場合、削除を行なって再度コマンドを実行する。

iOSとAndroidのプラットフォームを追加

iOSとAndroidをインストールする。

# iOS
npm install @capacitor/ios

# Android
npm install @capacitor/android

インストールしたiOSとAndroidのプラットフォームを追加する。

# iOS
npx cap add ios

# Android
npx cap add android

ionic以外のアイコンも使う設定

fontawesomeをインストールする。

npm i --save @fortawesome/fontawesome-svg-core

# vue version 2の場合
npm i --save @fortawesome/vue-fontawesome@latest-3

# vue version 3の場合
npm i --save @fortawesome/vue-fontawesome@latest-3

# 無料バージョンの場合
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

# Proバージョンの場合
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons

font awesomeを組み込む。

「src/main.ts」を開き、createAppにfont awesomeを設定する。

font awesomeをインポートし、利用するアイコンを指定する。

今回は、homeアイコンを追加することとし、「faHome」を有効とした。

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faHome } from '@fortawesome/free-solid-svg-icons'

/* add icons to the library */
library.add(faHome)

アイコンをテンプレート全体で利用するための設定を行う。

# 変更前
const app = createApp(App)
  .use(IonicVue)
  .use(router);

# 変更後
const app = createApp(App)
  .use(IonicVue)
  .use(router)
  .component('font-awesome-icon', FontAwesomeIcon);

アイコンを使ってみる。例では、tab barのアイコンを変更する。

「src/views/TabsPage.vue」を開き、次の設定をこなう。
なお、サイズ調整のため「full-width class=”fa-2x”」も追加した。

# 変更前
<ion-tab-button tab="tab1" href="/tabs/tab1">
  <ion-icon aria-hidden="true" :icon="triangle" />
  <ion-label>Tab 1</ion-label>
</ion-tab-button>

# 変更後
<ion-tab-button tab="tab4" href="/tabs/tab4">
  <font-awesome-icon :icon="['fas', 'home']" full-width class="fa-2x" />
  <ion-label>Tab 4</ion-label>
</ion-tab-button>

これにより、アイコンの利用設定と実際の利用が可能となった。