ionic frameworkを触ってみる

緊急なお仕事が入ってきまして、ionic frameworkを触っています

ionic frameworkとは

Web/iOS/Android/PC のハイブリッドフレームワークの1つです
PWAのようなWebViewではなく、完全にネイティブコードの出力を行います
いわゆる下記の仲間になります

ハイブリッド

PhoneGap（Cordova）、Monaca、Capacitor

クロスプラットフォーム

Xamarin、React Native、Flutter、Kotlin Native・・

ハイブリッドとクロスプラットフォームの違いはここでは
ハイブリッドはUIをHTML＋CSSで作り
クロスプラットフォームは専用のUIで作る事とします

ハイブリットフレームワークにした理由

スケジュールの関係から、WebデザイナーにUIを作ってもらう方がよかったからです
そのため、必然的にionicを採用することにしました

ionicインストール

インストールは非常に簡単でした
今回はAngularとCapacitorを使います
まずnodeとnpmを新しくしておき

npm i -g ionic 
npm install @ionic/angular@latest --save
apt install ng-common
npm uninstall -g ionic
npm install -g @ionic/cli


ionic start test_app --type=ionic-angular

これでテンプレートを作成できる

typeオプションでは下記の設定が可能だ

• angular
  ionic-angularとの違いがまだわかってない
• react
  reactも対応したらしい
• ionic-angular
  angularとの違いがまだわかってない
• ionic1
  過去の遺物なのでもう使わない

今後 Vue等も対応されるようだ

今回はTabアプリを選んだ

実行

ionic serve

これでブラウザで実行できる