Speckle Viewerとは｜Web3D表示・プロパティ確認・iframe埋め込みと@speckle/viewer

本記事は Speckle カテゴリの一部として、Speckle Viewer と埋め込みを整理します。送ったデータを「見える化」する出口にあたる機能で、関係者へ共有する際の標準的な手段になります。ビューアの位置づけ全体は アーキテクチャ もあわせて参照してください。

1Speckle Viewer とは

Speckle Viewer は、Speckle に送られたモデルを Web ブラウザ上で 3D 表示する WebGL ベースのビューアです。閲覧する側に Revit などの専用ソフトは不要で、URL を開くだけで回転・ズーム・パンといった基本操作ができます。設計者でない関係者（施主・他部門など）とモデルを共有するのに向いています。

従来、設計内容を共有する手段は紙の図面やスクリーンショット、あるいは重いネイティブファイルそのものの送付でした。いずれも「相手が同じソフトを持っているか」「最新版かどうか」が問題になりがちです。Speckle Viewer はこの課題を、URL 一つで最新の 3D を開ける形に置き換えます。リンクを共有するだけで済むため、社外の協力会社や発注者ともやり取りの手間を抑えられます。

23D 表示と基本操作

ブラウザ上で次のような操作が一般的に可能です。

表示しているのは特定の Version のスナップショットなので、「いつ時点のモデルを見ているか」が明確です。版の概念は send/receive の Version と同じものです。古い版と新しい版を切り替えて見比べれば、設計がどの段階でどう変わったかも視覚的に追えます。共有相手に「最新を見ているつもりが古い図面だった」という行き違いが起きにくいのも、版が明示される利点です。

3オブジェクト選択とプロパティ確認

ビューア上で要素をクリックして選択すると、その要素が持つプロパティ（属性）をパネルで確認できます。壁であれば高さ・種別・分類、設備であれば型番や系統など、モデルに含まれている属性がそのまま読めます。これは Speckle のデータがジオメトリだけでなく属性も保持している（オブジェクトモデル）ことの直接的な恩恵です。

図面の見た目だけでなく「中身のデータ」を非専門家でも確認できる点が、紙やスクリーンショットでの共有との大きな違いです。

4iframe での埋め込み

共有用のビューアは、外部サイトや社内ポータルに iframe で埋め込めます。埋め込みコードは概念的に次の形です。記号が崩れないよう、属性値内も含めてタグは正しくエスケープして扱います。

<iframe
  src="https://(サーバー)/projects/(ID)/models/(ID)#embed=true"
  width="600" height="400" frameborder="0">
</iframe>

実際の埋め込み URL の形式やクエリパラメータはサーバーの版で異なるため、各モデルの共有メニューから生成される正式なコードを使うのが確実です。社内のみで共有したい場合は、後述のホスティングとあわせてアクセス制御を設計します（自前ホスティング）。

5@speckle/viewer で自作アプリに組み込む

標準ビューアをそのまま使うのではなく、自作の Web アプリ（ダッシュボードなど）にビューアを組み込みたい場合は、npm パッケージ @speckle/viewer を利用します。これは Speckle 公式の WebGL ビューアライブラリで、表示領域の制御やイベント取得を自前のコードから行えます。

# インストール（概念例）
npm install @speckle/viewer

JavaScript からビューアを初期化し、対象オブジェクトを読み込んで描画します。API は版によって変わるため、利用バージョンの公式サンプルに合わせてください。組み込みにより、選択イベントを受けて自前の集計やリンク表示を行うなど、ビューアを業務アプリの一部として活用できます。こうした連携の実務パターンは データ連携実務 で扱います。

→次に読む