BIM・IFCブログに戻る
デジタルツイン · 2026-10-10 · 9分
カタルーニャ広場のライブ・デジタルツイン：オープンデータからブラウザー上で構築
カタルーニャ広場の8つのIFCモデルを実際の地形の上に配置し、Bicingのドック、EV充電器、道路交通、大気質をバルセロナのオープンデータでリアルタイムに更新します。すべて閲覧者のブラウザー内で動作し、IoTプラットフォームもGISサーバーも、私たちのバックエンドも使いません。
IFC Viewer Onlineで表示したカタルーニャ広場。バルセロナの3Dマップ上に双子の噴水などのIFCモデルが並び、ドックの上にBicingのライブ台数が浮かんでいる
デジタルツインのデモの多くは、プラットフォームから始まります。クラウドのアカウント、コネクターのライセンス、そしてセンサーの接続先となるサーバーです。このデモはリンク1つから始まります。開くと、カタルーニャ広場（Plaça de Catalunya）の8つのIFCモデルがバルセロナの実際の地形の上に立ち、市の公開フィードがそれらを塗り分けていきます。シェアサイクルのステーションのドック、EV充電器の駐車区画、周辺道路の交通状況、そして大気質です。
間に私たちのものは何も挟まっていません。閲覧者のブラウザーが、モデルはこのサイトから、データは各提供元から直接取得します。そのためツインにできることには制約があり、それについては後述します。一方で、誰でも開いたり、埋め込んだり、シーンファイルをコピーして自分のツインを作ったりできるということでもあります。
この記事のポイント
- 提供元がブラウザーからのリクエスト（CORS）を許可していれば、オープンデータだけで実用的なデジタルツインを構築できます。バルセロナのBicing、Endolla、交通、大気質のフィードはいずれも許可しています。
- データとモデルをつなぐのはバインディングです。フィード、デバイスID、クラスと名前でIFC要素を探すクエリ、そして最初に一致したものが適用される色のルールで構成されます。
- 説得力を生むのは位置合わせです。ここでは、IFC要素は対応するOpenStreetMapの地物から0.1〜0.4mの範囲に収まり、データ点はベースマップが描く位置にぴったり重なります。
- デモ全体が1つのJSONシーンファイルです。コピーしてモデルとバインディングを差し替えれば、自分のツインになります。
試してみる：カタルーニャ広場をライブで
ICGCの地形上に8つのモデルを4つのライブレイヤーとともに開きます。BicingのドックとEndollaの駐車区画はフィードに応じて色が変わり、その上にライブの値が浮かびます。
インタラクティブなIFCビューアーを開く
シーンの構成
広場と、グラシア通り（Passeig de Gràcia）の広場側の端の周辺にある、ジオリファレンス済みのIFC 4.3モデル8つです。カタルーニャ地図地質研究所（ICGC）の5mメッシュ地形の上に置かれ、周囲にはOpenStreetMapの街並みが広がります。
| モデル | 内容 |
|---|
| モビリティハブ | 21基のドックを備えたBicingステーション65、バス停の上屋、エレベーター付きの地下鉄出入口、ストリートファニチャー |
| Fonts Bessones | 広場にある双子の噴水。給排水設備と照明設備を含む |
| Macià記念碑 | Francesc Maciàの記念碑。文化遺産のアセットとしてモデル化 |
| Pelai出入口 | カタルーニャ駅のPelai出入口 |
| Canaletes | ランブラス通りの起点とCanaletesの泉 |
| グラン・ビアの噴水 | グラシア通りとグラン・ビアの交差点に立つ記念噴水 |
| ベンチ付き街灯 | グラシア通りに並ぶPere Falquésのベンチ付き街灯 |
| Endolla充電器 | 路上のEV充電スポット。充電器、コネクター、2台分の駐車区画 |
モデルは公開情報から作成した説明用の再現モデルです。アセットデータは、ファイル内でデモ値であることを明記しています。
Bicingステーション65：ドックの支柱は1分ごとにステーションの状態を反映し、浮かんでいる数字は今この瞬間に利用できる自転車の台数です。
4つのオープンフィード、間にサーバーなし
| フィード | 提供元 | 形式 | シーンでの更新間隔 |
|---|
| Bicingのステーション | Bicing（バルセロナ市） | GBFS 3.0 | 地図レイヤーは30秒ごと、ドックの色は60秒ごと |
| EV充電 | Endolla / B:SM、Open Data BCN | GELFS JSON | 充電器の状態を5分ごと |
| 道路交通 | バルセロナ市、Open Data BCN | 道路区間に結合した交通状況テーブル | 5分ごと |
| 大気質 | バルセロナ公衆衛生局（Agència de Salut Pública de Barcelona） | 観測局に結合した1時間ごとのCSV | 1時間ごと（公開は45分〜3時間遅れ） |
リクエストはすべて、閲覧者のブラウザーから提供元へ直接送られます。これが成り立つのは、各フィードがそれを許可するCORSヘッダーを返しているからで、シーンに組み込む前に1つずつ確認しました。形式はオープン標準か、単純なファイルです。シェアサイクルはGBFS[gbfs]、EndollaはJSONファイル、残りは市のオープンデータポータルのCSVテーブル[opendata-bcn]です。4つともブラウザー内で読み込みます。
フィードから色付きのドック支柱まで
ステーション65のドックを色付けするには5つのステップがあり、そのすべてがシーンファイルに記述されています。
- デバイスソース Bicingのステーション状態フィードを60秒ごとにポーリングします。フィード内の各ステーションが、station_idをキーとする1つのデバイスになります。
- 1つのデバイス 広場とグラシア通りの角にあるステーション65です。
- 要素を探すクエリ 名前に「ancoratge」（カタルーニャ語でドックの意）を含むIfcBuildingElementProxy要素を、アセンブリの構成部材も含めて検索します。これで21本のドック支柱がすべて見つかります。
ここではアセンブリが重要です。ドックはステーションのアセンブリ（IfcRelAggregates）の構成部材であり、最上位の要素だけを対象にしたクエリでは1つも見つかりませんでした。
- ルール（最初に一致したものを適用） 休止中：グレー。自転車なし：赤（15分続くとアラート）。満車：青。2台以下：黄色。それ以外：緑。
- 浮かぶ値と鮮度の上限 利用可能な自転車の台数がドックの上に浮かびます。ソースが許容するより古い計測値の場合、ドックはグレーになります。「最近のデータがない」状態が「問題なし」として扱われることは決してありません。
{
"sourceId": "bicing-status",
"deviceId": "65",
"query": { "classes": ["IfcBuildingElementProxy"], "nameContains": "ancoratge" },
"rules": [
{ "name": "No bikes", "filters": [{ "field": "num_vehicles_available", "op": "eq", "value": 0 }],
"effect": { "color": "#ef4444" }, "alert": { "forMin": 15 } }
]
}
ドック支柱をクリックすると、要素のIFCデータと並んで、ステーション65のライブの状態がカードに表示されます。
Endollaの充電器も同じ仕組みです。2台分の駐車区画が、グラシア通り5番地にある充電ロケーション3762の状態を反映します。IFC内の充電器のIDは説明用のものなので、このバインディングは実機のIDではなく位置（モデルのすぐ隣にある実際のロケーション）で照合しています。
正しい位置に立たせる
道路から数メートル浮いてずれているツインは、一目見ただけで説得力を失います。ここでは各モデルを、それぞれが持つジオリファレンス（ETRS89 / UTM 31NのIfcMapConversion）によって地形モデル[icgc-met]の上に配置しています。原点を共有するモデル同士は、互いの位置関係が保たれます。自分のモデルが間違った位置に来てしまう場合のよくある原因は、IFCの座標とジオリファレンスで解説しています。
モデルが置かれた位置を、それぞれが表すOpenStreetMapの地物と比較して計測しました。どちらも、ベースマップの描画とまったく同じ方法で投影しています。
IFC要素と対応するOSM地物のずれ
- Canaletesの泉の柱: 0.08m
- Fonts Bessones: 0.1m
- Macià記念碑: 0.3m
- Pelaiのガラスキオスク: 0.38m
2026-10-10に実行中のビューアーで計測。データレイヤーは誤差がありません。広場から最大8km離れた点も含めた687点が、地図の描画位置から0.00mmの位置にあります。
このスケールでは、2つの細部が差を生みます。1つ目は、ジオリファレンスが回転を座標北（グリッド北）基準で保存しているのに対し、地図は真北基準で描かれていることです。バルセロナでは両者の差は0.55°で、100mのモデルの端では約1mになりますが、ビューアーがこの差を補正します。2つ目は、データレイヤーをベースマップとまったく同じ方法で投影していることです。そのため4km離れたBicingのステーションでも、きちんと歩道の上に収まります。
このツインにできないこと
- 制御システムではありません。データは提供元が公開するもので、更新のペースも提供元次第です。大気質は45分〜3時間遅れ、EVのファイルにはポートの状態が最後に変わった時刻しかなく、最後に報告があった時刻はわかりません。
- 市の資産台帳ではありません。モデルは再現であり、維持管理データは説明用のものです。
- すべてのフィードが速いわけではありません。Open Data BCNは応答に15〜40秒かかることがあり、交通と充電のデータは他より遅れて表示される場合があります。
- スマートフォンではまだ計測していません。8つのモデル、4つのレイヤー、3Dの街並みを含むシーン全体は、デスクトップのブラウザーでテストしています。
自分のツインを作る
デモは「シーン」と呼ぶ1つのJSONファイルで、モデル、レイヤー、デバイスソース、バインディング、カメラが記述されています。自分のツインを作る手順は次のとおりです。
- シーンファイルをコピーする このサイトの/scenes/barcelona-placa-catalunya.scene.jsonを出発点にします。
- モデルを差し替える モデルのURLを自分のIFCファイルに向けます。CORSヘッダーを返すホストであれば、どこでも構いません。
- バインディングを自分の要素に向ける IFCクラスと名前の一部、またはGlobalIdのリストを使います。
- ホストして開く 静的ホスティングであれば何でも構いません。?scene=にファイルのURLを付けてビューアーを開きます。ホスティングを省くこともでき、「共有 → デジタルツインのシーン」を使えば、シーン全体がリンクそのものに埋め込まれます。
<iframe
src="https://www.ifcvieweronline.eu/?scene=/scenes/barcelona-placa-catalunya.scene.json&embed=1"
width="100%" height="600" style="border:0;border-radius:12px"
loading="lazy" allow="fullscreen"
title="Plaça de Catalunya — open-data digital twin">
</iframe>
同じ埋め込みは、プロジェクトのWebサイト、イントラネットのページ、共通データ環境（CDE）のパネルでも動作します。パラメーターの一覧はIFCビューアーを埋め込む方法にまとめています。別のデータで同じアプローチをとった例は、MQTTでIFCのバスターミナルにライブのバスを表示するとODPTのデータで作る東京の駅のツインをご覧ください。
カタルーニャ広場のライブ・デジタルツイン：オープンデータからブラウザー上で構築