Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
My works in pixiv Inc. first year.
Search
tamanobi
October 02, 2017
Technology
0
1.3k
My works in pixiv Inc. first year.
pixivのコードに触れて活動した1年間の成果を紹介します。
tamanobi
October 02, 2017
Tweet
Share
More Decks by tamanobi
See All by tamanobi
ピクシブの広告配信システムの概要と今後の展開
tamanobi
0
2.5k
大規模ウェブサイトのURL刷新の方針と実装
tamanobi
0
2.9k
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
550
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
230
20240416_devopsdaystokyo
kzkmaeda
1
220
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
760
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
JSON攻略法.pdf
miyakemito
8
4.9k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
NgRx Signal Store
rainerhahnekamp
0
150
開発パフォーマンスを最大化するための開発体制
ham0215
2
200
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
Featured
See All Featured
The Invisible Side of Design
smashingmag
294
49k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Building Your Own Lightsaber
phodgson
99
5.7k
Bash Introduction
62gerente
604
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
Code Reviewing Like a Champion
maltzj
514
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing the Hi-DPI Web
ddemaree
276
33k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Transcript
pixiv.gitと過ごした1年 開発部 技術基盤チーム yasu
内容 • 2年目エンジニアがこの1年での成果を紹介 • 働き方をイメージしてほしい
自己紹介 • yasu(やす) • 2016年度入社(2年目) • 技術基盤チーム(pixiv.git/広告/メール) • 趣味は、たくさんのイラストを眺めること •
pixiv.gitを中心に仕事をしている
大学時代 • コミュニケーションロボットの研究 • 哲学書(メルロ=ポンティ/JJ.ギブソン)を読んでいた
大学時代 • 雑談や多人数会話を対象に研究 • 画像のようなクリーチャー(ロボット)を制作・研究 • ロボットは「キモかわいい」と評判
大学時代 • ロボットはUbuntu/C++で開発 • ドキュメントのない15万行の歴史あるコードと戦っていた
ピクシブへ入ったときの やす • pixiv.gitはPHP => PHP歴は、ほぼ0 • DB設計の経験も0 • ウェブサービス開発経験は、ほぼ0
• 大学ではロボット研究(Ubuntu/C++) • 技術を知るのは好き 不安
研修
研修 • 基本的な仕事のやり方を2ヶ月近くかけて学ぶ • 内容 ◦ 2016年度: http://inside.pixiv.net/entry/2016/07/08/151917 ◦ メンテナンス研修
◦ 実務開発研修 ▪ 勤怠システム改修 ▪ メール配信システム ◦ プログラミング研修 ◦ 読書会
メール配信システム • 従来: エンジニアがバッチ作成してメール配信 • ビジネス職でも適切にセグメント分けしてメール配信したい
メンテナンスチーム
メンテナンスチームに配属 • 6人で各種技術改善を取り組んだ • 新卒研修のメール配信システム引き継ぎ
• 6人でエラー数を減少(2000件/日 => 500件/日)
エラー数削減 • ログビューワーは内製(harukasan) ◦ Mongo DB + PHP • エラーの種類
◦ ユーザーが困っている場合 ◦ 行儀の悪いボットアクセスの場合
エラー数削減 • エラーの種類 ◦ ユーザーが困っている場合 ◦ 行儀の悪いボットアクセスの場合 気づきたい
エラー数削減 • 行儀の悪いボットアクセスは infoログに流すようにした ◦ 重要なエラーが埋もれない • コントローラーの古いコードは、新しい仕組みに修正
投稿改善
投稿改善 ユーザーからの声 「pixivにイラスト投稿しようとしたらファイルフォーマットを統一 してくださいって言われたけどどうすればいいのかわからない」
投稿改善 「JPEGとPNG混在の投稿をできるようにしたい」 ※画像中の作品の掲載許可は取っています
投稿改善 「JPEGとPNG混在の投稿をできるようにしたい」 つらい ※画像中の作品の掲載許可は取っています
投稿改善 ※画像中の作品の掲載許可は取っています
投稿改善 • 「JPEGとPNG混在の投稿をできるようにしたい」 • 途中デザイナーを巻き込んでデザインしてもらった ※画像中の作品の掲載許可は取っています
pixiv ID変更
pixiv IDとは • https://pixiv.me/pixiv ※画像中の作品の掲載許可は取っています
pixiv ID変更 • 誕生日や電話番号を入れてしまうユーザーも少なくなかった (2007年当時、IDが露出するとは思われていなかった節がある) • 画像サーバーの設計がpixiv IDに依存していたので変更が困難 • データベース設計からフロントまで、ほぼ1人
pixivの画像ストレージ設計変遷 • 過去はユーザーごとのディレクトリに画像格納(pixiv IDに依存) • 現在は日時ごとのディレクトリに画像を格納 • 詳しくは、「pixivのインフラを支える技術」を参照してください https://speakerdeck.com/harukasan/the-technology-behind-pixiv-infrastructur e?slide=19
pixiv ID変更の実作業 • 自動置換できない数百箇所を慎重に変更 • 一部障害を起こしたが粛々と修正
pixiv ID変更テーブル設計 • pixiv ID変更を記録するテーブルを設計 • いたずらされない設計 ◦ 変更は一度限り ◦
一度取得されたpixiv IDは取得不能 ◦ 転生はできない
• pixiv SketchではIDが露出する • 変更できないなら退会する人もいた • 実際の問い合わせ 「IDを変えたいのですがどうしたらいいですか?」 「pixivのIDが丸見えで身バレするのでpixiv Sketchを退会したいです。]
pixiv ID変更はなぜ必要? ※画像中の作品の掲載許可は取っています
自動テスト導入
投稿でバグ • 投稿機能はpixivの重要な機能の一つ • ユーザー「なぜか投稿できません。どうしてですか?」
投稿でバグ • 2017年5月 • リファクタリング中にFirefoxで投稿機能が動かなくなった • JavaScriptのコードでエンバグしたことが判明
自動テストの導入 • Seleniumを使った投稿機能の自動テストを提案/実装 • 外部サービスの選定を行って実装
自動テストの導入 • Capybara + Minitestで実装 • 1時間に1度投稿周りを自動的にテスト • テストに失敗したら、Slackに通知
機械学習
機械学習 「pixivには大量の画像があるなら、機械学習で何かできるはず」
pixivの画像クロッピング • スマートフォン版pixivの画像は 正方形にクロップしている 横長画像 縦画像
pixivの画像クロッピング • 好ましくない位置でクロッピングされることがある • 機械学習で改善を図った 顔が半分に切り取られる場合 意図しないクロッピングで主題が写りこまない場合
pixivの画像クロッピング • 一部の画像で改善したが、処理時間などの問題がありpixivには未実装 • 思わぬところで趣味が活きた 機械学習によって 物体らしい領域を 検出している画像 機械学習によって 物体らしい領域を
検出している画像 クロッピング改善によって 顔が切れずに領域に収まっている例 主題がクロッピングの中に収まるように 改善した例
まとめ
• 内製メール配信システム • 複数枚投稿複数ファイルフォーマット対応 • pixiv ID変更 • 自動テスト導入 •
機械学習(クロッピング) • 広告周り.... これまでやってきたこと 機械学習によって 物体らしい領域を 検出している画像 ※左下画像中の作品の掲載許可は取っています
一人ではできなかった • どの成果も一人では達成できなかった • 周りからの手厚いサポートやお膳立て • 「やりたい」と思って周囲に相談すること大事
まとめ • ピクシブはユーザーに近いところで仕事ができる • 「やってみたい」と言うとやらせてもらえる ◦ プロトタイプ持っていくとスムーズ • 大学時代や趣味では畑違いのことをやっていたが、意外と活きる •
あとISUCONおすすめ(http://isucon.net)
おしまい