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デフォルトのスタイルシートを読み込みます。これには以下のすべてが含まれています。
用意するのはこれだけ。簡単ですね。
npm installではじめる
IonicはVue用のラッパーライブラリを提供しているので、Web Componentsとしてではなく、Vue Componetsとしても取り扱うことができます。まずはインストールしてみましょう。
% npm install @ionic/vue
続いて、必要なCSSをVueプロジェクトに追加します。 main.js （TSを採用してる場合は main.ts ）に以下のCSSをインポートしてください。
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
// import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';
今回はIonic Vue Routerを使っていないので、 structure.css のインポートはしません（hydrateの関係で display:none になってしまうため）
また、IonicのスタイルをLazy Loadingで読み込むために以下のように main.js を変更します。
+ import { IonicVue } from '@ionic/vue';
- const app = createApp(App)
+ const app = createApp(App).use(IonicVue)
これだけではじめることができます。簡単ですね。利用する時は、普通のVie Componentを扱うように書きます。例えばskelten-textを導入する時には以下のようにします。
+ <ion-skeleton-text animated></ion-skeleton-text>
これだけでアニメーションのついたスケルトンテキストが表示できました。簡単ですね。
（このgifアニメーションは複数のskelten-textを組み合わせています）。
おわりに
この設定だけで、以下のすべてのコンポーネントを利用することができるようになります。しかもUIコンポーネントはLazy Loadingなので、少ないコストで！！
本稿では「一部にIonicコンポーネントを使う」としましたので、これだけだとVueのRouterをハックしたプッシュ遷移などはできませんが、それでもIonicのコンポーネントのすばらしさと使いやすさを体験してもらえると思います。
ぜひVueプロジェクトのUIコンポーネントのひとつにIonicを候補として検討してもらえればと思います。
それではまた！