Rork Companion が繋がらない・動作しない時の完全デバッグガイド

Rork Companionは、作成したアプリを実機でリアルタイムにプレビューできる強力なツールです。ところが「QRコードをスキャンしても繋がらない」「接続はできているのにプレビューが表示されない」「同期に数分かかる」といった問題が発生すると、開発の勢いが止まってしまう。

ここではRork Companionの接続問題を5つのカテゴリに分けて体系的に解説し、自分の環境で何が起きているのかを素早く特定して解決するための手順を提供します。

Rork Companionの接続の仕組みを理解する

問題を解決するには、まず接続がどのように確立されるかを理解する必要があります。

Rork Companionは以下の流れで接続を確立する：

1. **RorkのWebアプリ（ブラウザ）**がローカルサーバーを起動する
2. QRコードまたは接続コードが生成される（このコードにはIPアドレスとポート番号が含まれている）
3. スマートフォンのRork CompanionアプリがQRコードを読み取り、同じWi-Fiネットワーク経由でパソコンに接続する
4. 接続確立後、アプリのプレビューデータが転送される

この流れのどこかが滞ると接続に失敗します。最も多い原因は「パソコンとスマートフォンが同じWi-Fiネットワークに繋がっていない」「ファイアウォールがポートをブロックしている」の2つです。

カテゴリ1: QRコードをスキャンしても「接続できません」になる

症状

Rork CompanionアプリでQRコードをスキャンしたが、「接続できません」「タイムアウト」「サーバーが見つかりません」と表示されます。

原因と解決手順

チェック1: 同一Wi-Fiネットワークへの接続を確認する

これが最も多い原因です。パソコンとスマートフォンの両方が同じSSIDのWi-Fiに接続されていることを確認します。

特に注意が必要な状況：

• スマートフォンがモバイルデータ通信に繋がっている（Wi-Fiオフ）
• パソコンがWi-Fiではなく有線LANに接続されていて、スマートフォンとは別のネットワークセグメントにいる
• 職場・学校のWi-Fiでクライアント間通信（デバイス間の直接通信）が禁止されている

チェック2: ファイアウォールの確認

RorkのローカルサーバーはデフォルトでTCPポート（通常19000〜19002番台）を使用します。macOSやWindowsのファイアウォールがこのポートをブロックしている場合、接続に失敗します。

macOSの場合：

1. 「システム設定」→「プライバシーとセキュリティ」→「ファイアウォール」
2. 「ファイアウォールオプション」でブラウザ（ChromeやSafari）または「Rork」アプリが「受信接続を許可」になっているか確認する
3. 確認後、Rorkで再度「接続コードを生成」を実行する

Windowsの場合：

1. 「Windowsセキュリティ」→「ファイアウォールとネットワーク保護」
2. 「アプリのファイアウォール経由のアクセスを許可する」でブラウザを確認する
3. または「受信の規則」でポート19000〜19005番を許可するルールを追加する

チェック3: VPNの干渉

パソコンまたはスマートフォンにVPNが有効になっている場合、ローカルネットワーク間の通信がVPNにリダイレクトされて失敗することがあります。テスト中はVPNを無効にして試みる。

カテゴリ2: 接続はできているが、プレビューが表示されない

症状

Rork Companionアプリが「接続済み」と表示されているのに、実機の画面にアプリのプレビューが現れません。白い画面や読み込み中のインジケーターが続く。

解決手順

原因A: アプリのビルドエラーを確認する

Rorkのブラウザ画面に赤いエラーメッセージが出ていないか確認します。TypeScriptやReact Nativeのコードにエラーがあるとプレビューが表示されません。

特によく見るエラー：

• SyntaxError: Unexpected token ← コードの文法エラー
• Cannot read properties of undefined ← null参照エラー
• Module not found ← importしたモジュールが存在しない

原因B: コンポーネントのレンダリングエラー

コードにエラーはないが画面が真っ白の場合、コンポーネントが正しくレンダリングされていない可能性があります。Rorkのコードエディタでコンソールログを確認し、実行時エラーを探す。

原因C: Rork Companionアプリのキャッシュ

スマートフォン側のRork Companionアプリに古いキャッシュが残っている場合、新しいプロジェクトが正しく表示されないことがあります。Rork Companionアプリを完全に終了（タスクキラーで強制終了）して再起動します。

カテゴリ3: iOS固有の問題

症状

AndroidのRork Companionは問題なく動くが、iOSでは接続できない、またはプレビューが壊れます。

iOS特有の制限と解決手順

Local Network使用の許可が必要:

iOS 14以降、アプリがローカルネットワークにアクセスするには明示的なユーザー許可が必要です。Rork Companionアプリを初めて使う際に「ローカルネットワーク上のデバイスの検索と接続を求めています」というダイアログが出る。このとき「許可しない」を選んだ場合、接続できなくなります。

解決策：「設定」→「プライバシーとセキュリティ」→「ローカルネットワーク」→「Rork」をオンにします。

Bonjour/mDNSのブロック:

一部のルーターではBonjourプロトコル（Appleのネットワーク探索プロトコル）がブロックされており、iOSデバイスがローカルサーバーを見つけられないことがあります。

解決策：QRコードではなく、手動でIPアドレスを入力する接続方法を試みる。RorkのCompanion設定で「手動接続」オプションがある場合はそちらを使います。

カテゴリ4: Android固有の問題

症状

Android端末でRork Companionが接続できない、または頻繁に切断されます。

解決手順

バッテリー最適化の干渉:

Androidのバッテリー最適化機能が、バックグラウンドでRork Companionの通信を遮断することがあります。

1. 「設定」→「アプリ」→「Rork」を探す
2. 「バッテリー」→「制限なし」または「バッテリー最適化なし」を選択する

開発者モードが無効:

Androidデバイスを開発・テスト用途で使用するには、開発者モードを有効にすることをすすめる（必須ではないが、パフォーマンスが向上する場合がある）：

1. 「設定」→「デバイス情報」→「ビルド番号」を7回タップ
2. 「開発者オプション」が有効になる
3. 「開発者オプション」→「USBデバッグ」をオン（Wi-Fi経由でも有効化しておくと安定することがある）

カテゴリ5: 同期が遅い・プレビューが重い

症状

コードを変更してもRork Companionへの反映に10秒以上かかります。プレビューがカクカクしています。

解決手順

Wi-Fi帯域の問題:

RorkはコードをリアルタイムでCompanionに転送するため、Wi-Fiの帯域と遅延が体験に直結します。

• パソコンとスマートフォンを同じ2.4GHz / 5GHz帯に接続する（5GHz帯のほうが遅延が低い）
• ルーターから近い場所でテストする
• Wi-Fi 6対応のルーターを使うと大幅に改善することがある

プロジェクトサイズの最適化:

プロジェクトに不要な画像・動画・ファイルが含まれていると転送に時間がかかります。使っていないアセットを削除します。

PCのパフォーマンス:

Rorkはブラウザベースのアプリケーションであるため、PCのリソース（特にメモリ）が圧迫されていると同期処理が遅くなります。ブラウザのタブを整理し、他のアプリを閉じてからRorkを使うだけで改善することが多いです。

問題が解決しない場合の最終手段

上記の手順を試してもうまくいかない場合は、以下を試みる：

1. 接続コードを再生成する: RorkのCompanion接続画面で「再接続」または「新しいコードを生成」をクリックし、Companionアプリでも再スキャンする

2. 両デバイスを再起動する: パソコンとスマートフォンの両方を再起動してから再試行する

3. Rork Companionアプリをアンインストール→再インストールする: キャッシュや設定の破損が解消される

4. モバイルホットスポットを使う: スマートフォンのモバイルホットスポットを有効にし、パソコンをそこに接続することで、企業・学校のWi-Fi制限を回避できる

モバイルホットスポット経由の接続は、職場や学校のネットワークでクライアント間通信がブロックされているときの最も確実な回避策です。自分で作ったホットスポットはデフォルトでデバイス間通信を許可しているため、ほぼ確実に繋がる。