攻略法

Cesium.js × PLATEAU 3D Tiles　〜Webブラウザで京都の3D建物を表示しよう〜

はじめに：このガイドを読む前に

「Webで3D地図を表示したいけど、Unityは難しそう...」

「Cesium.jsって聞いたことあるけど、何から始めればいいかわからない...」

そんな不安を抱えていませんか？大丈夫です。このガイドを読み終える頃には、きっと「これなら自分にもできそう」と思えるはず。

このガイドでわかること：

Cesium.jsとは何か、なぜハッカソンで使いやすいのか
京都市のPLATEAUデータを30分で表示する方法
「現在地周辺の3D建物」を表示するアプリの作り方
GitHub Pagesへのデプロイ手順
よくあるエラーと解決法

それでは、一緒に見ていきましょう！

そもそもCesium.jsって何？

Cesium.js は、Webブラウザ上で3D地図を表示するためのJavaScriptライブラリです。

もっと簡単に言うと、Google Earthのような3D地球儀を、自分のWebサイトに埋め込めるツール。しかも無料で使えます。

UnityとCesium.js、どっちを選ぶ？

比較項目

Unity

Cesium.js

環境構築

30分〜1時間

5分（CDNで即使える）

必要なスキル

C#、Unity操作

HTML/JavaScript

デプロイ

ビルドが必要

HTMLファイルを置くだけ

向いている用途

ゲーム、AR/VR

Webアプリ、可視化

おすすめ度（初心者）

★★★☆☆

★★★★★

💡 初心者向けポイント： Web開発の経験があるなら、Cesium.jsが断然おすすめ。環境構築でつまずくリスクが低く、2日間のハッカソンで「動くもの」を作りやすいです。

Cesium ionって何？（よく出てくる用語）

Cesium.jsを使うときによく出てくる「Cesium ion」という言葉。これは、Cesium社が提供するクラウドサービスのことです。

3Dデータのホスティング（置き場所を提供）
地形データの配信
PLATEAUを含む日本全国の3D建物データ

無料枠： 5GBストレージ、15GB/月ストリーミング、1,000セッション/月

ハッカソン用途なら十分すぎる容量です。

🗾 京都市のPLATEAUデータを使う

最も簡単な方法：Cesium ion統合データ

実は、Cesium社がPLATEAU全国データを統合した「Japan 3D Buildings」というアセットを公開しています。

項目

内容

Asset ID

2602291

カバー範囲

日本全国 2,300万棟

京都市対応

✅ 含まれている

料金

無料（Cesium ionアカウント必要）

たった2行で京都市の3D建物を表示できます：

const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2602291);
viewer.scene.primitives.add(tileset);

💡 初心者向けポイント： このAsset IDを覚えておけば、京都市だけでなく日本全国どこでも3D建物を表示できます。東京、大阪、福岡...どこでもOK！

京都市データの詳細

項目

内容

市区町村コード

26100（京都府京都市）

利用可能LOD

LOD0, 1, 2, 3.3（全国トップクラス）

30分で動くアプリを作る

ここからが本番。以下の手順で、30分で「現在地周辺の3D建物」を表示するアプリを作ります。

Step 1：Cesium ionアカウント作成（5分）

https://ion.cesium.com/signup/ (外部リンク) にアクセス
メールアドレスで無料アカウント作成
https://ion.cesium.com/tokens/ (外部リンク) でアクセストークンを生成
トークンをコピーして保存（後で使います）

Step 2：HTMLファイル作成（10分）

以下のコードを index.html として保存してください。

YOUR_ACCESS_TOKEN_HERE の部分を、Step 1で取得したトークンに置き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京都3Dマップ</title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.136/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.136/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0;
    }
    #locationBtn {
      position: absolute; top: 10px; left: 10px; z-index: 999;
      padding: 12px 20px; font-size: 16px; cursor: pointer;
      background: #4CAF50; color: white;
      border: none; border-radius: 8px;
    }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <button id="locationBtn">📍 現在地へ移動</button>
  
  <script type="module">
    // ↓ここにトークンを入れる
    Cesium.Ion.defaultAccessToken = "YOUR_ACCESS_TOKEN_HERE";
    
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrain: Cesium.Terrain.fromWorldTerrain(),
      timeline: false, animation: false
    });
    
    // 日本の3D建物を追加
    const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2602291);
    viewer.scene.primitives.add(tileset);
    
    // 初期位置：京都市役所
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(135.7681, 35.0116, 800),
      orientation: {
        heading: 0, pitch: Cesium.Math.toRadians(-45), roll: 0
      }
    });
    
    // 現在地ボタン
    document.getElementById("locationBtn").addEventListener("click", () => {
      navigator.geolocation.getCurrentPosition((pos) => {
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            pos.coords.longitude, pos.coords.latitude, 500
          ),
          duration: 2
        });
      });
    });
  </script>
</body>
</html>

Step 3：ローカルで動作確認（5分）

HTMLファイルをダブルクリックして開くだけでは動きません。ローカルサーバーが必要です。

方法A：VS Code Live Server（おすすめ）

VS Codeで index.html を開く
右下の「Go Live」をクリック
ブラウザが自動で開く

方法B：Python（すでに入っている人向け）

python -m http.server 8000
# ブラウザで http://localhost:8000 を開く

Step 4：GitHub Pagesにデプロイ（10分）

GitHubでリポジトリを作成
index.html をプッシュ
Settings → Pages → Source: main branch → Save
https://username.github.io/repo/ (外部リンク) でアクセス可能に

⚠️ 注意： ルートに空の .nojekyll ファイルを作成してください。これがないとCesiumの一部ファイルが読み込めません。

❌ よくあるエラーと解決法

ハッカソンでよく遭遇するエラーをまとめました。困ったときはここを確認してください。

エラー1：「Cesium is not defined」

原因： Cesium.jsの読み込み順序が間違っている

解決： <script>タグをアプリのコードより前に配置

❌ 間違い：

<script>/* アプリのコード */</script>
<script src="Cesium.js"></script>  <!-- 後になっている -->

✅ 正解：

<script src="Cesium.js"></script>  <!-- 先に読み込む -->
<script>/* アプリのコード */</script>

エラー2：「401 Unauthorized」

原因： Cesium ionのアクセストークンが無効

解決： ion.cesium.com でトークンを再確認・再生成

エラー3：3D建物が表示されない

原因： カメラが建物から遠すぎる

解決： 以下のコードでカメラを移動

viewer.zoomTo(tileset);

エラー4：位置情報が取得できない

原因： HTTPSでないとGeolocation APIが動かない

環境

対応

localhost

例外扱い、そのまま動作

GitHub Pages

自動でHTTPS、問題なし

Vercel / Netlify

自動でHTTPS、問題なし

💡 初心者向けポイント： スマホで位置情報が取れない場合：設定 → サイトの設定 → 位置情報 → 許可を確認してください。

さらに発展させるアイデア

基本ができたら、ここからがアイデア勝負。いくつかの方向性を紹介します。

パターン1：建物クリックで情報表示

PLATEAUの建物データには「築年数」「用途」「高さ」などの属性情報が含まれています。

const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction((click) => {
  const picked = viewer.scene.pick(click.position);
  if (picked instanceof Cesium.Cesium3DTileFeature) {
    const props = picked.getPropertyIds();
    props.forEach(p => console.log(p, picked.getProperty(p)));
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);