ArcGIS Developers 開発リソース集 > 技術 Tips 集 > Calcite Design System > はじめに

はじめに

出典：Calcite Design System - Get Started

はじめに

Calcite Components は、Web アプリケーションを構築するための、柔軟でフレームワークに依存しない Web コンポーネントの豊富なライブラリです。Web コンセプトのページでは、Calcite Design System の構成要素について説明しています。

例題、プロパティ、スロット、スタイル、イベント、モードなどの API リファレンスについては、コンポーネントドキュメントをご覧ください。以下の手順で、Calcite Components を使い始めることができます。

まず、Calcite Components を使用するには、ArcGIS アカウントが必要です。アカウントをお持ちでない場合は、無料で作成することができます。

作成方法は、開発者アカウントの作成をご覧ください。

次に、CDN（Content Delivery Network）または NPM（Node Package Manager）ライブラリを使用して、Calcite Components を読み込みます。

CDN で利用する

Calcite Components を読み込むための最も一般的な方法は、ArcGIS CDN でホストされているバージョンを使用する方法です。コンポーネントは、HTML ドキュメントの先頭にある script および link タグを使用して読み込むことができます。

<script type="module" src="https://js.arcgis.com/calcite-components/1.11.0/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.11.0/calcite.css" />

これらのタグを追加すると、他の HTML 要素と同様にコンポーネントを使用することができます。アプリケーションで使用されるコンポーネントのみが読み込まれます。

NPM パッケージで利用する

Calcite Components は、NPM パッケージとしても提供されています。使い始めるには、まずパッケージをインストールし、以下のステップに従います。また、様々なフレームワークやビルドツールを使用したサンプルはこちらでご覧いただけます。

npm install @esri/calcite-components

アセットの読み込み

calcite-icon や calcite-date-picker のような幾つかのコンポーネントは、特定のパスで利用可能なアセットに依存しています。前述したように NPM パッケージでは、ローカルパスか CDN でホストされているアセットの URL を提供するオプションがあります。CDN でホストされているアセットを使うことで、ディスクのビルドサイズを減らすことができます。

ローカルでアセットを使用するには、ビルドツールや NPM スクリプトを使用してコピーする必要があります。ローカルアセットのディレクトリは assets という名前にする必要があります。例えば、/public/calcite/assets は動作しますが、/public/calcite-assets は動作しません。

Calcite Components のサンプル集では、様々な JavaScript フレームワークやビルドツールでローカルアセットを使用する方法を示しています。各例には、フレームワークやビルドツール固有の説明を含む README があります。

cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./public/assets/

スタイルのインポート

最後に、カスケーディングスタイルシート（CSS）を読み込みます。これもフレームワークやビルドツールに依存しますが、多くの場合、JavaScript で読み込むことができます。

import "@esri/calcite-components/dist/calcite/calcite.css";

ビルドの選択

最後に、Calcite Components が提供する 2 つのビルドから 1 つを選択する。

カスタム要素

カスタム要素は、フロントエンドフレームワークを利用する場合に推奨されるビルドです。このビルドを使用するには、Calcite Components のアセットへのパスを設定する必要があります。次のステップで説明するローカルのアセットを使用するか、CDN でホストされているアセットを使用することができます。

import { setAssetPath } from "@esri/calcite-components/dist/components";
// CDN hosted assets
setAssetPath("https://js.arcgis.com/calcite-components/1.11.0/assets");

// ローカル アセット
// setAssetPath(PATH); // PATH はフレームワークによって異なります。

次に、カスタム要素ビルドから、使用する各コンポーネントをインポートする必要があります。これにより、ウィンドウにカスタム要素が自動的に定義されます。

import "@esri/calcite-components/dist/components/calcite-button";
import "@esri/calcite-components/dist/components/calcite-icon";
import "@esri/calcite-components/dist/components/calcite-slider";

ディストリビューション

ディストリビューションビルドを使用する場合、ウィンドウ上でカスタム要素を定義する必要があります。また、ローカルと CDN にホストされたアセットのどちらかを選択することができます。

import { defineCustomElements } from "@esri/calcite-components/dist/loader";
// CDN hosted assets
defineCustomElements(window, {
  resourcesUrl: "https://js.arcgis.com/calcite-components/1.11.0/assets"
});

// Local assets
// defineCustomElements (window);

カスタム要素をウィンドウ上で定義したので、個々のコンポーネントをインポートする必要はありません。