【Cordova】使ってみたいモバイルアプリ向けUIフレームワーク「Onsen UI」

現在開発中の新アプリのUIを導入することにしたのですが、その際に使ってみたいフレームワークをメモ。
Onsen UI という UI フレームワークです。
アプリのような見た目を簡単に実装でき、React でも使うことができます。
公式の説明でも「Cordovaを用いたハイブリッドアプリ開発に最適です」とあったので、使ってみたかったんですよね。

公式サイトはこちらから。

Onsen UI 2: HTML5モバイルアプリを速く、美しく – Onsen UI
https://ja.onsen.io/

CDN を使う場合は、下記の3行を HTML の head 内に追加すればOKとのこと。

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fonsenui%2Fjs%2Fonsenui.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

が、私の開発環境では React を利用しているので、それに対応した導入方法を使います。
導入についての説明ページは下記にあります

React – Onsen UI
https://ja.onsen.io/v2/guide/react/

まず、下記の npm コマンドを実行します

npm install onsenui react-onsenui

コマンドを実行し終えたら、あとはこの UI を使いたいページで下記のようにインポートすれば使うことができます。

import {Page, Toolbar, Button} from 'react-onsenui';

なお、サンプルコードは下記の通りです。

import React, { Component } from 'react';
import {List, ListItem, Button} from 'react-onsenui';

class ListPage extends Component {
  render() {
    return(
      <List dataSource={['Row 1', 'Row 2']} renderHeader={this.renderHeader} renderRow={(row, idx) => (
          <ListItem modifier={idx === this.state.data.length - 1 ? 'longdivider' : null}>
            {row}
            <Button modifier="quiet" onClick={this.remove.bind(this, idx)}>Remove</Button>
          </ListItem>
         )}
         renderFooter={this.renderFooter}
      />
    );
  }
}
module.exports = ListPage;

上記コードはコンポートページの List UI のコードを参考にしました。
まだ導入したばかりで見よう見まねなのですが、何となくどこで何をやっているのかはわかりそうです。

とりあえず、メニューバーとリスト表示は必要したいので、この2つをまず実装してみたいと思います。

以上、Cordova アプリで使ってみたい UI フレームワーク「Onsen UI」のご紹介でした。
今後も、何か発見や備忘録としてまとめたい事項があれば、投稿していきたいと思います。