脚本プランナー▸ 
AIアプリ 
AIニュース 
iCraft Editor – プロフェッショナルなWebベース3Dアーキテクチャ図エディタ
iCraft Editor – プロフェッショナルなWebベース3Dアーキテクチャ図エディタ紹介
iCraft Editor は、Web 版の3D アーキテクチャ図編集ツールで、三次元空間で複雑なシステムアーキテクチャを表現することを主眼としています。開発者、アーキテクト、プロダクトマネージャーなどがシステム構造をより直感的に理解し、伝達するのに役立ちます。従来の 2D 図表と比べると、可視化効果が強く、インタラクティブ体験も優れているため、複雑なシステム設計には心強いツールです。
iCraft Editor のコア機能
便利な 3D デザインツール：iCraft Editor は豊富な 3D モデルライブラリ（サーバー、データベース、ネットワーク機器などのよく使われるコンポーネントを含む）とサンプルテンプレートを提供しており、2D 図表から 3D へのワンクリック変換もサポートしています。これにより、ユーザーはすばやく設計を開始できます。エディタにはグリッド自動吸着、要素自動スタック機能が備わっており、接続もより簡単になり、大量の設計時間を節約できます。
没入感のある 3D 表現：3D パノラマ技術により、ユーザーはモデルを自由に回転、ズーム、ドラッグし、さまざまな角度からアーキテクチャの詳細を確認できます。アニメーション効果（パイプラインの流れや物体の動的表現など）にも対応しており、設計コンセプトをより生き生きと表現できます。サブシーンのシームレス切替機能により、複雑な設計を複数の階層（フロントエンド、バックエンド、インフラなど）に分割でき、情報提示をより整理されたものにします。
デジタルツインとリアルタイム同期：iCraft Editor は Web レンダリングコンポーネント（JavaScript SDK）を提供しており、Web アプリケーションへの埋め込みが容易で、SDK を通じて 3D 要素の状態（異常ノードの高亮表示など）を制御できます。リアルタイムデータ同期にも対応しており、システム内のサーバー CPU 使用率やネットワークトラフィックなどのデータを 3D アーキテクチャ図にマッピングすることで、システムの稼働状態を直感的に表示し、異常をすばやく発見するのに役立ちます。
強力な編集と拡張機能：iCraft Editor は GLB、glTF、OBJ などさまざまな 3D ファイル形式のインポートに対応しており、ユーザーはカスタムモデル（企業ロゴや専用機器など）をアップロードして設計リソースを拡張できます。グリッド自動吸着、要素自動スタックなどの機能も備えており、作図の精度と効率を向上させます。
iCraft Editor の使用シーン
ソフトウェアアーキテクチャ設計：アーキテクトがシステムの各コンポーネントとその相互関係を明確に示し、チーム間の理解とコミュニケーションを容易にします。
システムの展開・保守：運用担当者がサーバーやネットワーク機器などの展開状況と稼働状態を直感的に把握できます。
研修・交流：生き生きとした 3D アーキテクチャ図とアニメーションを通じて、学習者が複雑な概念をより容易に理解できます。
工業デザイン：工業デザイナーが使用するのに適しており、精緻な 3D モデリングツールを提供します。
e コマース：EC ユーザーが魅力的な 3D 製品展示を作成できます。
教育向けプレゼンテーション：教育者が生き生きとした 3D 教材を作成できます。
iCraft Editor の使用方法
オンラインでの使用
公式サイトにアクセス：iCraft Editor の公式サイト（https://icraft.design/ ）を直接開きます。ソフトウェアのインストールは不要です。
プロジェクトの作成：iCraft Editor の公式サイトで新規プロジェクトを作成するか、既存プロジェクトを開きます。
要素の追加：ツールバーから 3D モデル（サーバーやネットワーク機器など）を追加します。
レイアウトの調整：ドラッグや回転操作で要素の位置と向きを調整し、サイズや色などの属性も設定できます。
接続線の追加：要素間の関係に応じて接続線を追加し、それらの繋がりを示します。
テキスト説明の追加：要素にテキストを追加して、閲覧者が理解しやすくします。
保存と書き出し：設計完了後はクラウドに保存できるほか、.iplayer ファイルとして書き出すこともでき、他のプロジェクトへの埋め込みやオフラインでの閲覧に利用可能です。
ローカルでの使用
環境の準備：システムに Node.js と Git がインストールされていることを確認します。
プロジェクトのクローン：コマンド git clone https://github.com/gantFDT/icraft.git を実行してプロジェクトをローカルにダウンロードします。
依存関係のインストール：プロジェクトフォルダに移動し、npm install を実行して必要な依存関係をインストールします。
プロジェクトの起動：プロジェクトフォルダで npm start を実行してプロジェクトを起動し、ブラウザで http://localhost:3000 を開いて確認します。
編集と保存：ローカルエディタで設計し、完了後にプロジェクトを保存します。
サブシーンの入れ子の使用
サブシーンへ入る：要素を選択し、フローティングツールバーのサブシーンボタンをクリックして、その要素のサブシーンに入ります。
サブシーンの編集：サブシーン内で要素の追加、位置調整、接続線の設定などを行い、要件を満たすまで編集します。
メインシーンへ戻る：サブシーンの編集が完了したら、メインシーンに戻り、アーキテクチャ図全体の調整を続けます。
他のプロジェクトへの統合
フロントエンドコンポーネントのインストール：iCraft Editor で作成した 3D シーンを React プロジェクトに埋め込む場合は、コマンド pnpm install @icraft/player-react --save を実行してコンポーネントライブラリをインストールします。
統合コード：プロジェクト内で対応するコードを使用して 3D シーンを統合します。
import { ICraftPlayer } from "@icraft/player-react";
export default function MyScene() {
return <ICraftPlayer src='your-scene.iplayer' />;
}ここで your-scene.iplayer は iCraft Editor から書き出した 3D シーンファイルです。
iCraft Editor プロジェクトアドレス：https://github.com/gantFDT/icraft
