> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# VNCを使ったネイティブグラフィックスのストリーミング

> Replitは仮想ネットワークコンピューティング（VNC）機能を提供しています。VNCはReplit Appがネイティブデスクトップをウェブブラウザにストリーミングできる成熟した仮想デスクトッププロトコルです。このプロトコルにより、ネイティブアプリケーション（Python、Java、C++などで開発）が物理的なコンピューター上と同様にデスクトップウィンドウを開くことができます。

このストリーミング技術により、どのデバイスからでもブラウザでレガシーアプリケーションを操作できます！例えば、デスクトップ向けに設計されたPythonゲームを、基本のコードに変更を加えることなく、スマートフォンやタブレットで直接実行することができます。

<a href="https://replit.com/@demcrepl/Tetris-in-Pygame" target="_blank">テトリス（PyGame使用）</a>

<img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/vnc/tetris.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=ddf138f52d698a6baa7532ad74e88492" alt="Replit Appでのテトリスのイメージ" width="2055" height="1057" data-path="images/vnc/tetris.png" />

## VNCの使い方

言語を問わず、すべてのReplit AppはVirtualデスクトップを使用できます。Replitでネイティブグラフィックスプログラムを実行するために変更は必要ありません。VNCペインは、アプリケーションがネイティブデスクトップウィンドウを開こうとしたときに表示されます。

## Replit Appのセキュリティ保護

デフォルトでは、VNC接続にパスワードはなく、WebSocketと同じ認証に依存しているため、[https://replit.com](https://replit.com) からのみアクセスできます。外部の[noVNC](https://novnc.com)クライアント経由でReplit Appにアクセスする必要がある場合は、VNCパスワードを設定できます。

Replit Appの[シークレット](/ja/core-concepts/project-editor/app-setup/secrets)設定でパスワードを設定します。`Secrets`は、他のユーザーにパスワードへのアクセスを心配することなくパスワードを安全に保存できる場所です。`VNC_PASSWORD`を設定することで、リモート接続時のセキュリティが強化されます。

## フルスクリーンVNCの使い方

この手順を進めるには、上記の指示に従ってReplit Appのセキュリティを保護している必要があります。

1. 「Shell」タブで以下のコマンドを実行します：
   ```sh theme={null}
   echo $REPL_ID
   ```

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/vnc/replid.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=45fcde093041183e77ba334b780e69ed" alt="echoコマンドを示すイメージ" width="628" height="174" data-path="images/vnc/replid.png" />
</Frame>

2. 上記の出力で `REPL_ID` を置き換えて接続URLを構築します：`<\REPL_ID\>.id.repl.co`
3. 別のブラウザタブで[noVNCクライアント](https://novnc.com/noVNC/vnc.html)を開きます。
4. 接続設定を開きます。

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/vnc/settings.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=1f46fa987102bf1bb95ea027d6b3f43d" alt="接続設定を開く" width="126" height="302" data-path="images/vnc/settings.png" />
</Frame>

5. WebSocketsフィールドを展開します。`host`フィールドに接続URL（`\<REPL_ID\>.id.repl.co`）を入力し、`path`フィールドは空白のままにします。

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/vnc/host.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=e1a6420a7573bb6f0e7a327ecd89b60d" alt="ホスト" width="214" height="230" data-path="images/vnc/host.png" />
</Frame>

6. `Scaling Mode`を`Remote Resizing`に変更します：

<Frame>
  <img src="https://mintcdn.com/replit/0ixNWaRF232g0Gwn/images/vnc/scaling.png?fit=max&auto=format&n=0ixNWaRF232g0Gwn&q=85&s=cc7bcd3ec3d8c5cf801d537eef6a2b16" alt="スケーリング" width="147" height="74" data-path="images/vnc/scaling.png" />
</Frame>

7. 認証情報の入力を求められたら、`runner`ユーザー名と上記で設定したパスワードを使用します。

## 使用例

* <a href="https://replit.com/@demcrepl/Tetris-in-Pygame" target="_blank">PyGame</a>
* <a href="https://replit.com/@amasad-matplotlib" target="_blank">Python matplotlib</a>
* <a href="https://replit.com/@sigcse2021/Game-of-Life-demcrepl" target="_blank">Java Processing</a>
