entry-header-eye-catch.html
entry-title-container.html

entry-header-author-info.html
Article by

ピクシブのプロダクトと技術 ─ 福岡オフィスオープン記念祭 基調講演

2017年3月3日、ピクシブ福岡オフィスにて「福岡オフィスオープン記念祭」が開催されました。

同イベントでは、福岡オフィス立ち上げの中心人物で、ピクシブの執行役員である東根 哲章、CTOの高山 温、CCOの川田 寛が参加。福岡在住のエンジニアと共に、オフィスの完成を祝いました。

執行役員 CTOの高山からは、福岡のエンジニアに向けてピクシブの技術の全体像がわかる「ピクシブのサービスと技術」という発表がされました。同セッションの内容について紹介します。

巨大な80万行のPHPアプリケーション

ピクシブはこれまで、クリエイターに向けてさまざまなサービスを提供してきました。これらは、サービスごとに独立したリポジトリで運用されているものもあれば、連携しやすくするために、複数のサービスを一つのリポジトリに相乗りさせて運用しているものもあります。

後者のリポジトリを、僕らは「pixiv.git」と呼んでいます。

pixiv.gitには、イラストコミュニケーションサービス「pixiv」をはじめとして、「pixivision」という創作活動に関わるメディアであったり。また、クリエイター支援サービスである「pixivFANBOX」や、イラストが学べるサービス「sensei」など、pixivと連動した様々なサービスのソースコードが、この一つのリポジトリで管理されています。

pixiv.gitは、2007年から稼働しはじめて、現在では80万行を超える巨大なPHPアプリケーションになりました。10年も運用しているので、レガシー資産だと捉えられがちですが、僕らはそういう風に考えていません。

PHPは徐々に5.2から7へと移行を進め、コードベース全体に関わるリファクタリングも頻繁にやっています。担当する人が変わっても読めるとか、一貫した思想に基づいて書かれているとか、理想を追い求めて改善を進めています。

フロントエンド技術については、かつてはprototype.jsが使われていた時期もありました。僕が入社した2012年にはjQueryを活用していたのですが、最近はプリコンパイル環境が充実し、webpackなどを使ってES2017やReactといった最近の技術を活用しています。

世界有数のトラフィックを捌くインフラ

pixivは、大量のアクセスがあるサービスです。全世界からやってくる毎分30万リクエストのトラフィックを、自前で構築したインフラで捌いています。

pixivがオープンしてしばらくは、頻繁にサービスがダウンしたり、サーバー台数をとことん減らさなければいけない事情があり、インフラやアプリケーションの改善によるパフォーマンスチューニングを繰り返していた時期がありました。努力の甲斐もあって、余裕がある今は安定して運用できています。

インフラでは、特に画像配信が大変でして。一つのページ内に、ユーザーが投稿したイラストなどの画像が20枚ほどでてきます。ユーザーからのアクセス数に対し、単純計算で20倍のリクエストを捌かなくてはいけません。

pixivの画像配信インフラは、恐らく日本で一番のトラフィック量を捌いています。 世界でも有数のトラフィック量ではないでしょうか。また、ロングテールなアクセス傾向にある上に、一つの画像に対して10パターン以上のサムネイルを生成することが求められています。

それに最適化するため、OSSを組み合わせて独自のキャッシング機構を構築したり、自前の画像変換の仕組みをGoで開発したり、日々改善を繰り返し運用しています。

こうした取り組みの中で鍛えられた画像変換や配信などの技術を、さくらインターネットさんの協力の下、クラウドサービスとして公開しています。「ImageFlux」として、ピクシブ外のサービスでも活用できるようにしました。

ImageFluxは、C言語を使ったアセンブラレベルの技術を使って画像変換処理をしていたり、Goを使ってネットワーク周りを最適化したりと、低レイヤーでの改善が繰り返されています。最高の画像変換技術を求めて、研究が進められています。

実は今回のイベントでも、一緒にImageFluxを運用しているさくらインターネットさんから、福岡オフィスオープンのお祝いの花を贈っていただいてます。いつもありがとうございます!(会場拍手)

他社から手本にされたGo製の広告配信サーバー

広告配信システムの話をします。

ピクシブでは、広告配信のための仕組みをフルスクラッチで開発し、広告の運用に活用しています。管理画面はRuby on Railsですが、広告を配信するサーバーは、大量のトラフィックを捌くためにGoで開発しています。

で、そのGoの配信サーバーに関してですが。広告配信サーバーの実装方法に関する情報は、他社さんだと外には公開しない傾向にあります。それ自体が会社のビジネスとして重要になることがあるからです。

ただ、僕らは広告配信そのものをコアビジネスにしたり、ダイレクトに収益を得るための手段にしません。僕らが考えて作った広告配信の技術が、会社の外の人に知られても、失うものはないんです。だから僕らは、広告配信サーバーの情報を外に公開しています。

他の会社さんから 「参考にしました!」とか「あのGoの広告サーバー、ウチも同じような感じでやっています!」なんてコメントを頂くようになりました。色んな企業さんで、広告配信サーバーを作る上での参考にされているようです。

属人化を徹底的に排除するRuby on Rails

ピクシブでは、pixiv.gitに含まれないサービスの多くにRuby on Railsを使っています。

例えば、pixivと親和性の高いショップ作成サービス「BOOTH」や、イラスト1枚をアップロードするだけでオリジナルグッズが作れるサービス「pixivFACTORY」は、Ruby on Railsで開発されています。

pixivからデビューした名作マンガなどを扱うマンガアプリ「pixivコミック」や、pixivよりも気軽に絵を描いて投稿できるサービス「pixiv Sketch」も、バックエンドはRuby on Railsです。

エンジニアはプロダクトに長く関わるほど、暗黙知が増え、属人性が増すものです。エンジニアがチームに移ってすぐに、高いパフォーマンスを発揮できないという問題は、ピクシブに限った話ではないはずです。

ただ、Ruby on Railsアプリケーションに関しては、Rails Wayに従うことで、技術的な面での属人性を排除できると考えてます。Rails Wayな部分の知識は共通しているので、チームを超えてノウハウをスケールできるんですね。

Railsのアップデートのノウハウもその一つです。つい最近なんですけど、違うチームにいるRailsエンジニアが集まって、pixivコミックで使ってるRailsを3.2から5.0にアップデートしました。Railsエンジニアは、チームを横断して活躍できるんです。

Rails Wayに従って、普通のことを普通にやる。普通のことに、エンジニアの頭の無駄遣いをしないためのRuby on Railsです。

普通にやれないときこそ、エンジニアは頭を使う

「普通のことを普通にやる」とはいいましたが、プロダクトの特性上、普通に作れないモノもあります。

イラスト一枚からグッズを作れるサービスであるpixivFACTORYでは、サーバー内でBlenderやImageMagickを外部コマンドとして使ってイラスト画像を処理し、グッズの完成予想写真(商品プレビュー)を表示しています。

汎用のOSSライブラリでは解決出来ない場合もありまして。最近では、自前でGoの画像処理ツールを開発したり、画像フォーマットを直接解釈してバリデーションさせるような仕組みを作るなど、低級なことにも踏み込んでいます。

→ 参考: 二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話

pixivSketchでは、Web版とiOS版とAndroid版を提供しています。バックエンドはRuby on Railsなのですが、Viewを持っておらず、JSONを返すAPIサーバーとして機能しています。

Web版はViewがリッチでJSも多いので、Viewの部分をNode.jsを使ってisomorphicな実装にしています。Node.jsからアプリと同じAPIを呼び出せるようにすることで、バックエンドからフロントエンドに至るまでさまざまな処理を共通化しています。

→ 参考: pixiv Sketchのフロントアーキテクチャ

ピクシブが運営しているサービスには、決済が絡むものもあります。これを共通に扱えるようにした、全サービス横断型の決済基盤システムがありまして、僕らはそれを「pixivPay」と呼んでいます。

社内で課金を扱うサービスが古くなってきたので、一昨年ぐらいから開発をはじめました。PHPやRuby on Railsで扱うには、複雑過ぎるビジネスロジックがありまして、これを安全に記述するためにScalaを使っています。

このように、普通にやるべきところは普通にやって、普通じゃないところはエンジニアが頭を使って解決する。僕らはそういう技術選択をして、サービスづくりをしています。

チャレンジしていくことを大切にする

サービスづくりですが。ビジネス職が1人ぐらいいて、エンジニアが2人〜5人ぐらいいるような小さなチームで、サービスづくりをすすめています。自分たちがちゃんと見られる範囲でチームに分かれて、担当するという体制で進めています。

僕らの第一目標は、クリエイターに支持されるプロダクトを作っていくことです。

その前提があって、新卒であっても中堅どころであっても、役割に関係なく、ガンガン意見を言える環境であるべきだと考えています。そして、サービスを作っていく上で必要となる技術は「できそうだから勉強してやろうぜ」と受け入れていく、チャレンジ精神を大切にしています。

技術的な選択に関しては、トップダウンでやるというよりは、各チームに任せて、そのかわりノウハウだけは社内で共有しようという進め方です。失敗もあるけれども、小さなチャレンジを繰り返していく。そうして新しいことにチャレンジすることが大切です。

最後に。

ピクシブでは、僕らと一緒にクリエイターに支持されるプロダクトを作りたいエンジニアを募集しています。ここで語った話は、今まで東京だけでやっていたことでした。しかし今は、福岡でも一緒にエンジニアとして働いてもらえるようになりました。

ご応募、お待ちしてます!ありがとうございました。

20191219010448
edvakf
2016年12月から2019年12月までCTOとして全社のシステム設計と組織設計をしていました。 #2012年入社 #福岡オフィス立ち上げ #物理専攻 #大学中退 #大学院中退 #pixivコミック #グロースチーム(既に無い) #JavaScript #Ruby #PHP #Go #Scala