ionicを利用したクロスプラットフォームモバイルアプリの開発です。個人学習用 & 会社レポート用 & 公開用でもあります。:)

1. Cross-Platform Mobile App開発

2. ionicとは？
Angular
OR
Mobile
Platforms
Web App Frameworkを用いて、One CodebaseでWeb, iOS, Androidアプリが
同時に開発可能になる、Hybrid Frameworkです。
ionic

3. 必要知識
• Webの基本知識と、Angular 2+の最低限の知識が必要です。
• HTML5, CSS3, JavaScript(ES6+), TypeScript
• Angular 2+のArchitecture, Module, Component,
Service & DI(Dependency Injection)
※Angularの基本アーキテクチャとDI概念
Angular TypeScript
+

4. 作ってみた
• OS環境と言語と諸々
• Windows 10 home
• Visual Studio Code, Android Studio
• Node.js v10.15.1, JDK 8, Android SDK
• Angular 7, Ionic 4, Capacitor
Angular
• Web App / Android App
• 料理レシピリスト
(※iOSは今回作ってません。)
✕

5. 環境構築
本家サイト参考にて、構築実施。
Windows OSは、Android環境のみ構築可能。
※Appflowと言う、Cloud上で環境が揃っていて、Buildも可能な有料サービスがあります。

6. Components 制作
ionicは、モダンMaterial Designをベースに、UIコンポーネントを提供しています。
別UIコンポーネントが必要な場合は、他サードパーティにて追加も可能です。
(Angular BootStrap, Ant Designなど)

7. Components 制作
さっそく、ionic CLIのコマンド、「ionic start PJ_NAME --option」入力して
ベースファイルを作成します。

8. Components 制作
基本構成は、Angular CLIと似たようにファイル構成を作ってくれます。
※ionic 4のroutingの基本は、遅延ロード(lazy load)で遷移することになりました。

9. Components 制作
制作するComponentsとService構成する。データと機能は全部Serviceへおまかせする。

10. Components 制作
Ionic UI Componentと構成図をベースにComponentとServie制作

11. ionic Build
Ionic CLIの機能を利用し、web, android, iosアプリを同時buildができます。
(※iOSは Mac OS Xが必要…)

12. ionic Build
Androidはjdk, android jdk、Android Studioの環境構成が揃っていればbuildが可能です。
(※apk生成は、Android Studioにて可能)

13. 参考資料
• Ionic : https://ionicframework.com/
• Capacitor : https://capacitor.ionicframework.com/
• Udemy Ionic 4 course : https://www.udemy.com/ionic-2-the-practical-guide-to-building-ios-android-apps/