タイトル: Speckle Viewer・埋め込み
SEOタイトル: Speckle Viewerとは｜Web3D表示・プロパティ確認・iframe埋め込みと@speckle/viewer
| この記事の要点 |
|
本記事は Speckle カテゴリの一部として、Speckle Viewer と埋め込みを整理します。送ったデータを「見える化」する出口にあたる機能で、関係者へ共有する際の標準的な手段になります。ビューアの位置づけ全体は アーキテクチャ もあわせて参照してください。
Speckle Viewer とは
Speckle Viewer は、Speckle に送られたモデルを Web ブラウザ上で 3D 表示する WebGL ベースのビューアです。閲覧する側に Revit などの専用ソフトは不要で、URL を開くだけで回転・ズーム・パンといった基本操作ができます。設計者でない関係者（施主・他部門など）とモデルを共有するのに向いています。
3D 表示と基本操作
ブラウザ上で次のような操作が一般的に可能です。
- モデルの回転・ズーム・移動
- 断面（セクション）での切断表示
- 特定の Version を指定した表示（版の切り替え）
- カテゴリやプロパティに基づく色分け・フィルタ表示
表示しているのは特定の Version のスナップショットなので、「いつ時点のモデルを見ているか」が明確です。版の概念は send/receive の Version と同じものです。
オブジェクト選択とプロパティ確認
ビューア上で要素をクリックして選択すると、その要素が持つプロパティ（属性）をパネルで確認できます。壁であれば高さ・種別・分類、設備であれば型番や系統など、モデルに含まれている属性がそのまま読めます。これは Speckle のデータがジオメトリだけでなく属性も保持している（オブジェクトモデル）ことの直接的な恩恵です。
図面の見た目だけでなく「中身のデータ」を非専門家でも確認できる点が、紙やスクリーンショットでの共有との大きな違いです。
iframe での埋め込み
共有用のビューアは、外部サイトや社内ポータルに iframe で埋め込めます。埋め込みコードは概念的に次の形です。記号が崩れないよう、属性値内も含めてタグは正しくエスケープして扱います。
<iframe
src="https://(サーバー)/projects/(ID)/models/(ID)#embed=true"
width="600" height="400" frameborder="0">
</iframe>実際の埋め込み URL の形式やクエリパラメータはサーバーの版で異なるため、各モデルの共有メニューから生成される正式なコードを使うのが確実です。社内のみで共有したい場合は、後述のホスティングとあわせてアクセス制御を設計します（自前ホスティング）。
@speckle/viewer で自作アプリに組み込む
標準ビューアをそのまま使うのではなく、自作の Web アプリ（ダッシュボードなど）にビューアを組み込みたい場合は、npm パッケージ @speckle/viewer を利用します。これは Speckle 公式の WebGL ビューアライブラリで、表示領域の制御やイベント取得を自前のコードから行えます。
# インストール（概念例）
npm install @speckle/viewerJavaScript からビューアを初期化し、対象オブジェクトを読み込んで描画します。API は版によって変わるため、利用バージョンの公式サンプルに合わせてください。組み込みにより、選択イベントを受けて自前の集計やリンク表示を行うなど、ビューアを業務アプリの一部として活用できます。こうした連携の実務パターンは データ連携実務 で扱います。
使いどころ
- 設計レビュー：関係者に URL を送り、その場で 3D とプロパティを確認してもらう
- 進捗共有：ブログ・社内ポータルに iframe で埋め込み、常に最新版を見せる
- 業務アプリ統合：
@speckle/viewerでダッシュボードにモデル表示を組み込む
ビューアは「送ったデータを誰でも見られる形で出す」役割を担い、Speckle を単なるデータ転送基盤から「共有・確認のプラットフォーム」へと広げる要素です。閲覧側に専用ソフトやライセンスが要らないため、社外の関係者や非技術者ともコストをかけずに最新のモデルと属性を共有でき、レビューのスピードを上げられます。送る側のデータ取得・自動化と組み合わせる実務的な活用は データ連携実務 もあわせて確認してください。