nakajmg

<p>サイボウズ フロントエンドエキスパートチームの 2022 年の取り組みを紹介します。</p>
<h2>プロダクトへの支援</h2>
<p>プロダクト支援として今年はおもに次の 2 つを行いました。</p>
<ul>
<li>kintone のフロントエンドリアーキテクチャ</li>
<li>サイボウズ製品の販売管理システムのフロントエンド</li>
</ul>
<p>これに加えて現在ほかプロダクトのリアーキテクチャを進めています。また、社内向け翻訳サービスのフロントエンド刷新なども行いました。</p>
<h3>kintone のフロントエンドリアーキテクチャ</h3>
<p>kintone のフロントエンドリアーキテクチャ（フロリア）はゆっくりと着実に置き換えが進められています。フロントエンドエキスパートチームのメンバーのアウトプットとして次のような記事を出しました。</p>
<ul>
<li><a href="https://blog.cybozu.io/entry/2022/03/18/100000">Playwright &#x26; Vite ではじめる脱レガシー向け軽量 Visual Regression Test</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/04/14/110000">kintone の内部を（こっそり）React に置き換えるチームがあるってホント？</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/08/29/110000">実装例から見る React のテストの書き方</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/08/31/110000">新卒で飛び込んだフロントエンド刷新プロジェクトが学びだらけだった話</a></li>
<li><a href="https://blog.cybozu.io/entry/2022/11/14/120000">フロントエンドのテストコードを書くときに大切にしていること</a></li>
</ul>
<p>フロリアのアウトプットでは、記事の構成やレビューなどメンバーがアウトプットしやすいようにサポートする活動も行いました。</p>
<p>エンジニアブログを見てフロリアのことを認知して応募してくれる方もおり、アウトプットによる効果が出てきているように思います。</p>
<h3>サイボウズ製品販売管理システムのフロントエンドリアーキテクチャ</h3>
<p>kintone をはじめとした、サイボウズの製品をお客様が購入する際に使われる「販売管理システム」は、 kintone と同じく Closure で構築された歴史のあるサービスです。</p>
<p>今年はこの販売管理システムの 1 ページのリアーキテクチャが完了しリリースすることができました 🎉 このまま勢いをつけてリアーキテクチャ完了を目指したいと思います。</p>
<h2>Frontend Monthly の開催</h2>
<p>社外への発信として YouTube Live にて月に一回 Frontend Monthly を 生配信・録画で開催しています。今年も月に一回の開催を継続できました。視聴してくれた方、ゲストとして参加して頂いた方々ありがとうございます。</p>
<ul>
<li><a href="https://cybozu.connpass.com/event/236989/">Cybozu Frontend Monthly#19 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/239952/">Cybozu Frontend Monthly#20 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/241837/">Cybozu Frontend Monthly#21 (ゲスト：株式会社ログラス) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/246037/">Cybozu Frontend Monthly#22 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/248124/">Cybozu Frontend Monthly#23 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/250296/">Cybozu Frontend Monthly#24 (ゲスト：LAPRAS 株式会社) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/254325/">Cybozu Frontend Monthly#25 (ゲスト：株式会社 Yuimedi) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/256774/">Cybozu Frontend Monthly#26 (ゲスト：株式会社エイチーム) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/258919/">Cybozu Frontend Monthly#27 (ゲスト：株式会社ナレッジワーク) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/262716/">Cybozu Frontend Monthly#28 (ゲスト：サイボウズ Mantle チーム) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/265151/">Cybozu Frontend Monthly#29 JSConf JP 2022 Special - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/269123/">Cybozu Frontend Monthly Special 2022 - connpass</a></li>
</ul>
<p>おかげさまで開催回数が 30 回まできました。2023 年も継続して開催したいと思います。</p>
<h2>イベントへのスポンサー</h2>
<p>今年は<a href="https://vuefes.jp/2022/">Vue Fes Japan Online 2022</a>への協賛を行いました。</p>
<p>来年も引き続き、コミュニティや場を盛り上げていくのに少しでも協力できればと思います。</p>
<h2>おわりに</h2>
<p>2023 年も引き続き支援活動、発信を続けていきたいと思います。</p>
<p>フロントエンドエキスパートチームではサイボウズのフロントエンドを最高にするメンバーを募集しています。採用サイトからの応募やカジュアル面談などお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>


<p>サイボウズ フロントエンドエキスパートチームの 2022 年上期（１月〜6 月）の取り組みを紹介します。</p>
<h2>プロダクトへの支援</h2>
<p>プロダクト支援としておもに次の 2 つを行いました。</p>
<ul>
<li>kintone のフロントエンドリアーキテクチャ</li>
<li>サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ</li>
</ul>
<p>これらの支援活動は現在（2022 年 7 月〜）も継続中です。</p>
<h3>kintone のフロントエンドリアーキテクチャ</h3>
<p>kintone のフロントエンドリアーキテクチャプロジェクト、通称フロリアへの支援を昨年から引き続いて行っています。メンバーはプロジェクトのチームに所属する形で支援活動をしています。</p>
<p>フロリアの詳細については次の記事を参照ください。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2021/07/20/170000" style="border: none;"></iframe></div></p>
<p>次の記事はメンバーによる活動のアウトプットです。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2022/03/18/100000" style="border: none;"></iframe></div></p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2022/04/14/110000" style="border: none;"></iframe></div></p>
<p>また、直接的な支援ではありませんが、フロリアプロジェクトでの社外アウトプット（社の技術ブログへの執筆）を支援する活動も行っています。</p>
<h3>サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ</h3>
<p>kintone をはじめとした、サイボウズの製品をお客様に購入していただくときに使われるサービスがあります。</p>
<p>販売管理システムは kintone と同じく Closure で構築された歴史のあるサービスです。このサービスに関しても、継続性の観点からフロントエンドの再構築を進めています。</p>
<h2>社内への情報共有と相談</h2>
<p>社内への Web フロントエンドの情報共有として Frontend Weekly を継続して開催しています。</p>
<p>また、チームの相談窓口に来たほかチームからの相談に対して調査や支援を行っています。</p>
<p>上期には次のような相談がありました。</p>
<ul>
<li>自社で提供している OSS ライブラリの特定フレームワークでの利用方法を説明したドキュメントのレビュー</li>
<li>Jest v28 へのアップデート方法</li>
<li>Dual Package の package を esbuild で利用する際のエラー</li>
<li>コンポーネントのスタイリング方法について教えてほしい</li>
</ul>
<h3>新人研修のコンテンツ作成と講義の実施</h3>
<p>社内向け新人研修のコンテンツとして「サイボウズの Web フロントエンドについて」というタイトルで研修資料を作成し、講義を行いました。</p>
<p>サイボウズ社内の各プロダクトの現状確認とこれから向かう先を、レガシーフロントエンドとモダンフロントエンドの差異を交えながら解説するといった内容になっています。</p>
<p>サイボウズの各プロダクトにはまだまだ課題がある状態ですので、現状を認識してもらったうえで未来に向けてどう解決していくかの足がかりにするとともに、やっていきを高められたかなと思います。</p>
<h3>社内で IE 卒業式を実施</h3>
<p>サイボウズは 2022/06/12 に IE 11 のサポートを終了しました。</p>
<p>公開イベントとして開催された<a href="https://web-study.connpass.com/event/250191/">IE 卒業式</a>の社内版として、チームを問わず社内から IE に関する LT をしてくれるメンバーを募集して LT 会を開催しました。</p>
<p>社内向けならではの IE の思い出話が聞けた有意義な会となりました。</p>
<h2>社外への発信</h2>
<h3>Frontend Monthly</h3>
<p>社外への発信として YouTube Live にて月イチで Frontend Monthly を 生配信・録画で開催しています。</p>
<ul>
<li><a href="https://cybozu.connpass.com/event/236989/">Cybozu Frontend Monthly#19 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/239952/">Cybozu Frontend Monthly#20 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/241837/">Cybozu Frontend Monthly#21 (ゲスト：株式会社ログラス) - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/246037/">Cybozu Frontend Monthly#22 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/248124/">Cybozu Frontend Monthly#23 - connpass</a></li>
<li><a href="https://cybozu.connpass.com/event/250296/">Cybozu Frontend Monthly#24 (ゲスト：LAPRAS 株式会社) - connpass</a></li>
</ul>
<p>ゲストとして参加して頂いた方々ありがとうございました。</p>
<h3>チームのブログ</h3>
<p>また、当ブログにてブラウザの更新情報や ECMAScript の最新動向などを発信しています。</p>
<ul>
<li><a href="https://cybozu.github.io/frontend-expert/posts/turborepo">workspace を使ったコマンドを最適化して実行する Turborepo について</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-firefox-96">CSS color-scheme サポート追加等 Firefox 96.0 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-97">Web Transport のサポートなど、Chrome 97 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2021-12">ECMAScript の最新動向 2021 年 12 月版</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/considerations-for-monorepo">フロントエンドのモノレポ構成はスケーリングの夢を見るか</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-98">COLRv1 font のサポートなど、Chrome 98 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2022-01">ECMAScript の最新動向 2022 年 01 月版</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/css-cascade-layers">主要ブラウザで使える！CSS Cascade Layers で新しい CSS 設計の手法を考える</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-99">CSS Cascasde Layers の追加など、Chrome 99 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-safari-15-4">Safari 15.4 リリースノートまとめ | dialog Element や lazy-loading, CSS Cascade Layers サポートなど</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-101">Chrome 101 リリースノートまとめ</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts/tc39-meeting-2022-03">ECMAScript の最新動向 2022 年 03 月版</a></li>
</ul>
<h2>探究活動</h2>
<p>フロントエンドエキスパートチームでは支援・発信・啓蒙のほかに探究も業務の一環として行っています。</p>
<p>今年の 4 月からは新たな取り組みとして「フロントエンドお触り会」を実施しています。</p>
<p>この会はメンバーが気になっている技術をワイワイ触ってみる集まりです。不定期に誰かが思い立った日に開催されます。</p>
<p>次のようなものについてワイワイと試していました。</p>
<ul>
<li>Remix</li>
<li>Playwright を使ったコンポーネントテスト</li>
<li>Rome</li>
</ul>
<p>下期はもう少し開催頻度を上げて、いろいろなものを触りたいです。</p>
<h2>おわりに</h2>
<p>2022 年下期も引き続き支援活動、発信を続けていきたいと思います。</p>
<p>フロントエンドエキスパートチームではサイボウズのフロントエンドを最高にするメンバーを募集しています。採用サイトからの応募やカジュアル面談などお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/recruit/entry/career/front-end-expert.html" style="border: none;"></iframe></div></p>


<p>この記事は<a href="https://adventar.org/calendars/6823">Cybozu Advent Calendar 2021</a>の 18 日目の記事です（業務なので前日に出してます 🍀）。</p>
<p>サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。</p>
<p>フロントエンドエキスパートチームの今年の取り組みを紹介します。</p>
<h2>フロントエンドエキスパートチームの立ち位置とミッション</h2>
<p>フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。</p>
<p>フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。</p>
<p>日々の活動は次の 4 つの内容を軸に行なっています。</p>
<ul>
<li>支援: プロダクトやチームへの支援</li>
<li>発信: Cybozu やメンバーのプレゼンス向上のための情報発信</li>
<li>啓蒙: 社内メンバーのフロントエンドの技術力向上のための啓蒙活動</li>
<li>探究: プロダクトの可能性を広げるための調査検証</li>
</ul>
<p>これら 4 つを軸に、<code>支援:5</code> <code>発信&#x26;啓蒙:2</code> <code>探究:3</code> の割合を目安にメンバー個々人が裁量を持って活動しています。</p>
<p>チームは今月で 4 歳 2 ヶ月になります。</p>
<h2>活動内容まとめ</h2>
<p>今年は大小さまざまな取り組みを行いました。次のリストはフロントエンドエキスパートチームが行なった今年の活動内容のざっくりとしたまとめです。これらの活動はチームで自発的に始めた取り組みと、相談きっかけで行なったものがあります。割合としては自発的なものが 9 割、相談きっかけが 1 割程度です。</p>
<ul>
<li>プロダクトのフロントエンドリアーキテクチャ支援</li>
<li>プロダクトのマイクロサービス化を検証</li>
<li>プロダクトのライブラリアップデート支援</li>
<li>プロダクトへのフロントエンドのテスト環境整備支援</li>
<li><a href="https://cybozu.github.io/frontend-monthly/">サイボウズフロントエンドマンスリー</a>の開催</li>
<li>登壇
<ul>
<li><a href="https://nodejs.connpass.com/event/221358/">Node 学園 37 時限目 オンライン</a></li>
<li><a href="https://web-study.connpass.com/event/213676/">tc39_study</a></li>
<li><a href="https://jsconf.jp/2021/">JSConf JP 2021</a></li>
</ul>
</li>
<li><a href="https://cybozu.connpass.com/event/212572/">Meetup の開催</a></li>
<li>OSS へのコントリビューション</li>
<li>社内向けフロントエンド研修の開催</li>
<li>フロントエンドウィークリーの開催（社内向け勉強会）</li>
<li>エンジニアインターンの開催</li>
<li><a href="https://blog.cybozu.io/search?q=%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A8%E3%82%AD%E3%82%B9%E3%83%91%E3%83%BC%E3%83%88">エンジニアブログへの記事投稿</a></li>
<li><a href="https://cybozu.github.io/frontend-expert/posts">チームの web サイトへの記事投稿</a></li>
<li>デザインシステムの探究</li>
</ul>
<p>プロダクトの現状を見て、プロダクトや会社の今後の方向性などを加味した上で、取り組みの内容や注力する割合をコントロールしています。</p>
<p>その中からいくつかをピックアップして詳細を紹介します。</p>
<h2>プロダクトのフロントエンドリアーキテクチャをプロジェクト化するまで</h2>
<p>サイボウズでは現在、kinotne のフロントエンドのリアーキテクチャプロジェクトが進行中です。kintone の脱レガシーの取り組み自体は 2019 年ごろから開始されていましたが、1 つのプロジェクトとして動くようになったのは今年からです。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://blog.cybozu.io/entry/2021/07/20/170000" style="border: none;"></iframe></div></p>
<h3>少数チームでやれることに限界を感じた</h3>
<p>リアーキテクチャがプロジェクトになる前、kintone の脱レガシーはもともとフロントエンドエキスパートチームが主導・先行する形で調査検討を行っていました。Closure Tools というフレームワークに依存している現状に対して、脱 Closure Tools のロードマップを作成したり、Closure Tools を使い続けた場合の影響と今後の見通しについて社内各所に警鐘を鳴らすとともに、別のフレームワークへの置き換え方法についての PoC などを行なっていました。</p>
<ul>
<li><a href="https://blog.cybozu.io/entry/2020/04/07/110126">フロントエンドの開発体験向上と脱レガシー</a></li>
<li><a href="https://blog.cybozu.io/entry/about-clutz">Closure Library から TypeScript の型定義を生成する</a></li>
<li><a href="https://blog.cybozu.io/entry/2020/06/25/105457">styled-components の採用と既存資産を捨てた理由</a></li>
</ul>
<p>そこから kintone の開発メンバーの一部とともに少しずつ React への置き換えを進めるようになりましたが、リソース的にできる範囲とスピードに課題感を抱えており、このままでは 5 年かかっても完了しないのではないかという不安がありました。</p>
<p>この不安をどうやれば解消できるか、どうすればスピードアップできるかをチーム内で定期的に議論していろんな案を考えていました。</p>
<h3>プロダクトの課題を組織の課題にする</h3>
<p>kintone はサイボウズにとって大事なプロダクトで、そのプロダクトの内部の経年劣化は間違いなく組織にとっても課題です。10 年以上使い続けているフレームワークによる開発は限界に近づいてきていますが、この課題に対しての温度感がフロントエンドエキスパートとその他で大きな差がありました。</p>
<p>プロダクト側からすると新規機能の開発やバグ修正などの優先度が高くなりがちなので、脱レガシーにリソースを注力すると決めるのは難しいことだと理解はできます。また、プロダクトより上の層（サイボウズでは本部長などの経営に近い層）からするとゆっくりながらも進んでいるという事実からか、そこまで危機感は持っていないように感じられました。</p>
<p>そんな状況もあり、フロントエンドエキスパートチームとしては脱レガシーを組織の課題として、トップダウン的な動きで会社として注力する形でやっていきたいと考えました。しかしながらことはそう簡単ではなく、サイボウズは上長やマネージャーがいないという組織構造から、そういった大きな活動を起こすのに気力とコストを大いに必要としました。（現在この課題に対していろいろなトライを実施しており、解消に向かって進んでいます）</p>
<p>フロントエンドエキスパートチームからの問題提起を根気強く続けながら、プロダクトのメンバーや本部長を交えてどういったチーム構成でどうリリースまで持っていくかなどさまざまな議論を重ねました。その結果、リアーキテクチャプロジェクトとして発足するに至り、組織の課題として取り組める状況まで持っていくことができました。</p>
<h2>横断的な支援チームで難しいと感じるところ</h2>
<p>支援チームで活動していく上で何度か感じた難しいところがあります。それは、外側からの働きかけだけではやれることが多くないということです。外側からいくら熱心に働きかけても支援先のプロダクトなりチームなりが自分ごととして動いてくれない限りは、その場限りの活動になりがちで支援の効果も一時的なものになってしまいます。</p>
<p>こういった実感からフロントエンドエキスパートチームでは、短中期で支援先の内部に入って活動するという方法を取ることが多くなりました。その場限りの支援にならないように仕組みを整えたり、初期段階のブースター役としてがっちりプロダクトチームに寄り添そうような形で支援できるように心がけています。支援したい対象はいくつもありますが、焦らずに 1 つずつ集中して解決していくのが支援チームとしてうまく動いていくのには重要だと思います。</p>
<p>また、支援が一方的な押し付けにならないように、関わるメンバーにその支援活動の意味や意義を共感してもらうことに対して手を抜かないことも大事だと感じています。</p>
<h2>継続的な社内啓蒙と社外発信</h2>
<p>啓蒙・発信をチームの取り組みとして行なっています。社内勉強会として Frontend Weekly を、社外イベントとして Cybozu Frontend Monthly を継続して開催しています。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.github.io/frontend-expert/posts/frontendWeekly-And-Monthly" style="border: none;"></iframe></div></p>
<p>どちらも意識しているのは開催のコストを下げることです。司会を交代制にしたり、録画での開催を試したりと、常にコストを下げる工夫を行なっています。その結果、Frontend Weekly は 5 周年、Cybozu Frontend Monthly は 17 ヶ月連続で開催しています。</p>
<p>Cybozu Frontend Monthly は多くの人に視聴してもらえており、中途入社のきっかけになったり、学生への認知向上といった効果も出ています。これからも無理しない範囲で続けていければと思います。</p>
<h3>社外発信のコストと心理的障壁を減らす</h3>
<p>今年はフロントエンドエキスパートチームの web サイト(このサイト)を作成して、そこでの情報発信をはじめました。サイボウズの技術ブログは他にもありますが、あちらはプロダクトでの知見を共有する場という側面が強かったり、ちゃんとしたものをそこそこのボリュームで出さなければという意識が働くといった意見がチーム内で出たりと、若干のハードルを感じる場所になっています。</p>
<p>チームの web サイトであれば、フロントエンドの情報に偏っていても問題なく、プロダクトに依存しない内容を気軽に発信できる場所として機能すると考えました。</p>
<p>記事の執筆は一見コストが高そうですが、フロントエンドエキスパートチームではもともと社内 SNS(kintone)に web の最新情報などを共有する活動を行なっていました。この情報を外向けに少し整える手間さえかければアウトプットが行えるので、記事作成のコストが低めで継続が見込めます。</p>
<p>今年の 10 月にサイトを開設してから 3 ヶ月で記事を 10 本投稿できていることから、今の所うまくいっているように思います。</p>
<h2>おわりに</h2>
<p>2021 年はフロントエンドエキスパートチームとして存在感と価値を発揮できた年だと感じています。地道な草の根活動からプロジェクト化へこぎつけたり、継続的な発信が行えていたりと、エキスパートチームらしい働きができたのかなと思います。</p>
<p>フロントエンドエキスパートチームの活動はチームメンバーだけでなく、プロダクトチームなどの協力があってこその活動も多いです。来年も関係各所と連携を取りつつ、着々と成果が出せるように取り組んで行きたいと思います。</p>
<p>フロントエンドの横断的支援チーム、フロントエンドのリアーキテクチャなどに興味がある方はカジュアル面談、応募をお待ちしております。</p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/company/job/recruitment/list/front_end_expert.html" style="border: none;"></iframe></div></p>
<p><div class="hatena-link"><iframe class="hatena-link-frame" src="https://hatenablog-parts.com/embed?url=https://cybozu.co.jp/company/job/recruitment/list/front_end_engineer_kintone.html" style="border: none;"></iframe></div></p>


<p><a href="https://developer.chrome.com/blog/new-in-chrome-95/">Chrome 95 がリリース</a>され、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました)</p>
<h2>EyeDropper API とは</h2>
<p>EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。
Chrome の DevTools にも色選択をするときにスポイトアイコンをクリックするとスポイトツールが使えますが、この機能が単体の Web API として実装された形になります。</p>
<p><img src="/frontend-expert/image/eyedropper-api/eyedropper.png" alt="DevToolsのカラーピッカー" width="687" height="307" ></p>
<h2>使い方</h2>
<p>EyeDropper API の使い方は次のようになります。</p>
<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword">const</span> eyeDropper <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">EyeDropper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword control-flow">await</span> eyeDropper<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {sRGBHex: '#92d0e1'}</span>
</code></pre></div>
<p><code>EyeDropper</code>のインスタンスで<code>open</code>を実行すると色選択の UI が表示されます。</p>
<h3>セキュリティ上の制約</h3>
<p>EyeDropper API の <code>open</code> はユーザーの操作なしに実行するとエラーになります。</p>
<div class="remark-highlight"><pre class="language-markup"><code class="language-markup">DOMException: Failed to execute 'open' on 'EyeDropper': EyeDropper::open() requires user gesture.
</code></pre></div>
<p>これはプライバシーやセキュリティを考慮しての制限になります。<code>open</code>はユーザーの操作によってのみスポイトモードに移行し、ユーザーがクリックしたときのみ色の値を返します。
これによって悪意のあるサイトがユーザーの画面のピクセル情報を勝手に取得できないようになっています。</p>
<h3>console からは起動できる</h3>
<p>ユーザーの操作なしに起動できない API ですが、DevTools の console からはその限りではありません。次のワンライナーのコードを console で実行するとスポイトツールを起動できます。</p>
<div class="remark-highlight"><pre class="language-js"><code class="language-js"><span class="token keyword control-flow">await</span> <span class="token keyword">new</span> <span class="token class-name">EyeDropper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div>
<p>覚えておくと便利かもしれません。</p>
<p>ちなみにですが、Snippets からは起動できませんでした。</p>
<h2>EyeDropper API を使ったデモサイト</h2>
<p>EyeDropper API のデモサイトの紹介です。こちらのデモでは EyeDropper API を使った色選択ゲームが遊べます。</p>
<p><a href="https://captainbrosset.github.io/eyedropper-demos/color-game.html">eyedropper-demos/color-game</a></p>
<p>Play ボタンをクリックするとカウントダウンが開始されます。時間内に左のマスに表示された色と同じ色を選択すると勝ちです。</p>
<p><img src="/frontend-expert/image/eyedropper-api/demo.png" alt="EyeDropper APIのデモ" width="704" height="491" ></p>
<p>一部ブラウザでは <code>input</code>タグで<code>type="color"</code>とすることで似たようなピッカーを使用できましたが、UI なしに実行できるようになったことでいろいろな使い道が考えられそうですね。</p>
<h2>参考リンク</h2>
<ul>
<li><a href="https://wicg.github.io/eyedropper-api/">https://wicg.github.io/eyedropper-api/</a></li>
<li><a href="https://web.dev/eyedropper/">https://web.dev/eyedropper/</a></li>
</ul>
