ダークモードもワンクリックで：Mac からデバイスの設定を変更

どのアプリも、2 回正しく見えなければなりません。ライトモードで 1 回、ダークモードで 1 回です。ダークモードのバグのほとんどは小さなものです。暗いカードの上の黒い文字。白い四角に囲まれたロゴ。消えてしまった枠線。見つけてしまえば、直すのは簡単です。難しいのは、見つけることです。

確認するには、何度も何度も切り替えることになります。iPhone なら「設定」を開き、「画面表示と明るさ」を探して「ダーク」をタップし、アプリに戻って元の画面を探し、今度はライトで同じことを繰り返します。Android では、この設定は別の場所にあります。これを画面の数だけ、テストするデバイスの数だけ繰り返すのですから、ダークモードのバグがそのままリリースされてしまうのも無理はありません。

Device MCP 0.6.0 では、こうした設定をワンクリックで変えられます。Inspector の Info、Apps、Reports の隣に、新しく Settings タブが加わりました。デバイスそのものの設定を変えるので、アプリもすぐに追従します。

Settings タブでできること

Inspector を開いて Settings を選びます。タブにはデバイスの現在の設定が表示され、変更するとすぐにデバイスに反映されます。

• Appearance（外観）。Light か Dark を選べます。
• Text Size（文字サイズ）。いちばん小さいサイズから、アクセシビリティの最大サイズまで、1 本のスライダーで調整できます。
• Reduce Motion（視差効果を減らす）と Increase Contrast（コントラストを上げる）。実際によく使われているのに、アプリ側では忘れられがちな 2 つのスイッチです。
• Location（位置情報）。十数都市から 1 つ選ぶ、座標を入力する、GPX ファイルを開いてルート全体を再生する、のいずれかで設定できます。

iPhone では、実機でもシミュレータでも、さらに次の設定が使えます。

• Liquid Glass。クリアから色付きまで調整できます。
• Color Filter（カラーフィルタ）。グレイスケールと、色覚特性に合わせた 3 種類のフィルタです。
• Show Borders、Reduce Transparency（透明度を下げる）、VoiceOver。

iOS シミュレータでは、サウンドも設定できます。音量と、Mac のどのスピーカーとマイクを使うかです。

Android でも使えます

同じタブが Android エミュレータでも使えます。サイドバーで Pixel を選び、Settings を開いて Dark に切り替えるだけ。iPhone のアプリと同じように、Android のアプリも追従します。

Android には iPhone の設定がすべてあるわけではないので、タブには Android で使えるものだけが表示されます。Appearance、Text Size、Reduce Motion、Increase Contrast、Location です。押しても何も起きないスイッチが表示されることはありません。

これがいちばん役立つのは、両方のプラットフォームでリリースしている場合です。iPhone と Android エミュレータを並べて両方を Dark に切り替え、2 つのアプリの同じ画面を数秒で見比べられます。

どこで変えても反映されます

設定が変わるのは Device MCP の中だけではありません。デバイス自身の「設定」アプリでダークモードを切り替えることもあれば、AI エージェントが文字サイズを大きくすることもあるでしょう。どちらの場合も、タブはデバイスを読み直して実際の設定を表示するので、事実と違う内容が表示されることはありません。

2 つ目のケースは、少し説明しておく価値があります。Device MCP の MCP サーバーでは、Claude Code や Codex などのエージェントが、外観、アクセシビリティの設定、位置情報をすでに変更できます。これからは、その変化を目で追えます。エージェントに「アプリの全画面を、ダークモードと最大の文字サイズで確認して」と頼めば、作業に合わせて Settings タブも切り替わっていきます。

簡単になった今こそ確認したい 5 つのこと

私たちが自分たちのアプリで確認している、短いリストです。どれもワンクリックで済みます。

1. カードやシートの文字。Dark に切り替えて、読めない文字がないか探します。原因はたいてい、ハードコードされた色です。
2. 画像とアイコン。白い背景を前提に作られたロゴや画像は、ダークモードで四角い枠が出たり、見えなくなったりしがちです。
3. 最大の文字サイズ。Text Size を右端までドラッグします。切れてしまうラベルや、画面の外に押し出されるボタンがないか確認します。
4. 動き。Reduce Motion をオンにして、大きなアニメーションのある画面を開きます。動きが穏やかになるだけで、ちゃんと機能するはずです。
5. 位置情報。アプリが近くの場所や天気を表示するなら、地球の反対側の都市を選んで、どうなるか見てみましょう。

Daybreak のご紹介

動画に登場するアプリは Daybreak です。このデモのために作った小さな天気アプリで、実際の天気は取得しません。リスボンはいつも 24° で、おおむね晴れ。得意なのは、外観に合わせて変わることです。昼は明るい空。夜は星が浮かぶ深い青。同じデザインで iPhone 版と Android 版の 2 つを作ったので、同じアプリが両方で同じクリックに追従する様子を見られます。

お使いのアプリで、特別な対応は必要ありません。システムの外観に従うアプリなら、Device MCP での切り替えにも従います。

Device MCP の中での位置づけ

Device MCP は、実機の iPhone を Mac にミラーリングして、AI エージェントに使わせるためのアプリとして始まりました。その後 iOS シミュレータと Android エミュレータにも対応し、すべてが 1 つのサイドバーに並ぶようになりました。Settings タブも同じ考え方の一部です。これまでデバイスの上でしていたことを、何も手に取らずに Mac からできるようにする、という考え方です。

Xcode の Device Hub にも、シミュレータ向けの似たパネルがあります。Device MCP はそれを実機の iPhone と Android エミュレータにも広げ、テストに使うほかのすべてのもの、つまりミラー、Apps タブと Reports タブ、エージェントのための MCP サーバーのすぐ隣に置きました。

入手方法

Settings タブは Device MCP 0.6.0 に含まれ、Free を含むすべてのプランで使えます。Device MCP は自動でアップデートされますが、お使いの場合は Device MCP → Check for Updates… を選ぶこともできます。まだお持ちでない場合は、Device MCP をダウンロードして iPhone をつなぐか、サイドバーからシミュレータかエミュレータを起動してください。

あとは Inspector を開いて Settings を選び、Dark に切り替えるだけ。ワンクリックです。それこそが、この機能のすべてです。