More than 3 years have passed since last update.

Ionic Vue のアプリをスマホ(Android)で実行する(Windows 10)

Last updated at 2020-12-29Posted at 2020-12-29

Ionic（知らないのでさっき調べた）、Vue.js（ﾁｮｯﾄｻﾜｯﾀｺﾄｱﾙ）、TypeScript（Java とかみたいなものでしょ？）レベルの人が Ionic Vue で作成した適当なアプリをスマホ（Android）で動かすまでの流れです。

Ionic は今までWebアプリを作成してたような感じでデスクトップアプリやモバイルアプリを作成することができるフレームワークです。例えば Vue.js でWebアプリもデスクトップアプリもモバイルアプリも作成できます。

2020年10月に Ionic Framework の Vue.js 版である Ionic Vue がリリースされました。

Ionic Vue

#1. 開発環境
Windows 10
Node.js 12.16.1
Android Studio 4.1.1
実機のスマホ：Android 10

#2. 手順

##2.1. Node.js をインストール
Node.js のサイトからダウンロードしてインストールします。

##2.2. Ionic CLI をインストール
コマンドプロンプトで以下のコマンドを実行します。

>npm install -g @ionic/cli

##2.3. Ionic Vue のプロジェクトを作成

コマンドプロンプトで Ionic Vue プロジェクトを作成したい場所へ移動して、以下のコマンドを実行します。

>ionic start <プロジェクト名> tabs --type vue --capacitor

途中、アカウントを作成するか聞かれますが、私は作成しませんでした。

##2.4. デフォルトで作成されたWebアプリの動作確認

コマンドプロンプトで、先ほど作成した Ionic Vue プロジェクトの場所まで移動して、以下のコマンドを実行します。

>ionic serve

デフォルトで http://localhost:8100 が立ち上がります。

##2.5. 簡単なアプリの作成

グラフ描画ライブラリ chart.js を使って適当なグラフを表示するだけのアプリを作成します。まず、chart.js をインストールします。
※Vue.js 版もありますが、現在 Vue 3 に対応していないようなので JavaScript 版を使います。

コマンドプロンプトで Ionic Vue プロジェクトの場所まで移動して、以下のコマンドを実行します。

>npm install chart.js

src\views\Tab1.vueの中身を書き換えます。

src\views\Tab1.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
      <canvas id="chart"></canvas>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from "@ionic/vue"
import { Chart } from "chart.js"

export default defineComponent({
  name: "Tab1",
  components: { IonHeader, IonToolbar, IonTitle, IonContent, IonPage },
  mounted() {
    new Chart("chart", {
      type: "line",
        data: {
          labels: ["子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"],
          datasets: [
            {
              label: "サンプル1",
              backgroundColor: "teal",
              borderWidth: 1,
              pointBackgroundColor: "white",
              pointBorderColor: "darkgreen",
              data: [10, 9, 8, 7, 6, 1, 1, 6, 7, 8, 9, 10]
            },
            {
              label: "サンプル2",
              backgroundColor: "mediumvioletred",
              borderWidth: 1,
              data: [1, 2, 3, 4, 5, 6, 7, 6, 8, 9, 10, 8]
            }
          ]
        }
    })
  }
})
</script>

※グラフにするデータは適当です。

このままビルドするとCould not find a declaration file for module 'chart.js'というエラーが出るので、src配下に@typesフォルダを作成し、そこにchart.d.tsファイルを作成します。内容は以下のようにします。

src@types\chart.d.ts

declare module 'chart.js'

ここまで終わったらビルドします。

>ionic build

distフォルダ配下にモジュールが作成されます。

##2.6. Android 用プロジェクトを作成

コマンドプロンプトで Ionic Vue プロジェクトの場所まで移動して、以下のコマンドを実行します。

>ionic cap add android

android フォルダが作成され、Android 用プロジェクトが作成されます。

##2.7. Android Studio をインストール

Android での実行用に、Android Studio をインストールします。

サイトから zip 版をインストールして、展開して任意のフォルダに置きます。

capacitor.config.json にそのパスを追記します。

capacitor.config.json

{
  "他の設定1": "XXX"
  "他の設定2": "XXX"
  …
  "windowsAndroidStudioPath": "<Android Studio のフォルダ>\\bin\\studio64.exe"
}

コマンドプロンプトで Ionic Vue プロジェクトの場所まで移動して、以下のコマンドを実行します。

>ionic cap sync

##2.8. Android用 SDK のインストール

コマンドプロンプトで Ionic Vue プロジェクトの場所まで移動して、以下のコマンドを実行します。

>ionic cap open android

Android Studio が開きます。
しかし、次の選択画面が出て、何も選べずにそのまま進むとエラーになります。

・「Cancel」を選択。

・「No」を選択。

SDK がインストールされていないのが原因なので、インストールします。

・画面右上の SDK Manager ボタン（立方体のようなもの）をクリック。

・「Android SDK Location:」の「Edit」リンクをクリック。

・インストールするフォルダを選択して、右下の「Next」ボタンをクリック。

・Android 11.0 のインストール完了。

今回、Android 10.0 もインストールします。

a. Android 10.0 を選択。
b. 画面右下の「Apply」をクリック。
c. 画面右下の「OK」をクリック。
d. 先ほどと同様に Android 10.0 をインストール。

次に以下を実行します。

・画面右上の Sync Project With Gradle Files ボタンをクリック。

・同期完了。

##2.9. Android での実行

https://developer.android.com/training/basics/firstapp/running-app?hl=ja#RealDevice
を参考にして、開発したアプリをスマホで実行できるようにスマホの設定を変更します。

まず、開発しているPCとスマホ（Android）を USB で接続します。

a. 「設定」アプリを開きます。
b. Android 8.0 以降のスマホでは「システム」を選択し、それ以外の場合は次の手順に進みます。
c. 「デバイス情報」を選択します。
d. 「Build number」を7回タップします。
e. 前の画面に戻り、「Developer options」をタップします。
f. 「Developer options」ウィンドウで「USB debugging」を有効にします。

スマホの設定が終わったらコマンドプロンプトで<SDK をインストールしたフォルダ>\platform-toolsに移動して、以下のコマンドを実行します。