pixiv 勉強会

2010年12月21日(火) 00時50分31秒 テーマ:サーバ
 ・pixiv Tech Meeting
 会場の案内
 


・VPとSPIDERを使ったMySQL運用 上薗かみぞの(かみぽ)竜太
 spider知ってる?
 →話さなくていい?www
 shardingだけじゃないVP&spider
 運用ツールとして使う
  自己紹介
  MySQLとperl使い
 VP&spider
 mysqlのストレージエンジンプラグイン
 VPはカラム毎にテーブルを垂直分割
 spiderはテーブルを複数ホストに分割
 vp_copy_tables() これの使いかた
 create table t1 (
  a int(10) unsigned not null primary key,
  b int(10) unsigned not null
  ) engine=InnoDB;

create table t_vp (
  a int(10) unsigned not null primary key,
  b int(10) unsigned not null
  ) engine=VP connection '
 kamioiのはてブに書いた
 さっきの手順をスクリプトにした
 
 移行先を参照するspiderテーブルを作る
 voで移行元テーブルとspiderを束ねる
 medicについては勉強してくださいw
 vp_copy_tablesを使ってspiderから他のmasterにコピーする
 
 primary keyがないとvp_copy_tables()は使えない
 commentは60文字までしか書けないのでconnectionを併用する(5.5は気にしない)
 XAトランザクションサポートをOFFに(spider_support_xa=0)
 データノードはできるだけ最新のmysqlを使おう 5.1以上
 5.0は使わないように
  まとめ
 shardingだけじゃないVP&spider
 VP&spider
 
 Q&A
 実サービスに使ってますか?→データ以降には使いました
 エクストラスナップより早いの?→これはサービスを止めずにオンラインでできる
 

・pixiv.js-4年目のサービスをキレイにしよう 横野巧也@yksk
 フロントエンドの話
 コードをきれいにする
  自己紹介
  pixiv UIチーム
  pixivは3際になった、月に15億PV、リファクタリングができる
 <3
 
 code自体
 prototype.js×jqueryの両方使ってる
 →jqueryにまとめたい
 
 $noconflictという関数を使う
 名前空間を1つにする
 window.pixiv.*
 かぶる心配を減らす、pixivイカを見ていればok
 HTML5に以降
 記述量がちょっと減る、ちまちま削る、placehodlerなどUI系の新機能、
 data-*属性
 要素に好きな属性をつけてok、jquery1.4.3からは&.dataの初期値に、設定をHTMLに書こう
 
 script
 pixivって一ページにライブラリとかいろいろ入ってる
 ページ毎のスクリプト、広告、インラインコード
 
 WAF
 ページ毎に読むjsを変更するのが大変
 任意の一で読み出すのが大変
 URLディスパッチャーを使って書いてる
 LABjsっていおうもの
 非同期でスクリプトを読み込む
 読み込み順を指定できる
 他のファイルの読み込みをブロックしない
 ツイッターでも使ってる
 
 注意点!
 ロードの仕組みは標準化されてない→新しいブラウザだと動かないかも
 →常に最新版をチェック→将来的にscript async/deferに移行
 
 Qunitを使ってる
 jqueryで標準で使われてるテストライブラリ
 ブラウザを開けばテストできる→誰でもできる
 バグるとヤバいところから
 UIテストは後回し
 
 まとめ
 コアライブラリが二つあるのはまずい
 URLディスパッチャーとLABjsで整理、高速化→少しずつ手をつけていける
 JSでもテスト書くと安心
 
 
・エログロOK!?JavaScriptとCanvasで作るiPhone向け勝手ゲーム開発 杉本紳一郎@Moyashipan
 フロントエンド担当
 http://goo.gl/uD7L5
 iPhone用の短縮URL
 
 javascriptでiPhone用のゲームが作れるようになる
 フラッシュはいずれなくなると言われてもなんだか安心
 ・そのメリット
 メリット
  アプリではないのでappleの審査が不要
  →すぐに変更・修正できる
  作り方次第では他のプラットフォームでも遊べる
 デメリット
  描画性能が貧弱
  画面固定ができない
  などなど。。。
 
 オブジェクトの表示と移動
 表示
  imgタグ
  background-image
 移動
  position:a~
  
 オブジェクトの表示と移動(キャンバス)
 表示
  stroke
  drawImage
 移動
  clearRect()で前フレームの画像をけさないとソリティアのクリア画面みたいになってしまうw
  
 ポムポムゲームの紹介
 flashからの移植
 http://www.pixiv.net/pom
 画面全体のcanvasを15fpsで再描画するのはしんどい
 →どうするのか?
 再描画する範囲を限定してやる
 必要最低限の範囲に大してclearRecxt()する
 その範囲が広くなる場合には別玲やにする→背景、キャラクター、エフェクト
 ブラウザのスクロールを利用する
 scrokkToでブラウザのスクロール位置を替えてやる
 参考にしたのがゼルダの伝説の画面移行を参考にした
 
 見た目を良くするには
 DOMとcssアニメーション
 webkit-transform
 
 event(タッチとかデバイスの向き、加速度、GPS)
 
 まとめ
 iPhoneのsafari向けゲームは特に考えずにつくると自然と重くなる
 canvasの再描画はさいしょうげんに留める
 

・pixivの画像アップロードシステム 久保達彦@bokko cubicdaiya
 自己紹介
 インフラ兼ソフトウェア担当
 入社して最初の仕事
 →アップロードの高速化
 問題点
 →大量のサムネイル生成処理
 全部同期敵に処理される
 アップロードすると思い
 →頑張った
 フロー
 ファイル選択画面→(すべてのサムネイルを作成)→情報入力画面(ユーザが一番時間を使う場所)→完了画面
 →サムネイルはユーザの入力中に作成する
 システム構成
 →
 CPUバウンド、メモリバウンド→サムネイル生成は非常に重いタスク
 アップロード専用のAPサーバを構築する
 AP(upload_only) php5.3
 Q4M アップロードデータの情報を格納する mysqlでキューが使える
 worker_upload q4mと通信してサムネイル生成を行う pythonで書かれてる
 
 pythonのモジュール化して使うようにしました
 python-prefork,q4m
 
 workerがpreforkするjob数を決定する
 job毎にサムネイル生成にかかる時間を計測
 スペックは結構いいサーバ
 prefork数が1つだと350秒、2個だと半分で5個までは現象した
 増やしすぎると時間がかかってしまう
 →コア数以上はダメ 4~5がちょうどいい
 libjpeg-turbo
 1個の命令で複数のものを処理できる
 x86_64用に最適化されたlibjpeg
 
 turboにしたら1.5倍くらい早くなった
 
 まとめ
 サムネイル生成処理を非同期化することでユーザの体感速度を向上
 
 その気になればdos攻撃もできてしまうw
 imagemagicをもともと使ってるから使用した
 ライブラリを変えると若干違いが出てくるのでそこをどうするか?
 1枚の画像から14~15枚のサムネイルを生成する
 
・pixivのリコメンデーションシステム 青木俊介
 ・自己紹介
 チームラボの生業メンバー
 ロゴを描いたんだよw
 
・ オススメ作品
 ブックマーク詳細ページと完了ページ
 ブックマークした後の下のページに表示されるもの
 ブックマークの管理画面でもおすすめ作品が出てくる
 自分のブックマークを整理するタグをブックマークタグ
 
 
 ・作った理由
 →趣味、趣向が多様、ロングテール、古いイラストが埋もれる
 →リコメンデーションが一番適しているんじゃないか?
 
 ・アルゴリズム
 協調フィルタリングが多い
 →amazon方式である、ユーザ同士のゆいじどをけいさんする→デメリットとして計算量が多い
 pixivではどうしようか?
 買い物→ブックマーク
 データ量
  ブックマークの総レコード数 2億件
  頻繁に更新 1日50件
  SSDを使ったサーバでなんとかさばいてる
  →シンプルに負荷をかけない方法を考える
 
 ブックマークのタグとユーザを使う
 →協調フィルタリングのようなシステムを使えばシンプルなものになる
 まず画像のブックマークをしている人のタグを収集する
 それぞれの同じタグをつけているイラストを探し出す
 
 ・システム構成
 C++で実装
 必要なメモリ5G
 初回の計算に5時間、メモリに展開に3時間
 
 まとめ
 今後やりたいこと
 ユーザ間の類似度計算
 他の制度の高いといわれているアルゴリズム
 ブックマークされていないイラストもどうにかだしてあげたい
 リコメンデーションに興味のある人材を募集してますw

・SSD+squidで画像をキャッシュしなイカ? 藤本和寿
 トレンドを反映
 イカ娘の話を中心?w
 24歳、インフラの仕事
 
 squidとは
 プロキシサーバ、ウェブキャッシュサーバに利用されるキャッシュサーバ
 squid=イカ
 
 SSD
 ピクシブでSSDの用途
 →DB、画像の参照のキャッシュ
 real SSD 64GB 1.2k円くらい
 
 SSDを使うとsquidのrebuildが早く終る
 画像サーバの構成
 →フロントサーバの後ろにキャッシュサーバがいてその後ろにwebサーバがいる
 
 SSDの用途1
 サムネイルが13種類生成される→sサイズのサムネイルが一番表示される
 10万件のリクエストに
 sサイズが7万件、64*64は5000件、mが3400件、・・・
 sサイズはSSDからさばこう
 sサイズをキャッシュするサーバはmaxで630リクエスト/sec
 ヒット率91%
 
 キャッシュサーバに使えるサーバがあまりない
 →効果があったのでHDDからSSDに変更してみた→ウエイトを上げるとキャッシュヒット率がさがる
 →HDDとSSDの両方を使用する
 →200kb以下の画像はSSD、それより大きいのはHDD
 
 同じくらいのリクエストをさばいてるサーバのIO負荷が半分くらいになったと思う
 
 
・6GbpsをさばくオレオレCDN構築術  飯田祐基
 自己紹介
 去年8月入社
 ネットワーク周り、広告周り、DCのベンダー
 pixivのメインコンテンツ
 →イラスト
 画像を保存しているサーバだけでは裁けない
 CDNを使おう
 →IIJ、akamaiさんが有名
 自分たちでオレオレcdnを作ってみよう
 初夏にトラフィックが頭打ち
 →キャパ的に拡張性がなかった(建物、プロバイダ)
 →以前の構成はかなりひどかった
 →→データセンターを借りることにした
 
 イメージ配信クラスタ→イメクラ
 
 
 システム構成
 DNSラウンドロビンを利用
 一旦フロントで受けたものをハッシュでユニークに分けてやる
 キャシュがあればそこから返す
 →なければ再リクエストを投げる
 
 メリット
 →構成が均一、管理がめちゃくちゃ楽
 →スケールアウトが楽 構成が一緒だから
 →工夫してるっぽくてかっこいいな~w
 反省はしていないw
 
 ・オレオレやったら驚いた
 いれすぎるな危険
 →DNSラウンドロビンにたくさんアドレスを登録
  512byteを超える(TCPに切り替わる)
  →登録している台数を減らした
 偏る
  ハッシュによるキャッシュへのリクエストが偏る 差が10倍くらい
  特定のサーバの負荷が高くなる
  →weightをいじって調節
 
 バッファロー限界説
  L2スイッチ→バッファロー
  localスイッチに行く場合、他のL2スイッチを通るとエンジンXのタイムアウトが発生
  →ネットワーク的な物理構成もちゃんと考えてあげないと大変
 →タイムアウト値を上げましたwwww
  根本解決になってないから特定種類のスイッチを変更する
 
 おわりに
 やってみたからわかること
 varnishとか変えてみたい
 局所的にアクセスの多い部分を分割
 詳しいことは懇親会で

 他サービスのCDNをお試し中に使ってみたら落ちたwww
 

・PHPあるある話 個々一番
 Zynga japanテクノロジーチーム所属
 
 PHPの全体的な私的なTIPSの紹介です
 
 文化編
 マニュアルがやけに面白い
 マニュアルの充実度はトップクラス
 というかこれが仕様書です
 歴史とか書いてある
 
 rasmus lerdorf→作者
 
 型変換の話がおもしろい
 オブジェクトのキャスト
 unsetとかbinary
 unsetをつかうとnullが出力される
 binaryは便利だな~っと
 こうゆう発見は30分に1回はあるからマニュアルはおもしろいよw
 
 nullに加算しをすると1になるw
 
 コーディング規約がたくさんある
 zendframeworkコーディング規約 ?>をつけない
 pear2コーディング規約 require_を付けない
  and more ...
 http://wiki.php.net/rfc
 言語的な討論されてる
 
 コーディング編
 ぐちしかかけなかったwwww
 
 http_requestは何使おう→コードが古い
 http_request2を使うといい
 curl→関数ベース非同期に取得できる
 pecl_http→culrをちょっと便利にした環境変数
 
 パースはしてくれるけど、非対応の形式にははいらない
 apache_request_headers関数で対応
 
 インフラエンジニア編
 構成はpixivに似てる
 構築はrpmで構築するのがいい
 →拡張を毎回コンパイルするの面倒
 fedoraのtestをベースにしたり
 remiのリポジトリを参考にする
 
 pearの管理はどうしてます?
 pearライブラリもrpmで管理したい
 
 phpのデプロイはどうしてる
 Capistranoが便利
 デプロイコマンド
 一括して前サーバにシェルを実行
 
 デプロイを短時間にしたらapacheのメモリがあふれた
 →デプロイ時にメモリが倍になってる
 →原因はわからない→xcacheっぽいな~
 phpの標準のファイル読み込みを使っている
 PHP 
 キャッシュを二重に管理されていた
 デプロイ時にはapache再起動かAPCの
 
 変わったPHP入門
 stream便利
 streamクラス
 file_get_contents('http://~~~~~~')
 ぴゅあなPHPコードで書けます
 つまり
 file_get_contents('smarty://~~~~~~')
 とか書ける
 stream filter便利
 PHPは使うのも楽だし、大規模でも使用することができるのが
 railsとかと異なって便利なポイント
 

・phjoshプロジェクト 小泉守義
 はてな moriyoshi
 ツイッター moriyoshit
 
 最近はC++、pythonを描いてる
 
 javascript好きですか?
 →少ないなw
 JSで大規模開発
 →クラス指向で書きたくなる?
 プロとタイプ指向だとソース書きが大変
 GWT
 rb2js
 py2js
 
 PHP→JS変換
 PHPはwebプログラマの共通言語
 javascriptににている
 テンプレートエンジンとしても使える
 
 しくみ
 phpスクリプト→phpパーサ→中小構文木→JSソースビルダ→javascriptスクリプト
 
 今後の展望
 requireを使えるのでいろんな連携ができたらいいなと思う
 
 
 

  • なうで紹介
  • mixiチェック
  • ツイートする

コメント

[コメント記入欄を表示]

コメント投稿

コメント記入欄を表示するには、下記のボタンを押してください。
※新しくブラウザが別ウィンドウで開きます。

一緒にプレゼントも贈ろう!

アメーバに会員登録して、ブログをつくろう! powered by Ameba (アメーバ)|ブログを中心とした登録無料サイト