<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcite Design System - Calcite Shell</title>
<!--
ArcGIS Maps SDK for JavaScript（最新版）を読み込み
Calcite Design System の Web Components もこの中に含まれています
-->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<style>
/*
html / body / calcite-shell を画面全体に広げるための基本設定
Calcite Shell はアプリ全体のレイアウト コンテナとして利用します
*/
html, body, calcite-shell {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/*
ヘッダー・フッターで使用する calcite-navigation の背景色をカスタマイズ
CSS 変数を使って簡単にテーマ調整が可能です
*/
calcite-navigation {
--calcite-navigation-background-color: #ffc0cb;
}
/*
各パネル内の説明用 div の共通スタイル
*/
div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-family: "bold";
font-size: 20px;
}
/*
左（panel-start）・右（panel-end）パネルの背景色
*/
#shellPanelStart, #shellPanelEnd {
--calcite-shell-panel-background-color: #ffffe0;
}
/*
上（panel-top）・下（panel-bottom）パネルの背景色
*/
#shellPanelTop, #shellPanelBottom {
--calcite-shell-panel-background-color: #87cefa;
}
/*
メインコンテンツ領域（slot を指定しない要素）
地図表示やメイン画面を配置する想定
*/
#mainDiv {
background-color: #90ee90;
}
</style>
</head>
<body>
<!--
calcite-shell
アプリ全体のレイアウトを管理する最上位コンポーネント
各 UI 要素を slot で配置します
-->
<calcite-shell>
<!-- ===== ヘッダー領域 ===== -->
<!-- slot="header" に配置すると画面上部に固定表示されます -->
<calcite-navigation slot="header">
<calcite-navigation-logo
slot="logo"
heading="slot：header"
scale="l">
</calcite-navigation-logo>
</calcite-navigation>
<!-- ===== フッター領域 ===== -->
<!-- slot="footer" に配置すると画面下部に固定表示されます -->
<calcite-navigation slot="footer">
<calcite-navigation-logo
slot="logo"
heading="slot：footer"
scale="l">
</calcite-navigation-logo>
</calcite-navigation>
<!-- ===== 左サイドパネル ===== -->
<!-- panel-start：画面左側に表示されるパネル -->
<calcite-shell-panel id="shellPanelStart" slot="panel-start">
<div>slot：panel-start</div>
</calcite-shell-panel>
<!-- ===== 右サイドパネル ===== -->
<!-- panel-end：画面右側に表示されるパネル -->
<calcite-shell-panel id="shellPanelEnd" slot="panel-end">
<div>slot：panel-end</div>
</calcite-shell-panel>
<!-- ===== 上部パネル ===== -->
<!-- panel-top：ヘッダーの下に表示される補助パネル -->
<calcite-shell-panel id="shellPanelTop" slot="panel-top">
<div>slot：panel-top</div>
</calcite-shell-panel>
<!-- ===== 下部パネル ===== -->
<!-- panel-bottom：フッターの上に表示される補助パネル -->
<calcite-shell-panel id="shellPanelBottom" slot="panel-bottom">
<div>slot：panel-bottom</div>
</calcite-shell-panel>
<!-- ===== メインコンテンツ ===== -->
<!--
slot を指定しない要素はメイン表示領域になります
地図（Map / Scene）や業務画面を配置します
-->
<div id="mainDiv">slot：設定なし</div>
</calcite-shell>
</body>
</html>Calcite Shell は calcite-shell タグとその slot に設定する calcite-shell-panel や calcite-navigation などを使ってアプリの画面構成を構築できるコンポーネントです。それぞれの slot にはほかの Calcite コンポーネントや ArcGIS Maps SDK for JavaScript のマップ コンポーネント、一般的な HTML タグを配置できます。使用していない slot は自動的に詰めて表示されるため、画面の調整が簡単に行える点も大きな特徴です。
たとえば、マップ ビューアーの画面構成を作成する場合、先ほどのコードから不要な slot を除いて以下のコードだけで作成できます。
<!-- body タグのみ抜粋しています -->
<body>
<calcite-shell>
<!-- ===== ヘッダー領域 ===== -->
<!-- slot="header" に配置すると画面上部に固定表示されます -->
<calcite-navigation slot="header">
<calcite-navigation-logo
slot="logo"
heading="slot：header"
scale="l">
</calcite-navigation-logo>
</calcite-navigation>
<!-- ===== 左サイドパネル ===== -->
<!-- panel-start：画面左側に表示されるパネル -->
<calcite-shell-panel id="shellPanelStart" slot="panel-start">
<div>slot：panel-start</div>
</calcite-shell-panel>
<!-- ===== 右サイドパネル ===== -->
<!-- panel-end：画面右側に表示されるパネル -->
<calcite-shell-panel id="shellPanelEnd" slot="panel-end">
<div>slot：panel-end</div>
</calcite-shell-panel>
<!-- ===== メインコンテンツ ===== -->
<!--
slot を指定しない要素はメイン表示領域になります
地図（Map / Scene）や業務画面を配置します
-->
<div id="mainDiv">slot：設定なし</div>
</calcite-shell>
</body>詳細な UI の作成
ここまでご紹介してきた Calcite Shell はあくまでアプリ全体の画面構成を決定できるもので、実際の UI については別のコンポーネントなどを使用して作成する必要があります。ここでは Calcite Shell とあわせて使われることの多いコンポーネントをいくつかご紹介します。
Calcite Shell Panel は Calcite Shell の panel-start (左側)、panel-end (右側)、panel-top (上側)、panel-bottom (下側) の slot に設定するコンポーネントです。このコンポーネントも Calcite Shell と同じく特別な UI を持たないコンポーネントですが、collapsed プロパティを使うことで、何らかのイベントにあわせて表示のオン / オフを切り替える動作を実現できます。
マップ ビューアーの左右に表示されるボタン群のように、様々な機能をボタンとして提供するコンポーネントです。Calcite Button と異なり、ボタン群をグループとしてまとめる機能やメインの画面を広く見せるための折りたたみ機能を持っている点が特徴です。
Calcite Shell Panel の header (ヘッダー部分)、footer (フッター部分) slot に設定できるコンポーネントです。アプリのタイトルやサイン インしているユーザー情報の表示、メニュー ボタンなどを追加できます。
ここまでは Calcite Design System に含まれるコンポーネントをご紹介してきましたが、もちろん ArcGIS Maps SDK for JavaScript のコンポーネントと組み合わせた Web GIS アプリケーションの構築も可能です。
2D マップであれば arcgis-map、3D シーンであれば arcgis-scene を使ってアプリに地図画面を追加できます。すでに ArcGIS Online、ArcGIS Enterprise で Web マップを作成している場合は、そのアイテム ID を指定することで、Web マップの状態を簡単に復元できます。アプリのメイン画面として追加したい場合は Calcite Shell のタグ内に slot を設定せずに追加すると良いでしょう。
arcgis-legend は凡例、arcgis-layer-list はマップ内のレイヤーの表示を切り替える UI を追加します。ArcGIS Maps SDK for JavaScript のマップ コンポーネントにはこのほかにも一般的な地図アプリケーションで利用される様々な機能がコンポーネントとして用意されています。ここで紹介した 2 つのコンポーネントは UI が縦に伸びやすいため、Calcite Shell の panel-start (左側)、panel-end (右側) に追加するとキレイに収まります。
また、これら arcgis-map や arcgis-scene のコンポーネントの情報と連携して動作するコンポーネントは reference-element 属性に対応するコンポーネントの id を追加することで、マップの情報を自動で参照して UI を表示してくれます。
<!-- Calcite Shell の左側に Calcite Action Bar と UI を配置 -->
<calcite-shell-panel slot="panel-start">
<!-- コンポーネントを切り替えるアクション バー -->
<calcite-action-bar slot="action-bar">
<calcite-action text="凡例" icon="legend" scale="l"></calcite-action>
</calcite-action-bar>
<!-- コンポーネントが表示されるパネル -->
<calcite-panel heading="凡例">
<arcgis-legend reference-element="arcgisMap"></arcgis-legend>
</calcite-panel>
</calcite-shell-panel>
<!-- マップ -->
<arcgis-map id="arcgisMap" item-id=""></arcgis-map>このほかにも Calcite Design System と ArcGIS Maps SDK for JavaScript のマップ コンポーネントにはマップの四隅に UI を配置する arcgis-map、arcgis-scene の slot や、UI を小さなボタンに格納する arcgis-expand などアプリの UI 構築を助ける様々な機能が用意されています。ぜひ、それぞれのサンプル コード (Calcite Design System / ArcGIS Maps SDK for JavaScript)をご確認いただき、アプリの UI 構築の参考にしてください。
まとめ
本記事では Calcite Design System の Calcite Shell を使ったアプリ画面の作成方法をご紹介しました。Calcite Design System や ArcGIS Maps SDK for JavaScript が Web コンポーネントに対応したことにより、HTML を使ったアプリ画面の作成がより簡単になっています。ぜひ、この機会にそれぞれのコンポーネントを使ったアプリ作成をお試しください。
参考リンク
