コードブロックとは？

チャットメッセージ（グリーティングや AI の返信を含む）内のコードブロックは、コードのテキストとして表示されるのではなく、本当に操作できる Web ページとしてレンダリングされます。ボタンはクリックでき、アニメーションは再生され、フロントエンド技術（HTML・CSS・JavaScript）で作れるインターフェースなら何でもメッセージの中に置けます。

オープン機能と組み合わせると、コードブロックからチャットページを操作することもできます——選択肢のテキストを入力欄に書き込む、グリーティングのバージョンを切り替える、など。オープン機能の関数はすべてコードブロックの中でしか呼び出せません。

コードブロックの書き方

完全な Web ページをフェンス付きコードブロックで囲むと、インタラクティブなページとしてレンダリングされます。言語タグは html が最も一般的で、推奨の書き方です：

markdown

```html
<!doctype html>
<html>
  <head>
    <style>
      button { padding: 8px 16px; }
    </style>
  </head>
  <body>
    <button onclick="this.textContent = 'クリック済み'">クリック</button>
  </body>
</html>
```

xml・タグなし・その他の言語タグの書き方も時々ありますが、フェンス付きコードブロックで中身が完全な Web ページであれば、同じように認識されます：

markdown

```xml
<!doctype html>
<html>
  <body>...</body>
</html>
```

注意：html タグを付けずに <div> や <button> などの裸の断片だけを書いたコードブロックは認識されません。常に完全な Web ページとして書いてください。

表示

コードブロックは常にチャットの吹き出しの最大幅を占め、高さは内容に合わせて自動的に伸びます。

実行環境と制限

コードブロックは独立したサンドボックス内で動作します。チャットページを直接参照・変更するのではなく、オープン機能の関数を通じて操作を依頼する、小さな独立した Web ページとして扱ってください。

スクリプト

従来型のインラインスクリプトに対応し、onclick などのインラインイベントハンドラも保持されます
すべての <script> はドキュメント末尾に移動されてから実行されるため、元の位置は保持されません。「後続の DOM ノードが作られる前にスクリプトが動く」ことに依存するコードは、DOM 作成後に実行するか DOMContentLoaded を待つ形に変えてください
外部スクリプト（<script src="...">）は読み込まれません。type="module" などの属性も保持されません
eval・Function・window.open・print などはブロックされます

ネットワークとリソース

fetch・XMLHttpRequest・WebSocket などのネットワーク接続は拒否されます
画像は data:・blob:・HTTP・HTTPS、音声・動画は HTTP・HTTPS、フォントは data:・HTTP・HTTPS に対応
インラインスタイルと HTTP/HTTPS の外部スタイルシートは使用可能

ストレージ

localStorage / sessionStorage は現在のコードブロックだけに見えるメモリ上の実装で、メッセージが再レンダリングされるとリセットされます。永続化には使えません
IndexedDB は提供されません

ページアクセス

コードブロックからチャットページの DOM や状態にはアクセスできません。parent・top はコードブロック自身を指します
チャットページとのやり取りはオープン機能の関数経由のみです

スタイル制限

position: fixed は position: absolute に変換されます
999 を超える z-index は 999 に丸められます

ヒント

完全な Web ページとして書き、html 言語タグを付けるのが最も確実な書き方です
コードブロックのコアロジックをネットワークリクエストや永続ストレージに依存させないでください

コードブロックとは？ ​

コードブロックの書き方 ​

表示 ​

実行環境と制限 ​

ヒント ​

コードブロックとは？

コードブロックの書き方

表示

実行環境と制限

ヒント