Monacaアプリを開発する際には、何らかのUIフレームワークを利用することが多いです。
例えば、Monacaでは公式UIフレームワークとして「Onsen UI」を提供しています。
他にもBootstrapやVuetifyなどJavaScriptフレームワークに合わせたUIフレームワークが存在します。
この記事ではUIフレームワークとして導入できるIonic Frameworkの使い方を紹介します。
Ionic FrameworkはVueやReact、Angularなどで使えますが、今回は素のJavaScriptでの使い方を紹介します。
Ionic Frameworkのインストール
Ionic Frameworkをインストールする際には、CDN版を使うことが多いようです。
もちろんVueであったり、WebPackなどを使う場合にはnpmで導入もできるでしょう。今回はなるべく分かりやすくするためにCDN版を使っています。
<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" />
HTMLの基本
上記JavaScriptとCSSを読み込んでいれば、ion ではじまるHTMLタグが自動的にIonic FrameworkによってスマートフォンライクなUIに変換されます。
次のHTMLはbodyタグの中に記述します。
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>ヘッダー</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>メインコンテンツ</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>フッター</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
タブを使う
Ionic FrameworkでタブUIを使いたい場合には ion-tabs と icon-tab タグを使います。
次の例では「ホーム」と「設定」の2つのタブを表示するコードを書いています。
<ion-app>
<ion-tabs>
<ion-tab tab="home">
<h1>Home Content</h1>
</ion-tab>
<ion-tab tab="settings">
<h1>Settings Content</h1>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-label>ホーム</ion-label>
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-label>設定</ion-label>
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
ヘッダーメニュー
アプリのヘッダーにあるメニューを出す場合には ion-menu タグを使います。
<ion-app>
<ion-menu content-id="main-content">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header> Navigate </ion-list-header>
<ion-menu-toggle auto-hide="false">
<ion-item button>
<ion-icon slot="start" name="home"></ion-icon>
<ion-label> Home </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-page class="ion-page" id="main-content">
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title>ヘッダー
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>メインコンテンツ</h1>
<p>左上にあるアイコンをタップするとメニューが開閉します</p>
</ion-content>
</ion-page>
</ion-app>
<ion-menu-controller></ion-menu-controller>
JavaScriptとの組み合わせ
例えば以下のようにリスト ion-list を用意します。
<ion-content class="ion-padding">
<h1>メインコンテンツ</h1>
<p>
<ion-button id="btn" color="dark">Dark</ion-button>
</p>
<p>
<ion-list id="list">
</ion-list>
</p>
</ion-content>
この時、JavaScript側で以下のように記述します。
新しいHTMLもIonic Frameworkに対応したHTMLタグを追加すれば、最適なUIになって表示されます。
// This is a JavaScript file
document.addEventListener('DOMContentLoaded', e => {
document.querySelector('#btn').addEventListener('click', e => {
const list = document.querySelector('#list');
const html = list.innerHTML;
const newHtml = `
<ion-item>
<ion-label>${(new Date).toUTCString()} </ion-label>
</ion-item>
`;
list.innerHTML = ${html}${newHtml};
});
});
利用できるコンポーネント
Ionic Frameworkで用意されているUIコンポーネントは以下の通りです。
多くのコンポーネントが用意されています。
- アクションシート
- アコーディオン
- アラート
- バッジ
- パンくずリスト
- ボタン
- カード
- チェックボックス
- チップ
- 日付・時間ピッカー
- フローティングボタン
- グリッド
- 無限スクロール
- アイコン
- 入力フォーム
- リスト
- メディア
- メニュー
- モーダル
- ナビゲーション
- ポップオーバー
- プログレス
- レンジ
- リフレッシュ
- 検索バー
- セグメント
- スライダー
- タブ
- トースト
- ツールバー
詳細は公式ドキュメントをご覧ください。
ルーティング
画面遷移を行う際には href や url のような要素を使います。
例えば以下のような記述です。
<!-- href を使った場合 -->
<ion-item button href="/${tech.title}">
<!-- 省略 -->
</ion-item>
<!-- url を使った場合 -->
<ion-route url="/" component="nav-home"></ion-route>
ここで component という表記があります。
これはHTMLのカスタムエレメントとして定義されます。
例えば以下のような内容です。
export default class Home extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<ion-header translucent>
</ion-header>
`;
}
}
customElements.define("nav-home", Home);
//この記述により「nav-home」という名前で利用できるように定義しています
この内容を読み込むため、 HTML側でJavaScriptファイルを module として読み込み、importが使えるようにします。
<script src="./src/app.js" type="module"></script>
moduleとして読み込んだJavaScriptファイルの中では、importが利用できるようになります。
import Home from "./routes/Home.js";
カスタムエレメントを使うことで、各画面コンポーネント毎に機能を分けられ、疎結合に実装できます。
まとめ
Ionic Frameworkはコンポーネントも数多く、様々なUIを実現できます。
Vue/React/AngularといったJavaScriptフレームワークと組み合わせて使うこともできますし、素のJavaScriptでも利用できます。
ぜひMonacaアプリでIonic Frameworkをお試しください。