ChatGPTのモバイルでMCP Appを動かして学んだこと

スマートフォンのChatGPTでMCP Appを開くと、何が壊れましたか？

壊れたのは4つで、どれもフルスクリーンに関係していました。ScoreStarlingのパネルは、チャットの中に楽譜を表示します（接続方法）。フルスクリーンでは、音符をタップし、スマートフォンではプレーヤーの上にドッキングする選択カードから、その音符についてチャットに尋ねられます。2026年10月7日に、iOSシミュレーターのiPhone 17（402 × 874ポイント）のSafariで、ChatGPTのモバイル版ウェブサイトに載せて動かしました。パネルのフレームはクロスオリジンなので、スクリーンショットから状態を読み取りました。

なぜ、フルスクリーンのMCP Appは、スマートフォンのChatGPTのメッセージ入力欄の後ろに隠れるのですか？

ChatGPTが、メッセージ入力欄をこちらのフレームの上に描き、どれだけ覆うかを、下のセーフエリアのインセットで伝えてくるからです。インセットを無視すると、操作部が入力欄の下に入り込みます。私たちがやったように、その上に独自の余白を足すと、浮いてしまいます。MCP Appsの仕様は、safeAreaInsetsを「Safe area boundaries in pixels」（ピクセル単位のセーフエリアの境界）としか説明しておらず、OpenAIのドキュメントは、フルスクリーンでもメッセージ入力欄（composer）は重ねて表示されたままだと述べるだけで、サイズは示していません（どちらも2026年10月7日確認）。47 pxと127 pxは、スクリーンショットからの推定です。

10月6日、スマートフォンでの会話で、プレーヤーがChatGPTのタイトルバーの下に隠れていたため、ヘッダーを上のインセットの下に、プレーヤーを下に移しました。ただしCSSは、下のインセットの上にさらに、メッセージ入力欄用の96 pxを空けていました。34 pxのインセットでのローカルのテストでは問題なく見えましたが、ChatGPTの127 + 96では、そうなりませんでした。いまは、パネルは大きいほうを空けるようにし、ChatGPTのwindow.openai.safeAreaも読みます：

// panel.js, simplified: the host's inset or 96 px, never both
const bottom = Math.max(context.safeAreaInsets?.bottom || 0, window.openai?.safeArea?.insets?.bottom || 0);
root.style.setProperty('--safe-bottom', `${bottom}px`);
root.style.setProperty('--composer-space', fullscreen ? `${Math.max(0, 96 - bottom)}px` : '0px');
/* panel.css */
.stage > .player { bottom: calc(10px + var(--safe-bottom) + var(--composer-space)); }

フルスクリーンのMCP Appをスマートフォンで開いているあいだに、何が変わりますか？

インセットです。私たちの実行では、入力中のメッセージが2行に増えたときと、「Thinking」バーがメッセージ入力欄に替わったときに、下の端が動きました。仕様では、ホストはコンテキストのフィールドが変わるたびにui/notifications/host-context-changedを、変わったフィールドだけを付けて送ってよく、ビューはそれをマージします。

プレーヤーはCSS変数を基準にしているので、追従しました。選択カードはスクリプトで配置しているため取り残されたので、いまは、コンテキストが変わるたびに置き直しています。自分たちの通知が、2つ目のずれを起こしました。「Updated from the chat」は、楽譜の上に20秒間表示され、楽譜の領域を押し下げます。その領域の上端を基準にしていたカードは、プレーヤーに重なるようにずれ、途中で何かが置き直すと、通知が消えたあとに、プレーヤーの上に浮きました。いまは、その領域のResizeObserverでもカードを置き直し、アニメーションフレームごとに1回に抑えています：

this.context = {...this.context, ...params};  // host.js, simplified: merge the partial update
function hostContext(next) { applyContext(next); editor.queuePlace(); }
new ResizeObserver(() => { updateClip(); editor.queuePlace(); }).observe($('stage'));

なぜMCP Appは、フルスクリーンから戻ると、古いバージョンを表示するのですか？

スマートフォンのChatGPTは、フルスクリーンに入るたび、出るたびに新しいパネルを作り、編集の前に作られた、会話の最初のツールの結果をそれに渡したからです。仕様では、ホストはいつでもビューを破棄してよく、ツールの結果は、そのツールが動いた時点を記録しているだけです。

私たちのパネルは、半分がスナップショットで、半分が最新でした。そのリビジョンのページ画像と音符に加え、パネルが取得するときに読む現在のリビジョンのフィールドがあります。再構築されたパネルは、リビジョン0を描き、楽譜がリビジョン3にあることを知って、読み取り専用になりました。チャットでの編集を確認する処理は、サーバーのリビジョンを、すでに最新だったそのフィールドと比べていたため、追いつけませんでした。いまは、ホストが渡した結果を楽譜がすでに追い越している場合、パネルは現在のリビジョンを一度読み込みます。ただし、結果に承認待ちの提案された変更が含まれているときは除きます。それは、食い違っていてよいものだからです。

ChatGPTのスマートフォンでの動作は、スマートフォンなしでどうテストしますか？

本物のホストを再現環境で模倣し、修正を外すとどのテストも失敗することを確かめます。使っているのはsunpeakで、Playwrightのテスト用にChatGPTとClaudeを再現します。そのモバイル版ChatGPTシェル（バージョン0.20.91）は、タイトルバーとメッセージ入力欄を描き、入力欄を92 pxのインセットとして報告します。これらのバグのために書いた3つのテストが、402 × 874のタッチスクリーン上で、残りを補います。ChatGPTのフレームと同じようにパネルの親になっている、シェルのサンドボックスフレームを通して、127、160、70、127 pxの新しいインセットを順に送り、編集のあとはパネルを読み込み直して、最初のツールの結果を渡します。もう1つのテストは、チャットと同じように、パネルの外で楽譜を編集します。プレーヤーは、インセットと96 pxの大きいほうの0〜24 px上に、カードはプレーヤーの0〜16 px上に収まる必要があります。

この3つを1回実行すると、59.9秒かかりました。同じ日に4つ目を加え、スマートフォンのエディターの1行のヘッダーとプレーヤーを確認しています。貢献者向けのルールでは、フルスクリーンのレイアウト、インセット、カード、結果の処理を変えたら、スマートフォンのテストを必須としています。スマートフォンでの実行では、「この音をCに変えて」という依頼に対して、ChatGPTが選択されたB4を、7度下のC4に変えてしまうことも見つかりました。ツールの説明に、最も近いオクターブを選ぶルールを加えると、本物のモデルを使ったローカルのテストは、3回中2回の成功から、6回すべての成功になりました。

まだ確認できていないこと

スマートフォンでの確認は、iOSシミュレーターとChatGPTのモバイル版ウェブサイトで行いました。実機もネイティブアプリも使っていません。まだ残っているのは次のことです：

• ChatGPTが実際に送るインセットの正確な値と、そのタイミング。私たちの値は推定で、再現環境はそれを使い回しています；
• Safariのツールバーが広がった状態。メッセージ入力欄とプレーヤーの下端が半分隠れます；
• キーボードが閉じたあとにSafariが残した、約156ポイントのページのスクロール。クロスオリジンのパネルでは元に戻せません；
• ChatGPTがまだ回答しているあいだにフルスクリーンを開くと現れる、最大約777ポイントの不透明な帯；
• ChatGPTの返信シートと、ChatGPT自身によるiframeの破棄。再現環境はこれらを模倣しません；
• パソコン版のChatGPT。フルスクリーンは、メッセージ入力欄がその外にあるサイドパネルです。そのインセットは読み取っていません。

スマートフォン向けMCP Appのチェックリスト

• 上下どちらのインセットも空けておく。メッセージ入力欄用のフォールバックも持つ場合は、大きいほうを使い、合計にはしない。
• host-context-changedの通知は毎回マージし、スクリプトで配置したものはすべて、フレームごとに1回、置き直す。
• 通知などでずれることがあるので、自分のコンテナのサイズ変化を監視する。
• 古いツールの結果からの再構築を想定し、読み込み時に、そのバージョンをサーバーのバージョンと比べる。
• ローカルのテスト用ホストには、本物のホストで測ったインセットを与える。
• OpenAIのドキュメントの勧めに従い、UIリソースのURIをキャッシュキーとして扱い、新しいものを公開したあとは、ChatGPTでアプリのツールを更新する（プラグインの設定で「Manage app」（アプリを管理）、「Refresh tools」（ツールを更新）の順に選ぶ。2026年10月7日確認）。
• 本物のホストで見つけたことは、すべて、修正がなければ失敗する再現環境のテストにする。