こんにちは。 機械学習チームにてレコメンドの改善を行っているgumigumi4fです。 この記事では、Fluentdにて収集したログをBigQueryに挿入する際に使用しているプラグインを置き換えることによって、高スループットかつ低コストを実現した話について紹介します。 背景 pixivではアクセスログやアプリケーションログ等をBigQueryに収集し、分析できるような仕組みを構築しています。 BigQueryへアクセスログを挿入する際はFluentdとそのプラグインであるfluent-plugin-bigqueryを用いて直接BigQueryへ書き込むようになっていたのですが、その際にログ欠損が起こることが問題となっていました。 ログの欠損はピークタイムで発生しており、そのピークタイムのログの流量は概ね毎秒30000logとかなり多く、実際Fluentdのworkerプロセスが1work

はじめに 初めまして。プラットフォーム開発部にてデータ基盤の整備をしているazukiと申します。 今回はdbt(Data build tool)を導入した経緯と非中央集権的なdbtの使い方についてご紹介したいと思います。 今回は導入に関してまとめていますので、dbtの運用面の詳細は別記事で解説予定です。 データモデリングツール導入の背景 ピクシブではプロダクトの多さを理由に非中央集権データ組織を採用しています。 ドメインチームがメインでデータの取り組みやデータモデリングを行い、データ駆動推進室やデータ基盤チームはそのサポートや整備を担当しています。 その背景に関しては、【PIXIV MEETUP 2023】の方でお話していますのでぜひご覧下さい。 speakerdeck.com 今までBigQueryのデータ加工SQLは自社で開発したツールで管理していました。 pythonから変数埋め込み

こんにちは、CTOのharukasanです。私が担当しているファイナンシャルサービス本部ではピクシブが運営している各サービス(pixiv、BOOTH、pixivFACTORY、pixivFANBOX、pixivコミック、Pastelaなどなど)においてご利用頂く、決済・送金といったお金のやりとりに関するシステムの構築・運用を行っています。 ピクシブでは決済に関する手続きを変更することを目的に、2024年8月1日にサービス共通利用規約の改定をします。この記事では今回の規約改定を行う理由である、クレジットカード決済システムの可用性向上のために行うクレジットカード決済の転送サービス導入について、クレジットカード決済の仕組みも踏まえてご説明します。 ピクシブのサービスにおけるカード決済の仕組み ピクシブでクレジットカード決済を使った場合のお金の流れを簡単に図示してみました。実際にはもうちょっと複雑

はじめに こんにちは、VRoid部所属のエンジニアのyueです。 この度VRoid Hubで3Dモデルの配信サーバーの見直しを行い、技術選定から始めRustとZstandard (zstd)を採用した実装に切り替えました。 結論から見るに従来のNode.js製サーバーと比べて以下のことを実現しました。 最大のレスポンス時間が 1.5　~　2.5s から 300　~　400msまで低下 平均のレスポンス時間が 700　~　800ms から 150　~　200msまで低下 サーバーのCPU使用率が ~　50% から ~　10%まで低下 docker image のサイズが ~　346mb から ~　21mb程度まで削減 配信されるファイルサイズが平均 10 ~ 20% 軽量化されました レスポンス時間 CPU使用量 (上からAVG(MAX), AVG, AVG(MIN)) メモリー使用量に関し

こんにちは。福岡オフィスエンジニアの @petamoriken です。趣味でFloat16Arrayのponyfill1を公開しECMAScriptに入れてもらうように活動していたところ、喜ばしいことに2023年5月のTC39会議にてStage 3となりました。折角なのでその経緯を書いていこうと思います。 ECMAScript excitement 😉@TC39 advanced these proposals this week 🎉 4️⃣ Atomics.waitAsync 4️⃣ RegExp v flag 4️⃣ Well-Formed Unicode Strings 3️⃣ Decorator Metadata 3️⃣ Float16Array 2️⃣ Base64 for Uint8Array 2️⃣ Promise.withResolvers 2️⃣ TimeZone C

こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します

こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配

アドプラットフォーム事業部 アドプロダクト部 データチームでアナリティクスエンジニアをしているucchi-です。普段は主に、pixiv Adsという広告ネットワークのデータ周りを開発しています。 ads.pixiv.net 今回は、pixiv Adsで採用している、Lookerの埋め込みダッシュボードについて紹介します。 はじめに ピクシブでは全社的にLookerを使用しています。Lookerを使うことで、BigQueryに保存されている品質の高いデータを気軽に分析することができ、社内の仮説検証や意思決定に役立っています。 一方で、Lookerは社内の分析用途だけではなく、社外へのデータ提供にも活用できます。 具体的な手段はいくつかありますが、pixiv Adsでは、「シングルサインオン（SSO）組み込み」という形式で、クライアント向けの広告管理画面にLookerのダッシュボードを埋め込ん

こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー

こんにちは、CTOの @harukasan です。2023/02/24をもってプログラミング言語Rubyが30周年を迎えたとのこと、大変おめでとうございます。 Rubyに支えられている企業の一社として感謝を示したいと思い、この記事を書くことにしました。 ピクシブとRuby ピクシブでは多くのサービスでRuby on Railsを利用しています。2012年にリリースされた国際版pixiv β(現在は提供終了)を皮切りに、pixivコミック、BOOTH、pixiv FACTORY、pixiv Sketch、Palcy、VRoid Hub、pixiv Adsと数々のプロダクトでRuby on Railsが採用されてきました。 2012年6月にリリースされたpixivコミックはRails 3.2でリリースされ10年以上にわたり同じコードベースで開発が続けられています。余談ですが、pixivコミック

アプリ版デザインシステム実装をOSS化しました こんにちは、ああうえ(@_kwzr_)です。新規事業部とデザインシステム部を兼務しており、アプリ版デザインシステムの実装を進めています。 Web版に引き続いて、アプリ版のデザインシステム(charcoal-ios, charcoal-android)をOSS化しました。 github.com github.com inside.pixiv.blog Web版との同期 アイコン・色・定数などが複数のリポジトリに定義されてしまっていると、更新が困難になってしまいます。 charcoal-iosとcharcoal-androidでは、CIで定期的にWeb版の定数の定義を用いて、自動的に更新を行なっています。Web版の定数はJSONで定義されており、iOS版ではQuickTypeを用いてSwiftの型に変換しています。Android版でも同様にKot

こんにちは、うさみ(@tadsan)です。標記の通り、ピクシブ株式会社はThe PHP Foundation(@ThePHPF)への継続的な財政支援を開始しました。 opencollective.com 支援額は月間1000ドル、年間で12000ドルになる計画です。 PHPは言わずと知れたオープンソースのプログラミング言語処理系であり、誰もが無料で自由に利用できます。そのため、多くの個人ホームページ、ウェブサイト、百科事典、ゲームのAPIサーバー、広告システム、大規模な業務システムに至るまで世界中の多くのプログラムがPHPで稼動しています。 西暦2000年前後においてはLinux, Apache (HTTP Server), MySQL, P* (Perl, PHP, PythonなどPから始まるプログラミング言語)による構成はLAMPスタックと呼ばれ、無料のソフトウェアの組み合せによって

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

どうも、ピクシブでフロントエンドエンジニアをやっている @uzimaru0000 です。 今回は、vite を使ったプロダクト開発をしたのでそれの知見を共有したいと思います。 なぜ vite なのか 弊社のプロダクトのフロントエンドではモジュールバンドラーに webpack を利用しているケースが多いのですが、vite を使う選択をしました。 理由としては以下のような点があります。 開発サーバーがとても速い 設定ファイルがwebpackほど複雑じゃない vite の特筆すべき特徴として開発サーバーがとても速いというものがあります。 これは、依存のあるモジュールをネイティブ ES モジュールとして読み込むようにすることで必要最低限のバンドルで済むようにしているためコードの変更がとても速く反映されます。 フロントエンドエンジニアが僕一人であったというのもあり、開発速度を早めるために vite

こんにちは。クリエイター事業部 FANBOX部でエンジニアをやっているkumaです。今回は新卒研修で行った「ソフトウェアテスト研修」についてのレポートをお伝えします！ ピクシブにおける新卒研修 2022年4月1日、ピクシブ株式会社にも10名の方が新卒として入社してくれました。弊社では入社後の2週間前後を新卒研修期間としており、会社理解からビジネスマナー、プロダクト開発に関するトピックなど様々なものを学ぶ時間になっています。 今回この記事では、新卒研修の一つである「ソフトウェアテストについて」という研修についてお伝えします。本研修は、以前insideでも紹介して頂いたkuma & pnlyで担当いたしました。 inside.pixiv.blog ソフトウェアテスト研修 以降では、実際の研修資料を引用しながら我々が研修で取り上げた内容について一部紹介していきたいと思います。 “難しすぎない”を

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

こんにちは、アドプラットフォーム事業部でアナリティクスエンジニアをしているucchi-です。 ピクシブでは社員向けの情報発信やコミュニケーション促進のために「社内ラジオ」という社内番組を運営しています。 本日は社内ラジオを1年間運営し続けて得た気付きや知見をシェアします。 背景 新型コロナウイルスでリモートワークが進む中で、社内コミュニケーションの場が減り、社内の情報共有の機会が失われる、という課題がありました。 そこで、社内の情報共有の場所を増やすため、2021年2月に社内ラジオという社内番組がスタートしました。 社内ラジオの詳細 社内ラジオはGoogle Meetライブストリームを用いて社員向けに配信する番組です。 発表者(社員)が自発的にチームの成果やドメイン知識などを持ち寄って発表しています。 全社員が参加する会議が終わった後、毎週水曜の昼12:00〜12:45に放送しています。

どうも、Slackでの心温まるやりとりが好きなwatasukeです。 ピクシブには"いい書き込み"が集められる専用のチャンネルがあります。 それが、#z-いい話と#z-sugoi-messageです。 その名の通り、「いい話感がある書き込み」と「すごい感じの書き込み」が集められています。 私はこの2つのチャンネルが好きで、ピクシブの社風も現れていると思いますので、ご紹介いたします。 (余談ですが、prefixの「z-」は仕事とは直接関係ない話題用のチャンネルにつけられるものです) "いい書き込み"を集めたチャンネルをつくるために まず、"いい書き込み"を集めるためのSlackチャンネルをつくります。(例：#z-いい話) 次に、Reacji ChannelerをSlackに導入します。 詳しくはリンク先を見ていただきたいですが、任意の絵文字リアクションのつけられた書き込みを予め設定したチャン

こんにちは。フロントエンドエンジニアのpnlyです。 こちらの記事は前後編に分かれた記事となっておりますので、前編の記事「PIXIV Design System 2021 の発表をしました（前編）」もあわせてご覧いただけるとよりお楽しみいただけると思います。 前編では、デザインシステムを作ろうとして試行錯誤したエピソード、そして出来上がった設計思想についてお話しました。そしてこの後編では、その思想をどのようにして実現したのかについて具体的な実装をご紹介します。 デザインシステムの実装 "pixiv-elements" 前回の記事で出てきました"デザインシステムの三層構造"の実装は一つのモノリポジトリで管理されています。ガイドラインの根本となる定数以外にも、その定数をより利用しやすくするためのユーティリティや型定義、CIスクリプト、Storybookなどのドキュメントなど、デザインガイドライ

みなさんこんにちは。スマホアプリ分野テックリードをしている@FromAtomです。 この記事では、ピクシブのスマホアプリエンジニアを支える福利厚生を紹介したいと思います。今回はスマホアプリエンジニアが便利になる福利厚生に焦点を合わせますが、ピクシブ株式会社にはスマホアプリエンジニアやエンジニアに限定せず、様々な便利福利厚生が存在しています。詳しくは下記のページをご覧ください。 環境を知る|ピクシブ株式会社 ピクシブ社員がいきいきと働ける「仕組み」とは？　制度・福利厚生をご紹介！- pixiv inside ※上記記事で紹介されている福利厚生の一部は、現在の社会情勢を鑑みて中止になっているものもございます。 PC購入制度 社員が使用したいPC / Macを会社が全額負担で支給してくれる制度です。自分が一番使いやすいPCで業務が出来るので、快適に業務を遂行することができます。また、支給されたP