Cordova + React.js + Material UI で、 Material Design な Android アプリのプロトタイプを作ってみた
Cordova のお試しということで、 Cordova + React.js + Material UI で Material Design な Android アプリのサンプルを作ってみました。
- HTML+CSS+JavaScript でネイティブアプリが作れるCordova ですが、やはり遅いという話をよく耳にするので、実際どうなのか確認してみるのが目的。
- 使えそうなら、フロントはJavaScriptで書いて、せめてモデル層だけでも共通化したい。
- UIは Material Designにしたいので、 Material UI フレームワークを使ってみました。
- Material UI は、Material Design を実装したフレームワークです。
- Navigation Drawer や Action Bar といったUIパーツを、React コンポーネント + LESS で提供しています。
- React Nativeも気になるところですが、Android版はまだらしいのでとりあえずスルー。Macも持ってないし。
プロトタイプの機能
- メイン画面には、Action Bar と Card を表示。
- Cardは以下の3種類を用意。
- テキストを流し込んだもの
- 画像を張り付けたもの
- 簡単なグラフを描画したキャンバスを張り付けたもの
- 少しスクロールするよう、複数個貼り付けています。
- Cardは以下の3種類を用意。
- Action Bar の左上のボタンをタップすると、Navigation Drawerが表示される。
- メニュー選択時の処理は実装していないので、表示だけです。
- パネルをタップすると、パネルが回転するアニメーションが走る
- CSS transitionのパフォーマンスも見てみたいので。
コードと実行手順
コードは こちら で公開しています。 Node.js とAndroidのビルドツール一式(JDK, Android SDK, Ant) をインストールして、以下のコマンドを実行すれば動かせるはずです。
$ git clone https://github.com/unageanu/sandbox.git $ cd sandbox/cordova/sample-app $ npm install $ npm run-script init $ npm run-script build $ npm run-script run-browser # ブラウザで実行 $ npm run-script run-android # Android(実機)で実行
所感
ややもっさり感はあるものの、シンプルなアプリであれば十分使えそう。
- 画面のスクロールや、LeftNavi表示時のアニメーションは少しもたつく。
- transition を使ったアニメーションは速い。
- レンダリングも、特に汚いといったことはなさそう。
- 起動は5~6秒といったところ。スプラッシュスクリーンを出しておけば大丈夫なレベルかな。
確認は手持ちの端末(Xperia Z)で行いました。2年前の端末なので、これで使えれば最近の端末でも大丈夫でしょう。さすがにゲームとかは厳しそうですが、とりあえず、jiji2で必要な機能なら十分実用に耐えるのではないかと。