以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

Voxer「spdy始めました。ios/osx用ライブラリiSPDY出しました」

Voxer Engineeringブログ 2014.1.3のエントリ

iSPDY Released | Voxer Engineering

  • トランシーバーに通話・動画・メッセージングが合体したようなアプリをweb/ネイティブ向けに出してるvoxerの近況
  • ceoが米軍特殊部隊上がりとか、ctoがハワイ（しかもカウアイ島）在住とか、nodeコアメンバーがいたりとメンツが面白い会社
  • エントリの本題はosx/ios向けにspdyクライントライブラリ出した件
    • なんだが、ライブラリ出すまでの経緯とか
    • twitterがCocoaSPDY出した件にも触れてて
      • もっと早くだしてくれたら使ってたね、とか
  • コンパクトだが勉強になって楽しい

以下斜め読んだ内容

  • @voxer
  • レイテンシをゼロに近づたいです
  • レイテンシ下がるとユーザはもっとアクティブに。メッセージ送信量up
    • これはログから分かる
  • バックエンドの最適化
    • これはずっとやってきた
    • テクノロジースタック全て
    • 今はnode,redis,riak,smartosつかってる
  • 次はネットワークレベル
    • まずはstud投入
  • そしてspdy
  • voxerアプリは、常にhttpsで話さないといけない
    • httpsという縛りはパフォーマンス面でボトルネック
    • モバイル環境でのレイテンシは、予測不可能
    • レイテンシが小さくなったり大きくなったり、振り幅デカイ
  • あと、パケットの先頭詰まり（head of line blocking）も厄介
  • kee-aliveなコネクション？、pipelining？
    • ちょっと前のvoxerはこの２つを使い、httpsのコネクションプール作って頑張ってた
    • 要は、tlsでのプロトコルネゴシエーション、およびコネクションプールのメンテ
    • これは複雑でしかも遅いんですよ
    • うまい事やってくるライブラリはiosの世界ではなかったし
  • spdy使うメリット？
  • アプリ開発という観点でも実はメリットある
  • spdy使ってみてわかった
    • アプリの挙動把握、デバッグ、メンテ
    • 前よりずっと簡単になった
    • アプリ開発がよりシンプルになった
  • ポイントは、tcpソケット１つで全てのリクエストを捌くという部分
    • エラーハンドリングのロジック、キューイング、再送、バックグラウンドモード
    • 全てが前よりもシンプルになった
  • iSPDY
  • twitterが出したCocoaSPDY
    • twitter/CocoaSPDY
    • 取り組んでる問題はiSPDYと似てる
    • もっと早く出してたら使ってた
    • でもCocoaSPDYで用足りるというよりこれをベースに足りないもの足すと言う感じだが
  • voxierアプリはspdyのserver pushをヘビーに使ってる
    • アプリのリアルタイム更新してる部分
    • 前はwebsocketかhttp pipeliningで頑張ってた部分
    • websocketもpipeliningもトレードオフがあり
      • クライアント、サーバー、ネットワーク、全てのレベルで
  • spdy（とserver push）はリアルタイム更新にとってかなり理想的なソリューション
    • tcpコネクション１つでクライアントにどんどん送れる
  • iSPDYのデザインゴール
    • memory footprintを小さく
    • server pushサポート
    • 発信データのスケジューリング
    • trailing headers
    • pingサポート
    • Content-Encodingヘッダ使ったtransparent decompression
    • ios
      • バックグラウンドでのソケット再要求
      • VoIPモードサポート
    • オプション機能
  • spdy投入はトントン拍子にいった
    • node使ってるし node-spdyがある
  • iSPDY作ったのは、node-spdy作った人（＝Fedor Indutny）
  • stud使って、tls termination
    • node側には暗号化されてないspdyストリームが流れる
    • ここでnode-spdy使う
    • （補足）
      • iSPDYはNPNをサポートしない。
      • readme曰く、最新のOpenSSLをクライアントに同梱必須がネック、と
      • アプリのバイナリサイズ肥大化、アプリ開発の複雑化
  • 古いバージョンのvoxerアプリ、android版など別platform
    • これまで通りhttpsで話す
    • node-spdyがフォールバックしてくれる
  • サーバー側のコードベースは、ほとんどいじらずに済んだ

山内マリコ『ここは退屈迎えに来て』

「俺がこの数年でどんだけEXILEのバラードをカラオケで聴かされたか　お前わかるか？」

  • 地方で暮らす１０〜３０代くらいの人を登場人物にした短編小説集
  • 脇役の「椎名」が全編に登場してる
    • 短編集だがシリーズ物のようになり
    • 同じ地域（と大阪、東京）が舞台になってる
  • どれも面白く読んだが、最初のやつが一番面白い
    • 須賀さんが最初に登場するくだりで吐くセリフが際立ってる
    • 読後はこのセリフしか覚えてない

東京から地元に戻ってもう十年近い須賀さんは、刻々と廃れゆく町の景色に絶望仕切っている。彼は青山のギャラリーで仲間とグループ展をやったり、友だちとインディーズでCDを出した。古き良き九〇年代をしみじみと語る。そして私に、地方都市に戻ってきた文化系くずれの、肩身の狭さを切々と訴えた。

「俺がこの数年でどんだけEXILEのバラードをカラオケで聴かされたか　お前わかるか？」(p.10）

  • 90年代くらいに宮台真司が黒夢（の全盛期？）について「黒夢は東京では聴いてる人いない」と吸ってる空気が違う話をしてた
  • 国道沿いには量販店・チェーン店、市内はシャッター通りという地方都市が今辿ってるプロセスについては、松原隆一郎『失われた景観』とかで、なるほどね、してた

  • その手の都心/地方のコントラストについてはその後コツコツと多少知識を得ていた

    • けど、そこで暮らす人からみえる生活というのが、色眼鏡なしで書かれてるのを読みたいと思ってたので
    • この本はちょうどよかった
    • 最初はエッセイだと思って手にとったし

  • 小説という形式をとってるけど、エッセイという形式で書いてくれた方がいい気がする

ここは退屈迎えに来て
ここは退屈迎えに来て
posted with amazlet at 14.01.07
山内 マリコ
幻冬舎
売り上げランキング: 5,301
Amazon.co.jpで詳細を見る

Jeff Croft「web標準が成功しhtml名人は用済みになった」

  • jeffcroft.com 2014.1.3のブログエントリ

    • 2014.2.13追記。結び（diversify or die）を誤解してた

  • Web Standards Killed the HTML Star – JeffCroft.com

  • 「html/cssが得意なだけでは飯が食えない」という周知の事実について
  • 「名人」としての活動歴（書籍、登壇）のある人が現状について書いたエントリ
  • 「あの名人はいま」風で面白く読んだ

以下斜め読んだ内容

  • 2003年にJeffrey Zeldman「Designing With Web Standards」を出版した頃の話
  • html/cssかくあるべし、と議論されてた
  • レイアウトはtable要素でなくcssで
  • 画像置換のテクニック。これはアクセシビリティを守るため
  • semanticなマークアップ -　などなど
  • カンファレンスも何度もあった。本を書いた人もいたし、世界中ハンズオンして回る人もいた
  • 後押ししたのは、zeldmanや賛同した企業がリードしたweb標準
  • 自分（=jeff）らはhtml/cssの達人、でした
  • web標準という運動があったんですよ
  • こんな運動があったのはブラウザの挙動がバラバラだったから
  • この運動のゴールは、各ブラウザがhtml/cssのspecに準拠すること
  • 準拠して、マークアップする人たちの仕事の苦痛を無くすこと
  • ブラウザがまともになった世界で起こったこと
  • html/cssの達人であることの価値が激減
  • html/cssの達人？
  • そのスキルの大半は、各ブラウザの挙動の癖やややこしい仕組みで占められた
  • その手のノウハウは今どうなった？
  • 「そんなのもあったね」的な存在になったか、もうすぐそういう存在になる
  • web標準が運動として成功する前からいた人たちは現在どうなった？
  • スキルセットは多様に
  • 多くの人はジョブチェンジ
  • プログラマー、PM、クリエイティブディレクタ、事業主、etc.
  • 今もhtml/cssの達人として働く人たちもまだいる
  • html/cssの達人として働くことが快適なときも何年も続いたが、それも終わる
  • 自分のスキルの賞味期限切れなので就職市場で丸腰感で味わってる人を個人的に何人も知ってる
  • 「フロントエンドディベロッパー」という求人の面接で、backboneとかangularとかnodeのスキルが話題になる
  • 「backboneとかは、ちょっと。プロダクトデザイナーがいいです」？
    • プロダクトデザイナーになりたいのはいいけど、
    • 「A List Apart」では学べないスキルを沢山身につけないといけないルートです
  • html/cssのスキルでは面接にすらこぎつけない。事前確認で足切りされる
  • web標準は運動として成功した
    • この成功が「html/cssの達人である」ことの市場価値暴落につながった
    • この事実にみんな目を向けるべき
  • これで話はおしまい、では満足できない？
    • 得意分野を増やせ。無理なら退場

  • p.s.

  • コメント欄

    • Q：html/css名人は、respoinsive名人に脱皮してるんでは？
      • マルチデバイス、複数のviewport/解像度対応の名人として

    • A：同じ話が成り立つ

      • responsive名人にも寿命あり
      • あと何年かしたらレジュメに書けなくなる

    • Q：自分はweb標準さまさま

      • css名人、デザイン/UXも結構得意
      • 10段階評価で6くらい。自分は求人で困らない
      • 将来的にはjs力upか、デザイン力upが必須と予測
      • jsは好きになれないし、デザインlove
    • A：お前みたいな人のこと書いてないだろ
      • お前はUXデザイナー。市場価値がある
      • こういう人の話
        • デザイナからカンプもらう
        • カンプでhtml/css使ってwebページ（というかテンプレ）作る
        • 作ったものをエンジニアに「あとはお願いします」と手渡す
      • html/cssで使って何かやってる人たちの話
      • デザイナはこれからも市場価値ある。デザインに価値がある
      • エンジニアも同じ。プログラミングに価値がある
      • デザイナとエンジニアの中間にいる人たちの市場価値は？
      • 需要は５年前と減ってるし今後どうなる？という話

今年の目標

  • リモート勤務
    • 転職？
  • 移住
    • ハワイ、or 英語使える都市
      • 年中暖かいとこ
      • 子連れ、ペット連れに寛容な都市
  • 会社つくってみる
  • 副業はじめる
  • 語学用の俺用アプリ作る
    • 多読用
    • 今や語彙も文法も怪しくなってるフランス語の記事を読む補助に

js経由でcss keyframeアニメーションを使う

jeremyの記事

  • 60 FPS or Bust: Dynamically Prerendering CSS Animations - Jeremy Kahn's Dev Blog
  • 書いてる内容
    • htmlでのアニメーションは長年jsしかなかった
    • 最近の収穫はcssアニメーションはパワフル。けど柔軟じゃない
    • アニメーションのcssスタイルのセットをサクッと作ること、サクッとページに適用すること
    • htmlやcssファイルにkeyframeアニメーション用のcssスタイルを一切書かず、js経由で生成・適用するやり方の紹介
  • requestanimationframeは関係ない
  • jsライブラリRekapiを使って色々楽をする
    • style生成
    • polyfill

やってること

cssのkeyframeアニメーションやるならこんなスタイルを書く。

.stylie {
  -moz-animation-name: stylie-transform-keyframes;
  -moz-animation-duration: 2000ms;
  -moz-animation-delay: 0ms;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: stylie-transform-keyframes;
  -ms-animation-duration: 2000ms;
  -ms-animation-delay: 0ms;
  -ms-animation-fill-mode: forwards;
  -ms-animation-iteration-count: infinite;
  -o-animation-name: stylie-transform-keyframes;
  -o-animation-duration: 2000ms;
  -o-animation-delay: 0ms;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -webkit-animation-name: stylie-transform-keyframes;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-delay: 0ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-name: stylie-transform-keyframes;
  animation-duration: 2000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@-moz-keyframes stylie-transform-keyframes {
  0% {-moz-transform:translateX(0px) translateY(0px);}
  100% {-moz-transform:translateX(400px) translateY(0px);}
}
@-ms-keyframes stylie-transform-keyframes {
  0% {-ms-transform:translateX(0px) translateY(0px);}
  100% {-ms-transform:translateX(400px) translateY(0px);}
}
@-o-keyframes stylie-transform-keyframes {
  0% {-o-transform:translateX(0px) translateY(0px);}
  100% {-o-transform:translateX(400px) translateY(0px);}
}
@-webkit-keyframes stylie-transform-keyframes {
  0% {-webkit-transform:translateX(0px) translateY(0px);}
  100% {-webkit-transform:translateX(400px) translateY(0px);}
}
@keyframes stylie-transform-keyframes {
  0% {transform:translateX(0px) translateY(0px);}
  100% {transform:translateX(400px) translateY(0px);}
}
  • これをhtmlファイルやcssファイルに直書きすると、柔軟じゃないので、それはやらない
  • cssのkeyframeアニメーションに必要なcssのセレクタと@keyframe宣言のリストをオンザフライで生成
  • リストは文字列として生成
  • style要素を生成し、そこにスタイルのリストを突っ込む
  • style要素をdomツリーに突っ込む
  • 要らなくなったら破棄とか、新たに足すとか、あとは柔軟に

スタイルのリストを生成する手間を軽減するのがrekapi

js経由でcssスタイルを作るやり方は２つ

  • DOMツリー触らないなやり方と、style要素だけ操作するやり方の２つ
  • CSSStyleSheetオブジェクト使うのが１つ
    • document.styleSheetsで取れる
    • このオブジェクトにスタイルor宣言をadd/deleteする
    • jsのオブジェクトの操作になるけど追加は深く考えないでできる
    • 削除が面倒そう
      • 削除するメソッドに削除したいセレクタor宣言のindexを指定して消す方法しか無さそう
      • ベストプラクティスがわからん
  • style要素に突っ込むのがjeremyが使ってるやつ
    • Rekapiのテクニックもこっちを使ってる

ソーシャルプラグインのlazyload

  • 調べたり試したことのまとめ
  • とりあえずfb,twitter,g+だけ
  • コピペ用コード並べた

やりたいこと

  • 画像でみかける遅延読み込み、オンデマンドでの読み込み
    • それをlikeboxとか、tweetボタンとかでもやりたい
  • techcrunchのトップとかでやってるあれ
    • １ページの中に100個くらいボタンある
    • $(".lazy-share-widget .platform").length //->90
    • ボタンのある所にカーソル持ってくまで、ボタンがロードされないようになってる
  • mashableのトップは全然違う
    • layzyload関係ない
    • あれはサーバ側であらかじめページにボタンを埋め込んでる
      • だからtweet数とかlike数とかの数値がかなりずれる
    • 割り切り型の手法
      • そもそもfb/tw/g+へhttpリクエスト出さない
      • CDNもつかって速さに挑戦してる
  • 「この辺までスクロールしたら表示」とか「カーソルこの辺まで来たらロード」ロードとか
    • 出来るだけhttpリクエストを減らす、というより、小出しにしたい
  • 初回ページロードだけでなく、ajaxとかpjaxにも対応

##ライブラリはあるにはあるが。。。

  • Socialite.js
    • 機能が足りない感じ
    • ボタンだけとか
    • ソーシャルプラグイン側の仕様にがっつり追従できるのか、不安
    • 実際`socialite.js`は最近開発されてない
  • プラグインのSDK
    • plusone.js<（G+）、widgets.js（twitter）all.js（facebook）
    • なるべくプラグインのjsが提供してる機能だけを使って実現したい

##ライブラリ（SDK）の読み込み

  • とりあえず何度も読みに行かない
    • plusone.js、`widgets.js`、`all.js`を何度もリクエストしない
    • FB、twttr、gapiオブジェクトの有無を判定すればOK
# jQuery + coffeescriptで
# twitter
if !twttr?
	jQuery.getScript "//platform.twitter.com/widgets.js"
else
	console.log "OK"

# facebook
if !FB?
	jQuery.getScript "//connect.facebook.net/ja_JP/all.js"
else
	console.log "OK"

# google+

if !gapi?
	jQuery.getScript "//connect.facebook.net/ja_JP/all.js"
else
	console.log "OK"

プラグラインの初期化

  • SDKが入ったjsを読み込んだ後の話
  • 初期化？
    • 言語とか、アプリid（facebook）とか、ウィジェットの寸法計算とか
    • 初期化自体は今回気にしてないが
  • 初期化の設定でプラグインのロード（レンダリング）だけはオフにしたい
  • facebook、google+はAPIがサポートしてるのでシンプルにできる
    • fb
      • xfbml:falseをFB.init({..option.})のオプションに指定
    • G+
      • parsetags:"explicit"をwindow.___gcfgプロパティにセット
  • twitterはアカン
    • widgets.js読み込みおわったらページ内の全てのソーシャルプラグインのレンダリングが始まる
    • developer toolsのnetworkタブは凄いことに
    • 引数無しのtwttr.widgets.load()が必ず走ってしまう
    • ページ全体の全てのplaceholder（=プラグイン埋め込み予定地）でプラグインのロードが始まる
  • twitterはアカンが回避方法は一応。。
    • `twttr.widgets.load()`を空振りさせる
    • `twttr.widgets.load()`実行時点で、placeholderが0になればいい
    • twiterはfbやg+のようにレンダリングをオフにできるようにしてほしい
      • sdkの機能改善はちょこちょこしてるので期待
      • twttr.widgets.load(document.querySelectorAll(".lazy-share-widget .platform")[0])
  • 初期化のタイミングは気にしとく
    • SDKを非同期読み込みするから
  • FBオブジェクトがないのにFB.init()とかやってしまわない
  • とはいえ気にしないといけないのはfacebookだけ
    • google+はwindow.___gcfgプロパティにparsetags:"explicit"をsdk読み込み前にセットしておけばいい
  • facebook sdkもそんなに大変じゃない
    • window.fbAsyncInit= fucntion(){....}の....でFB.init(...)書く
    • こう書けば安全にFB.init()できる
# g+
window.___gcfg = 
	parsetags:"explicit" # レンダリング＝手動に
	lang:"ja" # ローカライズ
#facebook
window.fbAsyncInit = ->
	FB.init(
		xfbml:false
	)

# g+の___gcfgプロパティに設定できるオプションの話
# https://developers.google.com/+/web/+1button/?hl=ja
# 
# FB.init(options)のoptions一覧はここ
# https://developers.facebook.com/docs/reference/javascript/FB.init/

twitter sdk読み込み直後の自動レンダリングを回避する

  • g+やfbのと違って一手間必要
  • twttr.widegets.load(arg)はこんな動き
    • 引数にdomノードを渡すと、渡されたdomノードだけプラグインをレンダリング
    • 当然domノードがプラグイン予定地としてちゃんとマークアップされてないとアカンが
    • 例えば、a要素としてマークアップされててclassにtwitter-share-buttonが付けられてないと、レンダリングされない
    • 引数無しだと、ページ内部のすべてのプラグインのプレースホルダーを全部チェックして、レンダリングする
    • sdk読み込み直後に走るtwttr.widegets.load()はこれをやってる
  • twttr.widgets.load()はプレースホルダがなければ空振りする
  • プレースホルダーかの条件
    • a要素か、blockquote要素
    • それぞれ決まったclass名がついてる
//cssセレクタで書くとこんな感じ
"a.twitter-share-button"
"a.twitter-mention-button"
"a.twitter-hashtag-button"
"a.twitter-follow-button"
"a.twitter-timeline"
"blockquote.twitter-tweet"
/*
http://platform.twitter.com/widgets.js
の後ろのほうに書いてある
*/

引数なし、ありを比較するとこんな感じ

# プラグインをロードする箇所を明示してる場合
twttr.widgets.load document.getElementById(".share")[0]

# twttr.widgets.load()ただするだけだとこんな感じになる
selector = "a.twitter-share-button"
selector += ",a.twitter-mention-button"
selector += ",a.twitter-hashtag-button"
selector += ",a.twitter-follow-button"
selector += ",a.twitter-timeline"
selector += ",blockquote.twitter-tweet"
jQuery(selector).each ->
	twttr.widgets.load @
  • プレーホルダーとして検出されないようにするやり方１
    • スニペットをちょっとだけ直す（class名かえとく）
<!--スニペットで、twitter-tweetになってるとこを、no-twitter-tweetにしといて、.load()する直前にclass名かえとく-->

<blockquote class="no-twitter-tweet">
<p>なんでや！　家入さん無関係やろ！
RT <a href="https://twitter.com/fukuyuki">@fukuyuki</a>: 今回のロリポップの大量ハッキング騒動で最も特筆するべきことは、この騒動の中、創業者である家入さんは「ネットも電気もお金もない砂漠の真ん中で一週間生活する」というバーニングマンというイベントに参加していたことだと思う。</p>
― やまもといちろう (@kirik) 
<a href="https://twitter.com/kirik/statuses/373370555464183808">August 30, 2013</a>
</blockquote>
  • その２
    • ボタンをオンザフライで生成するメソッドを使う
    • twttr.widgets.createShareButton()とか
//.share内部にボタンが挿入される

twttr.widgets.createShareButton(
 "http://hatena.ne.jp"
 document.getElementById(".share")[0]
 ->
   console.log "buttonできた"
   return
 count:"horizontal"
 text:"Hatena"
 lang:"ja" 
)

オンデマンドでプラグインをロード

  • sdkロード、sdk初期化が終わったあとの話
  • スクロールしたタイミング
  • ajaxやら、history api経由とかコンテンツ持って来たあととか
  • ここからはfacebook,g+,twitterはだいたい同じ
  • ロード用のメソッドにプレースホルダーのdomノード渡すだけ
###
引数に渡すdomノードは
placeholderそのものじゃなくて
placeholderの親要素でok
###
jQuery(.social).each ->
	#g+
	gapi.plusone.go @
	#twitter
	twttr.widgets.load @
	#facebook
	FB.XFBML.parse @
  • あとはイベント発火のタイミングとかであれこれ指定したらいい

「フレンチ・レズビアンたちの本音」（エル・ジャポン7月号）

特に印象に残った箇所

「視線からすべては始まる。問題は、男性が第一歩を踏み出すものという異性愛者のメンタリティーのなかで育てられたから、ふたりのうちどちらが動くまで、感情を抑えなくちゃならないこと」とベアトリスは説明する。

  • ユニークな状況に置かれてる人たちの内省がこなれた言葉に落とし込まれてるのを読むのは楽しい
    • 「視線からすべては始まる」というフレーズがスッと出てくる感じ
      • フェミニストだとこうはいかない
      • コミットしてる主義主張にがんじがらめのフレーズしか出てこないから
  • 記事自体はelle本家ウェブサイト上でのチャットでの議論をベースにしてる
  • 同族嫌悪的な話題、権利云々の話とかも当然ある
    • が他所でも読める話なので印象には残らなかった
  • 【ELLE】エル・ジャポン7月号｜エル・オンライン
    • 「elle」と「marie claire」をずっと読んでると、ブロガーが雑誌に登場するプレーヤーの１人としてどんどん役割を与えられていく（どんどん大きくなることはあり得ないが）流れがどんどんくっきりしてくのが面白い
      • パリコレとかの呼ばれてファッションスナップにもたまに登場し始めたのが3-4年前くらいだと思ったが、その頃と比べるとプレゼンスが増してる
      • 「vogue」はテキスト成分が圧倒的に少ないのでそういう変化を感じないが
      • この辺を分析してる記事とか本読みたい

思い出した話

  • ちょっと前、並木橋のスーパーで買い物したときのこと。
  • スーパーに女性二人組がエスカレータで上ってきたとき、ちょうど自分は買い物を終えて下りエスカレーターで彼女らとすれ違った
  • エレベータは二人並べない狭いやつなので前後した上ってきた
  • 上に立つ女性は下の段の子の方を向いてるので表情はわからない
  • 下側の子は上の子に向けて嬉しさに溢れた視線を向けてて、いい顔してるな、と思って通り過ぎた
  • と同時になんか妙な違和感を感じたが、その場でわからなかった
  • 店を出て数分経ってから「カップルか」と納得した

思い出した動画