ClaudeのHTMLページをライブで共有できるリンクとして公開する

ClaudeをStrataに接続する

Claudeがドキュメントを作成するには、Strataアカウントへの接続が必要です。接続はあなたの権限で動作するため、Claudeがアクセスできるのはあなたのアカウントが開けるドキュメントだけです。

claude.aiでは、設定、コネクターの順に開き、カスタムコネクターを追加を選んで、StrataのMCPサーバーURL（https://api.strata.space/mcp）を入力します。カスタムコネクターは有料プランで利用でき、組織のコネクターはオーナーが追加します。ほかのMCPクライアントでも同じURLを追加してサインインを完了してください。

Claude Codeでは、/plugin marketplace add strata-space/marketplace に続けて /plugin install strata@strata-space を実行してStrataプラグインをインストールします。プラグインがMCPサーバーを登録し、ClaudeがStrataのツールを初めて使うときにブラウザーが開いてサインインできます。

ページをStrataドキュメントとして作成するようClaudeに頼む

Strataでは、インタラクティブなページとは、htmlのタグが付いたコードブロックを含むドキュメントです。ブロックのマークアップ、スタイル、スクリプトは隔離された環境でライブプレビューとして実行されるため、Claudeはページ全体を通常のドキュメント内容として書けます。

最初にStrataのinteractive-html執筆ガイドを読むようClaudeに頼んでください。Claudeはfindツールで取得でき、ライブラリ、テーマ変数、以下で説明する制限が載っています。

ページにできることとできないことを知る

プレビューは完全に隔離されています。Cookieやストレージはなく、周囲のページにはアクセスできず、外部URLも使えません。スクリプトとスタイルは、Strataの検証済みライブラリ（mermaid、d3、three.js、Doomエンジン）からのみ読み込まれます。それ以外はすべてブロック内に直接書く必要があります。

CDNからスクリプトを読み込む、Webフォントを読み込む、サードパーティAPIを呼び出すといったページは、そのままでは動作しません。最初から、ページを自己完結にするようClaudeに伝えてください。グラフは同じドキュメント内の名前付きデータ（JSONやCSVのブロック、表など）も読めるため、数値は編集可能なテキストのままです。方法はインタラクティブなHTMLブロックのリファレンスで説明しています。

試してみるプロンプト

まずfindツールでStrataのinteractive-html執筆ガイドを読んでください。次に、「住宅ローン返済シミュレーター」というタイトルの新しいStrataドキュメントを作成してください。2文の導入文と、シミュレーター全体を含むhtmlコードブロックを1つだけ置きます。借入額、金利、期間の入力欄と、/sandbox/libs/d3.min.js のd3で描く残高のグラフを含めてください。すべてをそのブロック内に収め、ネットワークからほかのものを読み込まず、Strataのテーマ変数を使い、背景色と文字色は一緒に指定してください。完成したら知らせてください。公開はしないでください。

Strataでページを確認する

新しいドキュメントをStrataで開きます。Claudeが書くとすぐにエディターでページが動作し、編集のたびにクリーンな状態から再描画されます。操作部品を試し、ウィンドウをスマートフォンの幅まで狭め、ライトテーマとダークテーマの両方で確認してください。

スクリプトエラーやコンソールの警告はプレビューの下に表示されます。Claudeに貼り付けて修正してもらってください。

公開リンクで公開する

公開すると、/@your-handle/your-slug に公開版が作成され、リンクを知っていればStrataアカウントがなくても誰でも開けます。ページは、ドキュメントのタイトルと本文に囲まれた閲覧ページの中のブロックとして表示されます。

1. ドキュメントの公開パネルを開きます。公開プロフィールが非表示の場合、パネルからプロフィール設定へ移動できます。先にハンドルを選び、プロフィールを公開にしてください。
2. URLスラッグを選びます。最初の公開後は変更できないため、残したいアドレスを選んでください。
3. 公開パネルの外観設定で、ブロックの操作ボタンを設定します。非表示にすると、読者には動作中のページだけが表示されます。表示にすると、読者はソースの表示、編集、再実行もできます。公開設定の既定値を使用を選ぶと、プロフィールの設定に従います。読者の変更はその人のブラウザー内でのみ実行され、保存されません。
4. プロフィールに公開を選び、公開URLを開いて、読者と同じようにページを試します。

Claudeに公開してもらう

MCPクライアントで公開用のツールグループを有効にしていれば、Claudeがドキュメントを自分で公開できます。このグループはX-Strata-Tool-Groupsヘッダーで要求し、書き込みアクセスが必要です。この場合、Strataはドキュメントのタイトルからアドレスを決めます。このヘッダーを送れないコネクターでは公開用のツールが使えないため、公開パネルから公開してください。ツールグループはMCPリファレンスに一覧があります。

ページを更新しつつ同じリンクを保つ

同じドキュメントでページを変更するようClaudeに頼むか、自分で編集します。編集はまず作業用ドキュメントを変更します。公開パネルで更新を公開を選ぶまで、読者は同じアドレスで以前の版を見続けます。スラッグは最初の公開後に固定されるため、共有したリンクは変わりません。

公開すると、ページのデザインと読み込むデータも保存されます。数値を修正したら、もう一度公開してください。ページを取り下げるには、このドキュメントを非公開にするを選びます。公開アドレスは使えなくなり、作業用ドキュメントは残ります。

ほかの人と一緒に作業する

作業用ドキュメントは公開ページとは別なので、公開の前後を問わず共同作業できます。共有で、閲覧者、コメント者、編集者として人を招待します。コメントで箇所について話し合い、履歴で過去の編集を確認し、バージョン全体を復元したり、1つの変更だけを取り消したりできます。

ドキュメントを共有しても公開されず、公開しても読者が作業用ドキュメントにアクセスできるようにはなりません。

ファイルのホスティングとの違い

静的ホスティングは、アップロードしたファイルをそのまま配信します。単純で、ページはブラウザーが許すものを何でも読み込めます。Strataではページはドキュメントです。リンクは同じままで、ソースはあなた、共同作業者、エージェントが編集を続けられるものとして残り、コメントとバージョン履歴も使えます。

代わりに制約があります。サンドボックスのためネットワークにアクセスできず、使えるライブラリも限られます。また、読者に見えるのは最後に公開した版で、編集がリアルタイムに反映されるわけではありません。外部スクリプトやライブAPIに依存するページには、静的ホスティングのほうが向いています。