マップエディターSDK：SaaS製品にマップ作成機能を追加する方法

マップエディターSDKを使うと、ユーザーを別のビルダーへ移動させることなく、SaaS製品内にマップの作成・編集機能を追加できます。ホストアプリケーションはID、権限、プロジェクト、課金、データ所有権、公開ポリシーを引き続き管理し、SDKはページ内のキャンバスとツールを提供します。Kaleidr Editorは独自のMapLibreマップをマウントし、オリジン制限付きの公開可能キーで認証し、ホストが永続化方法を定義するまで編集内容をメモリ内に保持します。

以下では、製品の責任範囲、アーキテクチャ、マウント、永続化、セキュリティ、UX、よくある間違いを説明します。稼働中のレンダラーに対話機能を接続する方法は、マップにAIチャットを追加する方法を参照してください。より広いSDKカテゴリについては、AIマップSDKとは？をご覧ください。

マップエディターSDKの要点

• 編集画面と製品の分担： エディターは編集キャンバスを管理し、ホストはユーザー、プロジェクト、権限、永続化、リリースを管理します。
• 既定ではメモリ内： 単体のKaleidr Editorは編集内容を永続化しません。リリース前に保存と公開を設計してください。
• 公開可能キー + design： designスコープを持つオリジン制限付きブラウザーキーを使用し、サーバーキーは決して公開しないでください。
• 一度マウントし、一度破棄： ライフサイクルをSPAのルートとテナント切り替えに結び付けます。
• 公開権限を分離： 下書きの編集権限と、公開マップをリリースする権限は同一ではありません。

SaaS製品にマップエディターSDKを追加するには？

このガイドでは、既存のSaaSワークフロー内にマップ作成ワークスペースを配置します。ユーザーはプロジェクトを開き、MapLibreキャンバスで編集し、ベースマップスタイルを選び、利用可能なマップ上のツールを使い、SDKの状態を残さずに画面を離れられます。永続化連携を実装した後も、保存、公開、引き渡しはホストが制御します。例にはKaleidr Editorを使用します。共有ローダーを介したページ内Editor製品として文書化されているためです。この責任分担モデルは、他社のマップエディターSDKを評価する場合にも適用できます。

マップエディターSDKはStudio、Viewer、GISとどう違う？

マップエディターSDKは、ナビゲーション、選択、描画、スタイル設定などのオーサリングツールを別のアプリケーションに追加する再利用可能なコンポーネントです。ホストのアカウントシステム、データベース、利用権限、監査ログ、プロジェクトワークフローを置き換えるものではありません。信頼できる境界は、エディターが編集画面を担当し、ホスト製品がユーザー、プロジェクト、権限、永続化、公開判断を担当することです。

Kaleidr Studioは、Prompt → Process → Refine → Deployを中心に構成された、プロンプト起点の完全なオーサリング製品です。Kaleidr Editorは埋め込み可能な編集画面、Kaleidr Viewerは公開済みマップの表示画面です。これらはレンダリングとスタイルの概念を共有しますが、相互に置き換えられる製品画面ではありません。

SaaSアーキテクチャではエディターの状態を誰が管理すべきか？

本番のマップ編集ワークフローでは、製品シェル、エディター、認証情報、バックエンドポリシー、データシステム、配信の責任を明確に分ける必要があります。ホストSaaSはID、テナント、ナビゲーション、プロジェクト、課金、権限、ワークフローを管理します。Kaleidr Editorはページ内の編集画面、MapLibreマップ、ライフサイクル、利用可能なクライアント側ツールを管理します。公開可能キーは、ブラウザーにEditor製品とdesign機能へのアクセスを許可します。ホストバックエンドは認可、永続化、バージョン管理、監査、インポート、エクスポート、公開ポリシーを管理します。正式なデータシステムはデータセットとビジネスルールを管理し、Viewerなどの配信先は承認済みの読み取り専用出力を提供します。

ホストバックエンドは、ブラウザーから渡されたプロジェクトID、テナントID、データセットID、公開先を再認可せずに信頼してはいけません。エディターをマウントするとマップ作成は製品に自然に溶け込みますが、ブラウザーは引き続き信頼できない環境です。公開ドキュメントでは、product: "editor"がEditorバンドルを選択すること、既定の入口がiframeではなくattach/in-processであること、styleIdがカタログのベースマップIDまたは完全なスタイルURLを受け付けること、既定のベースマップがkaleidr-morningであること、ハンドルが常にdestroy()を提供すること、対応環境ではカメラとテーマを更新できることが示されています。単体埋め込みは編集内容を永続化しません。また、追加のバックエンド設定なしでは、AIを活用したStudioの全機能、Control Tower、自己完結型3Dアセットライブラリも含まれません。

Kaleidr Editorを安全にマウントするには？

APIキーと埋め込みに対するProまたはEnterpriseアクセス、designスコープを持ちEditorで許可された公開可能キー、開発・ステージング・本番の正確な許可オリジン、明示的な高さを持つ対象要素、開始スタイル、ホスト側のプロジェクトと権限モデル、永続化戦略、SPAの破棄処理を確認します。バージョン付きローダーをhttps://cdn.kaleidr.com/embed/v1/kaleidr.jsから一度だけ読み込みます。ローダーは既定で休止状態なので、読み込み前に埋め込みを有効にするか、マウントごとにenabledオプションを渡してください。最小構成は次のとおりです。

const editor = Kaleidr.mount("#editor", {
  product: "editor",
  publishableKey: "kld_pk_live_REPLACE_ME",
  styleId: "kaleidr-morning",
  enabled: true
});

window.addEventListener("pagehide", () => {
  editor.destroy();
});

プレースホルダーキーを実際の公開可能キーに置き換え、編集ツールに十分なキャンバスの高さを確保し、読み込みまたは失敗の状態をマップ外で通知します。この例は、現行のEditor attachリファレンス、Editor統合ガイド、kaleidr.jsローダーリファレンスに従っています。エディターをマウントしますが、公開ハンドルのリファレンスに永続化メソッドが記載されていないため、メモリ内の仕様は保存しません。宣言的マークアップで十分な場合、<kaleidr-map>要素にproduct="editor"、publishable-key、style-idを指定できます。ホストが明示的なハンドルやフレームワーク管理のライフサイクルを必要とする場合は、命令型APIを選んでください。ReactなどのSPAではeffect内で一度だけマウントし、クリーンアップ時にdestroy()を呼び出します。フォーム項目が変わるたびに再マウントしないでください。

永続化、セキュリティ、UXをどう計画する？

単体埋め込みは編集内容をメモリ内に保持します。一般的な選択肢は3つです。Editorをプロトタイプ用の一時的な画面として扱う、ユーザーがSaaSシェルを離れられる場合は完全なオーサリングをKaleidr Studioに置く、またはプロジェクト読み込み、検証、下書き保存、バージョン管理、競合処理、承認、公開、ロールバック、監査を備えたホスト統合ワークフローを構築します。Editor SDKの公開リファレンスには、未文書化の保存メソッドや変更リスナーなど、推測してよいAPIは記載されていません。顧客向けの保存機能を約束する前に、対応する状態転送の接点をKaleidrに確認してください。データセット分析、マップ仕様の部分適用、スタイルやテーマのカタログなど、プラットフォームのdesignルートは、サーバーキーを使用するホストバックエンドに配置します。ブラウザーのEditorはSDK経由で公開可能キーを使い続けます。

公開可能キーを正確なオリジンに制限し、ローカル開発以外ではHTTPSを必須とし、キーをdesignと必要な製品のみに絞り、アカウントやテナントの切り替え時にエディターを破棄します。バックエンドでは、すべてのプロジェクトとデータセットをユーザーとテナントごとに認可し、ブラウザー状態とは別に所有権を検証し、永続化や公開の前にマップ仕様を検証し、下書き・レビュー・公開の権限を分けます。OWASP API Security Top 10はオブジェクトレベル認可の不備を主要リスクとしています。ブラウザーから渡されたプロジェクトIDだけでは決して十分な認可になりません。ユーザーが編集中のプロジェクトを把握できるよう製品シェルを表示し、メモリ内の変更だけから誤った「保存済み」状態を作らず、保存と公開はホストUIに配置してください。Viewerよりも広い縦方向の領域を確保します。エディター領域にアクセシブルな名前を付け、周辺操作へのキーボードアクセスを維持し、フォーカストラップを避け、保存・エラー状態を通知し、WCAG 2.2に沿って可能な限りドラッグ以外の操作手段を用意します。

最終評価

マップエディターSDKを使えば、編集キャンバス、レンダラー連携、ブラウザー認証モデルをゼロから再構築せずに、SaaS製品へマップ作成機能を追加できます。Kaleidr Editorは現在、MapLibreベースのページ内埋め込み画面を提供し、designスコープを持つ公開可能キーで認証します。単体埋め込みは編集内容をメモリ内に保持するため、エディターのマウントだけでは永続的なオーサリングシステム全体を提供したことにはなりません。製品に統合編集画面が必要で、ホストチームがプロジェクト、権限、永続化、公開、監査可能性を管理する場合はEditor SDKを選びます。独立した完全なオーサリングフローを許容できる場合はKaleidr Studioを選びます。顧客向け保存機能を約束する前に、状態転送とAI支援機能の接点を確認してください。

SaaS製品にマップ編集を追加する

バージョン付きJavaScriptローダー、オリジン制限付きの公開可能キー、designスコープを使ってKaleidr Editorをマウントします。接続方法とライフサイクルについては、**Editor統合ガイドを読むをご覧ください。認証、designエンドポイント、ホスト統合ワークフローについては、開発者ドキュメントとEnterprise**の要件を確認してください。

よくある質問

マップエディターSDKとは？

別のアプリケーションにマップ作成・編集ツールを追加する再利用可能なコンポーネントです。通常、ホスト製品がユーザー、プロジェクト、権限、永続化、公開を管理します。

Kaleidr EditorはSaaS製品に埋め込めますか？

はい。現行SDKでは、対象要素内へのマウントにproduct: "editor"を使用します。Editorはページ内に独自のMapLibreマップを作成します。

単体Editorはユーザーのマップを保存しますか？

いいえ。公開ドキュメントでは、編集内容はメモリ内の仕様に存在し、単体埋め込みでは永続化されないと説明されています。リリース前にホスト側の永続化を設計してください。

Editorはどの認証情報を使用しますか？

承認済みオリジンに制限された、designスコープ付きの公開可能なブラウザーキーをSDK経由で使用します。ブラウザーコードにサーバーキーを配置しないでください。

Kaleidr EditorとKaleidr Studioは同じですか？

いいえ。Studioはプロンプト起点の完全な作成・公開製品です。Editorは別のアプリケーション内で使用する埋め込み可能な編集画面です。

References

• Kaleidr. Attach the Map Editor. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/guides/attach-the-editor
• Kaleidr. Auth & Scopes. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/auth-and-scopes
• Kaleidr. CORS & Allowed Origins. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/cors-and-allowed-origins
• Kaleidr. Editor — Mount the Map Editor. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/sdk/editor-attach
• Kaleidr. Endpoints. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/platform-api/endpoints
• Kaleidr. kaleidr.js — the Loader. Kaleidr Developer Docs. Accessed 3 August 2026. https://docs.kaleidr.com/sdk/kaleidr-js
• Kaleidr. Pricing & Plans. kaleidr.com. Accessed 3 August 2026. https://kaleidr.com/pricing
• MapLibre. Map — MapLibre GL JS. Accessed 3 August 2026. https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
• OWASP. OWASP Top 10 API Security Risks — 2023. Accessed 3 August 2026. https://owasp.org/API-Security/editions/2023/en/0x11-t10/
• World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2. Accessed 3 August 2026. https://www.w3.org/TR/WCAG22/

@misc{kaleidr_editor_attach,
  title  = {Editor -- Mount the Map Editor},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/sdk/editor-attach}
}

@misc{kaleidr_editor_guide,
  title  = {Attach the Map Editor},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/guides/attach-the-editor}
}

@misc{kaleidr_loader,
  title  = {kaleidr.js -- the Loader},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/sdk/kaleidr-js}
}

@misc{kaleidr_auth_scopes,
  title  = {Auth and Scopes},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 3 August 2026},
  url    = {https://docs.kaleidr.com/platform-api/auth-and-scopes}
}

@misc{owasp_api_security,
  title  = {OWASP Top 10 API Security Risks -- 2023},
  author = {{OWASP}},
  note   = {Accessed 3 August 2026},
  url    = {https://owasp.org/API-Security/editions/2023/en/0x11-t10/}
}

@misc{wcag22,
  title  = {Web Content Accessibility Guidelines 2.2},
  author = {{World Wide Web Consortium}},
  note   = {Accessed 3 August 2026},
  url    = {https://www.w3.org/TR/WCAG22/}
}