VIVITABLOG

VIVITAで活躍するメンバーの情報発信サイト

ハードウェアスタートアップでハイブリッドアプリ開発はじめました

VIVIPARTS アプリ開発 プログラミング

はじめまして。VIVITAでソフトウェアエンジニアをやってます。板本@itamotoです。

AndroidアプリのエンジニアとしてVIVITAに2年程前に入社。 最近ではハイブリッドアプリ開発でJavaScriptな日々を送ってます。

VIVITAでは興味を持ったことをまずやってみよう！という文化があるので 子どもたちとの活動を通して今まで経験しなかったような事を色々とやらせてもらっています。

Webとかスマートフォンアプリ開発の経験しかなかった自分にとって、同じプロジェクトにハードウェアのエンジニアが一緒なのは これまでと大きく違う環境だったりします。
それがきっかけとなって、家ではArduinoで電子工作を始めたりもしました。
色々部品を買い込んで広げていたら家族になにやら怪しいことを始めたんじゃないか、と変な目で見られたりしてます（笑）

そんな感じで、このテーマではハードウェア開発も一緒に進めているプロジェクトの紹介とその中のアプリ開発について書いていこうと思います。

まずはざっくり開発中のプロダクトを紹介

VIVITAではVIVISTOPという、子どもたちが放課後にやってきてものづくりをする場を運営してます。 そこで使われているツールの一つとしてVIVIPARTSというものがあります。

f:id:itamoto:20180328211719j:plain
左上のピンクのが通信するデバイス、他はそれに繋いでつかうコントローラーやセンサー。

これらは無線で通信するVIVITAで開発したハードウェアで、 通信する部品にセンサーやモーター等を接続して、アプリで認識させて使います。 センサーやモーターの動きをアプリ上でビジュアルプログラミングする事で制御できます。 f:id:itamoto:20180328211745p:plain こんな感じで線でつないで動きをプログラムしていきます。

去年と今年で2回、このVIVIPARTSを使った子ども向けのロボコンを開催しました。
（第二回のロボコンの様子は弊社エンジニアのかっしーが記事を書いています。）
小学生と二人三脚で企画した協力ロボコン - VIVITABLOG

上記画像でプログラムされている動作は、ボタンを押すたびにサーボモータを決まった２つ角度に交互にスイッチするというものです。
ロボットのアームの開閉をする仕掛け等に使うのに子どもたちの間でもメジャーなアルゴリズムなんです。

このアルゴリズムも誰か1人が思いついてやり始めたのが、いつの間にかみんな使ってるんですよ。
カリキュラムもないから、子どもたちが互いに教えたり、教えてもらったりする場になってるのが本当に良いな、と感じてます。

また、タイトルにしたように、"プログラミングを楽しいと思ってもらえるツール"にしていきたいので 実際にビジュアルプログラミングだけではなくコーディングをできるようにしたり、
自分のアルゴリズムやコードをシェアしたりする仕組みを作ったりすることも考えてますので、
まだまだ、やりたい開発がたくさんあります。

というわけで、今後VIVISTOPの運営やVIVIPARTSの開発を通して経験した事を書いていけたらな、と考えています。

例えば
* マルチプラットフォームアプリ開発のフレームワークやオープンソース
* Raspberry Pi 3 ✕ Android Things開発
* ハードウェア、ファームウェアエンジニアとのやりとり
* 子どもたちの為のアプリUI

今回はこの中でHTMLのCanvas上で開発できるオープンソースについて書きました。

今回紹介する内容

上記のようなビジュアルプログラミングをするAndroidアプリを iOSやPCブラウザでも動かせるように、JavaScriptでワンソースでやってみようと動き始めたのが始まりです。

ビジュアルプログラミングをするようなアプリで、
ドラッグアンドドロップで自由にレイアウトできる作りなのでHTMLでCanvasを使うことをまず決めました。

Canvasを扱うJavaScriptのフレームワーク選定

ゲーム開発で使われているようなJavaScriptのフレームワーク選定をしました。

本格的なゲームではないんだけど、ちょっとリッチなUIのアプリを iOSとAndroidでワンソースで作りたいとかって人には参考にしてもらえたら幸いです。

主な評価基準

  • WebGLに対応しているか
    • 操作感をネイティブアプリに引けをとらないものにしたい
  • 実装の容易さ
    • Documentはしっかりしてる？
    • 開発者の好みが反映されてます
  • フレームワーク自体のリリース時期と更新頻度
    • 開発止まってるものは使いたくないし安定しているものが良い
    • コミュニティに活気があるか？

選定対象にしたフレームワーク

  • PixiJS

    • WebGL ◯
    • 実装の容易さ ◎
    • 安定性、更新頻度 ◯

  • enchant.js

    • WebGL ◯
    • 実装の容易さ ◯
    • 安定性、更新頻度 ◯

  • Phina.js

    • WebGL ◯
    • 実装の容易さ ◯
    • 安定性、更新頻度 △（国産OSSで比較的新しい）

  • CREATEJS

    • WebGL ◯
    • 実装の容易さ △
    • 安定性、更新頻度 ◯

  • konva.js

    • WebGL ✕
    • 実装の容易さ ◎
    • 安定性、更新頻度 ◯

フレームワーク評価まとめ

評価基準とそのざっくり評価を書いてみました。
開発が止まってそうなものは事前に除外しましたので上記には入ってません。
WebGLを必須と考えても、絞り込めませんでしたので、 結局は開発者の好みというのが出そうです。 （自分の場合はドキュメントがしっかりしてたり、サンプルが面白かったりでも絞込み）

選定した時点での評価でもあるので、開発も進められているようですし、 今後利用される場合には作りたいもので評価基準を決めて再評価したほうが良いですね。

今回採用したのはPixiJS。

実際にPixiJSを使って開発を進めているなかで、 ネイティブで開発するのと比較した場合に気になった点を幾つか挙げてみます。 これらの点はPixiJSに限った話ではないと思います。

ドラッグアンドドロップする際のレイテンシー

今回のアプリの性質上そこまでシビアに求められるものではないので、合格水準ではあるが、ネイティブの方が快適ではあります。
スマートフォンアプリゲームを置き換えようとすると難しいケースもまだまだ多そうです。 計測するとPCのブラウザ、Androidスマートフォンでも60FPSは出ているのは確認できました。 安定してこのFPSが出せるか、というとドラッグアンドドロップの動作をさせている最中等で瞬間的に数値が落ちている事もありました。

WebGL利用しているので文字や細かい描画が荒く見える場合がある

描画の精度は設定可能なのですが、処理速度とのトレードオフなので調整必要です。 文字や小さな画像をきれいに表示しようとするとどうしてもFPSが落ちてしまいます。 定形の文字列は画像にして、PixiJSのAPIで図形描画を使わない等の工夫をしました。 　

最後に

今後もVIVITAの活動の裏側を知ってもらえたり、技術的にも参考にしてもらえるような紹介ができたらと思ってます。 よろしくお願いします！