技術広報室のkamikoです。突然ですが皆様、ピクシブのインフラ規模をご存知ですか？ピクシブでは20以上の自社サービスを開発運用していますが、約300台規模のサーバなどからなるインフラ基盤も自社で構築・運用を行っており、秒間10万リクエスト・30万クエリ以上の処理と、60Gbpsを超えるトラフィックを無理なく安定的にさばいています。よりインフラの詳細を知りたい方はこちらのブログを先にご覧ください。 システム設計や物理的な機器調達はもちろん、OSやミドルウェアのパフォーマンスチュニーングなどを日々行っているピクシブのインフラエンジニアは、何とマネージャー含めて8名（2022年11月現在） 精鋭たちは普段どんな目標に向かって、どんな業務に、どんな想いを持って取り組んでいるのか？本日はインフラ部のSREチームに所属するエンジニアのうち、参加できなかった1名を除く4名にインタビューしてみました。

こんにちは。福岡オフィスで課題解決部に所属しているエンジニアの petamoriken です。趣味で ECMAScript の動向を追ってたりします。よろしくお願いします。 この記事では私がレガシーだったピクシブ百科事典のフロントエンドを如何にしてリファクタリングし、モダン化していったかを紹介していこうと思います。 まずピクシブ百科事典の構成の調査 ピクシブ百科辞典のフロントエンドのコードは複数の JavaScript がクラシックスクリプト形式で読み込まれ、実行されていました。もっと詳しく説明すると、ページ共通のエントリーポイントの中で今どのページにいるかの判定をし、そのページに必要なスクリプトを LABjs というライブラリを使って動的に <script> タグを追加することによって読み込んでいました。 これにより別のコードで定義されたグローバル変数を使うのが当たり前の状態になっていま

こんにちは、CTOのharukasanです。CTO以外にImageFluxのプロダクトオーナーもやっています。 ピクシブは三重県津市で開催されたRubyKaigi 2022にMusic Lounge Sponsorとして参加しました。 Ruby Music Mixin ピクシブでは最終日2022/09/10 (土)にRuby Music Mixinというラウンジを提供させて頂きました。Ruby Music Mixinについては別にalitasoが記事を書いてくれたのでそちらをご参照ください。 inside.pixiv.blog Ruby Music Mixinのトリをつとめる弊社若手の様子 RubyKaigi 2022は感染症対策のため三重県津市の会場とオンラインのハイブリッドで開催されました。これにあわせ、Ruby Music Mixinも物理ラウンジに加え、オンラインラウンジとして配信

pixivではNext.jsを用いたフロントエンドのリプレイスプロジェクトを2022年3月末より行っており、現時点(2022年8月)でリクエスト機能をNext.jsにてリプレイスしました。 今回のpixiv insideではピクシブ株式会社で働くエンジニアの取り組みとして、pixivのフロントエンドをNext.jsでリプレイスする取り組みについて実際に取り組んだメンバーからご紹介します。 まずは皆さんの自己紹介をお願いします namazu: pixivのウェブ領域に関するテックリードを担当しているnamazuです。今回のNext.js化プロジェクトではPjMやNext.jsのホスティング回りの実装を担当しています。 shu: 2022年3月に入社したshuです。Next.js化ではフロントエンドの設計、実装を担当しています。 mog: エンジニアとしてアルバイトをしているmogです。Nex

pixiv事業本部の丸山(@alitaso)です。 2022年4月よりピクシブは Ruby アソシエーションの Platinum スポンサーとして協賛を開始しました。 ピクシブ株式会社 - Ruby Association www.ruby.or.jp Ruby アソシエーションとは Ruby Associationは、プログラミング言語Rubyの普及と発展のための非営利団体です。Ruby関連のプロジェクトやコミュニティ、ビジネスの関係を強化し、Rubyの利用に関する諸問題の解決に取り組みます。 Ruby 開発及びコミュニティ支援をはじめとして、RubyWorld Conference や Ruby Prize といったカンファレンスの開催、Ruby技術者認定試験事業や事業者認定制度などを実施しています。 特に開発に関連する部分では 公募型開発プロジェクト 開発用の設備購入費用やサービス利

こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でしたが、公開にあたって「charcoal」という名前になりました。「charcoal（木炭）」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。 （ただし、npm パッケージのスコープは

10/22(金) 追記 この記事で解説している内容について解説する勉強会を開催することとなりました。以下のconnpassよりお申し込みください。 pixiv.connpass.com 10/22(金) 追記 pixivのブックマークについて ブックマークDBの問題について 具体的な対策内容 論理削除廃止・index追加・ブックマークタグのテーブル分割 適応ハッシュインデックスの無効化 アプリケーションコードのリファクタリング・全発行クエリの列挙と見直し 大きな更新処理の非同期化 結果 あわせてよみたい pixivではサービスの成長に伴い、気に入った作品に対して付けることができるブックマークの総数が急速に増加しており、ユーザーの皆様に滞りなくサービスを提供し続けるためブックマークに関するデータベース(以後DB)の負荷対策が必要になりました。 2021年2月より対策を行うプロジェクトを発足し

こんにちは。pixiv運営本部 開発支援チームでpixivのコーディング環境の向上をしているyosatakです。 入力取得の安全性向上 PHPでは以下のようなURLのクエリパラメータを$_GET['id']経由で取得できます。 https://www.pixiv.net/novel/show.php?id=14921239 しかし、スーパーグローバル変数$_GETは再代入可能な上に、stringだけでなく配列が外部から自由に入力されうるため、取得時に値の範囲を絞り込まなければ以後の処理で想定外の問題が生じる可能性があります。 filter_input()に適切なフィルタを用いることで同様の検証が可能です。pixivでは数値の範囲やデフォルト値を設定できるよう何度かの試行錯誤を経て、2016年頃からParamHelperというヘルパクラスを実装することで安全に入力を取得できるようにしています

こんにちは。ピクシブ株式会社でBOOTHのバックエンドエンジニアをしている @orekyuu です。 今回はPIXIV DEV MEETUPで開催された前夜祭的な企画「至極の難問言語仕様クイズ　〜最強のマルチリンガル決定戦〜」を紹介します。 至極の難問言語仕様クイズとは Ruby / PHP / JavaScript / Java / YAMLから各5問、合計25問出題される4択クイズに答えて、正答率を競う企画です。 難問言語仕様クイズというだけあり、正解させる気のない超難問揃いです。 YAMLを除く4言語からは、PIXIV DEV MEETUPに参加して頂いた凄腕エンジニアにゲストとして1問ずつ出題していただきました。 優勝景品 多言語王トロフィー 優勝者には「最強のマルチリンガル」ロールと、重箱の隅をつつく「多言語王トロフィー」を用意しました。 ちなみに、トロフィーのアクリルフィギュア

こんにちは。VRoid モバイル/StudioのUIを開発したねこまんまです。 先日VRoid モバイル/Studioで利用しているuGUI記述ライブラリ『Mux』を公開しました🎉 github.com 実は以前、pixiv TECH SALONで少しだけ紹介させていただいたのですが、今回はこのライブラリの魅力をより掘り下げて見たいと思います🔍 uGUI? uGUIとはUnityのアプリケーションで使うことができるUIツールキットです。他にもUnityには、新しく開発されているUI ToolkitやUIWidgets、サードパーティーによるものなど様々なものがあります。uGUIはその中でも成熟しており、Unityに標準的に含まれることからよく利用されています。 uGUIの特徴は、Unityのヒエラルキーに則ってUIが構築されることです。そのため、Unity Editorを用いて編集する

こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。最近は社内のデザインシステム整備の仕事もやっており、今回はそちらで作っているアイコンライブラリの話をします。 SVG アイコンを社内 npm で配る みなさん、プロダクト内で利用するアイコンをどのように管理していますか？ 大抵の場合は元になる .svg ファイルが存在し、それを最終的に React コンポーネントで読んだり、あるいは昔ながらのアイコンフォントを生成したりして使っているでしょう。 ピクシブではこれまで各プロダクトがそれぞれの方法でアイコンを生成していました。あるプロジェクトは svg スプライトを生成して <use> タグで読み、またあるプロジェクトは svgr を使い、これまたあるプロジェクトでは woff を生成する npm スクリプトを持ったりしています。 実装方法

こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介！ pixivでAMP Storiesを実装しました @s

ピクシブでは企業として掲げているミッション・ビジョン・バリュー達成のため、毎年7月は全社員が一堂に会し、取締役以下全マネージャーより全体方針を踏まえた事業部単位の目標を共有する時間を設けています。 本日はそこからピクシブのテックビジョンにスポットライトを当てつつ、COOとCTOの対談形式で会社の未来について前編・後編に分けてお話させていただきます。 今回は後編記事となりますので、先に前編記事（https://inside.pixiv.blog/2020/09/23/183040）をご覧ください。 ushio : 前回の対談では、ピクシブ株式会社として「どのような姿を目指して」「どのように舵を切って成長していくのか」CTOとの対談形式で詳細について語ってきましたが、引き続き事業目標とそれに伴う技術・開発方針について話していきたいと思います。 harukasan：よろしくお願いします。前回は全

みなさんこんにちは。ピクシブで採用担当をしているkamikoです。 本日はピクシブで働いている社員が、普段どのような仕事に携わっているのか紹介したいと思います。 今回は「誰もが自分の3Dキャラクターを持ち、キャラクターを使った作品作りや、VR/AR空間でのコミュニケーションを楽しめる環境を多くの人に届ける」ことを目的として始動した、ピクシブの3Dキャラクター投稿プラットフォーム、VRoid Hub （https://hub.vroid.com/）の開発・運用を行なっているエンジニア（https://recruit.jobcan.jp/pixiv/show/b001/205367）の業務について皆様にお伝えできればと思いますので、是非ご覧くださいね。 まずは、自己紹介をお願いします hare : VRoid Hubのサーバサイドエンジニア兼リーダをしていますhareです。ピクシブには2018

ピクシブは「遊びで創る、毎日を。」というビジョンを掲げています。インターネット企業とエンターテイメント企業という2つの顔を持つピクシブは、技術のみならず「遊び」を企業カルチャーの重要な軸として捉えています。 この価値観は「趣味としてどういうコードを書き続けたのか」に関心を持ち深堀りしていくという、採用面接のスタイルにも強くあらわれています。テクノロジーに熱中し、それを突き詰めたプロフェッショナルたちが、互いの専門性に共感し、尊敬し、コラボレーションする場がピクシブであると私は考えています。 このような企業カルチャーも含めて、ショーとして社外へ発信していくイベントが、ピクシブが主催する技術カンファレンスです。昨年の「pixiv TECH SALON」に続き、第二弾である「PIXIV TECH FES.」は、2020年2月17日(月)に新宿BLAZEにて開催されました。 本イベントの見どころを

こんにちは、@halcanaです。pixiv Sketchのプロダクトマネージャーをしています。 好きなものはお絵かきと狐耳とツインテールです。よろしくお願いします。 今回は2019年12月にリリースした、iOSアプリ版pixiv Sketchのライブ配信機能の紹介と、その開発の舞台裏を紹介します。 pixiv Sketch LIVEとは？ 皆さんはpixiv Sketch LIVEをご存知でしょうか？ pixiv Sketch LIVEは、ピクシブが2017年から提供しているライブ配信プラットフォームです。クリエイターの皆さんに気軽に創作の過程をライブ配信してほしい！ 日々のお絵かきをもっと楽しくしたい！ という思いで日々サービスを提供しております。 おかげさまで累計配信数は100万回以上、視聴数は7200万回を突破するなど、配信・視聴ともにたくさんの方に楽しんで頂けています。 pixi

図1: 脆弱なパスワードを入力した場合のエラー画面 こんにちは、pixiv開発支援チームのmipsparcです。 パスワード、もしかして使いまわしていますか? 複数のサービスで同じパスワードを利用していると、「パスワードリスト型攻撃」によって不正アクセスの被害を受けてしまうかもしれません。 パスワードリスト型攻撃の被害にあわないためには、ブラウザやパスワード管理ツールで自動生成された安全なパスワードを利用するのが好ましいです。 しかし、実際には多くの人が「使いまわしたパスワード」や「簡単なパスワード」(以下、脆弱なパスワード)を利用していますし、啓蒙活動にも限界があります。 pixivではサイバー攻撃への対策を複数とっていますが、根本的な対策のひとつとして、脆弱なパスワードを新しく設定できないようにしました。 脆弱なパスワードの判定方法 脆弱なパスワードの利用はどのように防ぐことができるで

※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ

こんにちは。17新卒のhnpnです。 2019年5月に、ピクシブ株式会社（以下ピクシブ）はオフィスフロアを移転し、5Fと6Fの2フロア体制となるとともに、オフィスを改装しました。 www.pixiv.co.jp そこで今回は、オフィス改装プロジェクトの中心となった、デザイナーのyspさん、総務部のkantokuさんbecciさんに、改装の裏側についてインタビューしました！ 本日はよろしくお願いします。まず自己紹介をお願いします。 ysp　10年ぐらい前に入社して、ずっとピクシブのデザイン業務に携わってます。今はVRoidプロダクト周りのデザインを担当しています。最近Twitterで、3文字アカウントの@yspをよこせって言ってくる方が一定数いて困ってます。 kantoku　10年ぐらい前に入社して、バックオフィス全般の業務に携わってきました。今はコーポレート本部内の総務部に所属しています。

2020年1月1日より、ピクシブ株式会社のCTO（最高技術責任者）が交代いたしました。 www.pixiv.co.jp 今回は、2016年12月よりCTOを担ってきた高山と、新しくCTOとなる道井に、今後の抱負などを伺いました。 まずは、お二人の自己紹介をお願いします。 高山　高山（@edvakf）です。ピクシブに入社したのは2012年3月で、CTOは2016年12月から3年ほど務めていました。 道井　このたびピクシブ株式会社CTOに就任しました、道井（@harukasan）です。2012年4月に新卒としてピクシブに入社しました CTO引き継ぎの背景 早速ですが、CTO退任の背景を教えてください。 高山　ピクシブでは約8年働いたのですが、信頼してもらえてずっと大きな役割を任せてもらえました。ただ、長く務めているとどうしても居心地の良い環境に甘えてしまうところもあり、新しい場所でもっと自分の