[Ionic入門] Angular/React/VueベースでWeb/iOS/Androidを同時開発可能なクロスプラットフォームフレームワーク

  • クロスプラットフォームで動作可能なアプリを開発できるIonic Frameworkの概要と初期開発手順についてのメモ
  • モダンフロントエンドフレームワーク(ex. Angular,React,Vue)ベースで開発したAPをモバイル(iOS/Android)に変換することができる
    • Web系のフロントエンドエンジニアが覚えると、ほぼ学習コスト無しで全てに対応可能になる
  • Flutterとどちらを採用すべきか?は開発チームのエンジニアによる
    • WEB技術(Typescript)が軸→Ionic、0からDartを学びたい→Flutter

Ionic Framework概要

クロスアプリケーションフレームワーク

Ionic概要

  • SPA(Webアプリ)ベースのアプリをiOS/Androidで動くネイティブアプリに変換できるフレームワーク

    • Web/iOS/Androidのアプリをハイブリット展開可能
      • 1つのIonic Projectから Web/iOS/AndroidのAPをビルドするイメージ
    • 特に、既存のWEB APのモバイル化に迅速に対応できる
  • コンポーネントやコード(HTML/Scss/Typescript)を使い回して開発可能

    • Typescriptで書いたロジックをそのまま使い回せる
    • Swift等を使うと、Webとモバイルで同じロジックを別言語で書き直す手間が発生する
  • WEBフレームワークとはUI開発で一部差分がある

    • 例えば、Angularで使われるWeb専用のUIコンポーネントは使用できない

      • 一般的にAngularではAngular Materialを活用して、htmlやcssをあまり書かずにUIを実装していく
        • ヘッダー、メニュー、テーブル等の部品がある
          Angular Material
    • Ionicではモバイル向けのUIコンポーネントを活用する
      Ionic UI Component

      • IonicのUI ComponentはiOSとAndroidでそれぞれ異なる最適なマテリアルデザインが表示される
  • ネイティブ機能のAPIとドキュメントが豊富に公開されている

    • WEBベースで開発するが、ネイティブデバイスの機能もドキュメントを見てNative APIsを使えばハマらずに実装できる
    • Ionic Framework - Native APIs

Ionicの強み

  • Web系のフロントエンドエンジニアが学習コストなく活用可能
  • WEB APのロジックをそのまま使いまわせる
    • Flutterを採用する場合はDartで書き直さなくてはならない
  • 複数のWEBフロントフレームワークに対応
    • Angular, React, Vue, Nuxt.js
      • 日本ではなぜかReactが流行っているが、海外ではフルスタックなAngularやNuxt.jsが主流になりつつある認識
    • React NativeはReactにしか対応できない為

Ionic vs Flutter

  • 組織のエンジニアのスキルベースで判断
    • 軸がWEB(TS, JS) → Ionic
    • 軸がモバイル & 一からDartを学びたい → Flutter
  • WEB/モバイル以外にも対応したい場合はFlutter
    • FlutterはWindowsやmacOS、Linux、車載、テレビ、スマートホーム関連のモジュールに組み込むこともできる
  • すでにWEB APが存在していて、追加でモバイル対応したいケース
    • Ionicであれば、ロジックの書き直しが生じない
    • Flutterの場合はDartで書き直すことになる
  • 結局は新たにDartの記法を学ぶ必要があるか?が判断ポイント
    • 個人的には、WEBエンジニアはIonicで困ることが特に無い為、Flutterを覚える旨味が特に無いと考える

Ionic UI Component

Ionic UI Component

  • IonicのUI Componentを活用すれば、iOSとAndroidでそれぞれ異なる最適なマテリアルデザインを表示できる
    • それぞれデザインする必要は無く、デザイナー無しでも高いUI品質を担保できる

Ionic UI Template

Ionic FirstApp Temaplate

  • Ionicではテンプレートを活用することで、↑のようなUIを自動生成することができる
    • タブメニューやカメラ機能程度なら自分で実装する必要が無く、手軽にモバイルAPらしさを出せるので、WEB開発になれたエンジニアでも機能開発に集中できる

Ionicの学習方法

  • WEBの公式ドキュメントと書籍で基本的に困ることはない

書籍

以下がとても分かりやすかった

WEB

Ionic Document

後はベースに採用するWEBフレームワークの学習をすればOK


IonicによるAP開発手順

環境構築

  • Ionicの開発に必要なものは以下
    • Node.js
    • Ionic CLI

Node.js

Ionic CLIのインストール

  • Ionic CLI

    • これを入れるとIonicコマンドを実行可能になる
  • Nodeのバージョンが古い場合は先にバージョンアップ

  • Macの場合

    1
    2
    3
    4
    5
    sudo npm install ionic -g

    ...
    + ionic@5.4.16
    added 225 packages from 149 contributors in 10.316s
  • Windowsの場合

    1
    npm install ionic -g
  • バージョンを確認

    1
    2
    > ionic -v
    5.4.16

モバイルアプリ開発用ツールのインストール

  • 実機での動作確認やリリース作業(App Store/Google Play)に以下が必要
    • Xcode
      • iOSアプリの実行/リリースに必須の統合開発環境
      • Windowsでは利用不可
    • Android Studio
      • Androidアプリの実行/リリースに必須の統合開発環境
        Android Studio

Xcode

  • XcodeはApp Storeから入手
    • インストールには20分以上かかった

Xcode App Store

  • ランタイムのインストール
    1
    2
    3
    sudo gem install cocoapods # iOSのパッケージ管理システム
    xcode-select --install # Xcodeのコマンドラインツール
    pod repo update # CocoaPodsの依存関係を更新

Android Studioのインストール

  • Android Sudioサイトからダウンロード
    • インストーラーを起動してインストール
    • 指示にしたがって初期設定を実施

About Android Studio

Ionic向けのVSCode Pluginをインストール

  • VSCodeにはIonic/Angular向けのPluginが豊富にある
    • 必要に応じて開発環境に取り込む

Ionic projectの開始〜テンプレートからのUI自動生成

  • Ionic Projectを開始

    1
    ionic start --type=angular
  • Project名を入力

    1
    2
    3
    4
    5
    6
    Every great app needs a name! 😍

    Please enter the full name of your app. You can change this at any time. To bypass this prompt next time, supply
    name, the first argument to ionic start.

    ? Project name: sample-pj
  • 次にテンプレートを選択する

    • モバイルアプリのUIの大枠は自動構築できる
    • tabs
      • モバイルアプリの定番のタブ型のアプリ
    • sidemenu
      • サイドメニューがハンバーガーで開くタイプ
    • blank
      • Home画面のみのシンプルな画面
    • camera with gallery
      • カメラ機能とデバイスの画像を操作する機能があるタイプ
1
2
3
4
5
6
7
8
9
10
11
Let's pick the perfect starter template! 💪

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To
bypass this prompt next time, supply template, the second argument to ionic start.

? Starter template: (Use arrow keys)
❯ tabs | A starting project with a simple tabbed interface
sidemenu | A starting project with a side menu with navigation in the content area
blank | A blank starter project
my-first-app | An example application that builds a camera with gallery
conference | A kitchen-sink application that shows off all Ionic has to offer
  • 指定したProject名のディレクトリが生成される

    1
    2
    > ls
    sample-pj
  • プレビューを起動

    • Angularのng serveと同様にlocalhostで動作確認可能
      1
      2
      > cd sample-pj
      ionic serve
  • Sidemenuテンプレートを使った場合の初期画面

    • メールアプリ風になっている

Ionic tabs template

  • Tabsテンプレートを使った場合の初期画面
    Ionic Tabs Tenplate
  • –labオプション
    • Ionic ComponentはiOSとAndroidでそれぞれ異なるマテリアルデザインを持っている
    • labオプションで同時に確認可能
      1
      ionic serve --lab
      Ionic Serve Lab

tabsテンプレートのコンポーネント構成

  • sample-pj/src/app
    • ディレクトリ構成は通常のAngular PJと同様
    • 以下のコンポーネントが自動生成されている
      • tabs, tab1, tab2, tab3, explore-container
1
2
3
app % ls
app-routing.module.ts app.component.scss app.component.ts explore-container tab2 tabs
app.component.html app.component.spec.ts app.module.ts tab1 tab3

UIの改修例

  • 自動生成されたUIの改修手順について
    • タブのアイコンやタイトルの変更

tabs component

  • デフォルト

    • tabs temlateで自動生成されるコード
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <ion-tabs>

      <ion-tab-bar slot="bottom">
      <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
      </ion-tab-button>
      </ion-tab-bar>

      </ion-tabs>
  • 改修方法

    • アイコンを変更
      • 設計した各画面に適したion-iconを選定
    • タイトルを変更
      • 各画面のComponentのion-titleを変更
  • ion-iconについて

    • ion-iconのアイコンは以下のマテリアルデザインの名称をname=で指定することで活用できる
    • 各画面のアイコンとしてふさわしいものを公式ドキュメントから探せば良い
      ion-icons
  • tabs.page.htmlを以下のように実装
    • タブの一つをホーム画面とする
      • アイコンを家マークに変更
      • アイコン下のタイトルをHomeに変更
1
2
3
4
5
6
7
<ion-tabs>

<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-tab-button>
  • serveで変化を確認

    • tabsのボタンのアイコンが切り替わっていることを確認
      1
      ionic serve --lab
  • ion-toolbarについて

    • 以下の書式でツールバーとタイトルを定められる
      1
      2
      3
      4
      5
      6
      7
      <ion-header [translucent]="true">
      <ion-toolbar>
      <ion-title>
      <!--アプリのタイトルに変更-->
      </ion-title>
      </ion-toolbar>
      </ion-header>

ここまでで、モバイルAPらしいタブ型の基本的なUIの骨子を開発することができる。この後、使えそうなUI Componentを公式ページから探して、各画面を作り上げていく。

デバイスのネイティブ機能の実装: Ionic Native API

Ionic - Native APIs

  • Ionic Native APIs
    • こちらを利用すればデバイス本体の機能を活用できる
      • ex. カメラ、センサー、写真フォルダ、3D Touch、クラウド連携…
        1
        CapacitorやCordovaを使って、どんなIonicアプリにもネイティブデバイスの機能を簡単に追加できるようにするための、オープンソースのコレクションとプレミアムプラグインと統合します。このことによって、ネイティブパワーのアプリ体験を構築することができます。
    • ベースとするフレームワーク毎の説明がドキュメントとして公開されているので、そこで記法を確認して利用すれば良い
      • この豊富なAPI群により、WEB開発しか経験の無い方でも、大抵のモバイルAPを開発できる

その他の実装については、ベースとしたWEBフレームワークやTypeScriptの書式を調査しながら進めれば良い。


参考

関連記事

その他

@EventEmitter @Input @Output @ViewChild ACM AMP API Gateway AR AR.js AR.js Studio AWS AWS Amplify AWS Budgets AWS Cost Explorer AWS SDK for JavaScript AddThis Adobe XD Alexa Amazon CloudWatch Amazon Honycode Amazon SNS Android Angular Angular Material AngularFire AppSync Augury C CDN CI/CD Cloud Craft Cloud9 CloudFormation CloudFront CloudTrail Cognito Cost Anomaly Detection Cubase ai Cubasis LE DTM Disqus DynamoDB Elgato HD 60S Firebase Firebase Hosting Former2 Github Github Actions Github.com GithubEnterprise GithubPages Google Chrome Google Cloud Shell GraphQL Hexo Hosting IAM Ionic JSON JavaScript LadioCast Logging LowCode MFA MS Authentication MacBook Pro 16 Mind Node NETDUETTO Netflix Party Netlify Network NoCode Observable PO PdM Promise RPA ReactiveForm Recognition Route53 S3 SAM(Serverless Application Model) SAR SSL SYNCROOM Schematics ScrumInc Serverless Service Siri Sitemap Spark AR Steinberg UR44C Teams Touch Cast Studio Treetable TypeScript UI UI Bakery WAF WAFv2 WEB Page Dev WEB会議 WebAR WebSocketAPI Webhook Windows Power Automate Wireshark aot async/await aws config cloud9 display.land draw.io e2e test filter() forkJoin() google search console hexo-generator-amp iOS iPad Pro iPhone icarus map() mat input mat tree mat-checkbox mat-input mat-selection-list mmhmm ngFor plantUML popIn Aladdin2 then() vscode ”global is not defined” らくがきAR アジャイル アジャイル開発 クロスプラットフォーム ショートカット スクラム スクラム開発 テレワーク ファイル操作 ブラウザ型IDE プロダクトオーナー プロダクトマネージャー プロトタイピング リモートセッション 共同開発 双方向データバインディング 待ち合わせ処理 認定スクラムマスター 静的WEB Hosting 静的WEBサイトHosting
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×