地図と組み合わせる3DビューワーCesiumを使ってみよう

最近、「デジタルツイン」という言葉をよく耳にするようになりました。でも、これって一体何なのでしょうか？

デジタルツインとは、現実世界の物や場所をコンピューター上で再現する技術のことです。例えば：

建物や街全体の3Dモデルを作成
センサーを使って実際の温度や人の動きなどのデータを集める
そのデータをコンピューター上の3Dモデルに反映させる

これにより、現実世界の状況をデジタル空間上で表現することができます。

この技術は様々な分野で活用されています：

都市計画：新しい建物が建つとどう景観が変わるか事前に確認
交通管理：渋滞の予測や効率的な道路計画
災害対策：洪水や地震のシミュレーション
環境保護：大気汚染の広がりを予測

Cesiumとは？3D世界を簡単に作れるツール

さて、このようなデジタルツインを作るのは難しそうに思えますが、実は「Cesium」というツールを使えば、誰でも簡単に3D世界を作れるんです。

Cesiumは、以下のような特徴を持つJavaScriptライブラリです：

オープンソース：無料で使える
3D地球や地図を簡単に表示できる
WebGL技術を使用：スムーズな3D描画が可能
東京都のデジタルツイン3Dビューアでも使用されている実績あり

Cesiumを使ってみよう！

準備：Cesiumを導入する

Cesiumを使うには2つの方法があります：

npmを使う方法（開発者向け）：
```
npm install cesium
```

CDNを使う方法（初心者にお勧め）：
HTMLファイルに以下のコードを追加します。

<script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

基本的な使い方

HTMLファイルに3D表示用の場所を作ります：
```
<div id="cesiumContainer"></div>
```

CSSで表示サイズを設定します：

<style>
   html, body, #cesiumContainer {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
       overflow: hidden;
   }
</style>

JavaScriptで3D地球を表示します：

const viewer = new Cesium.Viewer("cesiumContainer");

これだけで、地球が表示されます。

実際の活用例：東京都デジタルツイン3Dビューア

東京都が公開しているデジタルツイン3Dビューアは、Cesiumを使って作られています。このビューアでは、東京の街並みを3Dで見ることができます。

注意点：

PCでの利用がお勧めです（スマートフォンだと動作が重くなる場合があります）
テクスチャ（建物の外観など）を表示すると、よりリアルになりますが、処理が重くなります

もっと詳しく知りたい人へ

Cesiumには、さまざまなデモが用意されています。3Dモデルの表示や、地形データの利用など、多くの機能を試すことができます。

Cesium Sandcastleというサイトでは、実際にコードを書きながらCesiumの機能を学べます。

Monacaで作るデジタルツイン活用モバイルアプリ

ここまでデスクトップでのCesiumの使用方法を見てきましたが、実はMonacaを使えば、デジタルツインを活用したモバイルアプリも作ることができます。

Monacaとは？

Monacaは、HTML、CSS、JavaScriptを使ってクロスプラットフォームのモバイルアプリを開発できるツールです。

Monaca + Cesium でモバイルアプリを作ろう

それでは、先ほどの地球を表示する例をMonacaで実装してみましょう。以下のコードを使用します：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com file: blob:; style-src * &#039;unsafe-inline&#039;; script-src * &#039;unsafe-inline&#039; &#039;unsafe-eval&#039;; worker-src * blob: file:;">
        <script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
        <link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <style>
            html,
            body,
            #cesiumContainer {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
        This is a template for Monaca app.
        <script>
            const viewer = new Cesium.Viewer("cesiumContainer");
        </script>
    </body>
</html>

このコードの各部分を詳しく見ていきましょう：

Cesiumの読み込み:

<script src="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.118/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

CesiumのJavaScriptファイルとCSSファイルを読み込んでいます。

スタイル設定:

<style>
   html,
   body,
   #cesiumContainer {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
       overflow: hidden;
   }
</style>

3D表示が画面全体を占めるようにスタイルを設定しています。

3D表示用のコンテナ:
```
<div id="cesiumContainer"></div>
```
Cesiumが3D地球を描画する場所を指定しています。
Cesiumの初期化:
```
<script>
   const viewer = new Cesium.Viewer("cesiumContainer");
</script>
```
Cesiumの3Dビューアを作成し、先ほど指定したコンテナに関連付けています。