こんにちは。福岡オフィスエンジニアの @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

2021/10/25追記 おまたせしました。この記事の後編も公開しておりますので、合わせてお読みください。 inside.pixiv.blog こんにちは。プロダクトデザイナーの yksk とフロントエンドエンジニアの f_subal です。 ピクシブにはデザインシステムを開発するチームがあります。ピクシブが運営する数多くのプロダクトが共通のガイドライン、コードを使ってUIを設計できる体制への移行を目的としており、そのための仕組みづくりに取り組んでいます。 今回は、先日行われた pixiv DEV MEETUP 2021 のセッション「PIXIV Design System 2021」で発表した、技術的な取り組みについて前後編に分けて発表します。 前編にあたるこの記事では f_subal パートの内容をおさらいをしていきます。 PIXIV Design System 2021 昨年のpix

全国1億2000万人の同僚プロデューサーの皆様、初めまして。 20新卒でエンジニアをやっているkiridarumaです。現在はインフラ部でピクシブのサービスの運用や保守を行っています。 ピクシブ社内では社内のコミュニケーションツールとしてSlackを使用しています。もちろん業務上必要なチャンネルややり取りが基本ですが、雑談用の#z-xxxというチャンネルをある程度自由に作ることが認められていて、たくさんの雑談系チャンネルが存在します。 今回は、その中の#z-imasというチャンネルについて紹介したいと思います。 #z-imasは、アイドルマスターシリーズが好きな人が集まるチャンネルで、2021年4月時点で40人ほどのプロデューサー(アイマスP、アイドルマスターファンの通称)が参加しています。 自分がアイドルマスターに出会ったきっかけは、高校の時に友達と『劇場版アイドルマスター輝きの向こう側

コーポレートIT・テスト・品質とりまとめ、VRoid・NEOKET等新規系事業支援に、エンジニア組織運営、pixiv inside運営、PIXIV DEV MEETUP運営などを通じて、技術を軸に社内を広くエンパワーメントする仕事をしているbashです。 こちらの募集に当選し2021/4/26発売の書籍『ユニコーン企業のひみつ』をいただきました。ありがとうございます。 🦄 テック企業のみなさま、テックブログの記事の候補に一冊いかがでしょうか!!!q 🙏 » 🦄 書籍『ユニコーン企業のひみつ』を貴社テックブログでレビューしていただける企業さまを募集します https://t.co/TdfL58TwpS— Kakutani Shintaro (@kakutani) 2021年4月7日 世界的に大成功を収めているテック系ユニコーン企業の組織編成や働き方紹介している本作。じっくり読んでいくぞ

こんにちは。開発支援チームでpixivのコーディング環境の向上をしているyosatakです。 pixivではPHPStanを活用して、スクリプト言語であるPHPのコーディング上のミスをデプロイ前に検出しています。 inside.pixiv.blog PHPStanは開発者にエディタを強制したりせずに静的な型検査ができるだけではなく、入力のアサーション関数などに対してPHPStan拡張を書くことでリクエストパラメータなどの不確定な入力に厳密に型をつけ、PHPで安全にコーディングすることができるようになります。 それでも、10年以上メンテナンスされつづけているpixivのソースコードに型を付けていくのは容易ではありません。 PHPStanで特定のファイルの解析を掛けたい場合は、autoloadするファイルをbootstrapFilesに指定されたphpstan.neon(.dist)が設置され