読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

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 フレームワークを使ってみました。
  • React Nativeも気になるところですが、Android版はまだらしいのでとりあえずスルー。Macも持ってないし。

プロトタイプの機能

f:id:unageanu:20150404202246p:plain

  • メイン画面には、Action Bar と Card を表示。
    • 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で必要な機能なら十分実用に耐えるのではないかと。

unageanu.hatenablog.com

unageanu.hatenablog.com