極小規模のフロントエンド開発をしてみたまとめ@2016年

とても久々に(というかわりと初めてまともに)HTML5 な Web アプリを作った気がするので、作ったものとやって捗ったことをまとめておく。

つくったもの

f:id:ar_tama:20161117154217p:plain

理研の仁科加速器研究センターさんの展示コンテンツ。
陽子・中性子の数を組み合わせて原子核を探してみよう、というもの。

まずはこちらをどうぞ:
原子核を見つけよう! – 仁科加速器研究センター

コーディングスタイル

こちらを参照しながら生JSで書いてみた。
Google流 JavaScript におけるクラス定義の実現方法

AltJSは長くメンテするプロダクトではない+重厚長大にはならないと判断しスルー。

ライブラリ

Three.js

three.js - Javascript 3D library

JSで3Dを手軽に扱うためのライブラリ。Processingの3Dと似たかんじで書ける。
ただ重力(引力)が特定"方向"のみにしかかけられず、特定の点(x, y, z)に対しては発生させられずじまいで、原子核を「それっぽく」見せるのが難しかった。
結局Unityで特定点(0, 0, 0)に引力を発生させて球を集め、座標を緯度経度の歪みを取りつつ計算して外部ファイル化という力技*1で解決。
個数によってもちょうどよくおさまる座標が違うので、合計個数に応じてよむファイルを変えたりもした。

Tween.js

GitHub - tweenjs/tween.js: Javascript tweening engine

おなじみTweenのJS移植版。
メソッドチェーンでモリモリ書ける。

simple-drawing-board.js

今さらcanvasにフリーハンドで絵が書けるライブラリ - console.lealog();
GitHub - leader22/simple-drawing-board.js: Just simple minimal canvas drawing.

手書きでコメントを残してもらいたいシーンがあり活用させていただきました。:pray:
描画領域は base64 encoded image として取得できるので、local storage に保存→次のシーンで background-image 指定して表示、という使い方をしていた*2

Gulp

  • gulp-sass
    • 途中まで生CSSでがんばっていたけど、いったい何と戦っているんだ感が出てきたので早々に移行。postcssで揃えてもよかったかもしれない。
  • gulp-autoprefixer
  • gulp-postcss
    • vendor prefix(-webkit とか -ms とか)をつけてくれる君を postcss で。Chrome で開発して Edge で動作確認していたのでとても重宝した。input:range は鬼門…!
  • gulp-concat
  • gulp-uglify
  • gulp-cssmin
    • おなじみの。

Surface

(展示機は日本マイクロソフトさまのご厚意により Surface BookSurface Pro 4 をお借りしておりました)
Book は GPU なしモデルだったけどパフォーマンスが著しく悪いということはなく、どちらも安定していた*3
当日ずっと動かしていると描画が重くなってしまった(リロードしたら直る)けど、これはメモリリーク対策が不十分だっただけだと思う。

あとは Windows Hello がとてもストレスフリーでよかった(PCを開いた意瞬間に顔を認識してロック解除してくれる)。Touch Bar よりよいのでは。

そしてペンが便利すぎてこうなった。

twitter.com

Microsoft Edge

開発中は基本的にはあまり不満はなかった。デバッガも Chrome と同じノリで使える。
まだ開発途中ということもあるのか、展示で使うには以下がつらかったのでメモ。

  • フルスクリーンモードがない
    • window.open で新しくウィンドウを開いてもアドレスバーが出たまま。なおリロードは効かず。ウィンドウサイズの調整がなかなか厳しかった*4
  • Webページが保存できない
    • データのエクスポートを兼ねてCtrl+Sでさくっと保存しようとしたらどうがんばっても効かなくて泣いた。展示中はデータをlocal storageにおいていたのでそちらをエクスポート(気合でコピペ)。

*1:社長謹製

*2:会場内ではネットワークが使えなかったので、ローカルで完結させるために local storage を使用

*3:まあたいしたことしてないからなのだけど

*4:特に Three.js で window.innerWidth / Height を使って全面に描画をしていたので、わりかしハマった