「みんなでつくろう天の川」技術メモ

こちらは、「みんなでつくろう天の川」開発の技術メモです。

最初は、できるだけ小さなプロジェクトにするつもりで開発をスタートしました。まずはProcessing、Webサイトでの閲覧も考慮してP5.jsに移行し、さらにスピードが足りずにThree.jsに行き着きました。ハードウェアは、Raspberry Piも検討しましたが、スキャナドライバの安定性からMacを利用。

スピードとWebサイトとの連動を考慮すると徐々に規模が大きくなり、最終的にはNode.js + Expressを中心としたつぎのような構成になりました。学習しながら、増築していったセルフビルド建築のようなものなので、いびつな構成だとおもいます。

今回の開発のおかげで、すこししか触っていなかったNode.jsの理解がすすみました。Nodeには膨大なモジュール群があるので、それらを組み合わせる「ブロック工作」の感覚でWebアプリを開発することができました。

マシン

  1. Mac mini – スキャナドライバ、アップロード
    • Scansnap – スキャナ
  2. MacBook Pro – プロジェクション、Webクライアント
  3. VPS – Webサーバ

マシンは冗長性をもたせています。基本的には1−2−3の3台構成ですが、故障時にそなえて、1、2、1-2、1-3、2-3でも展示可能になっています。

サーバ

  • Python3 + OpenCV3 – 画像認識
  • nginx – Webサーバ
  • Node.js – サーバサイドJavaScript
    • Express – Webアプリケーション・フレームワーク
    • Socket.IO – リアルタイムアプリ・フレームワーク
    • sharp – 画像変換
    • moment – 日付時刻処理
    • pm2 – Nodeの常時起動と監視 (Keymetrics)
  • MongoDB + Mongoose – データベース

フロントエンド

  • JavaScriptライブラリいろいろ
    • three.js
    • stats.js
    • dat-gui
    • tween.js
    • d3.js
    • moment
    • tinycolor
  • Foundation – CSSフレームワーク

ローカルマシン(スキャン用)

  • Node.js – アップロード用アプリ
    • chikidar – フォルダ監視
    • pm2 – アプリの常時起動
  • httpie – APIリクエスト

ローカルマシン(展示用)

  • Electron – 展示専用アプリ開発(マルチプロジェクション、リモート操作のウィンドウ)

https://gyazo.com/ff7eedf22bbec129a20e2be5414091fa

エディタ

  • Atom

バージョン管理(というよりもリポジトリとして)

  • github