Androidアプリ、iOSアプリ、Webアプリのクロス開発にIonicを使っていたりします。Ionicの最新版ではAngularやReact, Vueなどベースとなる様々なフレームワークを選択できるようになっています。QOXではIonic2から長い間ベースとなっていたAngularを主に使用しています。
Ionic1の頃はWeb開発技術を用いたモバイルアプリのクロス開発ツールでしたが、Ionic2以降はモバイルアプリに留まらずWebアプリの開発にも使えるようになっています。
Ionicを使ってモバイルアプリの開発も行う場合は、先にAndroidアプリの開発環境構築とiOSアプリの開発環境構築を整えておいた方がうまく動かない時などに原因の切り分けが行いやすいのでおすすめです。また、Ionic / AngularではNode.js、Angularを使うので Angular / Node.jsの開発環境構築も行っておきます。
Android, iOS, Node.jsの開発環境が整っていれば、あとはIonic CLIのインストールを行うだけです。
公式ページに書かれている通り
npm install -g @ionic/cli
を実行します。
インストールが完了するとionicコマンドが利用できるようになります。
それでは新しいプロジェクトを作成して、Webアプリ、Androidアプリ、iOSアプリとして動作することを確認しましょう。
ionic startコマンドで新しいプロジェクトを生成します。
ionic start hello-ionic tabs
Pick a framework!とAngular, React, Vueのどれを使用するか聞かれるのでAngularを選択してエンターキーを押します。
Pick a framework! 😁
Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
–type option.
? Framework:
❯ Angular | https://angular.io
React | https://reactjs.org
Vue | https://vuejs.org
プロジェクトが生成されるとJoin the Ionic Community!というメッセージが表示されます。
Ionicアカウントの登録をしておくて新しいバージョンのお知らせや、クラウドサービス（有料のものもあり）が使えたりします。アカウント登録をしなくともアプリの開発は行えるのでお好みで。
アカウントの質問に答えたあとは、だだーっと生成されたファイルがリストアップされた後に
Your Ionic app is ready! Follow these next steps:
というメッセージが表示されていれば大丈夫です。メッセージに従って生成されたディレクト hello-ionicに移動して、ionic serveを実行していましょう。
cd hello-ionic
ionic serve
しばらくするとブラウザが起動して Tab 1 Pageと書かれたページが表示されます。
Hello Worldの記載がないですが、いい感じですね。
Webアプリとしてバッチリ動きました。
次にAndroidアプリとして動かしてみましょう。
ionic serveしているターミナルでCtrl + Cを押して処理を中断させます。
そしてプロジェクトにAndroidサポートを追加します。次のコマンドを実行します。
ionic capacitor add android
Android用のファイルが生成されます。
次のコマンドでAndroidアプリを実行します。
ionic capacitor run android
コマンドを実行すると、どのエミュレータで動かすか聞かれるので、好みのエミュレータを選択するとエミュレータが起動した後にしばらくしてアプリが起動します。
と、思ったら
[error] The operation couldn’t be completed. Unable to locate a Java Runtime.
とエラーが表示されて実行に失敗しました。
Javaの実行環境が見つからないといったエラーです。
Android StudioでJavaの実行環境は利用されているのですが、現在のAndroid StudioではJavaの実行環境をバンドルして配布するようになっていてJavaの実行環境をインストールしなくても良くなっています。
ここでAndroid StudioにバンドルされているJREを使ってみたり、Microsoftが配布しているOpenJDK 17をインストールしてみたりしたのですが、うまく動いてくれませんでした。JREではなくJDKが必要なのですが、現在のAndroid StudioにはJREだけがバンドルされていました。OpenJDK 17はバージョンアップに伴いコンパイラの挙動が変わっていてアプリのビルド時にエラーが出てしまいました。 Android StudioにバンドルされているJREはOpenJDK 11になっているので、JDKも11にしておいた方が良さそうです。 Microsoftが提供しているM1用のパッケージはOpenJDK 16からで、Azul Systems社がOpenJDK 11を提供してくれていたのでこれを使うことにします。 Azul社のダウンロードページを開いて、[ Choose Your Download ]をクリックします。JavaのバージョンやOSで絞り込めるようになっているので、Java 11, macOS, ARM 64-bit, JDKで絞り込みます。
dmgファイルをダウンロード。ダウンロードが終わったらファイルを開きます。
段ボールのアイコンの部分をダブルクリックするとインストーラが起動します。
[続ける]ボタンなど押して言ってインストールを完了させます。Dukeが何か色々と装備していますね。
インストールが完了するとjavaコマンドが利用できる状態になります。ターミナルから java –version など実行してバージョン情報が表示されることを確認しておきます。
javaコマンドが利用できることが確認できたらhello-ionicディレクトリに移動後、再度、実行を試してみます。
ionic capacitor run android
やったー！Androidエミュレータでやっと動いた！
続いてiOSアプリとして動かしてみます。
Ionic / CapacitorではiOSのパッケージ管理にCocoaPodsを利用します。まずはCocoaPodsをインストールしておきます。CocoaPodsの公式サイトにインストール方法が記載されていますが、sudoでのスーパーユーザー権限を利用します。ここではスーパーユーザー権限が不要なHomeBrewを使ってインストールを行いたいと思います。
ターミナルで以下のコマンドを実行してCocoaPodsをインストールします。
brew install cocoapods
CocoaPodsのインストール後、ionicプロジェクト内でiOSサポートを追加します。
ionic capacitor add ios
早速実行してみます。
ionic capacitor run ios
シミュレータの一覧が表示されるので、動作させたいシミュレータを選択します。しばらくするとシミュレータでアプリが起動します。
ノントラブルで動きました！やったね！
