Window Controls Overlay API と Ambient Light Sensor API を使用して、ウェブ上で太陽光計算機を再現しようとした擬似的な試み。
課題
私は 1980 年代生まれです。私が高校生の頃に流行したのが、ソーラー電卓でした。学校から TI-30X SOLAR が支給され、TI-30X で処理できる最大の数である 69 の階乗を計算して、電卓のベンチマークを互いに競い合ったのは楽しい思い出です。（速度のばらつきは非常に測定可能でしたが、その理由はまだわかりません）。
それから 28 年近く経った今、HTML、CSS、JavaScript で電卓を再現するのは、Designcember の楽しいチャレンジになると思いました。私はデザイナーではないので、ゼロからではなく、Sassja Ceballos 氏の CodePen から始めました。
インストール可能にする
これは悪いスタートではありませんが、完全なスキューモーフィズムを実現するために、さらに強化することにしました。まず、インストールできるように PWA にしました。
self.addEventListener('install', (event) => {
self.skipWaiting();
});
self.addEventListener('activate', (event) => {
self.clients.claim();
event.waitUntil(
(async () => {
if ('navigationPreload' in self.registration) {
await self.registration.navigationPreload.enable();
}
})(),
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
(async () => {
try {
const response = await event.preloadResponse;
if (response) {
return response;
}
return fetch(event.request);
} catch {
return new Response('Offline');
}
})(),
);
});
モバイルとの統合
アプリをインストール可能になったので、次はオペレーティング システムのアプリとできるだけ調和するようにします。モバイルでは、ウェブアプリ マニフェストで表示モードを fullscreen に設定することで、これを実現できます。
{
"display": "fullscreen"
}
カメラの穴やノッチがあるデバイスでは、コンテンツが画面全体を覆うようにビューポートを調整すると、アプリが美しく表示されます。
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />
デスクトップとのブレンド
デスクトップでは、ウィンドウ コントロールのオーバーレイという便利な機能を使用できます。この機能を使用すると、アプリ ウィンドウのタイトルバーにコンテンツを配置できます。最初の手順は、ディスプレイ モードのフォールバック シーケンスをオーバーライドして、window-controls-overlay が利用可能な場合は最初に window-controls-overlay を使用するようにすることです。
{
"display_override": ["window-controls-overlay"]
}
これにより、タイトルバーが事実上消え、タイトルバーがないかのようにコンテンツがタイトルバー領域に移動します。私のアイデアは、擬似的な太陽電池をタイトルバーに移動し、それに合わせて電卓の UI の残りの部分を下に移動することです。これは、titlebar-area-* 環境変数を使用する CSS で実現できます。すべてのセレクタに wco クラスが含まれています。これは、次の段落で説明します。
#calc_solar_cell.wco {
position: fixed;
left: calc(0.25rem + env(titlebar-area-x, 0));
top: calc(0.75rem + env(titlebar-area-y, 0));
width: calc(env(titlebar-area-width, 100%) - 0.5rem);
height: calc(env(titlebar-area-height, 33px) - 0.5rem);
}
#calc_display_surface.wco {
margin-top: calc(env(titlebar-area-height, 33px) - 0.5rem);
}
次に、通常ドラッグに使用するタイトルバーが使用できないため、どの要素をドラッグ可能にするかを決定する必要があります。クラシック ウィジェットのスタイルで、ボタン以外の計算機全体をドラッグ可能にするために (-webkit-)app-region: drag を適用することもできます。ボタンには (-webkit-)app-region: no-drag を適用して、ドラッグに使用できないようにします。
#calc_inside.wco,
#calc_solar_cell.wco {
-webkit-app-region: drag;
app-region: drag;
}
button {
-webkit-app-region: no-drag;
app-region: no-drag;
}
最後のステップは、ウィンドウ コントロールのオーバーレイの変更にアプリが反応するようにすることです。真のプログレッシブ エンハンスメント アプローチでは、ブラウザがこの機能をサポートしている場合にのみ、この機能のコードを読み込みます。
if ('windowControlsOverlay' in navigator) {
import('/wco.js');
}
ウィンドウ コントロールのオーバーレイのジオメトリが変更されるたびに、アプリをできるだけ自然に見えるように変更します。ユーザーがウィンドウのサイズを変更すると、このイベントが頻繁にトリガーされる可能性があるため、このイベントをデバウンスすることをおすすめします。具体的には、いくつかの要素に wco クラスを適用して、上記の CSS を有効にし、テーマの色も変更します。navigator.windowControlsOverlay.visible プロパティをチェックすることで、ウィンドウ コントロール オーバーレイが表示されているかどうかを検出できます。
const meta = document.querySelector('meta[name="theme-color"]');
const nodes = document.querySelectorAll(
'#calc_display_surface, #calc_solar_cell, #calc_outside, #calc_inside',
);
const toggleWCO = () => {
if (!navigator.windowControlsOverlay.visible) {
meta.content = '';
} else {
meta.content = '#385975';
}
nodes.forEach((node) => {
node.classList.toggle('wco', navigator.windowControlsOverlay.visible);
});
};
const debounce = (func, wait) => {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
};
navigator.windowControlsOverlay.ongeometrychange = debounce((e) => {
toggleWCO();
}, 250);
toggleWCO();
これで、昔ながらの Winamp のテーマの 1 つを使った、昔ながらの Winamp のような計算機ウィジェットができました。これで、電卓をデスクトップの好きな場所に配置できるようになりました。また、右上にあるシェブロンをクリックして、ウィンドウ コントロール機能を有効にすることもできます。
実際に動作する太陽電池
究極のギークになるには、太陽電池を実際に機能させる必要がありました。電卓は、十分な光がある場合にのみ機能します。このモデルでは、JavaScript で制御する CSS 変数 --opacity を介して、ディスプレイの数字の CSS opacity を設定しています。
:root {
--opacity: 0.75;
}
#calc_expression,
#calc_result {
opacity: var(--opacity);
}
計算機が動作するのに十分な光があるかどうかを検出するために、AmbientLightSensor API を使用します。この API を利用できるようにするには、about:flags で #enable-generic-sensor-extra-classes フラグを設定し、'ambient-light-sensor' 権限をリクエストする必要がありました。以前と同様に、API がサポートされている場合にのみ関連するコードを読み込むように、プログレッシブ エンハンスメントを使用します。
if ('AmbientLightSensor' in window) {
import('/als.js');
}
センサーは、新しい測定値が利用可能になるたびに、周囲の光をルクス単位で返します。一般的な照明状況の値の表に基づいて、ルクス値を 0 ～ 1 の範囲の値に変換する非常にシンプルな式を作成し、--opacity 変数にプログラムで割り当てました。
const luxToOpacity = (lux) => {
if (lux > 250) {
return 1;
}
return lux / 250;
};
const sensor = new window.AmbientLightSensor();
sensor.onreading = () => {
console.log('Current light level:', sensor.illuminance);
document.documentElement.style.setProperty(
'--opacity',
luxToOpacity(sensor.illuminance),
);
};
sensor.onerror = (event) => {
console.log(event.error.name, event.error.message);
};
(async () => {
const {state} = await navigator.permissions.query({
name: 'ambient-light-sensor',
});
if (state === 'granted') {
sensor.start();
}
})();
下の動画では、部屋の照明を十分に明るくすると、電卓が動作を開始する様子をご覧いただけます。これで、実際に機能するスキューモーフィズムの太陽光計算機が完成しました。長年愛用してきた TI-30X SOLAR は、本当に長い間使ってきました。
デモ
Designcember Calculator のデモをぜひお試しください。また、GitHub のソースコードもご覧ください。（アプリをインストールするには、アプリを専用のウィンドウで開く必要があります。以下の埋め込みバージョンでは、ミニ情報バーは表示されません）。
Designcember をお楽しみください。