攻略法

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（全国トップクラス）
最新年度	2024年度
ライセンス	CC BY 4.0（商用利用可）

必須クレジット表記：

出典：国土交通省 PLATEAUウェブサイト（https://www.mlit.go.jp/plateau/）

⚠️ 注意： クレジット表記は必須です。発表スライドやアプリ内に忘れずに入れましょう。

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(&quot;cesiumContainer&quot;, {
  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(&quot;locationBtn&quot;).addEventListener(&quot;click&quot;, () =&gt; {
  navigator.geolocation.getCurrentPosition((pos) =&gt; {
    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);