Ionic × Angularでモバイルアプリ開発に入門する (導入編)
はじめに
こんにちは!ネクストビートのエンジニアの塚本です。
京都オフィスにて、KIDSNAシッターの開発業務を日々行っております。
今回は、ハイブリッドアプリ開発のフレームワークであるIonicを利用して、Web技術を使ったモバイルアプリの作成~実行を行う方法をご紹介いたします。
Ionicとは
Ionic とは、Web技術を使ってモバイルアプリやデスクトップアプリを作成するためのフレームワークです。iOS、Android、デスクトップ、Webなど、複数のプラットフォームで動作するアプリをすべてIonic1つのコードベースで開発することができます。
今回は、ネクスビートでも採用しているAngularをベースにしてIonicアプリを作成していこうと思います。また、今回ご紹介するAngularだけではなくReactやVueベースでも開発することができます。
Ionicアプリの作成 ~ 実行
- Ionicのインストール
まずはじめに、以下の通り Ionicのインストールを行います。
# Ionic CLIのインストール
$ npm install -g @ionic/cli# Ionicがインストールされたことを確認
$ ionic -v
6.17.1
※ Node.js がインストールされていない場合、事前にインストールしておく必要があります。 node -v
コマンドでバージョンが表示されればインストール済です。
- Ionicアプリの作成
それでは早速、 Ionicアプリを作っていきましょう。
# プロジェクトをAngularベースで作成
$ ionic start --type=angular# プロジェクト名を入力
# - 今回は、ionic-tutorial-sampleとする
$ ? Project name:ionic-tutorial-sample# テンプレートを選択
# - 今回は、listを選択する
$ ? Starter template:
tabs | A starting project with a simple tabbed ...
sidemenu | A starting project with a side menu with ...
blank | A blank starter project
❯ list | A starting project with a list
my-first-app | An example application that builds a camera ...
conference | A kitchen-sink application that shows off all ...# IonicのFreeアカウント作るかどうか?
# - 今回は、Nを入力
$ Create free Ionic account? (y/N) N
- Ionicアプリの実行
無事にプロジェクトが作成されたので、実行してみます。
# プロジェクトフォルダへ移動
$ cd ionic-tutorial-sample# アプリを実行
$ ionic serve
ブラウザが起動し http://localhost:8100 が開かれます。
作成したIonicアプリが実行されました✨
- モバイルデザインのプレビュー
Ionicにはブラウザ上にて、モバイルアプリのデザインをプレビューする機能があります。 serve
コマンドに --lab
オプションをつけて実行します。
$ ionic serve --lab
ブラウザが起動し http://localhost:8200 が開かれます。
以下のように iOSとAndroidのデザインを1画面で比較することができ、大変便利ですね👍
モバイルアプリとして実行
次にiOS/Andoridのモバイルアプリとしてビルド~実行を行ってみましょう。
Webアプリのビルド
まずはじめに以下の通り、Webアプリのリリース向けビルドを実施します。本手順は以降の[iOSアプリとして実行]、 [Androidアプリとして実行] の際に必要な作業になります。
$ ionic build --prod
プロジェクト直下にwww
ファルダが作成され、フォルダ配下にWebアプリの公開用ファイル群が作成されます。
iOSアプリとして実行
作成したIonicアプリを以下の手順でiOSアプリとして実行します。
- Xcodeをインストール
- Xcodeの関連ライブラリをインストール
# Cocoapodsのインストール
$ sudo gem install cocoapods# Xcode Command Line toolsのインストール
$ xcode-select --install# Cocoapodsの依存関係を更新
$ pod repo update
- IonicアプリのプラットフォームにiOSを追加
$ ionic capacitor add ios
ios
ファルダが作成されます。
- XcodeでiOSアプリを実行
$ ionic capacitor open ios
XcodeでiOSプロジェクトが開かれるので、以下の通り設定を変更します。
[Signing & Capabilities]
・Team
:自身のアカウントを設定
・Bundle Identifier
:[io.ionic.starter] からユニークなIDへ変更
左上の▶マーク(Run )を選択します。
エミュレータが起動し、iOSアプリが実行できました✨
Androidアプリとして実行
続いてはAndroidです。以下の手順でAndroidアプリとして実行します。
- Android Studioをインストール
https://developer.android.com/studio
- IonicアプリのプラットフォームにAndroidを追加
$ ionic capacitor add android
android
ファルダが作成されます。
- Android Studioで Androidアプリを実行
$ ionic capacitor open android
Android Studioでandroidプロジェクトが開かれます。
ツールバーの▶マーク(Run `app`)を選択します。
※デバイスが表示されてない場合、ツールバーのAVD Managerから実行用のデバイスを登録します。
エミュレータが起動し、Androidアプリが実行できました✨
Ionicアプリの構成
最後に、Ionicアプリの構成を少しだけご紹介します。
- プロジェクトのフォルダ構成
※ Ionic独自のもののみ抜粋して記載
ionic-tutorial-sample
├── android : Androidアプリの開発ファイルを配置するフォルダ
├── ionic.config.json : Ionic CLIで利用する設定ファイル
├── ios : iOSアプリの開発ファイルを配置するフォルダ
├── src : メインの開発ファイルを配置するフォルダ
└── www : Webアプリの公開用ファイルを配置するフォルダ
- Ionic Web Components
Ionic には オリジナルのUIコンポーネントが数多く定義されており、そのコンポーネント群を組み合わせてIonicアプリが構成されています。※ 以下に一例を記載。
○ ion-app :アプリのコンテナ要素。プロジェクトごとに要素は1つのみ。
○ ion-content :アプリのコンテンツ領域。
○ ion-header :アプリのヘッダー領域
○ ion-footer :アプリのフッター領域。
# htmlファイルの構成例
<ion-app>
<ion-header>...</ion-header>
<ion-content>...</ion-content>
<ion-footer>...</ion-footer>
</ion-app>
おわりに
今回は、Ionicの導入~既存テンプレートアプリの作成・実行を行ってみました。次回以降は、新規でIonicアプリの開発を行う記事を書こうと思います。
最後まで読んでいただきありがとうございました!
We are hiring!
「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。
京都オフィスでもエンジニア職の方を絶賛募集中ですので、ご応募お待ちしております!