出典：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 を読み込みます。
Calcite Components を読み込むための最も一般的な方法は、ArcGIS CDN でホストされているバージョンを使用する方法です。コンポーネントは、HTML ドキュメントの先頭にある script および link タグを使用して読み込むことができます。
<script type="module" src="https://js.arcgis.com/calcite-components/1.0.5/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.5/calcite.css" />
これらのタグを追加すると、他の HTML 要素と同様にコンポーネントを使用することができます。アプリケーションで使用されるコンポーネントのみが読み込まれます。
Calcite Components は、NPM パッケージとしても提供されています。使い始めるには、まずパッケージをインストールし、以下のステップに従います。また、様々なフレームワークやビルドツールを使用したサンプルはこちらでご覧いただけます。
npm install @esri/calcite-components
Calcite Components が提供する2つのビルドから1つを選択します。
フロントエンド フレームワークを活用する場合は、カスタム要素 の構築を推奨します。このビルドを使用するには、Calcite Components のアセットへのパスを設定する必要があります。この後のステップで説明するローカル アセットと、CDN でホストされているアセットのどちらかを使用することができます。
import { setAssetPath } from "@esri/calcite-components/dist/components";
// CDN ホスティング アセット
setAssetPath("https://js.arcgis.com/calcite-components/1.0.5/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 ホスティング アセット
defineCustomElements(window, {
resourcesUrl: "https://js.arcgis.com/calcite-components/1.0.5/assets"
});
// ローカル アセット
// defineCustomElements(window);
カスタム エレメントはウィンドウ上で定義したため、個々のコンポーネントをインポートする必要はありません。
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";