2017年夏、Apple ATS対応における試行錯誤
ATS（App Transport Security）*1対応にかんして、あれこれ試してみた結果を備忘的に残しておこうという記事です。
なんか延期とか言われてますけどね…
ATSの概要と詳細については以下:
[iOS 9] iOS 9 で追加された App Transport Security の概要 ｜ Developers.IO
TL;DR
結論
Cocoa Keys/App Store Review for ATS にあるように、
今回のケースは（きっと）
Must connect to a server managed by another entity that does not support secure connections
に該当するはずなので、 NSAllowsArbitraryLoads を立ててレビューをゴリ押しする…のがよさそうですね。
ただ一度は全展開がアナウンスされた機能ですし、レビューで蹴られるポイントを増やすのもなー、ということで、Azure Functionsでさくっとプロキシさせることに*2しました。PaaS最高。
ただこれ、どう考えてもAppleの思惑からは大きくずれているんですよねえ…。
Sierra+Hammerspoonでキーバインドを設定する
新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 系のキーバインドも増やしていきたい。
YAPC::Hokkaidoのつくりかた #yapcjapan
今年もつつがなくお祭りを終えることができました。
今まで以上にいろんなことをやらせていただいたので備忘や知見の共有も兼ねてまとめておきます。
YAPCとは？
準備
- Webサイトコーディング/更新
- 文言（About、トークレギュレーション、チケット販売、#yapcjapanに流したお知らせ、PassMarket経由のお知らせ、etc、etc...）の作成
- 入稿データチェックおよび入稿作業
- スポンサー様とのやりとり（一部）
- YAPCブログ編集
- 個人スポンサーノベルティ内容検討〜手配
- その他球拾い
を主にやっていました。
大きな舵取りはねこかくさんに、会場の手配など道内の作業は永谷さん、くみさん、篠原さんに。お金まわりとスポンサー様とのメインのやりとりは貞永さん、ねこかくさんに。目玉企画であるところのクラウドセッションはふぉんさんに。その他細々したところをりこさんに拾っていただきつつ進めていきました。
忙しさには波がありましたが、それぞれが「確認する」「決める」「手を動かす」の3つを定常的にやっていた気がします*1。
確認する
基本的にリモートかつ東京-北海道で離れているので、オンラインコミュニケーションは密に取りつつ、タスクを持っている人の状況がわかるようにissueを切ったり声をかけたりスプレッドシートにまとめたり。
決める
「これどうなってたっけ？」を極力減らす。自分で決められることはさっさと決めて周知。判断が付かないものはさっさとエスカ。
手を動かす
やるべきことと方向性が決まればあとは走るのみ。うまく走れていない人がいれば手助けを、逆に自分が走れていないなというときは早めに助けを求めるようにしていました。
当日
途中までA会場の番長（進行など）をやっていたんですが、遊撃を担当するほうが会がスムーズに回りそうということでaloelightさんにお願いして引き継ぎ。
スペシャルセッションにご参加された福田さんに飛行機が新千歳にたどり着けないというアクシデントもありましたが、予めリハーサルしていたかのようにしっかりとハングアウトにフォールバックされて、皆さんの対応力の高さにおののきました。
当日スタッフとして入っていただいたみなさまにもたくさんたくさん助けていただきました。ありがとうございました！
ふりかえり
カンファレンス運営って社会人スキルの総合格闘技ってかんじする
— あらたま (@ar_tama) 2016年12月8日
最低限礼節をわきまえたメールのやりとり、モノの取りまとめや発注、コーディング、想定外の事態への対応力、などなど、今まで各所でやっていたあれやこれやが全部必要になる面白いお仕事だと改めて思いました。
もちろん人により向き不向きがあるので、それは各メンバーが補完しあえばいいだけの話なのですが、一人あたりのカバー範囲は広ければ広いほど柔軟な対応ができますね。
「エイヤ人」の存在
前述の「確認する」とか「決める」とかって、手を動かすことよりは実際のコストはあまりかからないのにやたら体力をつかうアクションだと思っていて、なかなか手が付けられなかったりするんですよね。
出た案に対して賛同は出ても、それを具体化して問題点を事前に洗い出したうえで粛々と実行していく…というのはけっこう骨が折れます。
みんな忙しい、でもデッドラインはずらせないという状況で、腹を括ってエイヤとやっつけてしまおう！と旗を振れる（責任を持って動ける）人というのが、カンファレンス運営には不可欠だなと他のコミュニティの話を聞いていても思いますし、正直ここが一番冗長化が難しそうです。
全員が本業のかたわらでの参加で、そこまでの（精神的な）コミットを求めるのは厳しかったりもするんですが、中途半端に関わるよりはそのほうがぜったい楽しいです。ので、ぜひ。
企画倒れする会にありがちなのは旗振り人の不在だけど、誰も旗振らなそうだなって思ったときにエイヤと旗を持つ（もしくは誰かに渡して後ろから支える）ことができる人はあんまりいないみたい。みんななんとなくやばいかもなって思ってはいながらも、ゆるやかに倒れていくような。
— あらたま (@ar_tama) 2016年9月30日
エイヤ人と名付けよう
— あらたま (@ar_tama) 2016年9月30日
感想
「12月はたいして降らないから開催できるはず」という言葉をたよりにやっていたから途中まであの雪も想定範囲内なのかなとか思ってたけど全然違った。そんな中無事開催できて、たくさんの人にも来ていただけて、そしてなにより刺激にあふれるよい会となったようで本当に本当によかった…。感慨深い。
— あらたま (@ar_tama) 2016年12月12日
先に「ほぼ0の状態から」と書きましたが、体制面はそうでも「YAPCというカンファレンスの知名度」「ブログを書くまでがYAPC」などなど、先代の皆さまと、YAPC::Asiaから変わらずYAPCを愛してくださっている参加者の皆さまのお力をたくさんお借りしているんだなと改めて感じた会でもありました。本当に有り難いです。
永谷さんがぜひ北海道で！と声を上げてくださったこと、篠原さんくみさんふぉんさんりこさんにとっっってもサポートいただいたこと、ボランティアスタッフの皆さまのご助力、各スポンサー様のご協力、そしてねこかくさんの大旗振りがあってこそのYAPC::Hokkaidoでした。
とてもたのしいお祭りでした。改めまして、ありがとうございました！
それではみなさん、来年の3/4に大阪にてお会いしましょう！
*1:文字にすると当たり前っぽいんですが、これが意外と難しい
YAPC::HokkaidoでLTしてきた #yapcjapan
せっかくYAPCがリブートしたっていうのにPerl成分ゼロの発表をしてしまった…！後悔はしていません。
システム設計って、あるていど経験を積むと「なんとなくしっくりくるかこないかで判断」できるようになってきて、
「ざっくり判断したのちにそれを裏付けるロジックを組み立てていく」という流れを取るようになるのかなと思っています*1。
サービス設計やUI設計をやらせてもらうようになって、この感覚がある程度横にスライドできるなということに気づけたのが自分の中ではわりと大きかったので、趣味プロダクトやOSS業などでみなさんにもお役立ていただければなと思い発表しました。
さて、YAPC::Hokkaidoではコアスタッフをやっていたわけなんですが、こちらについては書きたいことが山のようにあるのでまた後日したためます。私のYAPCはまだまだ終わらないぞ*2！
極小規模のフロントエンド開発をしてみたまとめ@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においていたのでそちらをエクスポート（気合でコピペ）。
チームおにやんま - 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
集合。朝ごはんを食べ、お昼を買い込む。
チームあさやんま #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。
わたわたしながら終了を迎える。
感想
はーくやしい。くやしいけど、これが実力。これが ISUCON です。
反省点として一番大きいのは、htmlify の根本改善にほとんど手をつけられなかったこと。
キャッシュしたタイミングで CPU はりつきを解消できなかったことにもっと目を向けるべきでした。
Response time やスロークエリ以外の指標についての方針も定めておきたいところ。
あとはどうみても「はてなキーワードを支える技術」なのだから、とりあえずぐぐったらなにか知見が得られるはずというところに気づけばよかったですね！
しかし、1年分の素振りは主にオペレーションの面でしっかりと効いており、かなり手応えを感じられました。
今回は「できることをやって点を稼いだ」という感が否めなかったので、次はしっかり根本的なアプローチを画策しつつ点を稼ぐという二輪でやっていきたいです。
…と、こうして次回があることを期待してしまうのは心苦しいところもあるのですが、本当にステキなイベントなので、ぜひ来年もよろしくお願いいたします…！
おわりに
過去6回の定例の様子です
*1:理解は深まったけど、完全に深読みしすぎで複数回デプロイポチしてRG量産するほうが早かった。後述。
*2:深追いできなかったけどコピー禁止設定とかあったのかなあ
*3:Xslateのオブジェクトをキャッシュしようとしていたからだった。結局id:karupaneruraの手を煩わせてしまった…反省
*4:sleep 忘れ
株式会社セオ商事に入社しました
企画とエンジニアリングの総合商社です（社員3名）。
ものづくりのお手伝いや、エッジのきいたおもしろいことをやらんとしています。
入社前から聞き手②を担当させていただいていました。最新回はJAXAの方にお話をうかがっています！
社長の瀬尾さんとは2011年に面白法人カヤックでバイトしていた頃からのご縁で（なおカヤックを知ったきっかけは瀬尾さんの著書）、いつか何らかの形でお仕事をご一緒できたらいいなと思っていました。
今年に入り、会社化にあたって1人目の社員としていかがでしょうとお誘いをいただき、今に至ります。なかなかステキでしょ！
もうひとりのメンバーは去年の BlueNote Jazz Festival でお会いしたリーナさん。本職はエディトリアル・デザイナーさんで、デザインとエンジニアリングをお手伝いいただいています。
おふたりとも音楽に精通してらして、とても勉強になります。いつかバンドとかやりたい。
オフィスはみなとみらいの BUKATSUDO というシェアスペースの一角を間借りしています。
レコード部と部屋を同じくしていて、レコード聴き放題とか、社長のモジュラーシンセを使い放題とか、なにかと充実しています。
こんなかんじ。
アプリやWebサイト・デジタルデバイスなどの企画・制作のご相談とか、こういうことやってみたいんだけど的なふわっとしたお話とか、とにかく飲もうとか、お誘いお待ちしております！
週に1, 2日は渋谷のTHE GUILDにもおります*1ので、都心な方もそうでない方もお気軽にお声かけくださいませ。
追記
twitter.comなお CMO（Chief Mochimochi Officer）に就任いたしましたことをご報告申し上げます
— あらたま (@ar_tama) August 1, 2016
*1:セオ商事はTHE GUILD のメンバーでもあります