…エンジニアメンバーのf_subalさんを呼んでいたので、デザイナーとして感じている課題や、立ち上げ当初の苦労話、デザイナーとエンジニアが協力して取り組んでいるa11yの問題などについても意見交換ができて非常に奥深い話ができたかな、と感じています。また、参加してくださった方々もそれぞれの場所でデザインシステムを開発されている方がとても多かったようで、デザインシステムの注目度の高さを感じました。 ピクシブの多くのプロダクトで、多くのユーザーの皆さまに使われていて、そして多くのエン…

こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でした…

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

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

…ィングをゼロにする f_subal 1/16（木） 社内でソフトウェアテスト講習会を始めました shimashima 1/17（金） コミュニティマネージャーもデータ活用！#BigQuery #Lookerの利用事例 tk 1/20（月） ピクシブオフィスを紹介します！オフィス改装の裏側とその後 ysp/kantoku/becci/hnpn 1/21（火） PIXIV TECH FES.のLPを支えるCSSアニメーションテクニック yui540 1/22（水） pixivに脆…

こんにちは、@f_subal です。 pixivFACTORY というサービスで普段はフロントエンドをやっています。 今回は Rails のサービスに Headless CMS の Contentful を導入し、ワークフローを改善した話をします。 ランディングページ、あるいはマスターデータの詳細について pixivFACTORY はグッズおよび同人誌がブラウザ上で簡単に作れるサービスです。 取り扱っているグッズは 60 種類以上あり、各グッズごとに仕様が大きく異なります。 …

…ィングをゼロにする f_subal 1/16（木） 社内でソフトウェアテスト講習会を始めました shimashima 1/17（金） コミュニティマネージャーもデータ活用！#BigQuery #Lookerの利用事例 tk 1/20（月） ピクシブオフィスを紹介します！オフィス改装の裏側とその後 ysp/kantoku/becci/hnpn 1/21（火） PIXIV TECH FES.のLPを支えるCSSアニメーションテクニック yui540 1/22（水） pixivに脆…

…GUIが大好きな @f_subal です。 普段は pixivFACTORY というサービスでフロントエンドをやっています。 さて、早速スクショでお見せしていますが、 今年の3月に pixivFACTORY のグッズ編集画面はリニューアルしました。 すでにこちらの記事でも紹介がありましたが、 新しい画面では、画像のみならず文字を使ったデザインができるようになっています。 フォントワークス および MonoType の書体が 100 スタイル分利用可能です。 文字だけでの制作も…

どうもこんにちは @f_subal です。普段は pixivFACTORY のフロントエンドを見ています。 最近は ruby-sass の deprecation に悩みながら dart-sass を調べたりしています。 さてさて、みなさん日々の開発にあたってフロントエンドの悩みや知見、気になるニュースなどが溜まっているかと思います。あのライブラリを試したい、あれアップデートしたらハマったので誰かに相談したい…そんなときに社内に頼れる仲間がいると心強いですよね。 というわけで…

こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートから…

…！ エンジニアの @f_subal です。ここ1ヶ月ほど ピクシブ株式会社 Advent Calendar 2017 の編集長として、社内の執筆活動を支えてきました。 さて、ついにクリスマスも終わりアドベントカレンダーも一段落しました。 2017年も、新卒エンジニアからディレクター、CTOまでたくさんのメンバーに記事を書いてもらいました。 業務上のあれこれはもちろん、趣味で得た知見や、チームとしての働き方にまつわることまで盛りだくさんの内容でお送りしました。 エンジニアにとっ…