極小規模のフロントエンド開発をしてみたまとめ@2016年
とても久々に（というかわりと初めてまともに）HTML5 な Web アプリを作った気がするので、作ったものとやって捗ったことをまとめておく。
つくったもの
理研の仁科加速器研究センターさんの展示コンテンツ。
陽子・中性子の数を組み合わせて原子核を探してみよう、というもの。
まずはこちらをどうぞ:
原子核を見つけよう！ – 仁科加速器研究センター
コーディングスタイル
こちらを参照しながら生JSで書いてみた。
Google流 JavaScript におけるクラス定義の実現方法
AltJSは長くメンテするプロダクトではない＋重厚長大にはならないと判断しスルー。
ライブラリ
Three.js
three.js - Javascript 3D library
JSで3Dを手軽に扱うためのライブラリ。Processingの3Dと似たかんじで書ける。
ただ重力（引力）が特定"方向"のみにしかかけられず、特定の点（x, y, z）に対しては発生させられずじまいで、原子核を「それっぽく」見せるのが難しかった。
結局Unityで特定点（0, 0, 0）に引力を発生させて球を集め、座標を緯度経度の歪みを取りつつ計算して外部ファイル化という力技*1で解決。
個数によってもちょうどよくおさまる座標が違うので、合計個数に応じてよむファイルを変えたりもした。
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
- gulp-concat
- gulp-uglify
- gulp-cssmin
- おなじみの。
Surface
（展示機は日本マイクロソフトさまのご厚意により Surface Book と Surface Pro 4 をお借りしておりました）
Book は GPU なしモデルだったけどパフォーマンスが著しく悪いということはなく、どちらも安定していた*3。
当日ずっと動かしていると描画が重くなってしまった（リロードしたら直る）けど、これはメモリリーク対策が不十分だっただけだと思う。
あとは Windows Hello がとてもストレスフリーでよかった（PCを開いた意瞬間に顔を認識してロック解除してくれる）。Touch Bar よりよいのでは。
そしてペンが便利すぎてこうなった。
twitter.comSurface（ペン+キーボードで操作）とMacbook（トラックパッド+キーボードで操作）をいったりきたりしてたら今Macbookの画面に手元のボールペンを振りかざしていて危ないところだった
— あらたま (@ar_tama) 2016年10月27日
Microsoft Edge
開発中は基本的にはあまり不満はなかった。デバッガも Chrome と同じノリで使える。
まだ開発途中ということもあるのか、展示で使うには以下がつらかったのでメモ。
- フルスクリーンモードがない
- window.open で新しくウィンドウを開いてもアドレスバーが出たまま。なおリロードは効かず。ウィンドウサイズの調整がなかなか厳しかった*4。
- Webページが保存できない
- データのエクスポートを兼ねてCtrl+Sでさくっと保存しようとしたらどうがんばっても効かなくて泣いた。展示中はデータをlocal storageにおいていたのでそちらをエクスポート（気合でコピペ）。
