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

はじめに

出典：Calcite Design System (Beta) - Get Started

はじめに

Calcite Components は、Webアプリケーションを構築するための、柔軟でフレームワークに依存しないWebコンポーネントの豊富なライブラリです。コンポーネントの説明、例、およびプロパティ、スロット、スタイル、テーマを含む 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.0.0-beta.95/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.95/calcite.css" />

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

NPM パッケージで利用する

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.0-beta.95/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.0-beta.95/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";