20140801_pixiv_engineering_talks.md

pixiv 勉強会メモ

ハッシュタグは #pixiv_engineering_talks

http://pixiv.doorkeeper.jp/events/13008

@yksk

• UI を担当
• アニメーション GIF やろうよ、がきっかけ
• 動くデスクトップ壁紙の感動を
• 高画質かつ大画面に、がコンセプト
• UI の解説 (デモ)
• Grunt/Bower/CoffeeScript/StylusCSS/Handlebars
• File API を使ってローカルファイルを取得して確認する
• FormData API を使って画像を送信
• 少し動けば良いのでコマ数は少なめに設定
• 2K (FullHD) まで表示可能で、フルスクリーン API があればそれを使って全画面表示
• しっかり設計すれば意図は伝わるっぽい？
• 目的が達成されれば手段は問わない
  • ※ 古い IE を切るとか

@tototoshi

スライドは http://tototoshi.github.io/slides/ugoira-tech-talks-ugoku-gazou-henkan/ で公開

• アップロード、変換、配信を担当
• 投稿された複数の画像を zip につめて JavaScript で展開して Canvas に表示する
• うごイラ is not 動画
  • あくまでイラストの延長である
• Twitter との比較
  • MP4 に変換されることのメリットとデメリット
• うごイラは Twitter とのメリットとデメリットが逆転する
• いちおう APNG の投稿は対応しているよ！
• ImageMagick/ffmpeg はやりたくなかったらしい
• 画質サイコー ファイルサイズでかいのは仕方ないし知ってた
• 今後として画像サイズを小さくしたいし .ugo フォーマット作る？的な話も

@marchan42

• zip_player 担当
• APNG も MNG も使ってないし、動画も Flash もやりたくないよね？
• HTML5 つかえばいいんじゃね？
• zip bundle を使ってる、パースが簡単
• JavaScript + HTML5 で導入された API つかって zip を読み込んでる
• 範囲読み込み及びチャンクを使って分割読み込みを実施してる
• JSON 形式のメタデータを使ってる
• チャンク単位で読み込み、逐次フレーム表示を行っている
• 問題はブラウザで、古いバージョンのブラウザは必要な API に対応していない

コードは https://github.com/pixiv/zip_player で公開されている

@harukasan

• インフラ担当
• pixiv のデータ統計
• 転送量ピークは 12Gbps で、400台のサーバ
• 基本は nginx で裏で apache も使ってる
• 非同期アップロードを行い、その間にうごメモ用に画像生成する
• ユーザが情報入力中に画像を生成し、WevDAV にアップロードしてます
• apache で動的なサムネイル生成を行っている
• サムネイルマスタは JPG で処理している (PNG から JPG の変換が重いため)
• mod_small_light を使用している
• Contents Delivery Cluster という CDN もどきをつかってる
• 64GB のメモリで 60% のキャッシュヒット、256GB * 3 SSD で 90% のキャッシュヒット
• CORS に対応する
  • と Preflight Reqeust の説明
• ファイルシステムは全て Ext4 つかってるらしい。i-node 枯渇起こしたことも

@notonau

• PHP 担当
• うごイラを使ってスクリーンセーバーをつくってる
• composer を使ってパッケージを管理している
• rsync の同期中に composer でデプロイ管理するとエラーが起きるようになってしまった
• rsync + symlink やってみたが２分かけて徐々に新しいコードが反映する事態に
• PHP 5.1 から導入された realpath をキャッシュする機構が原因だったので無効化
• apache の graceful restart で Zend Opcache メモリバカ食い問題を解決させてる

スクリーンセーバーはここで公開されてるよ https://github.com/notona/ugoira-screen-saver

@shobyshoby

• iOS アプリ担当
• うごかなイラ？
• アプリからじゃ見れないじゃん
  • リリース直後
• リリース遅延とバグなどで...
• 内部 API なしで実装とか、動作確認なしとか、それで審査とか、どう考えても死亡フラグ
• モック化使って対応しようとしたがそれが仇になって後のキャッシュ問題に引っかかった
• 設計の段階で同時にやるべきだった
• Web/Android/iOS でリリースをやるべきだった
• 品質を高めるべきだった
• 同時リリースのスケジュールをやったのは「わたしです」
• 開発環境では動いてたから！
  • この手のトラブルはよくある

@RooandQoo

• Android アプリ担当
• 人足りてないので求人
• UgoiraView/UgoiraFragment/UgoiraActivity の３つで動いてる
• 6/26 リリースしたが、翌日問題が...
• 「ながもんゲーム」といううごイラが Android で動いてなかったでござる
• 一時停止機能がなかったことが原因だが一筋縄にはいかなかったようだ
• 問題解決したら今度はチラつく問題が発生してしまった
• SurfaceView に絡む問題でやられた。2.x 系は滅ぼしたい

@i315

• Android アプリ担当
  • 本人曰くうごイラの知見はありません
• 「うごイラ」は実は表記ブレが多い
• GitLab/GitHub で PR ベースでコードレビューを行ってる
• 動く LGTM 画像でコードレビューに動きを
• 具体例
  • 例外を printStackTrace しない
  • IDE が生成するコメント消して
  • 定数は static final にして
  • 変数名は underscore はじまりにしないで

@edvakf

• ugocat
  • ターミナルでうごイラを動かすためのコマンド
• zip_player つかってさらに node-canvas.js + ansi.js 使ってる
• ターミナルで画像を表示する
• jQuery いれたくなかったので jQuery つかわず実装
• さらに libcaca つかった
• デモ。動いた！
• これでブラウザがなくてもうごイラつかえるよ！