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
投入- だだしvoxerでforkしたもの
- Voxer/stud
- まずは
- そしてspdy
- voxerアプリは、常にhttpsで話さないといけない
- あと、パケットの先頭詰まり(head of line blocking)も厄介
- kee-aliveなコネクション?、pipelining?
- spdy使うメリット?
- ネットワークレベルでは周知?
- よくまとまってるdomumentあるし
- SPDY Performance on Mobile Networks - Make the Web Faster — Google Developers
- アプリ開発という観点でも実はメリットある
- spdy使ってみてわかった
- アプリの挙動把握、デバッグ、メンテ
- 前よりずっと簡単になった
- アプリ開発がよりシンプルになった
- ポイントは、tcpソケット1つで全てのリクエストを捌くという部分
- エラーハンドリングのロジック、キューイング、再送、バックグラウンドモード
- 全てが前よりもシンプルになった
- iSPDY
- ios/osxプラットフォーム向けライブラリ
- Voxer/iSPDY
- twitterが出したCocoaSPDY
- twitter/CocoaSPDY
- 取り組んでる問題はiSPDYと似てる
- もっと早く出してたら使ってた
- でもCocoaSPDYで用足りるというよりこれをベースに足りないもの足すと言う感じだが
- voxierアプリはspdyのserver pushをヘビーに使ってる
- アプリのリアルタイム更新してる部分
- 前はwebsocketかhttp pipeliningで頑張ってた部分
- websocketもpipeliningもトレードオフがあり
- クライアント、サーバー、ネットワーク、全てのレベルで
- spdy(とserver push)はリアルタイム更新にとってかなり理想的なソリューション
- tcpコネクション1つでクライアントにどんどん送れる
- iSPDYのデザインゴール
- 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のバラードをカラオケで聴かされたか お前わかるか?」
- 地方で暮らす10〜30代くらいの人を登場人物にした短編小説集
- 脇役の「椎名」が全編に登場してる
- 短編集だがシリーズ物のようになり
- 同じ地域(と大阪、東京)が舞台になってる
- どれも面白く読んだが、最初のやつが一番面白い
- 須賀さんが最初に登場するくだりで吐くセリフが際立ってる
- 読後はこのセリフしか覚えてない
東京から地元に戻ってもう十年近い須賀さんは、刻々と廃れゆく町の景色に絶望仕切っている。彼は青山のギャラリーで仲間とグループ展をやったり、友だちとインディーズでCDを出した。古き良き九〇年代をしみじみと語る。そして私に、地方都市に戻ってきた文化系くずれの、肩身の狭さを切々と訴えた。
「俺がこの数年でどんだけEXILEのバラードをカラオケで聴かされたか お前わかるか?」(p.10)
- 90年代くらいに宮台真司が黒夢(の全盛期?)について「黒夢は東京では聴いてる人いない」と吸ってる空気が違う話をしてた
- たしか『宮台真司interviews』か
- 国道沿いには量販店・チェーン店、市内はシャッター通りという地方都市が今辿ってるプロセスについては、松原隆一郎『失われた景観』とかで、なるほどね、してた
その手の都心/地方のコントラストについてはその後コツコツと多少知識を得ていた
- けど、そこで暮らす人からみえる生活というのが、色眼鏡なしで書かれてるのを読みたいと思ってたので
- この本はちょうどよかった
- 最初はエッセイだと思って手にとったし
小説という形式をとってるけど、エッセイという形式で書いてくれた方がいい気がする
Jeff Croft「web標準が成功しhtml名人は用済みになった」
jeffcroft.com 2014.1.3のブログエントリ
- 2014.2.13追記。結び(diversify or die)を誤解してた
- 「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.
コメント欄
今年の目標
- リモート勤務
- 転職?
- 移住
- ハワイ、or 英語使える都市
- 年中暖かいとこ
- 子連れ、ペット連れに寛容な都市
- ハワイ、or 英語使える都市
- 会社つくってみる
- 副業はじめる
- 語学用の俺用アプリ作る
- 多読用
- 今や語彙も文法も怪しくなってるフランス語の記事を読む補助に
js経由でcss keyframeアニメーションを使う
- jeremy kahnはこれをcssプリレンダリングと命名してる
- 命名としてわかりにくい
- 「CSSのアニメーションのパフォーマンスについて、長きに渡り研究を重ねて来たJeremy Kahnがたどり着いた一つの解答。CSSプリレンダリングと名付けた手法について詳しく解説。」と書かれてるのを読んでもよくわからなかったのでメモ
- 割とシンプルな話
jeremyの記事
- 60 FPS or Bust: Dynamically Prerendering CSS Animations - Jeremy Kahn's Dev Blog
- 書いてる内容
- 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);} }
スタイルのリストを生成する手間を軽減するのがrekapi
-
- Rekapi - A keyframe animation library for the web
- polyfillにもなってる
- keyframeアニメーション非サポートブラウザ向けにはピュアjsアニメーションを用意してくれる。
ソーシャルプラグインのlazyload
- 調べたり試したことのまとめ
- とりあえずfb,twitter,g+だけ
- コピペ用コード並べた
やりたいこと
- 画像でみかける遅延読み込み、オンデマンドでの読み込み
- それをlikeboxとか、tweetボタンとかでもやりたい
- techcrunchのトップとかでやってるあれ
- mashableのトップは全然違う
- layzyload関係ない
- あれはサーバ側であらかじめページにボタンを埋め込んでる
- だからtweet数とかlike数とかの数値がかなりずれる
- 割り切り型の手法
- そもそもfb/tw/g+へhttpリクエスト出さない
- CDNもつかって速さに挑戦してる
- 「この辺までスクロールしたら表示」とか「カーソルこの辺まで来たらロード」ロードとか
- 出来るだけhttpリクエストを減らす、というより、小出しにしたい
- 初回ページロードだけでなく、ajaxとかpjaxにも対応
##ライブラリはあるにはあるが。。。
Socialite.js
- 機能が足りない感じ
- ボタンだけとか
- ソーシャルプラグイン側の仕様にがっつり追従できるのか、不安
- 実際`socialite.js`は最近開発されてない
- プラグインのSDK
##ライブラリ(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を読み込んだ後の話
- 初期化?
- 初期化の設定でプラグインのロード(レンダリング)だけはオフにしたい
- facebook、google+はAPIがサポートしてるのでシンプルにできる
- fb
xfbml:false
をFB.init({..option.})
のオプションに指定
- G+
parsetags:"explicit"
をwindow.___gcfg
プロパティにセット
- fb
- twitterはアカン
widgets.js
読み込みおわったらページ内の全てのソーシャルプラグインのレンダリングが始まる- developer toolsのnetworkタブは凄いことに
- 引数無しの
twttr.widgets.load()
が必ず走ってしまう - ページ全体の全てのplaceholder(=プラグイン埋め込み予定地)でプラグインのロードが始まる
- twitterはアカンが回避方法は一応。。
- 初期化のタイミングは気にしとく
- SDKを非同期読み込みするから
FB
オブジェクトがないのにFB.init()
とかやってしまわない- とはいえ気にしないといけないのはfacebookだけ
- 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)
はこんな動き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 @
- プレーホルダーとして検出されないようにするやり方1
- スニペットをちょっとだけ直す(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>
- その2
- ボタンをオンザフライで生成するメソッドを使う
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」をずっと読んでると、ブロガーが雑誌に登場するプレーヤーの1人としてどんどん役割を与えられていく(どんどん大きくなることはあり得ないが)流れがどんどんくっきりしてくのが面白い
- パリコレとかの呼ばれてファッションスナップにもたまに登場し始めたのが3-4年前くらいだと思ったが、その頃と比べるとプレゼンスが増してる
- 「vogue」はテキスト成分が圧倒的に少ないのでそういう変化を感じないが
- この辺を分析してる記事とか本読みたい
- 「elle」と「marie claire」をずっと読んでると、ブロガーが雑誌に登場するプレーヤーの1人としてどんどん役割を与えられていく(どんどん大きくなることはあり得ないが)流れがどんどんくっきりしてくのが面白い
思い出した話
- ちょっと前、並木橋のスーパーで買い物したときのこと。
- スーパーに女性二人組がエスカレータで上ってきたとき、ちょうど自分は買い物を終えて下りエスカレーターで彼女らとすれ違った
- エレベータは二人並べない狭いやつなので前後した上ってきた
- 上に立つ女性は下の段の子の方を向いてるので表情はわからない
- 下側の子は上の子に向けて嬉しさに溢れた視線を向けてて、いい顔してるな、と思って通り過ぎた
- と同時になんか妙な違和感を感じたが、その場でわからなかった
- 店を出て数分経ってから「カップルか」と納得した
思い出した動画
- vocal参加してるMary Lanbertの所が好き
- 「And I can't change, Even if I tried, Even if I wanted to...」と力強く唄う箇所
- PVが歌詞の世界観を忠実に表現してるので見ればどんな曲かはわかるかと
- id:TomoMachiさんがざっくり歌詞を訳してる