はじめに こんにちは、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

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

こんにちは。ピクシブの社内エンジニア職横断組織「エンジニアギルド」マネージャのbashです。主にエンジニア採用プロセスを取りまとめています。 ピクシブでは複数の事業部があり、様々な専門性を持ったメンバーが集って事業領域にフォーカスする体制を取っています。各事業部にいる技術のキーパーソンがどのような考えでエンジニアリングを進めているのかを紹介したいと思います。 先日、pixivFACTORYというプロダクトで特別コラボ企画があり、普段とは違ったスペシャルな体制でリアルタイム対応が行われました。その件をテーマとして、pixivFACTORYのプロダクト開発と運用を主導しているFACTORY部エンジニアhayaと、ピクシブの全サービスインフラを横断的に管理しているインフラ部SREチームリーダーkonoizに、当日対応や準備の様子について話を聞いてみたいと思います。 まずは自己紹介をお願いします。

こんにちは、インフラ部の id:sue445 です。 今回はRendertronをGKEとCloud Runの両方で構築した話をしたいと思います。 tl;dr; 前置き 今までのRendertronの問題点 GKE版Rendertronについて GKEの採用理由について GKE版Rendertronの構成 全体 GKE内部 pod内部 Kubernetesの設定と解説 rendertron-deployment.yaml rendertron-hpa.yaml rendertron-ingress.yaml rendertron-service.yaml Tips nodeのストレージサイズをケチり過ぎたらpodが起動できなくなった N1マシンタイプのnodeとN2マシンタイプのnodeを比較した結果、N2マシンタイプが安くなった Cloud Run版Rendertronについて Clou

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