PIXIV DEV MEETUP 2024
https://conference.pixiv.co.jp/2024/dev-meetup/ogp.png
プロダクト開発イネーブルメント部マネージャー
会社規模拡大
プロダクト増加・多角化
プロダクト規模拡大
プロジェクトシェルパ
部署横断タスクフォース
PdMを中心としたシニアメンバーで組織
プロダクト開発は険しい山に登るような行為にサポートをする
「ピクシブらしい開発を誰もができるように」
共通認識をつくるドキュメント
何のために取り組むかの明文化を重視
ドキュメントテンプレート
Draft
はじめに
Why
なぜやるか？
What
なにをするか？
How
ハードルはあるか？
ガイドブックを作る
Why
なぜ山に登るのか
山に登ることで何を得たいのか
それぞれが日々何のために取り組むかを考える
明文化されたものをビジョンと呼ぶ
刷新検討プロジェクト
経営陣もメンバーに含む部署横断タスクフォース
ビジョンの刷新検討＝「何のために取り組むか」の探求 会社を主語にする
Someting next→「何か」
あえて社員に解釈を委ねるチャレンジ
「何のために〇〇に取り組むのか」
小神
基盤がうまく作れていない問題
このコンポーネントはこの色でいいのか？という悩み
色が足りない
５色しかないシンプルさ
黄色
塗りつぶしはいいけど文字に使うと読みづらい
鮮やかになって刺激が強くなる
読みやすい色を作るために４つ作った
ブランドカラーと通常カラーが被る問題
２カラーテーマ
１３ブランド
２コントラストテーマ
３色域
アクセシビリティはいるのか？
絶対にいる、社会水準よりも
印象派の画家
ベートーヴェン
アクセシビリティへの配慮がないのであれば、次にpixiviの入り口で閉め出されるのは未来の巨匠かもしれない
新たなカラーシステムの要件
人間には扱いづらい
違いがわからない
OK Lightness Chroma Hue
一貫性がもてるようになった
www.pixiv.netの誕生
PHPで作られてた
スマートフォン版（touch.pixiv.net）
jQuery + Smarty
デスクトップ・スマホ版をwww.pixiv.netに統一
SPAの世界へ移行
デスクトップ版React
スマホ版Vue.js
バンドルサイズを考慮のためVue
共通のロジックや定数をパッケージ化
主要ページでのレスポンシブ化（2020〜）
Next.jsの世界（2022＋）
pixiv-webというフロントエンドリポジトリ誕生
pixivのフロントエンドの現在
課題
１から設定されたビルドシステム
関係者が多い大きなモノレポ
yarn workspaces
デスクトップ・スマホの２重実装
学習コスト
フロントエンド開発によってオーナーシップを持てるようになる
TypeScript化がまだできてない
ページごとに移植
新規はNextで既存は移行
Nextの恩恵
コードベースに改善しやすくなった
デプロイフローの改善
ビルド時間の改善
ライブラリへの置き換えも移行しやすく
開発効率も向上
デプロイ回数も増えた
移行の課題点
３つの世界が４つの世界へ
150ページが存在
他ページへの遷移
スクロール位置の復元
表示速度の低下
これからのフロントエンド
スマホ版トップページがNext.jsへ
7/1から順次リリース
namazu
pixivはwebサービス
どのような構成になっているか
インフラ
www.pixiv.net
i.pximg.net
トラフィック構成
おおよそは画像配信
Traffic 100Gbps over (peak)
幅は３倍
コスト
ネットワーク転送料
収益
イラストは閲覧が短いのでPVあたりの広告単価が低い
トラフィックに対する収益性は低い
オンプレミスでやることが経済的に安定する
画像配信クラスタ
pximg.net
thumberd
画像変換モジュール
バックエンド
WAF
ngnix
httpd
DB
創業メンバーが慣れてるスタック
PHPは人員採用や生産性、実行効率においては問題ない
Apaccheはmod-phpからphp-fpmにするかも
pixiv.git
小規模高頻度のリリース
30秒でデプロイできる
ロールバックも同じくらいでできる
オンプレミス資本なので高性能ノードを毎日毎時間起動しても安価 スケールアップ解決
キャッシュは常に保持
開発体験の向上
リポジトリ開発者が多いので開発体験を改善を続けている
苦手なこと
MySQLやPHPに向かないようと
モジュールとして切り離して適した環境に分離する
セルフホストできないソリューション
一貫したオーナーシップの獲得が難しい
pixiv開発方針
状況を踏まえてよい方向へ考える
これからについて
西日本拠点の構築（可用性の向上）
小回りが効く挑戦しやすい環境づくり
rokuroku
プロジェクトを立ち上げるにあたっての意思決定の話
どのようなホームタブをつくってるのか
pixivのサービスとしての展開
イラストのみ
漫画、小説も追加
プラットフォーム
パソコンのみ
ケータイ（ガラケー）、スマホ、ネイティブアプリ
リニューアルもそれぞれで行う
トップページの多重化
課題
プラットフォームごとでトップページの設計が異なる
ストリートプロジェクト
「ホーム」タブを追加するプロジェクトネーム
pixivに大通りをつくる
目的
サービスの入り口を揃える
プロジェクトとインセプションデッキを当てはめてギャップを埋める
前提情報となる部分