Ionic × Angularでモバイルアプリ開発に入門する (導入編)

Takaya Tsukamoto

Published in

nextbeat-engineering

9 min readOct 6, 2021

はじめに

こんにちは！ネクストビートのエンジニアの塚本です。
京都オフィスにて、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

‎Xcode includes everything developers need to create great applications for Mac, iPhone, iPad, Apple TV, and Apple…

apps.apple.com

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!

株式会社ネクストビートでは

「人口減少社会において必要とされるインターネット事業を創造し、ニッポンを元気にする。」
を理念に掲げ一緒に働く仲間を募集しております。
京都オフィスでもエンジニア職の方を絶賛募集中ですので、ご応募お待ちしております！