読者です 読者をやめる 読者になる 読者になる

Sierra+Hammerspoonでキーバインドを設定する

Emacs Mac Lua Sierra

新MBPのセットアップをしていたところ、愛しの Karabiner が Sierra に倒されてしまったという報を聞き、 Hammerspoon に乗り換え。
(Karabiner にはなにかしらの形で恩を返したい…)

Karabiner 使えない対策: Hammerspoon で macOS の修飾キーつきホットキーのキーリマップを実現する - Qiita
Hammerspoonで macOS Sierra + Xcode に emacs ライクなキーバインドを設定した - Qiita
Hammerspoon docs

このあたりを見つつ。
長ったらしいですが Emacs 以外で Emacs Like なキーバインドをやろうというヤツ、以上。です。
kill の再現にちょっとハマった。
nginx lua なども通ってこなかったので、まさかこのタイミングで Lua プチ入門するとは…という思い。
C-x 系のキーバインドも増やしていきたい。

gist.github.com

YAPC::Hokkaidoのつくりかた #yapcjapan

Event

http://yapcjapan.org/2016hokkaido/

今年もつつがなくお祭りを終えることができました。
今まで以上にいろんなことをやらせていただいたので備忘や知見の共有も兼ねてまとめておきます。

体制

コアスタッフは7名
このうちJPAからは代表理事(nekokakさん)とわたし(小間使い)が参画。

準備

  • Webサイトコーディング/更新
  • 文言(About、トークレギュレーション、チケット販売、#yapcjapanに流したお知らせ、PassMarket経由のお知らせ、etc、etc...)の作成
  • 入稿データチェックおよび入稿作業
  • スポンサー様とのやりとり(一部)
  • YAPCブログ編集
  • 個人スポンサーノベルティ内容検討〜手配
  • その他球拾い

を主にやっていました。

大きな舵取りはねこかくさんに、会場の手配など道内の作業は永谷さん、くみさん、篠原さんに。お金まわりとスポンサー様とのメインのやりとりは貞永さん、ねこかくさんに。目玉企画であるところのクラウドセッションはふぉんさんに。その他細々したところをりこさんに拾っていただきつつ進めていきました。

忙しさには波がありましたが、それぞれが「確認する」「決める」「手を動かす」の3つを定常的にやっていた気がします*1

確認する

基本的にリモートかつ東京-北海道で離れているので、オンラインコミュニケーションは密に取りつつ、タスクを持っている人の状況がわかるようにissueを切ったり声をかけたりスプレッドシートにまとめたり。

決める

「これどうなってたっけ?」を極力減らす。自分で決められることはさっさと決めて周知。判断が付かないものはさっさとエスカ。

手を動かす

やるべきことと方向性が決まればあとは走るのみ。うまく走れていない人がいれば手助けを、逆に自分が走れていないなというときは早めに助けを求めるようにしていました。

当日

途中までA会場の番長(進行など)をやっていたんですが、遊撃を担当するほうが会がスムーズに回りそうということでaloelightさんにお願いして引き継ぎ。
スペシャルセッションにご参加された福田さんに飛行機が新千歳にたどり着けないというアクシデントもありましたが、予めリハーサルしていたかのようにしっかりとハングアウトにフォールバックされて、皆さんの対応力の高さにおののきました。
当日スタッフとして入っていただいたみなさまにもたくさんたくさん助けていただきました。ありがとうございました!

ふりかえり


最低限礼節をわきまえたメールのやりとり、モノの取りまとめや発注、コーディング、想定外の事態への対応力、などなど、今まで各所でやっていたあれやこれやが全部必要になる面白いお仕事だと改めて思いました。
もちろん人により向き不向きがあるので、それは各メンバーが補完しあえばいいだけの話なのですが、一人あたりのカバー範囲は広ければ広いほど柔軟な対応ができますね。

「エイヤ人」の存在

前述の「確認する」とか「決める」とかって、手を動かすことよりは実際のコストはあまりかからないのにやたら体力をつかうアクションだと思っていて、なかなか手が付けられなかったりするんですよね。
出た案に対して賛同は出ても、それを具体化して問題点を事前に洗い出したうえで粛々と実行していく…というのはけっこう骨が折れます。
みんな忙しい、でもデッドラインはずらせないという状況で、腹を括ってエイヤとやっつけてしまおう!と旗を振れる(責任を持って動ける)人というのが、カンファレンス運営には不可欠だなと他のコミュニティの話を聞いていても思いますし、正直ここが一番冗長化が難しそうです。
全員が本業のかたわらでの参加で、そこまでの(精神的な)コミットを求めるのは厳しかったりもするんですが、中途半端に関わるよりはそのほうがぜったい楽しいです。ので、ぜひ。



「持続可能なカンファレンス」

カンファレンスの運営は、100%とはいかずとも、あるていどはフォーマット化することができると思っていて。
ほぼ0の状態からリブートした今回は、今のコアメンバーが抜けたとしても持続可能なYAPC::Japanを作っていくために色々と試行錯誤をしてみています。
次回のYAPC::Kansaiか、次々回のYAPC::Fukuokaまでには一通りのテンプレートが揃うんじゃないかなと目論み中。
この先も各地のpmとタッグを組みつつ、色々なところで楽しくYAPCができるといいなー!

感想

先に「ほぼ0の状態から」と書きましたが、体制面はそうでも「YAPCというカンファレンスの知名度」「ブログを書くまでがYAPC」などなど、先代の皆さまと、YAPC::Asiaから変わらずYAPCを愛してくださっている参加者の皆さまのお力をたくさんお借りしているんだなと改めて感じた会でもありました。本当に有り難いです。

永谷さんがぜひ北海道で!と声を上げてくださったこと、篠原さんくみさんふぉんさんりこさんにとっっってもサポートいただいたこと、ボランティアスタッフの皆さまのご助力、各スポンサー様のご協力、そしてねこかくさんの大旗振りがあってこそのYAPC::Hokkaidoでした。
とてもたのしいお祭りでした。改めまして、ありがとうございました!



それではみなさん、来年の3/4に大阪にてお会いしましょう!

*1:文字にすると当たり前っぽいんですが、これが意外と難しい

YAPC::HokkaidoでLTしてきた #yapcjapan

Event 登壇

せっかくYAPCがリブートしたっていうのにPerl成分ゼロの発表をしてしまった…!後悔はしていません。


システム設計って、あるていど経験を積むと「なんとなくしっくりくるかこないかで判断」できるようになってきて、
「ざっくり判断したのちにそれを裏付けるロジックを組み立てていく」という流れを取るようになるのかなと思っています*1
サービス設計やUI設計をやらせてもらうようになって、この感覚がある程度横にスライドできるなということに気づけたのが自分の中ではわりと大きかったので、趣味プロダクトやOSS業などでみなさんにもお役立ていただければなと思い発表しました。

さて、YAPC::Hokkaidoではコアスタッフをやっていたわけなんですが、こちらについては書きたいことが山のようにあるのでまた後日したためます。私のYAPCはまだまだ終わらないぞ*2

*1:出典元は恩師じごろうさんのお言葉です

*2:なお残タスクも山のようにある模様

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

JavaScript HTML5 Surface 案件 展示

とても久々に(というかわりと初めてまともに)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予選敗退しました

Event

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

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