Ionic Frameworkは「モバイルアプリのUIをWebで再現できるUIフレームワーク」として多くのアプリ開発の現場で利用されているのは広く知られているところです。Ionic teamがIonic Conferenceの時にだした次のConference Appをみると、その再現度の高さに気づけるかと思います。

しかしWeb開発の現場において、モバイルアプリ開発はニーズのごく一部に過ぎません。ストアに配信するアプリではなく、ブラウザのみで配信することも多いでしょう。そういう案件によっては、Human Interface GuidelinesやMaterial Designに沿って、プッシュ遷移・ポップアップ遷移までは求めることはありません。

しかし、近年モバイルUIとWeb UIの間の境はほとんどなくなってきており、Web UIにおいてもToastやAction Sheet、Floating Actionといったモバイル起源のUIを使うことも増えてきました。そこで、本記事ではアプリの一部にIonicコンポーネントを使う方法をご紹介しましょう。IonicのUIコンポーネントはすべてがLazyLoadingになっているので、追加してもアプリ立ち上げ時に必要なbundleサイズにはほとんど影響しません！

はじめ方

scriptタグではじめる

おそらく現代でフロントエンドを行うほとんどの人にニーズはありませんが、まずは懐かしのscriptタグではじめる方法を整理しましょう。

Ionicは導入検討をすばやく行うために、CDN「jsdelivr」を使ってコンポーネントの配信をしています。これをタグで読み込むだけで使い始めることができます。あなたのプロジェクトに追加するのは、以下のたったの3行だけです。

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

1行目は[type=module]ですので、ES Module対応ブラウザのためのものです。2行目はnomoduleですので非対応ブラウザのためのスクリプトを読み込みます。まぁ、こうやって対応ブラウザをみると2行目はもう必要ない気もしますが、公式ドキュメントに残っているので案内しておきます。

そして、3行目はIonicデフォルトのスタイルシートを読み込みます。これには以下のすべてが含まれています。

用意するのはこれだけ。簡単ですね。

ng addではじめる

Angularだともっと簡単にはじめることができますね。

% ng add @ionic/angular

ng add で何が行われるかは以下の通りです。

@ionic/angular を dependencies にインストール
@ionic/angular-toolkit を devDependencies にインストール
ngModule に IonicModule.forRoot() を設定（import）
必要なスタイルシートを angular.json に設定
IonIconを使うために、必要なsvgファイルを angular.json に設定
Ionic CLIを使うことができるように、 @ionic/angular-toolkit などを angular.json に設定

実際に何が行われるかを知りたい人は以下をご覧ください。

シンプルにはじめることができますよね。

コンポーネントを使ってみる

それでは試しにコンポーネントの中にIonicのタグをつかってみましょう。比較的人気の高い、skelten-textを導入してみます。

<ion-skeleton-text [animated]="true" style="width: 80px"></ion-skeleton-text>

これだけでアニメーションのついたスケルトンテキストが表示できました。簡単ですね。

（このgifアニメーションは複数のskelten-textを組み合わせています）。

おわりに

この設定だけで、以下のすべてのコンポーネントを利用することができるようになります。しかもUIコンポーネントはLazy Loadingなので、少ないコストで！！

本稿では「一部にIonicコンポーネントを使う」としましたので、これだけだとAngularのRouterをハックしたプッシュ遷移などはできませんが、それでもIonicのコンポーネントのすばらしさと使いやすさを体験してもらえると思います。

ぜひAngularプロジェクトのUIコンポーネントのひとつにIonicを候補として検討してもらえればと思います。

それではまた！