極小規模のフロントエンド開発をしてみたまとめ@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 を使って全面に描画をしていたので、わりかしハマった

チームおにやんま - ISUCON6予選敗退しました

今年もいすこんに参加してきました。
運営メンバーのみなさま、今年もありがとうございます。

ISUCON5から今回までの準備はこちら
techblog.karupas.org

反省会の様子はこちら
ofsilvers.hatenablog.com

より突っ込んだ感想などはid:karupaneruraがまとめてくれるので、わたしは当日のチームの動きについてざっと書いておきます。

準備

前日の主にAzureまわりについて軽く。その他の準備についてはこちら

前日までのAzureでの素振りは(matsuuさんが素振り用テンプレートを公開してくださるまでは)自分たちでひととおりGUIから用意していた。
ただエントリーが開始になって、案内のメールに

・開始時刻になると、ログイン後の画面にて予選用イメージURLが閲覧可能となります

と書いてあり、全部いりのテンプレートが来るのか「VMそのもののイメージURL(vhd)」がくるのかわからなかったので、とりあえず同一RG内に人数分のVMを用意できるような準備が必要かなと深読みしてスクリプト化した*1
isucon6-qualifier/tools/azure at master · karupanerura/isucon6-qualifier · GitHub

当日の動き

08:30-09:00

集合。朝ごはんを食べ、お昼を買い込む。
https://www.instagram.com/p/BKefk6bha8-/
チームあさやんま #isucon #きょうのもちもち

09:00-10:00

わりと余裕を持って準備。
もともと自分のサブスクリプション上で予選のすべてのリソースをまかなうつもりだったけど、VM立ち上げ+コピー時に事故るとつらいので、他メンバにRG作成+招待まで行っておいてもらった。

10:00-11:15

前述のコピースクリプトを打つにはいったん deallocate しないといけないので、まず立ち上げて動作確認&コードのコミットをすることに予め決めていた。
ベンチも回しとこうと試してみるものの、タイムアウト頻発で fail して、そんなはずは…と思い他言語で試してみるものの、fail。
その間に、何かあったときにすぐ移れるようにバックアップとしてもう一つRGを作り、デプロイしつつ、メインのVMを deallocate。
スクリプトを走らせてみるものの、CLIから取得したイメージのURLが404でコピーがかなわず*2、20分ほどハマってRG量産プランに変更。
id:ofsilvers にはバックアップ機で作業してもらうことにして、そこで再度ベンチを走らせたところ、何もしてないけどスコアが出た(2500くらい)。
「これが…インスタンスガチャ…!」

11:15-12:00

id:karupanerura 謹製の ansible も上記のわたわたで流せておらずプロファイルが取れていなかったものの、ざっとサービスを見た&コードを読んだ状態でやれそうなことをホワイトボードに書き出し。
それぞれの大まかな対応方針もそこで話し、仕掛かる順番はプロファイリング後だねということでいったん待ち。
その間に id:karupanerura は nginx/mysql まわりの conf の反映を、わたしは足す予定だった table(entry が持つ keyword のリスト)の定義をさくっと作ってコミット(これは結局使われなかったけど)。

12:00-15:00

プロファイルを取って、htmlifyの `SELECT * FROM entry` が重い(知ってた)から潰していくことに。
まず keywords だけ取ってくるようにしてから、ソートされた keyword だけをプロセスキャッシュした(45000点くらい/エラーあり)。
プロセス跨いでキャッシュしようということで memd に入れ替えたらエラーなし20000点ほどに下がってアレレとなる。
ミドルウェアあたりの問題が少なそうということで、手の空いたid:karupaneruraが isutar の N+1 クエリを、id:ofsilversが各 table の index をいいかんじにしてくれていた。
keywords のキャッシュを終えたあと、トップの記事表示のクエリ(SELECT * FROM entry + limit + offset + order by)の改善とかもしてみたけど大してスコアに寄与せず。

15:00-16:00

やっぱ htmlify の処理が重いね、とまずはごっそりキャッシュしてみる。
更新系のリクエストがきたタイミングでキャッシュは破棄する必要があったけど、破棄するより(エラーは出るけど)そのまま突っ走るとスコアが上がることに気づく(90000くらい)。コードはいったん破棄のままで。
そして isutar はいらないこだったので isuda に寄せる(このとき keywords で引くのではなく entry_id で引くように変更)。38000くらい。
そのすきにid:karupaneruraはKYTProfうったり、systemd まわりの ansible 化(task:perl が爆誕)をしてくれていた。

16:00-17:00

いったん手を止めて話し合う。
17:00になったら再起動することを再確認して、
結局ボトルネックは/、スロークエリには SELECT COUNT(*) がでていたことからカウント取るくんを Redis に置くなど。
このあたりでキャッシュ時のシリアライズに失敗しだして慌てる*3
id:karupaneruraは一念発起してワーカー書くぞ!!となっていたのでどうぞどうぞする。
id:ofsilversはベンチと動作確認のかたわら mysql dump / restore などをやってくれていた。

17:00-18:00

再起動テスト、細々した改修(プロセス数の調節など)をしつつ、点数が出る構成にシフト。
memd を全廃してプロセスキャッシュに入れ替える。
ここで初期データをキャッシュにのせるの忘れてた!となり慌てて用意を始める(入らず。無念)。
worker 実装も Redis やばい、ビジーループ起こしててやばいとの声が隣から聞こえてくる*4
わたわたしながら終了を迎える。

18:00-

反省会
反省会中に結果が出て愕然として、sshしてみると確かに Perl の service が立ち上がっておらず 502 を返していた…。

感想

はーくやしい。くやしいけど、これが実力。これが ISUCON です。
反省点として一番大きいのは、htmlify の根本改善にほとんど手をつけられなかったこと。
キャッシュしたタイミングで CPU はりつきを解消できなかったことにもっと目を向けるべきでした。
Response time やスロークエリ以外の指標についての方針も定めておきたいところ。
あとはどうみても「はてなキーワードを支える技術」なのだから、とりあえずぐぐったらなにか知見が得られるはずというところに気づけばよかったですね!

しかし、1年分の素振りは主にオペレーションの面でしっかりと効いており、かなり手応えを感じられました。
今回は「できることをやって点を稼いだ」という感が否めなかったので、次はしっかり根本的なアプローチを画策しつつ点を稼ぐという二輪でやっていきたいです。

…と、こうして次回があることを期待してしまうのは心苦しいところもあるのですが、本当にステキなイベントなので、ぜひ来年もよろしくお願いいたします…!

おわりに

過去6回の定例の様子です
https://www.instagram.com/p/877rysLKuq/
https://www.instagram.com/p/_vcXggLKoX/
https://www.instagram.com/p/BAetckHLKsc/
https://www.instagram.com/p/BCCNtrDLKjv/
https://www.instagram.com/p/BIeIinZhKyv/
https://www.instagram.com/p/BKcd-6SBQj9/

*1:理解は深まったけど、完全に深読みしすぎで複数回デプロイポチしてRG量産するほうが早かった。後述。

*2:深追いできなかったけどコピー禁止設定とかあったのかなあ

*3:Xslateのオブジェクトをキャッシュしようとしていたからだった。結局id:karupaneruraの手を煩わせてしまった…反省

*4:sleep 忘れ

株式会社セオ商事に入社しました

theocorp.jp

企画とエンジニアリングの総合商社です(社員3名)。
ものづくりのお手伝いや、エッジのきいたおもしろいことをやらんとしています。

こちらはセオ商事のメインコンテンツ、SFにまつわるポッドキャスト
入社前から聞き手②を担当させていただいていました。最新回はJAXAの方にお話をうかがっています!


社長の瀬尾さんとは2011年に面白法人カヤックバイトしていた頃からのご縁で(なおカヤックを知ったきっかけは瀬尾さんの著書)、いつか何らかの形でお仕事をご一緒できたらいいなと思っていました。
今年に入り、会社化にあたって1人目の社員としていかがでしょうとお誘いをいただき、今に至ります。なかなかステキでしょ!

もうひとりのメンバーは去年の BlueNote Jazz Festival でお会いしたリーナさん。本職はエディトリアル・デザイナーさんで、デザインとエンジニアリングをお手伝いいただいています。
おふたりとも音楽に精通してらして、とても勉強になります。いつかバンドとかやりたい。


オフィスはみなとみらいの BUKATSUDO というシェアスペースの一角を間借りしています。
レコード部と部屋を同じくしていて、レコード聴き放題とか、社長のモジュラーシンセを使い放題とか、なにかと充実しています。

f:id:ar_tama:20160801163514j:plain
こんなかんじ。


アプリやWebサイト・デジタルデバイスなどの企画・制作のご相談とか、こういうことやってみたいんだけど的なふわっとしたお話とか、とにかく飲もうとか、お誘いお待ちしております!
週に1, 2日は渋谷のTHE GUILDにもおります*1ので、都心な方もそうでない方もお気軽にお声かけくださいませ。

追記

twitter.com

*1:セオ商事はTHE GUILD のメンバーでもあります

株式会社ディー・エヌ・エーを卒業します

早いもので、入社して3年と少しが経ちました。
5月末に最終出社を迎え、今は初めての巣立ちにしみじみとしながら有給を頂いております。

f:id:ar_tama:20160608215043j:plain
ラスト健保🍣の様子です


YAPC::Asia Tokyo 2011 で hidek さんのお話を聞いて、この会社に入りたい!この部署に行きたい!と叫んでいたらうっかり内定・配属され、
トラフィック・大規模なプラットフォームを、技術力も視座も高いメンバーと大きな裁量をもって開発・運用するという、とても貴重な経験を積むことができました。

進むべき道が見つからず思い悩むこともありましたが、いろんなアドバイスを頂いたり、様々なお仕事を任せていただいたり*1したおかげで、おぼろげながらも次の一手が見えてきたかなということで、今回の決断に至りました。

DeNAという会社はいくつもの部署があり、それぞれに個性的なカルチャーが醸成されているのですが、わたしの在籍していた部(オープンプラットフォーム事業本部)は愛に溢れたとても素敵な環境だと本当に思います。
先輩にも後輩にも同期にもびっくりするくらい恵まれた、幸せな3年間でした。お世話になりました!

今後はしばらくの充電期間を経たのち、新天地でお仕事を始めます。また改めてご報告をば。

*1:エンジニアリングだけでなく、掛けあわせで価値を出せるようなプロジェクトマネージャなどのお仕事も

おにやんま - ISUCON5予選敗退してくやしい話 #isucon

2回めの isucon は @karupanerura@silvers のおふたりと参加してきました。

チームおにやんまの活動

https://instagram.com/p/8Es-fjLKqA/


やったこととふりかえり

3人のだいたいの住み分けは、

  • @karupanerura middleware まわり
  • @ar_tama アプリケーションまわり
  • @silver_s SQL まわり

みたいにざっくり切り分けてとりかかりました。

自分のだいたいの動きとしては、

12:00

とりあえず Perl で動かす→ベンチ叩いてみる→ slowlog と accees_log を集計

12:30

いったん手を止めて方針を相談(自分はとりあえず GET '/' のクエリをなんとかすることにする)

13:00

日記のタイトルと本文の分離をはかりたいがデータ多すぎて alter に時間かかりそうなので尻込みする
(ふりかえり)SQL力が低くて初期データ構造を変更しつつ alter するのを思いつかなかった

13:30

とりあえず get_user とか is_friend とかを使わず join しまくる
(ふりかえり)改修を細かい単位で反映させてベンチ取ればよかった

14:30

relations が双方向 insert されていたので friend まわりのクエリ書き換え
このあたりからしばらく comments_of_friends にハマりまくる

16:00

comments_of_friends の他をなんとかして、
しるばす氏(index 担当)かるぱ氏(nginx + my.cnf 担当)の作業ぶんとマージして 5000 点を超える
=> このへんでかるぱ氏が手が空いてきたとのことだったので footprints まわりと comments_of_friends をお願いする
=> entries あたりに手を出し始める(そしてまた焦ってハマる)
(ふりかえり)そこまでベンチに影響を与えていた部分ではなかったのでとっとと参照系のキャッシュ導入とかすればよかった


というかんじで、前半はわりとスコアアップに寄与できたんですが、後半はノーバリューすぎてつらいかんじでした。
詳しくは反省会にまとまっていますが、余裕をなくさないことがとにかく大事だなと痛感…。
それぞれのアプローチとしてはあまり外していなかったはずなので、次回はうまく各々の役割を分担・遂行できるように進めていきたいです。


ベンチマークが公開されたら(されるのかな?)さっそく復習したいくらいには各人くやしさが募っているので、
来年までキープできるようになにかしらアクションしていけたらと思います。
運営・出題のみなさま本当にありがとうございました!!

メンバーのエントリ

ofsilvers.hatenablog.com

おまけ

f:id:ar_tama:20150928224044p:plain

ワタシとPerl、ワタシとYAPC

エモい話を書くのはためらっていたんですが、皆さんのブログを読んでちょっとだけ触発された*1のでちょっぴり綴ってみます。
リアルタイムで聴けたトークがあまりないので、トーク成分は低めです。

2011

ラスト東工大の年。
@sugyan さんと @umeyuki さんに、開催2週間前に「YAPCっていうお祭りがあるよ、よかったらおいでよ」と声をかけていただいてチケットも持たずに*2飛び入り参加。

着いて早々道に迷って途中でお会いした @toku_bass さんと右往左往しながら前夜祭に滑り込んだり、
キーノートだった @hidek さんのお話に惹かれたのが DeNA に入社するきっかけになったり。
初めて会った @nontan__ と双子なのかと @yappo さんに言われたりしたのもよい思い出です-ω-

身一つで飛び込んだにもかかわらずみなさんによくしていただいて、コミュニティのあたたかさをしみじみ感じたことをよく覚えています。

2012

くしいさんに「スタッフやりたいなー」と言ったらやらせていただけることになりました一回目。東大の年ですね。*3
ランチ交流会とか、LTソンとか、企画に富んだ回でもありました。

当時の感想はこんなかんじ。
YAPC::Asia 2012でスタッフしてきた! - たまめも(tech)

関わっているかた全員がYAPCというイベントを愛していて、それぞれの得意なやりかたでコミットしているんだなあと、今回改めて実感しました。

これはずっと変わっていないですね。愛がね、ありますよね。

2013

日吉一回目。
YAPC::Asia 2013でスタッフしてきた! #yapcasia - たまめも(tech)
当日までやる気いっぱいだったんですがなんと高熱でダウン…。
2日めのドラを叩いたことは覚えてます。miyagawaデカールもこの回だったようす。今でも愛用しています。

幕間の CM で音楽を担当したのですが最後まで再生されておらず、カット部分を上司であるところの @nekokak 先生が LT に飛び入り参加してまで流してくださったという…涙なみだです。

2014

日吉二回目。
牧さんくしいさんコンビが解散し激震が走ることつかの間、次期主宰の @yusukebe さんからお声がかかり、コンセプトメイキングのお手伝いをさせていただくことに。

この年はコアスタッフ、当日スタッフ、スピーカー、個人スポンサー、企業スポンサーと本当にいろんな軸から関わらせていただいて、一番感慨深い回です。
YAPC::Asia 2014でトークしてきた! #yapcasia - たまめも(tech)

今年も去年もコアスタッフとしての実務的なお手伝いはほとんどできなかったのですが、新しい視点でイベントを見ることができてとても勉強になりました…!

2015

ビッグサイト
再び牧さん主宰となった今回は、コアスタッフに片足、メインは当日スタッフという形でお手伝いさせていただきました。*4
キャパ増加にともなってスタッフ数も多く基本的には人が足りているような状況だったので、落とし物の受付や遊撃隊業*5につとめていました。

懇親会中にコア/exコアスタッフ*6と「こうやって息をつくことももうできないんだねー」とお話しして不覚にもしんみり。
久々に会うかたがたとまるで昨日の続きのようにお話しができる空気と環境も、これまた YAPC ならではという感がありますね。

総括

このイベントきっかけで人生が変わったというひとがおそらく一定数いるだろうと思っていますし、わたしもそのうちのひとりです。それってすごいことですね!
恩返しをしきれた実感もないまま幕引きを迎えてしまったわけですが、また別の形で*7コミュニティに関わっていきたいです。

YAPC を取り巻く環境は年々変わっていきましたが、変わらないのはやはりイベントやコミュニティへの愛と、懐の広さなんじゃないでしょうか。
今年の参加者も以前と比べたらいろんな層のかたがたがいらしていて、でも空気はいい意味でそのままで。
わたしは Perl コミュニティのそういうところがだいすきです。
初参加のみなさんにも、こうした魅力のいくばくかを持って帰ってもらえたのであれば、スタッフ冥利に尽きます。

主宰の牧さん、くしいさん、ゆーすけべーさん、スタッフ・参加者のみなさま、本当に楽しいお祭りをありがとうございました。

というわけで、YAPC が終わってもぼくらはズッ友だょ…! というところで、締まらない話を無理やり締めたいと思います。ちゃんちゃん。

*1:これは牧さんの思惑通りでは…

*2:くしいさんはじめスタッフ各位、大変お騒がせしました…よい子は真似しちゃだめだぞ

*3:@sasata299 さんが結婚のきっかけを掴んだのはこの回です!!

*4:トークも応募していたんですが、スピーカー二人の仕事の都合がつかず辞退の運びに>

*5:雑用したり、無限コーヒーへの地図を描いたり、喋りやすい・聴きやすい環境の整備や指示をしたり

*6:@ricoimazu さん、@torii さん、@umeyuki さん

*7:エンジニアらしくコードで還元していきましょう

今年もお祭りをつつがなく終えた #yapcasia

f:id:ar_tama:20150823170813j:plain

たのしかった!

10年続いた "YAPC::Asia Tokyo" としては最後の催行となる今年も、スタッフとして、参加者として、堪能してきました。yapcasia.org

会場のキャパシティも去年に比べてとても大きくなりましたが、それを超えるほどの方々(2000人超!)にお越しいただけて本当に嬉しかったです。暑いなかありがとうございました。
これほどの規模、これほど多方面のエンジニアが一堂に会するお祭りももうしばらくなさそうですが…またどこかで皆さんとワイワイできることを祈っています:D
ご来場いただいたみなさま、いままで携わってこられたすべての方々、本当に楽しいお祭りをありがとうございました!

以下蛇足。


噂のPerl6ワインは白のスパークリングでした。
アルコール低めのすっきりしたお味でおいしかったです!