趣味

Ionic(Angular)を使ったiosアプリ開発 for Mac

このサイトを見れば、実際にAppStoreで公開されているようなiosアプリを作るための環境を簡単に作ることができます。

1 . Ionicの概要

そんなのいいから早く環境を作りたい!!という方は読み飛ばしていただいて大丈夫です。

Ionicは、Web技術を使ってモバイルとデスクトップアプリを作るためのフレームワークです。Angular、React、Vue.jsで利用することができます。モバイルアプリとしてカメラや、ページ遷移時のアニメーションなど多彩な機能を使うことができます。さらに詳しく知りたい方は"Ionic Framework - Framework 日本語ドキュメーション"を見てみましょう。

このページではMacでの環境構築を紹介していますが、windowsでも開発を行うことができます(※iPhoneで確認するためにはMacが必要)。

 

2 . 各種インストール手順

ここでは、環境を構築するためのツールなどのインストール方法を紹介します。

① Node.js のインストール

Ionicを使うために、JavaScriptのパッケージ管理などを行う「Node.js」をインストールします。
初めに、すでにNode.jsがインストールされているか確認します。下記のコマンドをターミナルで入力して実行してみましょう。

node -v

v10.16.0 のように、バージョン番号が表示された場合はすでにインストール済みです。その場合は次の②Ionic CLI のインストールに進んでください。

-bash: node: command not found

上記のように表示された場合はNode.jsがインストールされていないので、下記のURLからNode.jsをインストールして下さい。
"https://nodejs.org.ja/"

nodejs

特に理由がなければ最新版の方をダウンロードして大丈夫です。
インストールが完了したら、再度ターミナルを立ち上げ、node -v コマンドを再度実行してみて下さい。
バージョン番号が表示されると思います。表示されなかった場合は再起動してみると解決するかもしれません。



また、ターミナルでコマンドを実行してインストールすることもできます。
その場合はこちら"MacにNode.jsをインストール-Qiita"を参照してみて下さい。

② Ionic CLI のインストール

続いてIonicを使うためにIonicの独自コマンドを使えるようにする「Ionic CLI」をインストールします。
Ionic CLI を入れることで複雑な環境設定や開発の際に使用する便利な機能をコマンドで簡単に実行できるようになります。下記のコマンドをコピペして実行しましょう。

sudo npm install ionic -g

インストールに5分ほどかかる場合もあるため、少々待ちましょう。
完了すると、下記のようなインストールしたパケージ名とバージョン名が表示されます。

ionic@6.16.3
added 232 packages from 172 contributors in 9.472s


続いて、

ionic -v

ionic -v コマンドを実行しましょう。6.16.3 のようにバージョン情報が表示されたら成功です。

③ Xcodeのインストール

アプリとして実機(iPhone)確認するために必要なツールは 2 つあります。「Xcode」と「Android Studio」です。
iosアプリを作る場合は Xcode を使う必要があります。ここではXcodeのみ紹介します。

App store で "Xcode"と検索して下さい。

Xcode検索

こちらをインストールします。僕はインストール済みのため"開く"と表示されていますが、インストールしていない場合は"入手"と出ているはずなので、入手をクリックしXcodeをインストールします。
※インストールにはHDD(SSD)の空き容量が5GB必要。20分ほどかかります。

インストールが完了したら、ターミナルを起動し以下の3つのコマンドを 1 つずつ順番に実行して下さい。

sudo gem install cocoapods
xcode-select --install
pod repo update

1つ目のコマンドで、iosのパッケージ管理システムの「CocoaPods」をインストール、
2つ目で、コマンドラインツールの「Xcode Command Line tools」をインストール、
3つ目で、「CocoaPods」の依存関係を最新に更新しています。

④ Visual Studio Code のインストール

Visual Studio Codeは、Microsoft社が開発しているエディタであり、無料で使えます。
他にも有料のエディタがありますが、VScodeで十分です。大企業のシステム開発な度にも使われています。
下記のURLから入手できます。
"https://code.visualstudio.com/"

インストールが完了したら、拡張機能を追加してIonicの開発サポート機能を使えるようにします。

拡張機能

一番左に縦にアイコンが並んでいると思います。
上から4番目にある、正方形が集まったようなアイコンをクリックします。すると、拡張機能の検索ができるので、「Angular Language Service」と入力します。
そうすると、「Editor service for Angular templates」という説明文の書かれた拡張機能があると思うので、クリックしてインストールして下さい。それによって、各種機能(入力途中の文字列の補完機能など)が使えるようになります。

最初に入れておくべきおすすめ拡張機能10選をまとめました。参考にしてみて下さい。
これは入れとけ!!現役SEが使ってる VScode(Visual Studio Code)おすすめ拡張機能(プラグイン)10選

3 . Ionicプロジェクトの作成

必要なツールのインストールは全て終わったので、次はIonicプロジェクトの作成です。
先ほどインストールした Ionic CLI で簡単に作成できます。

① 開発用のフォルダを作る

初めに、開発するプロジェクトを管理しやすいようにフォルダを作ります。

ionicフォルダ作成

わかりやすいようにデスクトップに Ionic という名前のフォルダを作成しました。

続いて、作成したIonicフォルダでターミナルを開きます(cdコマンドで他のディレクトから来ても構いません)。

ターミナル開き方

Finderでフォルダを選択している状態で検索アイコンの横のアイコンをクリックすることで選択リストが出てきます。
"フォルダに新規ターミナル"という選択肢があるのでそちらをクリックします。するとIonicフォルダのディレクトリでターミナルが開かれるので、そこでコマンドを実行していきます。

初めに、

ionic start --type=angular

と入力し実行します。これによって、JavaScriptフレームワークにAngularが指定され、プロジェクトの作成が始まります。
実行すると下記のように表示され、プロジェクト名を聞かれるので、目的に合わせて任意の名前をつけます。
ここでは"test"という名前をつけて実行します。

プロジェクト作成

 

続いてどのテンプレートを使用するか聞かれるので、矢印キーで目的のテンプレートをで選択します。
選択できるテンプレートは以下の5つです。

テンプレート名概要
tabsシンプルなタブのテンプレート
sidemenuサイドメニュー(ハンバーガーメニュー)のあるテンプレート
blankblankページを表示するテンプレート
my-first-app公式チュートリアル用テンプレート
conferenceIonicの実装デモンストレーション

今回は、tabsを選択してプロジェクトの作成を行います。

Integrate your new app with Capacitor to target native iOS and Android? y/n

と表示され、yes か no を聞かれたら、y と入力してエンターを押して下さい。
コマンドの実行が終了した後に、Ionicフォルダに今回作成したプロジェクトが追加されていると思います。

test作成確認

これでプロジェクトの作成は終了です。

4. Ionicコマンドでサーバーを立ち上げる

続いて、作成したIonicプロジェクトをブラウザで確認する手順を紹介します。
まずはVScodeで先ほど作成したtestを開きます。

VScode

左に並んだアイコンのうち、一番上のアイコンを選択し、フォルダーを開くをクリックします。
フォルダを選択できるので、先ほど作成したtestを選択します。

次に、上部にあるターミナルをクリックし、新しいターミナルを選択します。
すると、下部にコマンドを入力するターミナルが出てきたと思います。ここに

ionic serve

と入力し、実行して下さい(最初は2,3分かかるかもしれません)。自動的にブラウザ(chrome)が立ち上がり、
画面で確認できるようになるはずです(fn + F12 キーで開発者モードにする)。

デバッグ


VScodeでソースを編集し保存すると勝手にこの画面に反映されるため、開発を進めるときは ionic serve でサーバーを立ち上げた状態で開発を進めるいいです。ちなみにサーバーを切断するときは、 control + C です。

5 . iPhoneで確認する

いよいよ最後に実機ビルド(iPhoneで確認する方法)を紹介します。
これによって、iPhoneにアプリとして入れて確認することができます。その際にXcodeを使います。
以前は有料のApple Developer Programにアカウントを登録(年間99ドル)しなければ実機ビルドはできなかったのですが、現在(2021.09)時点では登録しなくても確認できるようになっています。ただし、作ったアプリをApp Storeにリリースする場合はApple Developer Programにアカウントを登録することが必要になります。

実行するコマンド

実行するコマンドを一挙に紹介します。上から順番に一つずつ実行して下さい(最初は4番目までで大丈夫です)。
4番目のコマンドを実行すると勝手にXcodeが起動します。

ionic build --prod
ionic integrations enable capacitor
ionic add ios
ionic cap open ios
ionic cap copy ios

上記のコマンドをざっくり解説します。
1つ目は、Webアプリとしてビルドするためのコマンドです。
2つ目は、モバイルアプリとしてビルドするためのコマンドです。
3つ目は、作成したプロジェクトが ios ですということを追加するためのコマンドです。
4つ目は、Xcodeで作成したプロジェクトを開くためのコマンドです。
5つ目は、4を実行した後に再びVScodeでソースを編集した後に、変更をXcodeで再認識させるためのコマンドです。

特に、5つ目のコマンドを知らないとVScodeでソースをいくら編集しても、アプリに反映されないことになるので、ソースを編集したときは必ず実行し忘れないようにしましょう。

XcodeにAppleIDを登録する

Xcodeが起動したら、まず初めにアカウント(AppleID)を登録します。

Xcode

左上のXcodeを選択し、preferencesを選択します。次に、

左から2番目のAccountsを選択し、AppleIDを登録します。

iPhoneにビルドする

長かったですね、、、いよいよ最後です。

ケーブルでMacとiPhoneを繋いだ状態で、デバイスを選択します(この画像でiPod touchと表示されているところ)。
すると、リストが出てきて、一番上に接続しているiPhoneが出てくると思います。
それを選択した状態で、▶︎をクリックします。するとiPhoneにアプリが入ります。

なお、Apple Developer Programにアカウントを登録していない場合は1週間で入れたアプリが無効になてしまうので、再度確認する場合は同じようにしてXcodeを通してiPhoneに入れ直す必要があります。

-趣味
-,