BIM・IFCブログに戻る
BIM モデルのスクリーンショットを提案書に載せるのは、考えてみれば奇妙なことです。モデルの価値は 3 次元でデータが詰まっていることなのに、スクリーンショットはその両方を捨ててしまいます。埋め込みビューアなら両方が残ります。読み手は回転・断面表示ができ、要素をクリックしてプロパティを読めます。どのデバイスでも、何もインストールせずに。
やること自体は iframe 1 つです。うまくやるには、4 つのパラメータとブラウザのセキュリティルールを 1 つ知っておく必要があります。
最小構成の埋め込み
<iframe
src="https://www.ifcvieweronline.eu/?model=https://your-host.com/model.ifc&embed=1"
width="100%" height="600"
style="border:0;border-radius:12px;max-width:100%"
loading="lazy" allow="fullscreen"
title="3D IFC model">
</iframe>
訪問者のブラウザは IFC をあなたのサーバーから直接ダウンロードし、ローカルで解析します。モデルが私たちにアップロードされることはありません。これは NDA を結んだ人が最初に聞く質問であり、事前にベンダーのクラウドへモデルをアップロードさせる埋め込みとの本質的な違いです。
埋め込みコードを作成
公開 IFC の URL を貼り付け、モードを選び、iframe をコピーします。プレビューはリアルタイムで更新されます。
IFC Viewerを開く
知っておきたいパラメータ
| パラメータ | 機能 | 用途 |
|---|
| model | 1 つ以上の IFC URL を読み込む（統合モデルはカンマ区切り） | すべて |
| ui | UI モード：minimal、full、kiosk、client | 閲覧者に合わせる |
| validate | 読み込み時に検証を実行し Health Score を表示 | 形状だけでなく品質を見せる |
| isolate / select | 特定の IFC クラスを分離表示、または特定の要素を選択した状態で開く | 記事で説明している対象を指し示す |
| accent | ビューアを 16 進カラーで色付け | ダッシュボードやブランドページ |
| lang | UI の言語を指定 | 多言語サイト |
| map | ジオリファレンスに基づきモデルをベースマップ上に配置 | 提案書での敷地の文脈 |
日照検討や点群を含む完全なリファレンスは、埋め込みドキュメントにあります。最も重要なのは ui モードです。minimal はブログ記事やドキュメント向け。kiosk はロビーやモデルルームの画面向けにすべてを取り除きます。client は発注者・オーナーへの送付向けで、すっきりした表示と品質バッジだけを残し、コーディネーターには必要でも顧客には不要なツールを省きます。
使える場所
- Web サイトとブログ：WordPress、Webflow、Ghost、静的サイトなど、HTML を受け付ける CMS ならどれでも。
- Power BI：Web コンテンツまたは HTML ビューアのビジュアルで、accent をレポートのテーマに合わせます。モデルを、それが説明するコストや工程のグラフの隣に置けます。
- Notion、Confluence、SharePoint：URL を埋め込みブロックとして貼り付けます。
- CDE パネルや社内ツール：iframe に加え、ライフサイクルイベントを親ウィンドウへ送信するので、モデルの準備完了や検証完了にホスト側が反応できます。
- 提案書や入札書類：埋め込みに対応しない形式ならリンクで。入札回答に動くモデルへのリンクがあるのは、今でも目を引くほど珍しいことです。
読み込まれない理由：CORS と、ほかに 2 つ
モデルはストレージから訪問者のブラウザへ直接届きます。ホストに CORS ヘッダーがないと、ブラウザは受け渡しを拒否します。
- ファイルではなく Web ページを返す共有リンク。Dropbox、OneDrive、Google Drive の共有リンクは通常プレビューページを開きます。直接ダウンロード形式のリンクが必要です。
- ログインが必要なリンク。訪問者のブラウザはあなたの CDE にセッションを持っていないため、非公開リンクはログインページを返します。
- 低速なホスト上の非常に大きなファイル。モデルは解析前に全体がダウンロードされます。大きな統合モデルは高速な場所に置き、分割も検討しましょう。
モデルが大きすぎて快適に埋め込めない場合は、IFC ファイルサイズを小さくする方法で安全な削減方法を解説しています。
iframe では足りないとき：SDK
iframe はモデルを表示するだけです。ページがモデルとやり取りする必要が出てきたら、たとえば表の行をクリックしたら要素をハイライトする、Health Score をダッシュボードに取り込む、IDS 仕様を実行して不合格項目を自前の UI に一覧表示する、ガイドツアーを開始する、といった場合は SDK が必要です。同じビューアを型付きの双方向 API で包んだもので、スクリプトとしても <ifc-viewer> Web コンポーネントとしても使えます。
基盤ライブラリから自前のビューアを作りたい場合は、three.js と Fragments で Web 上に IFC を表示するで、その作業量と、そこから始めたチームの多くが最終的に埋め込みを選ぶ理由を解説しています。
機密プロジェクトでは、埋め込みを可能にしているのと同じクライアントサイドの構成が、モデルを第三者のサーバーから遠ざけます。詳しくは機密・NDA プロジェクト向けの IFC ビューアをご覧ください。
IFC ビューアを Web サイト、CDE、Power BI レポートに埋め込む方法
