アプリを作る際には、最初にUIフレームワークを決めておくことをおすすめします。HTMLは自由度が高い反面、標準で用意されているコンポーネントの見た目や機能は多いとはとてもいえません。UIを後回しにして開発を進めても、部品の配置や配色などで思い描いた動作になりづらく、満足なUXが提供できなくなることもあります。

MonacaではOnsen UIやIonicといったUIフレームワークを使えます。しかし、これらだけでは希望したデザインにならない場合もあるでしょう。そのため、多くのUIフレームワークを知っておくのは大事なことです。今回は中国生まれのReact用UIフレームワーク、Ant Design Mobileを紹介します。主にアリババが開発しているようです。40を超えるUIコンポーネントがありますので、スクリーンショットを多めに紹介していきます。

UIコンポーネントの紹介

何はともあれ、実際にUIコンポーネントを見てもらうのがいいでしょう。一部はアニメーションGIFで、アニメーションも確認できます。

レイアウト

ボックス型のレイアウト組を実現できます。縦表示の場合、4つのボックスが並ぶようです。

メニュー

スライドしながら表示されます。

マルチセレクトなメニューも可能です。

ナビゲーションバー

アイコン、または文字が表示できます。

ページネーション

ボタンと数字と組み合わせて表示できます。

ポップオーバー

周囲を暗転してポップオーバーだけを目立たせられます。

セグメントコントロール

幅や色は自由です。

タブバー

通常は画面下に配置されます。アイコンで通知も使えます。

画面切り替え時にアニメーションもできます。

ボタン

アイコンを付けたり、サイズも自由に選べます。

カレンダー

日付の複数選択、日付から時間の選択など機能が多いです。

イメージピッカー

サイズは多数用意されています。プラスアイコンをタップすると、自分で新しい写真を選択できます。

ピッカー

複数選択や、選択肢が別な選択に影響する（大ジャンル、中ジャンルのような）仕組みもあります。

検索バー

検索に使えるUIコンポーネントです。

スイッチ

iOS風、Android風それぞれが利用できます。

アコーディオン

長いリストを省略して表示するのに使えます。

バッジ

多彩な表現のバッジが用意されています。

カルーセル

左右を小さく表示したり、動的に追加したりする機能があります。

グリッド

写真やコンテンツをタイル状に表示するのに使えます。

アイコン

執筆時点（v2.3.1）ではアイコンの種類は多くありません（表示されているものくらいです）。

リスト

リストはよく使われるので多彩な表示をサポートしています。

入力フォームも組み込めます。

お知らせ表示

アニメーションするお知らせもあります。

ステップ

ウィザードなどに使えます。

垂直だけでなく、水平のデザインもあります。

タグ

タグはシンプルです。

アクションシート

ボタンの他、アイコンを使ったものなども用意されています。

インジケータ

処理中に使えるUIコンポーネントです。

モーダル

モーダルは複数のパターンが用意されています。

削除確認用。

複数ボタンを表示するパターンです。

下から表示されるモーダルです。

トースト

処理中やエラーの時に使えます。

Pull to Refresh

いわゆる引っ張って情報を更新するUIです。上下が用意されているのですが、上側の方は処理方法が分かりませんでした。

スイッチアクション

左右にスワイプしてアクションを呼び出すUIです。異なるデザインで複数用意されています。

リストビュー

リストの中に画像を差し込むデザインです。

サブヘッダーを用意するデザインもあります。

結果表示

サンプルがAliPayの決済完了画面で、あまりにも限定的な利用想定になっています。実際には他にも使える場面がありそうです。

その他

言語切り替え機能があります。

日付選択のUIです。

独自の数字入力UIコンポーネントも用意されています。

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アプリを開発する際には選定に含めてもよさそうです。

Ant Design Mobile - Mobile Design Specification