Web デザインを強力に助けてくれる Calcite Design System のご紹介

1803
0
09-12-2022 07:21 PM
Labels (1)

Web デザインを強力に助けてくれる Calcite Design System のご紹介

はじめに

Web アプリを作成する際に、デザイン センスに自信が無かったり、複数のページで構成する Web アプリの場合、統一感を持たせるデザイン設計をすることが大変だと思ったりする方もいるのではないでしょうか?

そういう方に対して強力な手助けとなる Web デザイン用のコンポーネントが Calcite Design System です。今回はこの Calcite Design System について紹介します。

Calcite Design System は20214月にベータ版として提供が開始された Web ページ デザイン用のコンポーネント群となります。(2022年9月時点もベータ版です。)

RyukiHIRAMATSU_0-1663033629404.png

 

 

この Calcite Design System は、米国 Esri 社でも広く使用されており、ArcGIS Online Map ViewerScene Viewer をはじめ、ArcGIS Experience Builder ArcGIS DashboardsArcGIS API for JavaScript サンプル コード等でも使用されているので、ArcGIS ユーザーの方ですと実はよく目にしているデザインかもしれません。

Calcite Design System を使用するメリットとしては、ArcGIS アカウントを保有していれば無料で複数デバイス、複数ブラウザに対して統一感のある Web ページを作成できることです。

また、一部筆者の主観が含まれますが、各コンポーネントのデザインはとてもかっこよく、デザインに自信が無くても簡単にセンスがある Web ページを作成することができます。

 

ここからは、Calcite Design System の使用方法を簡単について紹介していきます。

 

使用方法

まず、Calcite Design System を使用するために<script> および <link> タグを使用して読み込みます。

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

上記の 2 行を HTML ファイルのヘッダー部に記述することにより Calcite Design System コンポーネントおよびアイコンを使用することができるようになります。

Calcite Design System 各種コンポーネントはカスタム タグが用意されているため、使用したいコンポーネントのカスタム タグを HTML body 部に記述するだけで使用することができます。

今回は例として、Date Picker というカレンダーを表示して日付を設定できるコンポーネントを使用します。

<body>
    <calcite-date-picker id=”date-picker”></calcite-date-picker>
</body>

RyukiHIRAMATSU_1-1663033784264.png

上記のように Calcite Design System にて定義されたカスタム タグを記述するだけで簡単に使用することができます。

 

また、コンポーネントには独自のイベントが設定されており、JavaScript からコンポーネントのイベントを取得することで後続処理を実行することもできます。

イベントを取得する場合は、対象のエレメントに対して addEventListener でイベントを設定することで使用することができます。

<script>
    document.getElementById(“date-picker”).addEventListener(“calciteInputChange”, 後続処理);
</script>

 

Calcite Design System の使用方法をご紹介してきましたが、ArcGIS API for JavaScript を使用した地図 Web アプリの構築にも用いることができます。地図 Web アプリの構築に関するチュートリアルも用意されているので参考にしてください。

 

まとめ

本ブログでは Calcite Design System の概要と基本的な使用方法について紹介しました。

Calcite Design System は ArcGIS アカウントを保有していれば無料で使用できます。ArcGIS アカウントを保有していない人は、無料の開発者アカウントを作成することで使用できます。

Calcite Design System はサンプルが充実しています。また、ArcGIS Developers リファレンスの他、米国 Esri GitHub でも使用方法を確認できます。

Calcite Design System を使用することで、とても簡単に安定したデザインの Web ページを作成することができるので、ぜひご利用ください。

 

関連リンク

Labels (1)
Version history
Last update:
‎09-12-2022 07:21 PM
Updated by: