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

こんにちは、3Dビジネス室のwatasukeです。 3Dビジネス室は3Dモデルクリエイターの創作活動を支援することをミッションにしたチームです。 この記事では、その一環としてBOOTHの「3Dモデル」カテゴリに関する取引データをかいつまんで公開いたします。 3Dモデルカテゴリの取引推移 まず、3Dモデルカテゴリの取扱高と注文件数の推移をご覧ください。 取扱高、注文件数ともに急速に右肩上がりに伸びていることがわかります。 2022年の3Dモデルカテゴリの取引実績は、取扱高が約24億円、注文件数が約148万件でした。 それに比例して注文者数も増えており、市場が拡大していることが見て取れます。 2022年における3Dモデルカテゴリの注文者数は約12.9万人でした。 3Dモデルカテゴリの伸びた要因 3Dモデルカテゴリの取引は、内部要因と外部要因それぞれに支えられて伸長したと認識しています。 内部要

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

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

中高生国際Rubyプログラミングコンテスト2021 in Mitakaスポンサー記事を発信しましたpixiv事業本部の丸山（@alitaso）です。 2021年12月4日（土）に 中高生国際Rubyプログラミングコンテスト2021 in Mitaka の最終審査会がオンラインで行われました。ピクシブからは CTO の道井（@harukasan）がスポンサー賞審査員として、スポンサー担当のわたし丸山が観覧者として参加しました。 コンテスト全体で97作品の応募があり、最終審査会では選出された7作品のプレゼンテーションがありました。どの作品も創意工夫や努力の様子を垣間見ることができ、プログラミングを仕事にしている我々も刺激を受けました。 ピクシブ賞 受賞作品 滝沢市立滝沢第二中学校 科学技術部 の チーム「鰤が素振り」のゲーム「芋がポテッと落ちたんじゃが」をピクシブ賞として選出させてもらいました

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

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

こんにちは、pixivのリクエスト機能を開発するチーム（以下、リクエストチーム）でプロダクトマネージャーをしているgeta6です。 ピクシブでは、社内ドキュメンテーションツールとしてNotionを採用しています。Notionでうまいことドキュメンテーションが機能し、継続できるよう、使い方やルールを各メンバー・各チームみんなで考えています。 本日はそんなNotionで実際にやってみて得られた気づきや知見をシェアします。もし参考になることがあれば、取り入れたり取り入れなかったりしていただければ幸いです。 背景 リクエストチームは立ち上げ当初より一貫してフルリモート体制で働いています。お互いにそれほど顔馴染みのないメンバー同士でしたが、第1回目の緊急事態宣言が出る前後からこちら、ほぼ物理的に顔を合わせることなく仕事をしています。 基本的にメンバーはDiscordに常駐しており、朝会・定例・雑談・

こんにちは、インフラ部の id:sue445 です。私事ですが先日GCPの Professional Cloud Architect を取得しました。 そういうわけで今日はGCPではなくAWSの話をします。 tl;dr; 劇的ビフォーアフター 構成 移行のモチベーション パフォーマンス向上 コスト圧縮 アーキテクチャの採択理由 やったこと 1. DB作成 2. MySQL 5.7 -> 8.0 MySQL 8.0でハマったこと MySQL 8.0からデフォルトの認証がcaching_sha2_passwordになった RDSのMySQL 8.0からMariaDB 監査プラグインがなくなった 3. 本番用のDockerイメージを作成 困ったこと：CodeIgniterがログの標準出力に対応していなかった 4. ECS + Fargate + CodePipeline構築 5. CDN作成 6

こんにちは。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を用いて編集する

ピクシブではプロダクトや事業ごとに様々な専門性をもったメンバーでチームを組んでいます。特にエンジニア職は、そのチームをまたいで信頼性の高いプロフェッショナルとして成長するために、エンジニアギルドという組織を設けています。 この記事では、現在、このエンジニアギルドのトップとして、エンジニア職メンバーを統括している店本にエンジニアギルドの活動、これまでの成果、今後の展望について話を聞きました。 自己紹介をお願いします エンジニア職統括の店本と申します。 私の簡単な経歴をお話ししますと、2007年ピクシブ株式会社の前身である、クルーク株式会社に入社し、入社後はインフラエンジニアとしてpixiv誕生から今日まで約13年間、サービスの成長を支えてきました。 2018年からエンジニアギルドというエンジニア職の組織がスタートしたのですが、その発足以来組織のトップを務めてきました。 2020年1月からは、

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

こんにちは、インフラ部の id:sue445 です。 Terraformなにもわからないけどディレクトリ構成の実例を晒して人類に貢献したい - エムスリーテックブログ や Terraformのディレクトリ構成の模索 - Adwaysエンジニアブログ を読んで影響されたのでピクシブのTerraform運用事例を紹介しようと思います。 Terraformの採用理由 GitLabでのリポジトリ構成 Terraformのファイル構成 moduleがうまく使えたと思っている事例 GitLab CIでTerraformをいい感じにCIする テンプレートの使い方 ピクシブで実際に使っているテンプレートファイル このテンプレートでできること masterブランチ以外 masterブランチ このテンプレートファイルのポイント 最後に Terraformの採用理由 Terraformと同じようなプロビジョニン

こんにちは、インフラ部の 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

この記事では2020年5月時点でピクシブの社員全員が使っている主なSaaSを紹介します。 ピクシブとSaaS ピクシブはpixiv、BOOTHなどクリエイターを支援する様々なサービスを提供していますが、これらは基本的に内製しています。 業務を支えるシステムは最近ではもっぱらSaaSを選ぶことで、社内の開発・運用力をユーザ向けにフォーカスするようにしています。 そんなピクシブでは、かつてはチームごとにバラバラにSaaSを選んで使うことを基本にしてきました。 現在はチームが違えどピクシブのプロダクト全体を皆で支えているという意識が高まり、チーム間での共通言語化をすること、利用ノウハウを高めることの重要さが上がってきました。 そういう変化を背景として、徐々に使うSaaSを全員で同じものを使うようになってきています。 なお今でも新しいサービスの利用が必要になったら、どの社員でも申請することができま

こんにちは！ピクシブ福岡オフィスでエンジニアをしている@tasshiです。 今回はpixiv insideリニューアルのデプロイ環境についてお話ししたいと思います。 pixiv insideについて 「pixiv inside（ピクシブ インサイド）」は、ピクシブ株式会社の日常を伝えるためのオウンドメディアです。 2014年に「pixiv engineering blog」としてスタートし、2017年に現在の「pixiv inside」になりました。 WordPressからはてなブログへ pixiv insideでは2020年1月にセルフホスティングのWordPressからはてなブログへと移行し、新デザインへのリニューアルを行っています。 デザインリニューアルではデザイナーさんの作ったデザインを元にして、エンジニアがJavaScript, CSSなどのデザインリソースを実装します。 その後

こんにちは、ねこまんまです。 先日、ピクシブはWebRTCプロジェクトのフォークを公開しました。このフォークにはオリジナルのプロジェクトには含まれていないいくつかの変更が施されていますが、その中でも大きな機能追加である、WebRTCの.NETバインディングを紹介します。 pixiv/webrtc on GitHub このバインディングを用いることによって、Unityや.NET Framework、Monoといった.NETプラットフォームで映像や音声のライブ配信、受信が可能になります。 Linux上のFirefoxで、SoraのJavaScript SDKを利用して配信したディスプレイの映像を、同機上のUnity Editor、iOS、Androidのプレイヤー上で受信している。Unity上のプログラムはそれぞれ同じものを利用している。SFUとしてImageFlux Live Streami

こんにちは、sue445です。 先日社内で使ってるGitLabのリプレイスをしたのでその辺の話をしたいと思います。 リプレイスの内容 今回のGitLabリプレイスでは主に下記を行いました。 サーバ移設に伴いURL以外全部変えた レガシーな環境で運用されていたGitLabを全てDockerコンテナに載せた MySQLからPostgreSQLに移行 以上を1時間弱のメンテでやりきった 構成 ざっくり書くと、SSL終端のフロントサーバのみ同じで、それ以外のバックエンドを全部変えました。 旧 APサーバ Debian Wheezy CPU: Intel Xeon E5-2640v2 * 2 Memory: 40GB Disk: 64G + 512G MySQL兼Redisサーバ Debian Wheezy CPU: Intel Xeon X3430 Memory: 8GB Disk: 256G M

コーヒー、美味しいですよね。 ピクシブにもコーヒー好きは多く、Slackにコーヒー好きの人が集まるチャンネル #z-coffee があります。(ピクシブでは業務に関係ない話題で盛り上がれる雑談チャンネルを作れます) そこではコーヒーの美味しい淹れ方やおすすめのお店の情報などがやり取りされていたのですが、2019年5月のオフィス改装でバーカウンターが新設された際に「作業しやすいバーカウンターを使えばコーヒーを手淹れしてみんなで楽しめるのでは」というアイデアがあがりました。 (作業スペースとして目をつけたバーカウンター) このアイデアは無事形になり、そこから #z-coffee メンバーを中心に社内でコーヒーを手淹れする文化が生まれました。 場が行動を促進する、オフィス設計を行ったデザイナーも狙い通りだと満足していることでしょう。 以下にコーヒーを淹れてみんなで楽しむ流れをご紹介します。 コー

福岡オフィスで課題解決チームに所属しているエンジニアの @petamoriken です。弊社では drawr というサービスを11年間提供していましたが、2019年12月2日13:00をもってサービスを終了することとなりました。詳しくは drawr 特設サイトを御覧ください。 drawr はサービスの中核が Flash の技術で成り立っています。特にイラストを描くドロー画面と、投稿された作品の筆跡再生機能がブラウザにプラグインとして搭載されている Flash Player を使って提供されています。 drawrのサービス終了にともない、以下の機能を新規開発・提供しました。 投稿作品一括ダウンロード機能 お絵かきコミュニケーションサービス「pixiv Sketch」への引っ越しツール drawrの描き味を再現したドロー機能「シンプルドローモード」(pixiv Sketch で利用可能) その