このまとめは、個人の主観とtogetterをもとに作成しています。とても内容の濃いイベントで、情報量が多く、この記事ではその面白さ全ては伝え切れないですが、ご容赦ください。間違ってる点がありましたら、 @oliver_diary までよろしくお願いします。
PIXIV TECH FES.が開場しました！本イベントではピクシブのサービスを支える技術とカルチャーをたっぷり紹介していきます！#PIXIVTECHFES pic.twitter.com/ddXAgRVmyI
— ピクシブ株式会社 pixiv Inc. (@pixiv_corp) 2020年2月17日
CTOによるキーノートセッション
Pixivがどういう戦略を立てているのか、リードしていっているのかをキーノートで様々な人が紹介していくという内容。
Pixivは今は200名を超えるメンバーがいて、そのうち90人がエンジニアらしい。
そしてミッションは「創作活動がもっと楽しくなる場所を作る」こと。
Pixivには現在8000万もの作品が集まっており、800万アクティブユーザーがいる。そして、Pixivの各サービスが街のように連携する概念を「Pixivタウン」と社内では呼ばれていて、横の連携をとても強めている。
そして、サービスを跨いだUXなどの設計がとても大切であることを訴えていた。
リードデザイナー（ykskさん）のキーノート
始めに、新トップページのUIの紹介があった。創作物の発揮する価値を最大化する設計を行っている。
新トップページのUI
プロフィールページは、もうすでに変わっている。ABテストもして、数値も上がってるし大丈夫とのこと。
また、Pixiv本体に機能追加を増やし続けることに限界がきていたが、「Pixivタウン」の概念によって、別のサイトで展開できないか？という考えができるようになった。
共通ヘッダーの話になり、ヘッダーでは、別のサービスへの導線を作り、Pixivタウンに対応していってる。UIはGoogleでよく見たことのあるやつだった。
どのページ（10個以上のサービス）でも同じように共通ヘッダーを表示しなきゃいけない。そのためにデザインシステムの開発を行っている。
デザインシステムの目的は「一貫性とチームメンバーの開発スピード」のために行っている。
また、ダークモードの紹介もあった。今はベータ版らしい。社員に見れば見れるよ！とのこと。
ダークモードの様子
フロントエンドエンジニア（namazuさん）のキーノート
ここからは、フロントエンドのエンジニアにバトンタッチ。Pixivのリニューアルについて話した。
まずは、歴史を遡り、昔はPixivはレスポンシブデザインじゃなかったことを振り返った。
昔のデザインを「いにしえのUI」と例え、これをどのように書き換えていったかを話した。
昔のデザインは、動線が複雑。何故そんな状態だったか。なぜもっと早く改修しなかったのか、と入社したときに思ったらしい。
元々、Pixivはホワイトキューブいうリニューアルを試みたことがあったが、失敗した過去がある。
ホワイトキューブ版Pixivトップ
歴史長く、ユーザーも多く、長い間使われている、一度に大きな変更はできない、というリニューアルの規模が多すぎて、幻になってしまった。ここで得た教訓は、「デザインと機能を同時にリニューアルしない」ことが大切。段階を踏んで1ページずつ行っていくことが大切であると。
その方針のもと2018年に再リニューアル開始した。1ページずつSPAに。だが、1つのページずつやっているので、とあるページではSPAではない状態となる。徐々にレガシーな部分を閉じていくと。
ここで、Pixivはレガシーというよりはカオスであると表現していた。
カオスなものを一つ一つ閉じていくということをずっとやって来た。Pixivは当たり前のことをやって来ただけ。当たり前のことをしてSPAを作る。
Rendertronを用いてSEO対策をしているという話題もでた。SSRするには規模が大きすぎたらしい。
また、yarn workspaceにより、tsconfig.jsonを共通化することにより、モバイルとPCでコードの統合を図っている。そしてPixivはモダンに近づいて来た。95%がSPAになったらしい。
そのおかげで、チームがスケールできないという、レガシーな問題が解決できてきた。なので、人を雇いやすく、アルバイトにも入ってもらいやすくなった。
そしてこれからも当たり前のアプリケーションへ向かい続けると締め括った。
アプリテックリード（FromAtomさん）によるキーノート
PixivにはTech Leadsという仕組みがある。Pixivではある程度類似しているサービスは一緒に作っている。
そして、認証とか課金周りサービス全てを支えるサービスプラットフォームがあり、その下にインフラがあるが、それぞれにTech Leadを配置している。
その中のアプリテックリードであるFromAtomさんにモバイルアプリの戦略について話してもらう。
PixivのアプリはAndroidとiOS合わせて12個あるのだが、それを11人（少数精鋭）で開発している。
アプリ実装時の指針として、「Webをコピーしない」ということを気をつけている。WebにはWebの素晴らしさがあり、アプリにはアプリの体験がある。コピーして終わるならアプリはいらない。
アプリで提供したい体験がそこにあるから、アプリを作っている。全てではなく、コアな機能だけをアプリにすることが大事。アプリでしかできないこともしっかりユーザーに届ける。
そして、新しい技術や端末の形（ゲームボーイSPみたいなスマホ）にも積極的に付いていく。
例えば、お絵かき機能はApple Pencilに対応している。Apple Pencil2ではジェスチャー機能が追加されたが、1週間で対応した。ユーザーの家に届いたらすぐにトントンができると。素早く届けることを大事にしている。
これこそがネイティブ開発のメリットであり、そして、これからは、スマホとタブレットで創作活動をする時代が来る。創作活動は机の上から手のひらの上に。
その中で、「アプリの価値を最大化」することを忘れない。特にユーザーの創作活動に重きを置いている。
それが達成できるならネイティブでの開発でなくなってるかもしれない。ともかく忘れないことは「アプリの価値を最大化」である。
データ駆動推進室マネージャー（jaggyさん）のキーノート
Pixivを支え、伸ばしているものはデータ。例えば行動履歴とか。
わかりやすいのはレコメンデーション。ピクシブでは当たり前の技術である。おすすめ作品とか。
Data Drivenなカルチャーとして、データ駆動推進室が存在する。その中のマネージャーであるjaggyさんのキーノート。
Pixivでは事業部の人もSQLなしでデータが見れるLookerを導入している。これで全員がデータを見れる。
過去を振り返ると、Pixivは2012年まではデータを見ていない。SNSの反応と勘に頼っていたらしい。
2013年にグロースチームが発足するが見るべきデータがない。新規会員登録数と何も刺さってないGoogleアナリティクスだけがあった。
そこから、elasticsearchとkibana、BigQueryやGoogleアナリティクスを用いて可視化した。
だが、2014年、アクセス大きすぎてGoogleアナリティクス停止勧告がくる。Googleアナリティクスに制限の190倍のデータを送っていたらしい。なので有料化した。
そしたらいいこともあり、Googleアナリティクスのログが自動でBQに取り込めるようになった。
ここからサービスは増加していくが、2018年にはPixivの全データがBQに乗っかるようになった。
BQとSQLという共通言語の獲得した。各プロダクトのチーム内でデータ分析を行えるよう、そういった流れでできたのが推進室である。
だが、当時はチーム主導だった。各チームでは秘伝のSQLやダッシュボード、スプレッドシートがあり、ノウハウが共有されず効率が悪い。推進室で、便利な仕組みを作ってチームをサポートしていった。
その中で、Lookerというデータ探索プラットフォームをつかった。そしてSQLなしで全社員がみれるようになり、横断的なデータの共有ができるようになった。
今後のピクシブでのデータ活用は、真のデータ駆動組織化を目指し、データを社外（クリエイターやサブカル）へ提供することを目標としている。
データエンジニア（tohhyさん）のキーノート
ここからはデータ駆動推進室のエンジニアの視点。
データ駆動推進室の立ち上げ時のデータ環境はすでにほぼ整っていた。そしてデータはBQに集約されていた。
各チームが自然とそうしていた。そして、多くのエンジニアになじみ深いSQLで繋がっていた。
横のつながりも重要だが、既に実現できていた。
当時、チーム主導の分析文化があり、プロダクトを最も理解しているメンバーが分析活動をリードしていった。
だが、課題が見え始めた。例えばそのデータの正当性の担保である。
また、チーム間のバラバラな活動。
そして、チーム内での作業コストの増加などが上がった。
チーム主導であるがゆえの課題が出て来た。そのような背景があって推進室ができた。そして連携するようになった。
SQLすら不要な世界を目指し、Lookerの導入。Lookerでは分析操作がSQLに変換されBQに使える。ビジネス職の人でもLookerでみれる世界が実現できたので分析活動をスケールさせることができるようになった。
Lookerはコードに残せるので、正当性もチェックできる世界になった。
しかし、新たな課題も見えてきている。例えば、データパイプラインの複雑化。
盤石な仕組みを平易な形で提供することが大事。
最近では、データ分析ワクワクタイムを定期的に開いているらしい。
セキュリティエンジニア（koboさん）のキーノート
「Quality is free」でクオリティにかけたコストは、必ず返ってくる。だから実質無料じゃん。という運動をしている。
そのためにサービスのモニタリングが大事で、全ての人がサービスのモニタリングができる状態が良い。
元々はインフラのためにモニタリングが用意されていたが、そうではなく、全ての事業部が監視できるように。
そう言った背景から、Datadogの導入。全事業部が自ら主体的にダッシュボードを作り、モニタリングをできるように。
エラーモニタリングにおいては、昔はメールを使っていた。全社員に送られる。
それは辛いのでSentryを使い、エラーログを収集し始めた。
セキュリティの観点ではPixiv CSIRTが存在している。小さなことでも相談できる。ここから、koboさんのセッションとなる。
ピクシブのセキュリティへの取り組みは、事業部の開発速度を落とさず、包括的であり、面白いを方針としている。
特に、技術的に挑戦できるという意味で面白いを大事にしている。
また、何をしないで、何をするかという目線も存在している。
特にSecure by default、デフォルトでもセキュアになるようなシステム導入などが仕事である。Content-Security-PolicyやSameSite Cookieを用いてサービスを安全に保っている。
これらはブラウザに標準で備わっていて、自動的にある程度のサイドチャネルやXSS、CSRFなどを防げる。
またCSPに関しては、Pixivの全てのサービスに導入していく予定である。
ここからはPixivにおける認証の話。認証基盤のセキュリティにはかなり気合を入れている。
パスワードリスト型攻撃はとても有名だが、現在はVPNとかBotnetsなどによって、IPを分散させてくるため大変。
だからPixivでは、自動的に判断しブロックする仕組みを作り、ボットを弾いている。
またパスワードに使用されがちな文字の検知し、脆弱なパスワードでは登録できないようになっている。そして、その脆弱なパスワードのテーブルはPixiv側でSHA1暗号をかけ、保存され、利用されている。
そして、二要素認証も進めている。生体認証も可能になるかもしれない。
また、バグバウンティプログラムについても積極的に行っている。
現在、報告件数は178件。総額約5万ドルである。まだまだであるので、どんどん投資していく予定である。
最後にProductivityのためのセキュリティを今後もやっていくと締め括った。
CTOから最後の締め括り
よりクリエイティブを目指し、「BE CREATIVE」 を掲げ、目指していく。この後のLTはそこを感じられるでしょう。と締め括った。
LTまとめ
LTはバトル形式で行われました。PixivにまつわるLTで、どれもLTらしさが出ていて、とても面白かったです。勢いが早すぎて、あまりメモが取れなかったのですが、スライドを公開している人はここにまとめておきます。
ピクシブの広告配信システムの概要と今後の展望
ふつうのPHPがpixivになるまで
「動き」のあるWebサイトを支えるCSSアニメーション技術
最後に
今回、初めてPixivのカンファレンスに参加しました。クリエイターを支えるサービスの本気度が伺え、とても満足です。「BE CREATIVE」を掲げ今後も突っ走っていくPixivに、１ファンとして、とても応援し、楽しみにしています。