アプリを作る際には、最初にUIフレームワークを決めておくことをおすすめします。HTMLは自由度が高い反面、標準で用意されているコンポーネントの見た目や機能は多いとはとてもいえません。UIを後回しにして開発を進めても、部品の配置や配色などで思い描いた動作になりづらく、満足なUXが提供できなくなることもあります。
MonacaではOnsen UIやIonicといったUIフレームワークを使えます。しかし、これらだけでは希望したデザインにならない場合もあるでしょう。そのため、多くのUIフレームワークを知っておくのは大事なことです。今回は中国生まれのReact用UIフレームワーク、Ant Design Mobileを紹介します。主にアリババが開発しているようです。40を超えるUIコンポーネントがありますので、スクリーンショットを多めに紹介していきます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-49.png?w=1118&ssl=1)
UIコンポーネントの紹介
何はともあれ、実際にUIコンポーネントを見てもらうのがいいでしょう。一部はアニメーションGIFで、アニメーションも確認できます。
レイアウト
ボックス型のレイアウト組を実現できます。縦表示の場合、4つのボックスが並ぶようです。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-45.png?w=1118&ssl=1)
メニュー
スライドしながら表示されます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-44.gif?w=1118&ssl=1)
マルチセレクトなメニューも可能です。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-43.png?w=1118&ssl=1)
ナビゲーションバー
アイコン、または文字が表示できます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-42.png?w=1118&ssl=1)
ページネーション
ボタンと数字と組み合わせて表示できます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-41.png?w=1118&ssl=1)
ポップオーバー
周囲を暗転してポップオーバーだけを目立たせられます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-40.png?w=1118&ssl=1)
セグメントコントロール
幅や色は自由です。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-39.png?w=1118&ssl=1)
タブバー
通常は画面下に配置されます。アイコンで通知も使えます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-38.gif?w=1118&ssl=1)
画面切り替え時にアニメーションもできます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-37.gif?w=1118&ssl=1)
ボタン
アイコンを付けたり、サイズも自由に選べます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-36.png?w=1118&ssl=1)
カレンダー
日付の複数選択、日付から時間の選択など機能が多いです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-34.png?w=1118&ssl=1)
イメージピッカー
サイズは多数用意されています。プラスアイコンをタップすると、自分で新しい写真を選択できます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-33.png?w=1118&ssl=1)
ピッカー
複数選択や、選択肢が別な選択に影響する(大ジャンル、中ジャンルのような)仕組みもあります。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-32.png?w=1118&ssl=1)
検索バー
検索に使えるUIコンポーネントです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-31.png?w=1118&ssl=1)
スイッチ
iOS風、Android風それぞれが利用できます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-30.png?w=1118&ssl=1)
アコーディオン
長いリストを省略して表示するのに使えます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-29.png?w=1118&ssl=1)
バッジ
多彩な表現のバッジが用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-28.png?w=1118&ssl=1)
カルーセル
左右を小さく表示したり、動的に追加したりする機能があります。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-27.png?w=1118&ssl=1)
グリッド
写真やコンテンツをタイル状に表示するのに使えます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-26.png?w=1118&ssl=1)
アイコン
執筆時点(v2.3.1)ではアイコンの種類は多くありません(表示されているものくらいです)。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-25.png?w=1118&ssl=1)
リスト
リストはよく使われるので多彩な表示をサポートしています。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-24.png?w=1118&ssl=1)
入力フォームも組み込めます。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-23.png?w=1118&ssl=1)
お知らせ表示
アニメーションするお知らせもあります。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-22.gif?w=1118&ssl=1)
ステップ
ウィザードなどに使えます。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-21.png?w=1118&ssl=1)
垂直だけでなく、水平のデザインもあります。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-20.png?w=1118&ssl=1)
タグ
タグはシンプルです。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-19.png?w=1118&ssl=1)
アクションシート
ボタンの他、アイコンを使ったものなども用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-18.gif?w=1118&ssl=1)
インジケータ
処理中に使えるUIコンポーネントです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-17.png?w=1118&ssl=1)
モーダル
モーダルは複数のパターンが用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-16.png?w=1118&ssl=1)
削除確認用。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-15.png?w=1118&ssl=1)
複数ボタンを表示するパターンです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-14.png?w=1118&ssl=1)
下から表示されるモーダルです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-13.png?w=1118&ssl=1)
トースト
処理中やエラーの時に使えます。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-12.png?w=1118&ssl=1)
Pull to Refresh
いわゆる引っ張って情報を更新するUIです。上下が用意されているのですが、上側の方は処理方法が分かりませんでした。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-9.gif?w=1118&ssl=1)
スイッチアクション
左右にスワイプしてアクションを呼び出すUIです。異なるデザインで複数用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-8.gif?w=1118&ssl=1)
リストビュー
リストの中に画像を差し込むデザインです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-6.png?w=1118&ssl=1)
サブヘッダーを用意するデザインもあります。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-5.png?w=1118&ssl=1)
結果表示
サンプルがAliPayの決済完了画面で、あまりにも限定的な利用想定になっています。実際には他にも使える場面がありそうです。
![](https://i0.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-4.png?w=1118&ssl=1)
その他
言語切り替え機能があります。
![](https://i2.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-3.png?w=1118&ssl=1)
日付選択のUIです。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-2.png?w=1118&ssl=1)
独自の数字入力UIコンポーネントも用意されています。
![](https://i1.wp.com/press.monaca.io/wp-content/uploads/2020/05/mobile-ant-1.png?w=1118&ssl=1)
Ant Design Mobileの使い方
Ant Design Mobileはnpmでインストール可能です。
npm install antd-mobile --save
HTMLではメタタグの設定(maximum-scale)と、タップの遅延をなくすFastClickの読み込みが推奨されています。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
後はReact側で使うだけです。例えばボタンは次のようになります。
import { Button } from 'antd-mobile';
ReactDOM.render(<Button>Start</Button>, mountNode);
CSSは次のようにimportで読み込みます。
import 'antd-mobile/dist/antd-mobile.css'; // または 'antd-mobile/dist/antd-mobile.less'
サポートしているOS
Ant Design Mobileはスマートフォンに特化しているため、サポートしているのはiOSまたはAndroid 4.0以降になります。中国では古いAndroidデバイスもまだ数多く使われていますので、4.0以降というのは幅広いデバイスに対応できそうです。
フレームワークについて
Ant Design MobileはReact/Preact/React Nativeに対応していますが、Angular 9以降で使えるAnt Design Mobile of Angularも開発されています。なお、こちらはiOS 7.0、Android 4.4以降が対象になるので注意してください。
Ant Design Mobile of Angular - NG-ZORRO-MOBILE
ライセンス
ライセンスはMIT Licenseです。ソースコードはGitHub上にあります。
ant-design/ant-design-mobile: A configurable Mobile UI
特徴
Ant Design MobileはあくまでもUIコンポーネントなので、Onsen UIのように画面切り替え時のアニメーションや、スマートフォンアプリならではのUXを提供する訳ではないようです(一部のコンポーネントではアニメーションもありますが)。アリババが開発していることもあって、中国向けにアプリを提供する場合には特に親和性が高いUIになりそうです。
まとめ
Ant Design Mobileは多彩なコンポーネントが特徴になります。UX部分については別なライブラリを使ったり、実装する必要がありますが、探すのは難しくないでしょう。React(またはAngular)でMonacaアプリを開発する際には選定に含めてもよさそうです。