<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>


<p>Firefox 93 がリリースされました！</p>
<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/93.0/releasenotes/">https://www.mozilla.org/en-US/firefox/93.0/releasenotes/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/93">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/93</a></li>
</ul>
<p>今回のリリースから AVIF 画像フォーマットがデフォルトで有効化されます。</p>
<p>クライアント側の使用感が変わるわけではありませんが、今後こういった高圧縮可能な形式がスタンダードになることでよりリッチな Web コンテンツを多く提供できるようになるかもしれませんね。</p>
<p>また、クラスの <code>static</code> 初期化ブロックをはじめとして、多くのイベントハンドラやプロパティの追加が盛り込まれているため、開発者視点では重要なアップデートではないかと思われます。</p>
<h2>New</h2>
<ul>
<li>AV1 形式の画像フォーマットに対応</li>
<li>PDF ビューアーがより詳細なフォームに対応(複数の政府や銀行が使用している XFA ベースフォーム)</li>
<li>Windows 版にて、利用可能メモリが極端に少ない場合に利用状況や属性に基づいてタブを自動的にアンロードするようになった</li>
<li>macOS 版にて、.dmg ファイルからマウントされた Firefox を実行している時、セッションを失わないためにインストールを完了するかどうかプロンプトが表示されるようになった</li>
<li>安全でない接続に依存している、もしくは安全でない可能性のあるダウンロードをブロックするようになった</li>
<li>Smart Block 3.0 (プライバシー保護機能)の互換性向上</li>
<li>新しい referrer tracking protection を Strick Tracking Protection と Private Browsing に導入</li>
<li>Firefox Suggest(Web ナビゲーター) の導入</li>
</ul>
<h2>Fixed</h2>
<ul>
<li>VoiceOver がアクセス可能なツリーコントロール内にあるチェック可能アイテムのチェック状態を正しく判別するようになった</li>
<li>Orca スクリーンリーダーが Firefox で正しく動作するようになった</li>
<li>その他セキュリティ修正</li>
</ul>
<h2>Changed</h2>
<ul>
<li>3DES を使用する TLS 暗号スイートが無効化
<ul>
<li>非推奨バージョンの TLS を有効化する設定により利用は可能</li>
</ul>
</li>
<li>ダウンロードパネルが Firefox のビジュアルスタイルに沿うようになった</li>
</ul>
<h2>for web developer</h2>
<h3>HTML</h3>
<ul>
<li>ARIA <code>meter</code> ロールを実装</li>
<li><code>&#x3C;input type="datetime-local"></code> の UI を実装</li>
</ul>
<h3>CSS</h3>
<ul>
<li><code>font-synthesis</code> に <code>small-caps</code> キーワードを追加</li>
</ul>
<h3>JavaScript</h3>
<ul>
<li>クラスの <code>static</code> 初期化ブロックをサポート</li>
<li><code>createImageBitmap()</code> にて option オブジェクトを用いて <code>imageOrientation</code> 及び <code>premultiplyAlpha</code> プロパティを渡せるようになった</li>
<li><code>Intl.supportedValueOf()</code> をサポート
<ul>
<li>実装でサポートされている値をコードで列挙できるようになった</li>
</ul>
</li>
</ul>
<h3>HTTP</h3>
<ul>
<li>ダイジェストを用いた HTTP 認証で SHA-256 アルゴリズムをサポート</li>
<li>画像のデフォルト HTTP ACCEPT ヘッダーが <code>image/avif,image/webp,*/*</code> に変更
<ul>
<li>AV1 フォーマット対応によるものだと思われます</li>
</ul>
</li>
</ul>
<h3>APIs</h3>
<ul>
<li><code>ElementInternals.shadowRoot</code> 及び <code>HTMLElement.attachInternals</code> をサポート</li>
<li><code>ResizeObserver.Observe()</code> にて <code>device-pixel-content-box</code> 値をサポート</li>
<li>グローバル関数 <code>reportError()</code> をサポート
<ul>
<li>スクリプトがコンソールやグローバルイベントハンドラに対してエラーを報告できるようになった</li>
</ul>
</li>
</ul>
<h3>Events</h3>
<ul>
<li>グローバルイベントハンドラプロパティ <code>onsecuritypolicyviolation</code> をサポート
<ul>
<li>コンテンツセキュリティポリシー違反時に発生する <code>securitypolicyviolation</code> イベントを処理するハンドラを割り当てることが可能になった</li>
</ul>
</li>
<li><code>GlobalEventHandlers</code> 及び <code>ShadowRoot</code> にて <code>onslotchange</code> イベントハンドラプロパティをサポート
<ul>
<li>スロットに含まれるノードが変更された際に <code>&#x3C;slot></code> 要素で発生する <code>slotchange</code> イベントを処理するハンドラを割り当てることが可能になった</li>
</ul>
</li>
</ul>
<h3>Removals</h3>
<ul>
<li><code>KeyboardEvent.initKeyEvent()</code> が <code>dom.keyboardevent.init_key_event.enabled</code> によって実行可否が制御されるようになり、デフォルトで無効になった</li>
</ul>
<h3>WebDerive conformance (Marionette)</h3>
<ul>
<li>大きなドキュメントに対して <code>WebDriver:Print</code> が失敗する原因になっているバグを修正</li>
</ul>
<h3>for add-on developers</h3>
<ul>
<li><code>windowId</code> が指定されている場合、サイドバーが <code>extension.getViews</code> に包含されるようになった</li>
</ul>
<h3>Other</h3>
<ul>
<li>AVIF 画像のサポートがデフォルトで有効になった
<ul>
<li><code>image.avif.compliance_strictness</code> を用いて仕様準拠の厳密生を調節できる</li>
<li>アニメーション画像には非対応</li>
</ul>
</li>
</ul>
<h2>Web Platform</h2>
<ul>
<li><code>&#x3C;input type="datetime-local"></code> の UI を実装</li>
</ul>


<p>こんにちは、サイボウズフロントエンドエキスパートチームの<a href="https://twitter.com/__sosukesuzuki">@__sosukesuzuki</a>です。</p>
<p>サイボウズには<a href="https://blog.cybozu.io/">Cybozu Inside Out</a>という技術ブログがあります。
それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。</p>
<p>この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。</p>
<h2>経緯</h2>
<p>フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。
(チームでのハッカソンについては<a href="https://blog.cybozu.io/entry/2021/02/25/133039">Cybozu Inside Out に投稿されている記事</a>をご覧ください)</p>
<p>そのようなハッカソンで、フリーテーマの回がありました。
そこで、<a href="https://twitter.com/__sakito__">Sakito</a>さんと<a href="https://twitter.com/b4h0_c4t">BaHo</a>さんと<a href="https://twitter.com/__sosukesuzuki">sosukesuzuki</a>(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作ってみることにしました。</p>
<p>ハッカソンの期間内に完成することはありませんでしたが、チームとしてウェブサイトを持っていた方が良いということで合意が得られたので、ハッカソン終了後も開発を継続することにしました。</p>
<h2>目的</h2>
<p>フロントエンドエキスパートチームの活動を多くの人に知ってもらうためです。</p>
<p>フロントエンドエキスパートチームでは、日頃から様々なフロントエンド技術の啓蒙活動を行っています。
それらの多くはクローズドな場所で行われています。しかし基本的にその内容はサイボウズ特有のものではなく、一般的に有用な情報です。</p>
<p>そこで、フロントエンドエキスパートチームとしてウェブサイトを開設し、公開できる有用な情報は公開することにしました。</p>
<p>このウェブサイトを通して、フロントエンドエキスパートチームに興味を持ってくれたら嬉しいです。</p>
<h2>技術</h2>
<p>次の要件を満たす技術として、<a href="https://github.com/vercel/next.js">Next.js</a> を採用しました。</p>
<ul>
<li>環境構築が簡単である
<ul>
<li>もともとハッカソンで開発していたので、環境構築に多くの時間を割けないという事情がありました。</li>
</ul>
</li>
<li>SSG の機能を備えている
<ul>
<li>すべてのコンテンツは静的なものと決まっていたので、SSG ができると嬉しい</li>
</ul>
</li>
<li>TypeScript との相性が良い</li>
</ul>
<p>記事は Markdown として管理して Next.js の <code>getStaticProps</code> のタイミングで <a href="https://github.com/remarkjs/remark">remark</a> を使って HTML に変換しています。</p>
<p>また、ブログの機能を持つので、feed の生成と記事ごとの OGP 画像の生成をのためのスクリプトをそれぞれ用意しました。feed 生成スクリプトは、記事データの Markdown からメタデータを取得し、XML ファイルを書き出します。
OGP 画像生成スクリプトは、記事データの Markdown からタイトルを取得し、<a href="https://github.com/puppeteer/puppeteer">Puppeteer</a> で画像を生成します。</p>
<p>ホスティングには GitHub Pages を使っています。GitHub で管理している HTML をホストする先としてはやはり楽です。</p>
<p>実装はすべて <a href="https://github.com/cybozu/frontend-expert">https://github.com/cybozu/frontend-expert</a> で公開しています。</p>
<h2>おわりに</h2>
<p>これから、不定期ではありますが、当サイトにてフロントエンドに関連する情報を発信していく予定です。ぜひ読んでみてくださいね。</p>


Posts