Calcite Design System を使用したダークモードスイッチの作成

1511
0
11-20-2022 06:23 PM
Labels (1)

Calcite Design System を使用したダークモードスイッチの作成

はじめに

前回の記事では 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 開発者アカウント

このチュートリアルで使用するサービスにアクセスするには、無料の ArcGIS Developer アカウントまたは ArcGIS Online の組織に関連付けられたアカウントが必要です。

ステップ

新しいペンの作成

  1. まずは、チュートリアル「Create a mapping app」を完了するか、このペンを使ってください。

API キーの使用

開発者アカウントを使用している場合、ArcGIS サービスにアクセスするために API キーが必要です。ArcGIS Online の組織に関連付けられたアカウントをお持ちの場合は、この手順を省略することができます。

  1. 開発者用ダッシュボードで、APIキーを取得します。
  2. CodePen > <script> で、esriConfig クラスをインポートします。
  3. apiKey プロパティを設定します。

 

  "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 で動的に切り替わります。

  1. ダークテーマのスタイルシートを追加し、disabled 属性を設定し、id を追加します。
  2. 既存のライトテーマのスタイルシートにidを追加する。

 

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

 

HTML を追加

ダークモードスイッチの主要部品は calcite-switch です。また、モードスイッチャーは、明暗のアイコンに calcite-icon を使用し、calcite-label で全体をまとめます。

  1. calcite-shell コンポーネントに div 要素を追加し、骨組みにヘッダー スロットを配置します。id 属性は後でスタイリングに使用します。
    考え方については、スロットの Core concepts のセクションをお読みください。次のステップでCSS を追加した後、骨組みのヘッダー スロットからコンポーネントを削除することで、マップ上にテーマ スイッチャーを配置することができます。
  2. ヘッダー スロット内にネストした div エレメントを追加します。id 属性は後でスタイル付けに使用するため、記述してください。
  3. calcite-label コンポーネントを追加し、layout 属性を inline に設定し、後でスタイリングに使用する class 属性を追加します。
  4. コンポーネントのスタイル設定に使用する class を追加します。
  5. calcite-switch コンポーネントを追加します。

 

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

 

CSS の追加

この時点でアプリを起動すると、アプリの上部、左側にダークモード スイッチャーが表示されているのがわかると思います。

次に、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 の追加

これで、見栄えの良いコンポーネントができましたが、ダークモードは有効になりません。次に、ダーク モード スイッチャーを JavaScript と連携します。

  1. <script> 内の既存の JavaScript コードの下に、ダークモードを有効にするための新しい関数を作成します。
  2. body エレメントの calcite-theme-dark クラスをトグルします。calcite-theme-light クラスはデフォルトなので、追加する必要はありません。
  3. 上記で追加した id 属性を使用して、ArcGIS Maps SDK for JavaScript light スタイルシートと dark スタイルシートにアクセスします。
  4. 両方のスタイルシートの disabled 属性を否定して、その Boolean 値を切り替えます。
  5. 現在のテーマに応じて、ベースマップを gray-vector dark-gray-vector に変更します。
  6. calcite-switch コンポーネントにイベントリスナーを追加します。calciteSwitchChange イベントを作成し、作成した関数を提供します。
    Calcite 
    は、多くのコンポーネントに対してカスタム イベントを提供しています。カスタム イベントは、プレフィックスは全てが calcite、次にコンポーネント名、最後にイベントのタイプになります。コンポーネントの API リファレンスで、そのコンポーネントがイベントを持っているかどうか、またそのイベントを確認することができます。

 

    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で、コードを実行するとアプリケーションが表示されます。

2022-11-21_09h59_34.gif

画面右上に、新しい美しいダークモードスイッチャーのコンポーネントが表示されます。コンポーネント上のどこかをクリックすると、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 Developers

ArcGIS 開発リソース集

ArcGIS Developers 開発リソース集 (esrijapan.github.io)

 

Labels (1)
Version history
Last update:
‎03-02-2023 06:47 PM
Updated by: