[イベント]pixiv Tech Meetingに行ってきました
日頃からプレミアム会員として利用させていただいているシステムの裏側が見れる！ という事で、ATND見てから参加余裕でした。今回はなんとか時間通りに辿りつけました。一瞬GoogleMap先生が変な場所指すので迷子になったけど。
内容としては、次々にアップされる画像ファイルの捌き方や一番いいインフラの運用法、画面はjsを使用しているって事で、普段自分が触った事のない分野の話が大半。リファクタリング話やiPhoneSafariでのjsゲーム作成など、自分が普段使っている分野から近い話は頭に入ってきやすかったのですが、インフラの話などはわからない用語が出たら適宜ググってました；
以下メモ。
VPとSPIDERを使ったMySQL運用 @kamipoさん - http://www.slideshare.net/kamipo/vpspidermysql:title
- VP+SPIDERでホスト間テーブル移動をやる
- VPはカラムごとにテーブルを垂直分割
- SPIDERはテーブルを複数ホストに水平分割
VP
- vp_copy_tables()でaにあるテーブルの値をbにコピー出来る
- vp_copy_tables()はPRIMARY_KEYがないと使えない
注意
- COMMENTは60文字までしか書けない -> MySQL5.5なら大丈夫！
- MySQL5.0だと色々なクエリでエラーが起こるので、できるだけ最新版を使おう
質問
- エクストラバックアップの方が早くね？
- 用途が違う。これは止めずに移動できるのがいい
pixiv.js -4年目のサービスをきれいにしよう @[http://twitter.com/#!/yksk:title=yksk]さん
- 15億PV/月達成！ ソースを綺麗に
現在は、Prototype.js + jQueryで走っている
- 最終的にはjQueryに統一したい！
- $.noConflict(jQuery)を使えば、衝突することなくjQueryで行ける！
この関数を実行すると、$関数の動作が先に定義されている動作に戻る。
$関数はprototype.jsなどをはじめ、多くのライブラリがそれぞれ拡張している関数である。
jQueryでも、核となるjQueryオブジェクトのショートカットして極めて頻繁に利用される。
このコマンドは、そのような$関数を定義する複数のライブラリを用いた際に衝突することを防ぐものである。
名前空間をひとつに統一する
- windows.pixiv.*に統一すればかぶる可能性は無くなる
html5を使う
- 記述がちょっと減る
- scriptタグとか簡略化できる
- プレースホルダーなどのUIの新機能が使える
- data-*属性は要素に好きな名前をつけられるようになった
1ページ1ファイル、ページごとに読むjsを変更するのが大変
- URLディスパッチャーで振り分ける
LABjs
- 非同期でスクリプトを読み込める、順番を指定できる
- 他のファイルの読み込みをブロックしない
- Twitterでも使われている
- 実は、Loadの仕組みは標準化されていないので、ブラウザが新しくなるたびチェックする必要がある
- 将来的にはscript async/deferに移行するかも
QUnit
- ブラウザを開けばテストできる、簡単！
まとめ
- コアライブラリが2つあるのはまずいので1つに
- URLディスパッチャーとLABjsで高速化、ソースも綺麗
- QUnitでテスト！
エログロOK!? JavaScriptとCanvasで作るiPhone向け勝手ゲーム開発 @[http://twitter.com/#!/Moyashipan:title=Moyashipan]さん
- もともとFLASHer
- jsでゲームが作れるよ！ というデモ
- 実際にiPhoneを持っている人はiPhoneでデモページを見ながら話を聞く
jsでiPhone向けゲームを作成するメリット
- アプリじゃないのでAppleの審査が不要
- 他プラットフォームでも動かせる
デメリット
- 描画性能がとても貧弱
- 画面固定ができない(iPhone自体で回転をロックしないとグルグルするゲームは厳しい)
表示と移動はDOM、Canvas(html5)でできる
- Canvasで、FLASHのベジェ曲線同等
描画がとても遅い…
- 再描画範囲の固定
- 背景、キャラ、エフェクトとレイヤを分ける
- 縦に長いゲームにするとブラウザのスクロールを使える！(チョビのゲームのようにジャンプしていくヤツ)
webkit transformで回転・移動
まとめ
- iPhoneのブラウザゲームは素直につくるとすぐ重くなる
- 再描画は最小範囲に
pixivの画像アップロードシステム @cubicdaiyaさん - http://www.slideshare.net/cubicdaiya/pixiv-6261780:title
従来のアップロードの問題
- サムネイル生成が同期的に処理される
- アクセスが集中するととても重くなった[1]
アップロードのフロー
- ファイル選択→※→情報入力→完了画面
- ※でサムネを作っていた＝画面が切り替わるのを待たないといけないためユーザには遅く感じられる、というか実際遅かった
- アップロード時の上記3画面の中では、情報入力画面が一番開かれている時間が長い
- じゃあここで非同期でアップしよう！
- サムネイル生成の非同期化を行う事によって処理性能がアップした！
pixivのリコメンデーションシステム @[http://twitter.com/#!/aopico:title=aopico]さん
- チームラボのロゴを書いた
- リコメンデーションシステム＝おすすめ機能の話
おすすめ機能を作ったわけ
- 古いイラストが埋もれる
- 趣味・趣向が多様
- ロングテール
協調フィルタリングとは
- 以下のように5つのitemと4人のUserがいたとする。今回はAさんを基準にする
| |item1|item2|item3|item4|item5|
|UserA|買| |買|買| |
|UserB| |買| |買| |
|UserC| | | | |買|
|UserD|買| |買|買|買|
- 1. Aさんと似ているユーザを探す…Dさん
- CさんはAさんが買っているitem1, 3, 4の他にitem5を買っている
- ならば、Aさんも5を買うのではないか？ …という推論
- 実際にAmazonで使われている
- Amazonのものは計算量が多い
- なるべくサーバに不可をかけたくない
- もっとシンプルにならないか？
ブックマークタグ*ユーザ
- メカ好きのAopicoさんとエロス好きのAopicoさんは別と考える
- 同じブックマークタグを付けているユーザの数をカウントする
- たくさんブックマークを付けている人は重みを下げる
実装
- C++
- メモリは5G
- 初回計算は12時間
今後
- ユーザ間の類似度計算
- ブックマークされていないイラストの救済
- タグ揺れの解消
私事……
今回の発表は、全員床に座りながら聞くというスタイルでした。なかなかベストな座り方を見つけられず、このあたりで持病の腰痛と激しいバトルを繰り広げ始めたため、メモの量が著しく落ち……(; _ _)
SSD+Squidで画像をキャッシュしなイカ？ @phji]さん - http://www.slideshare.net/phji/ssdsquidika:title
Squid
- proxyサーバ、キャッシュサーバ、イカ
- イカ娘、名前だけでも覚えて帰ってくださいねという感じ
SSDの用途
- データベース
- 画像参照のキャッシュ
- 調査の結果、Sサイズの画像のリクエストが最も多かったので、SSDはまずSサイズ画像から
6GbpsをさばくオレオレCDN構築術 @semindさん - http://www.slideshare.net/semind/20101220-pixiv-techmeeting-6267332:title
画像にアクセスがくる
- 画像を保存しているサーバだけでは捌けない
CDN
- コンテンツの配信を代わりにやってくれるもの
- データセンタを借りて自分のCDNを
今年の初夏にトラフィックが頭打ち
- 構成なども限界だった
なのでデータセンタを借りる事に…
- しかし、時間もないし経験者もいない
詳しいことは懇親会で！
PHPあるある話 @[http://twitter.com/#!/cocoitiban:title=cocoitiban]さん
- なにか一つでも発見があれば
文化編
- マニュアルはとても充実している
- unset: nullへのキャストというものがある
- コーディング規約がたくさん
- PEARコーディング規約
- ZendFramework規約
- PEAR2コーディング規約
コーディング編
- HttpClientは何を使うか…いっぱいある
- PEAR Http_Request
- PEAR2 Http_Request
- Zend Http_Request
- curl などなど
- REDHAD系ならRPMで構築するのがいい
- 短時間にデプロイをたくさんしたらメモリがあふれた
- デプロイ時にApacheのメモリが倍になっている
- xcache？
phjosh(仮)プロジェクト @moriyoshitさん - http://www.slideshare.net/moriyoshi/phjosh:title
jsでオブジェクト指向…あまり美しくない
- 既存言語から生成する
GWT
- jsをJavaのソースコードから生成できる
- IDEを使える
rb2js
- Rubyからjsに
py2js
- alpha quarity…どうなった？
PHPは？
- PHPはjsと似ている
発表終了後
懇親会の会場へ歩いていたとき。たまたま一緒に話しながら歩いていた人が大学の研究室の先輩である事が判明。Σ(ﾟ口ﾟ;. 自分が学部3年の時、修士2年だったので、会っていた期間は僅かのはず…。いや～～……どこで、誰に会うかわからないもんですね。
聞けば、同じ会社で働いていた人がpixivへ転職、今回のスピーカーだったためたまたま見にきたとの事。
それだけでも偶然だと思ったのに、その先輩と@Moyashipanさんが同じ高校出身、同郷であったことも判明。どんだけ狭いのだ。
そんな@Moyashipanさんは自分と同い年[2]なのに、既にpixivに様々なシステムを作りリリースしているという点で、尊敬ともうExcelをこねくり回して共有サーバでファイル管理するお仕事は嫌だお自分も頑張らねばと。何か作りたい衝動に駆られます。
今回はすごく勉強になりました、技術的な話意外にも色んな意味で来てよかった……。さしあたってjs系とQUnitはちょっと使ってみたいと思いました。会場を提供してくださったpixivさん、発表者の皆さんありがとうございました！！
こっそり
@aopicoさん…ブクマ0の人の寂しいレコメンデーションに救済を……。
[1] 確かにアップにものすごい時間がかかっていた時期があったような？
[2] 今まで参加した勉強会では1,2年上や1,2年下の割と世代の近しい方とはお会いした事があったのですが、完全に同じ年代の人は初めてあった。