前回の記事では Calcite Design System の使用方法を学習する手段の第一歩として、Calcite Design System を使用したチュートリアル、Create a mapping app のサンプルを翻訳して紹介しました。本記事ではチュートリアルの Build a dark mode switch のサンプルの解説を翻訳して紹介します。
Calcite Components と ArcGIS Maps SDK for JavaScript のライトテーマとダークテーマを切り替えるコンポーネントを作成する方法について説明します。
Calcite Components を使用して、Calcite Components、および ArcGIS JavaScript API ウィジェットやベースマップのダークモードを有効するエレガントなダークモード スイッチを設計します。このアプリケーションは、Create a mapping app のチュートリアルで作成したものをベースにしています。
Calcite は、CSS のクラスである calcite-mode-light(デフォルト)と calcite-mode-dark を使って変更できるライトモードとダークモードを提供します。また、ブラウザの CSS prefers-color-scheme メディアクエリに従う calcite-mode-auto クラスも用意されています。要素にモードクラスを設定すると、その子ノードもすべて変更されます。
モードとスタイリングの詳細については、Calcite Design System の colors and modes foundation の基礎、および ArcGIS Maps SDK for JavaScript の styling に関するドキュメントを参照してください。
このチュートリアルで使用するサービスにアクセスするには、無料の ArcGIS Developer アカウントまたは ArcGIS Online の組織に関連付けられたアカウントが必要です。
開発者アカウントを使用している場合、ArcGIS サービスにアクセスするために API キーが必要です。ArcGIS Online の組織に関連付けられたアカウントをお持ちの場合は、この手順を省略することができます。
"esri/widgets/Print",
"esri/config"
], function (WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print, esriConfig ) {
esriConfig.apiKey = "YOUR_API_KEY";
ArcGIS Maps SDK for JavaScript では、個別のテーマ スタイルシートが使用されます。ライト スタイルシートとダーク スタイルシートの両方を追加すると、id 属性を使用して JavaScript で動的に切り替わります。
<script src="https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js" type="module"></script>
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.7/calcite.css" />
<script src="https://js.arcgis.com/4.25/"></script>
<link disabled id="arcgis-maps-sdk-theme-dark" rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/dark/main.css" />
<link id="arcgis-maps-sdk-theme-light" rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css" />
ダークモードスイッチの主要部品は calcite-switch です。また、モードスイッチャーは、明暗のアイコンに calcite-icon を使用し、calcite-label で全体をまとめます。
<body>
<calcite-loader active></calcite-loader>
<calcite-shell content-behind hidden>
<!-- Header slot -->
<div slot="header" id="header">
<!-- Title -->
<h2 id="header-title">
<!-- Dynamically populated -->
</h2>
<!-- Controls -->
<div id="header-controls">
<!-- Dark Mode Switch -->
<calcite-label layout="inline" class="label-wrapper">
Dark mode: Off
<calcite-switch></calcite-switch>
On
</calcite-label>
</div>
</div>
この時点でアプリを起動すると、アプリの上部、左側にダークモード スイッチャーが表示されているのがわかると思います。
次に、Flexbox を使用してコンポーネントを配置するために、CSS でスタイルを追加します。
1. style エレメントに、ヘッダー スロットのために作成した id を使用して、ヘッダー用の CSS を追加します。ヘッダー内のコンテンツにスペースを空けるため、padding を追加し、ヘッダースロットの背景色を CSS 変数 --calcite-ui-foreground-1 に設定します。
#header {
display: flex;
padding: 0 1rem;
background-color: var(--calcite-ui-foreground-1);
}
2. ヘッダー スロットのネストされた div の id を使用して、ヘッダー コントロールにスタイルを追加します。追加された div エレメントのスタイルは、1つまたは複数のコンポーネントを収容することができます。ヘッダー コントロールのスペースを確保するには、margin-inline-start と align-self の CSS プロパティを使用します。
#header-controls {
display: flex;
margin-inline-start: auto;
align-self: center;
}
3. ダークモード スイッチのレイアウトを設定するために、margin-inline と padding の CSS プロパティを設定します。CSS 変数に --calcite-ui-border-1 で色を指定して、border を追加します。次に、インターフェイスの将来のコントロールに対応するため、calcite-switch にマージンのCSSプロパティを追加します。
コンセプトの詳細については、CSS 変数の Core concepts のセクションをお読みください。Calcite のモードカラーには、ライトとダークの値があり、モードを切り替えると自動的に切り替わります。テーマを切り替えるアプリケーションでは、Calcite 以外のすべての要素にモードカラー変数を使用します。
4. 次に、calcite-label の -calcite-label-margin-bottom CSS 変数 を追加して、コンポーネントの下の間隔を設定します。
calcite-label {
--calcite-label-margin-bottom: 0px;
}
5. 最後に、スイッチの cursor プロパティに pointer を設定し、スイッチ コンテナがクリック可能であることを伝達します。
.label-wrapper {
display: flex;
margin-inline: 1rem;
padding: 0.5rem;
border: 1px solid var(--calcite-ui-border-1);
cursor: pointer;
}
calcite-switch {
margin: 0 0.5rem;
}
これで、見栄えの良いコンポーネントができましたが、ダークモードは有効になりません。次に、ダーク モード スイッチャーを JavaScript と連携します。
document.querySelector("calcite-shell").hidden = false;
document.querySelector("calcite-loader").hidden = true;
const updateDarkMode = () => {
// Calcite mode
document.body.classList.toggle("calcite-mode-dark");
// ArcGIS Maps SDK theme
const dark = document.querySelector("#arcgis-maps-sdk-theme-dark");
const light = document.querySelector("#arcgis-maps-sdk-theme-light");
dark.disabled = !dark.disabled;
light.disabled = !light.disabled;
// ArcGIS Maps SDK ベースマップ
map.basemap = dark.disabled ? "gray-vector" : "dark-gray-vector";
};
document.querySelector("calcite-switch").addEventListener("calciteSwitchChange", updateDarkMode);
});
});
</script>
</html>
CodePenで、コードを実行するとアプリケーションが表示されます。
画面右上に、新しい美しいダークモードスイッチャーのコンポーネントが表示されます。コンポーネント上のどこかをクリックすると、calcite-switch が切り替わります。イベント リスナー用に作成した関数が実行され、Calcite Components のテーマ、および ArcGIS Maps SDK for JavaScript のベースマップとウィジェットが切り替わります。
今回は、Calcite Design System を使用した Build a dark mode switch のサンプル を翻訳して紹介しました。次のステップとして Apply core concepts のチュートリアルも併せて参照してください。
Build a dark mode switch
・Build a dark mode switch | Calcite Design System | ArcGIS Developers
他のチュートリアル
・Tutorials | Calcite Design System | ArcGIS Developers
ArcGIS Developers
ArcGIS 開発リソース集
・ArcGIS Developers 開発リソース集 (esrijapan.github.io)