Fluentdのプラグインを作ってBigQueryにログを挿入するコストを1/3にした話 - pixiv inside
こんにちは。 機械学習チームにてレコメンドの改善を行っているgumigumi4fです。 この記事では、Fluentdにて収集したログをBigQueryに挿入する際に使用しているプラグインを置き換えることによって、高スループットかつ低コストを実現した話について紹介します。 背景 pixivではアクセスログやアプリケーションログ等をBigQueryに収集し、分析できるような仕組みを構築しています。 BigQueryへアクセスログを挿入する際はFluentdとそのプラグインであるfluent-plugin-bigqueryを用いて直接BigQueryへ書き込むようになっていたのですが、その際にログ欠損が起こることが問題となっていました。 ログの欠損はピークタイムで発生しており、そのピークタイムのログの流量は概ね毎秒30000logとかなり多く、実際Fluentdのworkerプロセスが1work
3Dモデルの配信サーバーでRustとZstandardを採用して数倍のパフォーマンス向上を実現した - pixiv inside
はじめに こんにちは、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)) メモリー使用量に関し
6年を経てFloat16ArrayをStage 3にしてもらった - pixiv inside
こんにちは。福岡オフィスエンジニアの @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
ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
Cloudflare Workersを利用した静的配信ページへの動的なOGPメタタグの挿入 - pixiv inside
こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配
ピクシブにおける不当な目的での作品取得行為に対する対策技術について - pixiv inside
CTOのharukasanです。 pixivをはじめとするピクシブが運営している各サービスにおいて、ユーザーの投稿した作品を不当な目的を持って取得する行為から守ることは、プラットフォームとして重要な責務のひとつであるとピクシブは考えています。これまでもピクシブでは、作品が不当な目的で大量に取得されないよう機械的なクローリングを検知し、ブロックするために様々な手段を講じてきました。この記事では、現在行っている対策と、今後実施していくために現時点で取り組んでいる施策についてご説明します。 English version is available here これまでに実施している不当な目的での作品大量取得への対策について ピクシブでは不当な目的で作品を大量取得されることを防止するため、基本的な対策に加え、様々なソリューションを導入しています。ここでは特徴的な技術についていくつかの例を紹介します。
ブラウザ上で3Dキャラクターと会話できる「ChatVRM」をオープンソースで公開しました - pixiv inside
こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー
パフォーマンスチューニングコンテストをGCPで開催しました - pixiv inside
インフラ部のyoshiminとsue445です。 内部向けのイベントとしてパフォーマンスチューニングコンテストをGCPで構築し開催したので、そのときに得られた知見を紹介します。 イベントの概要について あらかじめ用意されたWebサイトのコードなどを変更してパフォーマンスチューニングをするといった内容で、競技者1チームあたり3台のインスタンスが提供される(うち1台はスペックが異なる)といった内容でした。 参加チームは13チームの約30名でした。 CDK for Terraformについて 社内でクラウドのプロジェクトを管理する際は原則としてはTerraformで管理するようにしているのですが、今回のプロジェクトについては長期的に管理していく目的ではないので実験的にCDK for Terraform (以下CDKTF) を採用しました。 developer.hashicorp.com 言語につ
アプリ版デザインシステム実装を公開しました - pixiv inside
アプリ版デザインシステム実装を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
GitLab GCPに 移行した（後編） - pixiv inside
こんにちは、インフラ部の id:sue445 です。 GitLabのGCP移行3部作の最後になります。 前回までの記事はこちらになります。余談ですが前編・中編・後編で合計約4万字になりました。 inside.pixiv.blog inside.pixiv.blog 今回の目次 今回の目次 やったこと5: 移行時の作業の洗い出し やったこと6: 直前の作業を実施 GitLabをcloneするサーバに対してssh configを配置 やったこと7: 実際の移行作業 やったこと8: 移行後の対応 主要サービスで実際にGitLabをcloneしてデプロイできるかを確認（残り） 社内ドキュメントなどで旧URLになってるものを新URLに変更 移行直後のトラブル対応事件簿 OneLoginのロール付与漏れ 移行して3日後に急にデプロイサーバでcloneできなくなった 対応内容1: 踏み台サーバが詰まって
GitLab GCPに 移行した（中編） - pixiv inside
こんにちは、インフラ部の id:sue445 です。 前回に引き続きGitLabのGCP移行について紹介します。 前編の記事はこちらになります inside.pixiv.blog 今回の目次 今回の目次 やったこと2: 実際にGCPに構築した GitLab構築に関係するリポジトリの構成 gcp-gitlab-terraform gcp-gitlab-playbook gcp-gitlab-helm 備考 全体の構成図 webservice (GitLab本体) GitLab CI 3rd party製のDockerイメージから公式のDockerイメージに移行した Docker Swarmは継続利用 GitLabを複数ゾーンで動かすための準備だけした やりたかった構成 現在の構成 Cloud IAPとTunneling SSH Connectionsを利用したgitアクセス Tunnelin
GitLab GCPに 移行した（前編） - pixiv inside
こんにちは、インフラ部の id:sue445 です。 先日ピクシブ社内で利用しているGitLabをオンプレミス環境からGCPに移行しました。 とても長いので全3回にわけて紹介したいと思います。 全体の構成 前編：前置きとアーキテクチャ検討 中編：環境構築 後編：実際の移行作業とその前後の対応。移行後の所感など 今回の目次 全体の構成 今回の目次 tl;dr; 移行の理由 筆者略歴 GitLab移行の時系列 やったこと1: アーキテクチャ検討 構成図 GitLabをクラウドに移行するための障壁をまとめた URLをどうするか Cloud IAP利用時の通信のオーバーヘッドをなくしたい 実際にGCP移行した後の構成 AWSでPoC環境を作った時の構成 LDAPからの依存をやめたい＆複数のログイン方法を統一したい ssh接続時にあるLDAP依存を不要にしたい 余談 AWS移行案 GCP移行案 Gi
Slack Platform(Deno)でチーム開発に便利なbotを作った話 - pixiv inside
こんにちは。ピクシブで新規事業部に所属しています、ああうえ(@_kwzr_)と申します。 最近、自分の所属する部署で飼っている便利botをSlack Platformで作り直したので、その紹介をしようと思います。 Slack Platformとは、Slack上にアプリケーションをホスティングできるサービスです。 最近オープンβ版が公開されて、Slackの有料プランを使っているユーザーであれば使えるようになりました。 便利bot「pastel」の紹介 便利botはpastelと名付けられていて、 @pastel 共有 内容 のようにbotに対してメンションを送るとその内容をNotionに記録してくれて、後からMTGのときに振り返ることができたり、 ※こんな感じでNotionに反映されます。各共有内容にスプリントへのrelationが付いてくれるので、勝手にそのスプリントの共有内容としてまとめ
機械学習バッチ実行環境を整備した話 - pixiv inside
はじめまして。 機械学習チームにてレコメンドの改善を行っているgumigumi4fです。 本記事では、機械学習チームの取り組みの一環として機械学習等のバッチを含むバッチ実行環境を整備した話について話したいと思います。 今までのバッチ実行環境 機械学習チームではピクシブ会社全体のサービスにおけるアイテムのレコメンド等を主に取り組んでおり、そのロジックは多岐に渡ります。 matrix factorizationを用いた手法 item間共起頻度に基づくシンプルなアイテムの推薦手法 ニューラルネットを用いた手法 これらの計算を行うためのバッチは実装者の好きな手法で実装されており、バッチを行う環境に関しても下記にようにバラバラになっていました。 オンプレの機械学習用マシンに各ユーザー毎に設定したcronでバッチが実行 gitlab-ciのスケジューリングによってバッチが実行 BigQueryで完結す
pixiv と OSS と わたし - pixiv inside
はじめましての方ははじめまして。ピクシブで Scala エンジニアをしている Javakky です。 今回は、僕がピクシブ株式会社で働く中で、 OSS と関わるようになったきっかけについて話したいと思います。 入社 と OSS 私は、2020年の 5月に内定者アルバイトとしてピクシブ株式会社へ入社後、1年ほど ピクシブ百科事典 の開発に関わっていました。 ピクシブ百科事典は 2009年から運営されている息が長いサービスで、レガシーな部分も多かったこともあり、ちょうどテストなどの改修が盛んに行われている時期でした。 そんな中、僕にとっての転機が訪れます。 百科事典のMySQLに依存した実装コードへのテスト追加にあたり、メンターの tadsan から提案されたのが、https://github.com/vimeo/php-mysql-engineでした。このライブラリは、当時まだリリースされて
pixiv SketchのSSRをFluxibleからNext.jsにリプレースしました！ - pixiv inside
pixiv SketchのWeb版はReact + FluxibleでSSRを実現していました。 今回、FluxibleというライブラリをRedux Toolkit + Next.jsでリプレースした話をさせていただこうと思います。 このリプレースで狙った効果は、クライアントサイドのパフォーマンス向上と、開発容易性・メンテナンス性の向上の2つです。 背景 Next.js化前、つまりFluxibleの時点での状態として以下のものがありました。 Fluxibleの開発が止まってしまっている・Fluxibleの知見が少ない 致命的なバグや脆弱性があったときに対応できない FluxibleはReact 15.x までしか対応しておらず、16以上はサポート対象外 Storybookのstoryにできるコンポーネントと、できないコンポーネントにわかれてしまう コンポーネントにFluxible由来のアク
vite で最高の開発体験を手に入れる - pixiv inside
どうも、ピクシブでフロントエンドエンジニアをやっている @uzimaru0000 です。 今回は、vite を使ったプロダクト開発をしたのでそれの知見を共有したいと思います。 なぜ vite なのか 弊社のプロダクトのフロントエンドではモジュールバンドラーに webpack を利用しているケースが多いのですが、vite を使う選択をしました。 理由としては以下のような点があります。 開発サーバーがとても速い 設定ファイルがwebpackほど複雑じゃない vite の特筆すべき特徴として開発サーバーがとても速いというものがあります。 これは、依存のあるモジュールをネイティブ ES モジュールとして読み込むようにすることで必要最低限のバンドルで済むようにしているためコードの変更がとても速く反映されます。 フロントエンドエンジニアが僕一人であったというのもあり、開発速度を早めるために vite
良薬口に苦し！？カルテ携えた "主治医" に診てもらうRailsプロダクト健康診断のご紹介 - pixiv inside
ピクシブには数多くのRails製プロダクトがあり、それらを各チームで開発しています。 各チームでの知見や悩み事を共有するRails系サービス互助会というものもありますが、今回はRailsアプリケーションを健康に保つための取り組みであるRailsプロダクト健康診断について、対談形式でご紹介します。 トーカー紹介 なぜRailsプロダクト健康診断をやることになったのか "健康診断"で行っていること igaigaさんからみた効果や所感 弊社プロダクトメンバーからみた効果や所感 「お客様の声」 この先の発展の展望 最後に トーカー紹介 nino マンガプロダクト領域のテックリードをしているninoです。 技術的には主にバックエンドを担当しています。Palcyの立ち上げやpixivコミックの開発に関わり、現在はpixivのマンガで面白いことをやっています。最近POからこういう記事がでましたが、他にも
新卒研修で「ソフトウェアテスト研修」を実施しました！ - pixiv inside
こんにちは。クリエイター事業部 FANBOX部でエンジニアをやっているkumaです。今回は新卒研修で行った「ソフトウェアテスト研修」についてのレポートをお伝えします！ ピクシブにおける新卒研修 2022年4月1日、ピクシブ株式会社にも10名の方が新卒として入社してくれました。弊社では入社後の2週間前後を新卒研修期間としており、会社理解からビジネスマナー、プロダクト開発に関するトピックなど様々なものを学ぶ時間になっています。 今回この記事では、新卒研修の一つである「ソフトウェアテストについて」という研修についてお伝えします。本研修は、以前insideでも紹介して頂いたkuma & pnlyで担当いたしました。 inside.pixiv.blog ソフトウェアテスト研修 以降では、実際の研修資料を引用しながら我々が研修で取り上げた内容について一部紹介していきたいと思います。 “難しすぎない”を
ピクシブは Ruby アソシエーションへのスポンサーシップを通じて Ruby コア開発の支援を開始します - pixiv inside
pixiv事業本部の丸山(@alitaso)です。 2022年4月よりピクシブは Ruby アソシエーションの Platinum スポンサーとして協賛を開始しました。 ピクシブ株式会社 - Ruby Association www.ruby.or.jp Ruby アソシエーションとは Ruby Associationは、プログラミング言語Rubyの普及と発展のための非営利団体です。Ruby関連のプロジェクトやコミュニティ、ビジネスの関係を強化し、Rubyの利用に関する諸問題の解決に取り組みます。 Ruby 開発及びコミュニティ支援をはじめとして、RubyWorld Conference や Ruby Prize といったカンファレンスの開催、Ruby技術者認定試験事業や事業者認定制度などを実施しています。 特に開発に関連する部分では 公募型開発プロジェクト 開発用の設備購入費用やサービス利
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
