Upgrade to Pro — share decks privately, control downloads, hide ads and more …

My works in pixiv Inc. first year.

tamanobi
October 02, 2017

My works in pixiv Inc. first year.

pixivのコードに触れて活動した1年間の成果を紹介します。

tamanobi

October 02, 2017
Tweet

More Decks by tamanobi

Other Decks in Technology

Transcript

  1. pixiv.gitと過ごした1年
    開発部 技術基盤チーム yasu

    View Slide

  2. 内容
    ● 2年目エンジニアがこの1年での成果を紹介
    ● 働き方をイメージしてほしい

    View Slide

  3. 自己紹介
    ● yasu(やす)
    ● 2016年度入社(2年目)
    ● 技術基盤チーム(pixiv.git/広告/メール)
    ● 趣味は、たくさんのイラストを眺めること
    ● pixiv.gitを中心に仕事をしている

    View Slide

  4. 大学時代
    ● コミュニケーションロボットの研究
    ● 哲学書(メルロ=ポンティ/JJ.ギブソン)を読んでいた

    View Slide

  5. 大学時代
    ● 雑談や多人数会話を対象に研究
    ● 画像のようなクリーチャー(ロボット)を制作・研究
    ● ロボットは「キモかわいい」と評判

    View Slide

  6. 大学時代
    ● ロボットはUbuntu/C++で開発
    ● ドキュメントのない15万行の歴史あるコードと戦っていた

    View Slide

  7. ピクシブへ入ったときの やす
    ● pixiv.gitはPHP => PHP歴は、ほぼ0
    ● DB設計の経験も0
    ● ウェブサービス開発経験は、ほぼ0
    ● 大学ではロボット研究(Ubuntu/C++)
    ● 技術を知るのは好き
    不安

    View Slide

  8. 研修

    View Slide

  9. 研修
    ● 基本的な仕事のやり方を2ヶ月近くかけて学ぶ
    ● 内容
    ○ 2016年度: http://inside.pixiv.net/entry/2016/07/08/151917
    ○ メンテナンス研修
    ○ 実務開発研修
    ■ 勤怠システム改修
    ■ メール配信システム
    ○ プログラミング研修
    ○ 読書会

    View Slide

  10. メール配信システム
    ● 従来: エンジニアがバッチ作成してメール配信
    ● ビジネス職でも適切にセグメント分けしてメール配信したい

    View Slide

  11. メンテナンスチーム

    View Slide

  12. メンテナンスチームに配属
    ● 6人で各種技術改善を取り組んだ
    ● 新卒研修のメール配信システム引き継ぎ

    View Slide

  13. ● 6人でエラー数を減少(2000件/日 => 500件/日)

    View Slide

  14. エラー数削減
    ● ログビューワーは内製(harukasan)
    ○ Mongo DB + PHP
    ● エラーの種類
    ○ ユーザーが困っている場合
    ○ 行儀の悪いボットアクセスの場合

    View Slide

  15. エラー数削減
    ● エラーの種類
    ○ ユーザーが困っている場合
    ○ 行儀の悪いボットアクセスの場合
    気づきたい

    View Slide

  16. エラー数削減
    ● 行儀の悪いボットアクセスは infoログに流すようにした
    ○ 重要なエラーが埋もれない
    ● コントローラーの古いコードは、新しい仕組みに修正

    View Slide

  17. 投稿改善

    View Slide

  18. 投稿改善
    ユーザーからの声
    「pixivにイラスト投稿しようとしたらファイルフォーマットを統一
     してくださいって言われたけどどうすればいいのかわからない」

    View Slide

  19. 投稿改善
    「JPEGとPNG混在の投稿をできるようにしたい」
    ※画像中の作品の掲載許可は取っています

    View Slide

  20. 投稿改善
    「JPEGとPNG混在の投稿をできるようにしたい」
    つらい
    ※画像中の作品の掲載許可は取っています

    View Slide

  21. 投稿改善
    ※画像中の作品の掲載許可は取っています

    View Slide

  22. 投稿改善
    ● 「JPEGとPNG混在の投稿をできるようにしたい」
    ● 途中デザイナーを巻き込んでデザインしてもらった
    ※画像中の作品の掲載許可は取っています

    View Slide

  23. pixiv ID変更

    View Slide

  24. pixiv IDとは
    ● https://pixiv.me/pixiv
    ※画像中の作品の掲載許可は取っています

    View Slide

  25. pixiv ID変更
    ● 誕生日や電話番号を入れてしまうユーザーも少なくなかった
    (2007年当時、IDが露出するとは思われていなかった節がある)
    ● 画像サーバーの設計がpixiv IDに依存していたので変更が困難
    ● データベース設計からフロントまで、ほぼ1人

    View Slide

  26. pixivの画像ストレージ設計変遷
    ● 過去はユーザーごとのディレクトリに画像格納(pixiv IDに依存)
    ● 現在は日時ごとのディレクトリに画像を格納
    ● 詳しくは、「pixivのインフラを支える技術」を参照してください
    https://speakerdeck.com/harukasan/the-technology-behind-pixiv-infrastructur
    e?slide=19

    View Slide

  27. pixiv ID変更の実作業
    ● 自動置換できない数百箇所を慎重に変更
    ● 一部障害を起こしたが粛々と修正

    View Slide

  28. pixiv ID変更テーブル設計
    ● pixiv ID変更を記録するテーブルを設計
    ● いたずらされない設計
    ○ 変更は一度限り
    ○ 一度取得されたpixiv IDは取得不能
    ○ 転生はできない

    View Slide

  29. ● pixiv SketchではIDが露出する
    ● 変更できないなら退会する人もいた
    ● 実際の問い合わせ
    「IDを変えたいのですがどうしたらいいですか?」
    「pixivのIDが丸見えで身バレするのでpixiv Sketchを退会したいです。]
    pixiv ID変更はなぜ必要?
    ※画像中の作品の掲載許可は取っています

    View Slide

  30. 自動テスト導入

    View Slide

  31. 投稿でバグ
    ● 投稿機能はpixivの重要な機能の一つ
    ● ユーザー「なぜか投稿できません。どうしてですか?」

    View Slide

  32. 投稿でバグ
    ● 2017年5月
    ● リファクタリング中にFirefoxで投稿機能が動かなくなった
    ● JavaScriptのコードでエンバグしたことが判明

    View Slide

  33. 自動テストの導入
    ● Seleniumを使った投稿機能の自動テストを提案/実装
    ● 外部サービスの選定を行って実装

    View Slide

  34. 自動テストの導入
    ● Capybara + Minitestで実装
    ● 1時間に1度投稿周りを自動的にテスト
    ● テストに失敗したら、Slackに通知

    View Slide

  35. 機械学習

    View Slide

  36. 機械学習
    「pixivには大量の画像があるなら、機械学習で何かできるはず」

    View Slide

  37. pixivの画像クロッピング
    ● スマートフォン版pixivの画像は
    正方形にクロップしている
    横長画像
    縦画像

    View Slide

  38. pixivの画像クロッピング
    ● 好ましくない位置でクロッピングされることがある
    ● 機械学習で改善を図った
    顔が半分に切り取られる場合 意図しないクロッピングで主題が写りこまない場合

    View Slide

  39. pixivの画像クロッピング
    ● 一部の画像で改善したが、処理時間などの問題がありpixivには未実装
    ● 思わぬところで趣味が活きた
    機械学習によって
    物体らしい領域を
    検出している画像
    機械学習によって
    物体らしい領域を
    検出している画像
    クロッピング改善によって
    顔が切れずに領域に収まっている例
    主題がクロッピングの中に収まるように
    改善した例

    View Slide

  40. まとめ

    View Slide

  41. ● 内製メール配信システム
    ● 複数枚投稿複数ファイルフォーマット対応
    ● pixiv ID変更
    ● 自動テスト導入
    ● 機械学習(クロッピング)
    ● 広告周り....
    これまでやってきたこと
    機械学習によって
    物体らしい領域を
    検出している画像
    ※左下画像中の作品の掲載許可は取っています

    View Slide

  42. 一人ではできなかった
    ● どの成果も一人では達成できなかった
    ● 周りからの手厚いサポートやお膳立て
    ● 「やりたい」と思って周囲に相談すること大事

    View Slide

  43. まとめ
    ● ピクシブはユーザーに近いところで仕事ができる
    ● 「やってみたい」と言うとやらせてもらえる
    ○ プロトタイプ持っていくとスムーズ
    ● 大学時代や趣味では畑違いのことをやっていたが、意外と活きる
    ● あとISUCONおすすめ(http://isucon.net)

    View Slide

  44. おしまい

    View Slide