WebStorm 2025.1 ヘルプ

Code With Me 入門

WebStorm を使用すると、ローカルで実行されているプロジェクトを誰とでも共有できる Code With Me バンドルプラグインを使用できます。

Code With Me を使用すると、リアルタイムのコラボレーション、コードの編集、サーバーの共有、デバッグセッションの実行を行うことができます。セッションの概要については、次のビデオを参照してください。

Code With Me 共有セッションには、ホストと 1 人以上のゲスト間の相互作用が含まれます。

次の基本的なシナリオのいずれかでセッションを開始できます。

  • ペアプログラミングを行うことができます。この場合、IDE を 1 人の参加者と共有し、完全同期モードを使用するか、相互にフォローしてコードのさまざまな部分で共同作業を行います。開発者が単一の画面とキーボードを共有する従来のペアプログラミングとは異なり、独立して作業し、ゴールをより早く達成できます。

  • 多くの参加者があなたをフォローする先生と生徒のシナリオを実現できます。たとえば、問題を説明し、チームメンバーにプロジェクトの様々な部分を見せたいとします。これは他の人にあなたをフォローさせるモードを使えば実現できます。

  • 他の参加者と同時にコードのマルチ編集を行うことができます。この場合、参加者はコードをすばやく変更でき、同時にプロジェクトの他のファイルで作業することもできます。ただし、積極的に一緒に入力できる参加者の数には制限があります。制限は 5 で、これに達すると、WebStorm は待機を提案するポップアップを表示します。さらに、パフォーマンスが低下する可能性があります。

Code With Me の使用を開始する方法についての短いビデオチュートリアルを用意しました。

Code With Me ライセンス

Code With Me は、JetBrains Web サイトで選択できるさまざまなタイプのサブスクリプションを提供します。

アクティブな WebStorm サブスクリプションまたは他の IDE サブスクリプション(DataGrip および Rider を除く)がある場合は、IDE のライセンスにすでに含まれているため、個別の Code With Me ライセンスは必要ありません。

Code With Me ライセンスを手動でアクティブ化する必要があるシナリオがいくつかあります。

  • アクティブな IDE またはオフラインのアクティベーションコードがあり、ライセンスは Code With Me プラグインに自動的に適用されます。ただし、アクティベーションで引き続き問題が発生する場合は、ライセンスを明示的にアクティベートしてください。

  • 有償の Code With Me ライセンスがあり、会社は JetBrains フローティングライセンスサーバー(FLS)を使用しています。この場合、WebStorm ライセンスをアクティブ化するのと同じ方法でライセンスをアクティブ化できます。

  • 会社は、内部ロビーサーバーに有償 Code With Me ライセンスを配置しています。この場合、ロビーサーバーアドレスを追加で指定して、ライセンスを手動でアクティブ化します。

個人ライセンスをアクティブ化する

  1. JetBrains Web サイトからライセンスを取得します。

  2. メインメニューで、ヘルプ | 登録に移動します。

  3. ライセンスダイアログで、Code With Me を選択します。

  4. 右側のオプションから、新しいライセンスのアクティブ化を選択します。

  5. お使いの IDE に応じて、JetBrains アカウントを選択します。

    The License Activation dialog
  6. 資格情報を入力して、JetBrains アカウントにログインをクリックします。

FloatingLicenseServer を使用して有償ライセンスをアクティブ化する

  1. 社内の責任者からライセンスサーバーの URL を取得します。

  2. メインメニューで、ヘルプ | 登録に移動します。

  3. ライセンスダイアログで、Code With Me を選択します。

  4. 右側のオプションから、新しいライセンスのアクティブ化を選択します。

  5. 右側のオプションから、ライセンスサーバー(英語)を選択します。

    The License server
  6. サーバーアドレスを追加し、アクティブにするをクリックします。

    The Licenses dialog

    一緒にコードプラグインのステータスがアクティブに変わります。

ロビーサーバーで有償ライセンスを管理する

  1. 社内の責任者からロビーサーバーの URL を取得します。

  2. Ctrl+Alt+S を押して設定を開き、ツール | Code With Me を選択します。

  3. ロビーサーバーの URL フィールドで、システム管理者から取得したロビーサーバーのアドレスを指定し、OK をクリックして変更を保存します。

    Code With Me settings

ホストとして始めましょう

コンピューターをホストとして使用して、他の参加者を招待してコードで共同作業するためのリンクを作成できます。デバッグセッションを開始し、その状態とアクションを共有することもできます。

セッションを作成する

  1. 設定で Code With Me プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに Code With Me と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

  2. メインツールバーで、the Code With Me icon をクリックします。

    Code With Me icon on the toolbar

    または、メインメニューからツール | Code With Me を選択します。

    WebStorm は Code With Me ダイアログを開きます。

    Enable Code With Me Access
  3. Code With Me ダイアログで、セッションの開始をクリックします。

    WebStorm はセッションのリンクを作成します。

    Session link is created

    ゲストに意図したアクセス権限があることを確認します。読み取り専用権限はデフォルトですが、ドロップダウンリストから他のオプションを選択して変更できます。

    Customize access permissions

    リンクのコピーをクリックします。

  4. ゲストにリンクを送信します。ゲストがリンクをクリックすると、ブラウザーで招待ページが開き、セッションに参加できるようになります。

    Invitation page

    ゲストがセッションに参加をクリックすると、WebStorm はゲストを承認するか拒否するかを選択するポップアップを表示します。ゲストのコードが一致していることを確認してください。

    Accept Guest
  5. 受諾をクリックします。ゲストがセッションに参加し、コラボレーションを開始できます。エディターに追加のキャレットが表示され、メインツールバーにアクティブなゲストを示すアイコンが表示されます。

アクティブなセッションを終了する

  1. メインツールバーで、Code With Me アイコン(the Code With Me icon)をクリックします。

  2. 表示されたリストからセッションの終了を選択します。

    Turn Off Access

    WebStorm はセッションを終了し、すべてのゲストを無効にします。リンクも無効になり、別のセッションを開始するには新しいリンクを作成する必要があります。

ホスト設定にアクセスする

  1. メインツールバーで、Code With Me アイコン(the Code With Me icon)をクリックします。

  2. the Settings icon をクリックし、開いたリストから設定を選択します。

    Aceess the host's settings

許可

ホストは、新しいゲストが自分のマシン上でアクセスできる内容とできない内容を設定できます。たとえば、ゲストがファイルを編集できるかどうか、ターミナルを使用できるか、コードを実行できるかを指定できます。権限は、セッション全体またはセッション内の特定のゲストに対して設定できます。

セッション中いつでも、ゲストはホストに追加の権限をリクエストできます。

権限を追加する

  1. メインツールバーで、the Code With Me icon をクリックし、権限ドロップダウンをクリックします。

    Open Permissions dialog

    セッションを作成すると、デフォルトのオプション読み取り専用が選択されます。

  2. 許可リストでは、次のオプションを選択できます。

    • 読み取り専用 : この権限はデフォルトで、ゲストはファイル、ターミナル、実行アクションへの表示専用アクセスが許可されます。ただし、ゲストはエディターからコードをコピーして貼り付けることはできます。

    • ファイルの編集 : ゲストにファイルの編集のみを許可し、ターミナルにアクセスしたりコードを実行したりさせたくない場合は、この権限を選択します。

      Edit files permissions

      一部のファイルをアクセスから除外できます。

      ファイルへのアクセスフィールドの非表示ファイルの管理をクリックし、隠しファイルダイアログでアクセスから除外するファイルを追加して、OK をクリックします。

      Excluded files
    • フルアクセス : この権限を選択して、ゲストにすべてのファイル、ターミナルへのフルアクセスを許可し、マシンでアクションを実行します。

      Full access permissions
    • カスタム : この権限を選択して、ゲストのファイル、ターミナル、実行アクションへのアクセスをカスタマイズします。

      Customize access permissions

      カスタム権限ダイアログを開くと、権限に関連付けられたオプションは、以前に選択した権限の選択肢を繰り返します。必要に応じて変更し、保存をクリックしてください。

      Custom permissions
  3. 権限を構成した後、セッションを作成中の場合はセッションの開始をクリックします。

音声呼び出しとビデオ呼び出し

同僚と共同作業する場合、チャット、セッションでの音声呼び出し、ビデオ呼び出しの使用、画面共有の有効化、ポートの転送を行うことができます。

セッションが開始すると、メインツールバーで the Join Call icon が使用可能になり、これを使用して音声呼び出しを開始できます。

Start call

セッション中は、音声呼び出し、カメラ、画面共有を管理できます。

メインツールバーから呼び出しを管理する

  • メインツールバーの the More icon をクリックして利用可能なオプションのリストを開き、必要なオプションを選択します。

    Call Options

    マイクをミュートまたはミュート解除したり、画面共有やカメラを有効または無効にしたり、呼び出しツールウィンドウを開いたりできます。

呼び出しツールウィンドウで呼び出しとカメラを制御することもできます。

Code With Me ツールウィンドウから音声呼び出しを管理する

  1. 右側のツールバーで「 Code With Me 」をクリックして、Code With Me ツールウィンドウを開きます。

    Code With Me tool window

    ツールウィンドウが非表示の場合は、メインツールバーの the More icon をクリックし、通話ウィンドウの表示を選択します。

    Open the Code With Me tool window
  2. 必要なアクションを実行するには、ウィンドウの下部にあるコントロールパネルを使用します。

    Handle the voice call from the Main toolbar

ツールバーのカスタマイズで呼び出しアクションを管理する

メインツールバーに追加できる呼び出しアクションにアクセスできます。ツールバーのアクションのアイコンを変更したり、ツールバーからアクションを削除したりすることもできます。

  1. メインツールバーを右クリックし、ツールバーのカスタマイズを選択します。

  2. 使用可能なオプションからメインツールバー | 右 | Code With Me を選択します。

  3. Code With Me のアクション呼び出し ノードを開き、変更を加えるアクションを選択します。「OK」をクリックして変更を保存します。ツールバーのカスタマイズの詳細については、「メインツールバーのアクションを構成する」を参照してください。

画面をゲストと共有する

  1. 他の参加者と一緒に呼び出ししていることを確認してください。

  2. メインツールバーで、the More Options icon をクリックし、ブラウザーで画面共有を有効にする the Share Screen icon を選択して、共有ソース (特定のウィンドウまたは画面全体) を指定します。

    Screen sharing

    画面はセッションの他の参加者と共有されます。画面共有を停止する場合は、同じアイコンをもう一度クリックします。

Web またはデータベースプロジェクトで作業している場合、セッション中にローカルマシンのポートへのアクセスをゲストに与えることができます。

ポート転送は RD プロトコル(英語)を使用して実装されます。ホストとゲスト間の接続は TLS 1.3 でエンドツーエンド暗号化です。

クライアントとホスト間の通信モードは 3 つあります。モードは、直接> ピアツーピア> リレーの優先順位で自動的に設定されます。1 つのモードが失敗すると、次のモードが選択されます。

ポートを転送する

  1. メインメニューから表示 | ツールウィンドウ | Code With Me を選択して、Code With Me ツールウィンドウを開きます。

  2. Code With Me ツールウィンドウで、ポート転送タブを選択します。

  3. the Add icon をクリックしてポートを追加します。

  4. 使用するポートとプロトコルを指定します。

    Port Forwarding dialog

    ゲスト側では、ポートが Code With Me ツールウィンドウのポート転送タブに追加され、ゲストはそれにアクセスできます。

    Code With Me tool window - Guest's side, forwarded ports

ゲストとして始めましょう

ゲストとして、作成されたセッション中にホストをフォローし、ホストが動作しているコードを編集できます。他のセッション参加者をフォローして、プロジェクトの他の部分にアクセスすることもできます。さらに、ホストのマシン上でコードを実行およびデバッグしたり、権限がある場合はターミナルツールウィンドウで作業したりすることができます。

招待を受け入れる

  1. 受信したリンクをクリックすると、ブラウザーで招待ページが開き、セッションに参加できます。

    Invitation page
  2. WebStorm 軽量クライアントアプリケーションは実行時にダウンロードされます。

    軽量バージョンを機能させるために WebStorm をインストールする必要はありません。

  3. インストールされると、WebStorm は、ホストがセッションへの参加要求を受け入れるまで待つことを提案する通知を表示します。承認されると、セッションに参加できるようになります。ホストのプロジェクトを開くと、エディターにアクティブなファイルが表示されます。

    Join a session

    この時点で、ゲスト IDE をカスタマイズして、作業プロセスをより便利にすることができます。テーマ表示モードなどを変更できます。行った変更は、ゲスト IDE にのみ影響します。

セッションを終了する

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 開いたダイアログで、セッションから退席をクリックします。

    Disconnect and close the project

    セッションが終了し、IDE が閉じます。同じリンクを使用して、ホストからの受け入れプロセスなしで同じセッションにすぐに戻ることができます。

ゲスト Code With Me のセットアップ場所

Code With Me をゲストとして使用して作業をセットアップした後、次の場所をチェックして、Code With Me のディストリビューション、ログ、設定、キャッシュがファイルシステム内のどこにあるかを確認できます。

  • Code With Me ログ:

    ~/Library/Logs/JetBrains/<product><version>/frontend

    %LOCALAPPDATA%\JetBrains\<product><version>\log\frontend

    ~/.cache/JetBrains/<product><version>/log/frontend

  • Code With Me キャッシュ:

    ~/Library/Caches/JetBrains/<product><version>/frontend

    %LOCALAPPDATA%\JetBrains\<product><version>\frontend

    ~/.cache/JetBrains/<product><version>/frontend

  • Code With Me 設定:

    ~/Library/Application\Support/JetBrains/<product><version>

    %APPDATA%\Roaming\JetBrains\<product><version>\

    ~/.config/JetBrains/<product><version>

  • Code With Me ディストリビューションと JetBrains ランタイム:

    ~/Library/Caches/JetBrains/JetBrainsClientDist

    ~/Library/Caches/JetBrains/CodeWithMeClientDist

    %LOCALAPPDATA%\JetBrains\JetBrainsClientDist

    %LOCALAPPDATA%\JetBrains\CodeWithMeClientDist

    ~/.cache/JetBrains/JetBrainsClientDist

    ~/.cache/JetBrains/CodeWithMeClientDist

共有セッションで作業する

共有セッションが作成され、招待されたすべての参加者が受け入れられると、エディターに追加のキャレットが含まれ、メインツールバーにゲストのアイコンが表示され、音声呼び出しとチャットサポートを備えた Code With Me ツールウィンドウが利用可能になります。

Joined session: editor and the main toolbar

共有セッションでは、ホストのプロジェクトを個別に移動する、他の参加者をフォローする、ターミナルツールウィンドウを使用する、コードを編集する、ホストに追加の権限を要求するなど、さまざまなことを試すことができます。

参加者をフォローする

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 表示されたリストから、フォローする参加者の名前を選択し、従うを選択します。

    Follow a participant

    または、メインツールバーで参加者のアイコンをクリックします。

    WebStorm は、あなたのカーソルを参加者のカーソルの上に配置し、フォローしている参加者の名前を表示する小さなラベルが付いたフレームをエディターの周囲に配置します。

    Following another participant

    名前の横にある停止をクリックして、参加者のフォローを解除します。いつでも再開をクリックして、同じ参加者をもう一度フォローできます。

    他の参加者の後に複数の参加者を含めることができます。フォロワーの 1 人がフォーカスを切り替えることを決定した場合、メインホストには影響しません。これは、教師と生徒のユースケースで役立ちます。

他のすべての人にあなたをフォローさせる

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 開いたリストからプロファイルを選択し、すべてのユーザーに自分をフォローさせるを選択します。

    Select Force to Follow You

    この場合、すべてのゲストキャレットはホストの上に配置され、メインキャレットがプロジェクトの他のファイルに配置されている場合はフォーカスが切り替わります。

    Force Others to follow you: Editor

    プロファイルアイコンは、フォロー対象者とフォロワーを示します。参加者はいつでもメインキャレットのフォローを停止できます。

別の参加者に移動

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 開いたリストから参加者の名前をクリックし、移動を選択します。

    Jump to Other Participant

    または、メインツールバーで、参加者のアイコンを右クリックして、同じオプションを選択します。

    Jump to another participant

    キャレットは、選択したゲストのキャレットが配置されている行に配置されます。これは、特定の参加者のキャレットをすばやく見つけたい場合に役立つことがあります。

ペアコーディングモードを使用する

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 開いたリストから、参加者の名前を選択し、ペアコーディングモードを選択します。

    または、メインツールバーで、参加者のアイコンを右クリックして、同じオプションを選択します。

    Select Pair Coding Mode

    キャレットは、ホストのキャレットの上に配置されます。WebStorm は、ホストのエディターとゲストのエディターの両方の周囲にフレームを配置し、ペアコーディングモードがオンになっていることを示します。

    Pair Coding mode

    キャレットがプロジェクトの他の部分に配置されている場合でも、フォーカスはホストキャレット内にとどまります。このモードは通常、ペアプログラミングのシナリオで使用されます。

特定のユーザーの共有セッションを終了する

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 開いたリストから、セッションを終了する参加者の名前をクリックして、ゲストの除去を選択します。

    または、メインツールバーで参加者のアイコンを右クリックし、同じオプションを選択します。

    Kick User

    WebStorm は、選択された参加者のセッションを終了し、ゲスト側に通知を表示します。WebStorm は、セッションを含むゲストプロジェクトと IDE を閉じます。

    ゲストが共有セッションに戻りたい場合は、ホストの参加許可を待つ必要があります。

現在のゲストのログを収集する

  1. メインメニューからヘルプ | ホストログとクライアントログの収集を選択します。

  2. WebStorm は、ローカルマシンにログファイルを作成します。ログファイルには、現在のプロジェクトのファイル名、コードの一部、キャレットの移動、入力されたシンボル、呼び出されたアクション、開かれたファイル、ファイルパスなどのゲストのアクティビティに関する詳細情報が含まれます。

セッション内のすべてのログを収集する

  1. メインツールバーで、the Code With Me icon をクリックします。

  2. 開いたリストで、the More button をクリックし、問題の送信を選択します。

    Submit issue as a Host
  3. 開いたダイアログで、OK をクリックしてデータ収集を承認します。

    sensitive Data dialog

    ログの詳細が収集されると、YouTrack システム(英語)で新しく作成された課題に自動的に添付されます。

権限をリクエストする

デフォルトでは、ゲストには読み取り専用権限が与えられます。つまり、セッション中はファイルの編集、コードの追加、ターミナルでの作業はできません。権限のない操作を行おうとするたびに、WebStorm に適切な通知が表示されます。通知内のリンクをクリックすると、ホストに追加の権限を要求できます。

ファイルの編集権限をリクエストする

  1. ファイルの編集を開始します。通知が表示されたら、ファイルの編集をリクエストリンクをクリックします。

    Permission notification

    その結果、ホストは通知を受け取り、アクセス許可を付与するか拒否することができます。

    Host notification
  2. 権限が付与されると、ゲストはファイルを編集でき、ゲストの権限はホスト側で更新されます。ホストはセッション中にいつでも権限を変更できます。ホストのメインメニューから、ゲストの名前とオプションのリストから許可を選択し、権限の編集ダイアログでそれに応じて権限を更新します。

ターミナルを操作したり、アプリケーションを実行したり、コードをデバッグしたりするには、完全なアクセス権限が必要です。

フルアクセス許可をリクエストする

  1. フルアクセス権限が必要なアクションにアクセスしようとすると、適切な通知が表示されます。例: ターミナルアクセス許可。

    Requesting full access permissions

    フルアクセスのリクエストリンクをクリックします。

    その結果、ホストは通知を受け取り、アクセス許可を付与するか拒否することができます。

  2. 権限が付与されると、ターミナル全体が開かれ、共有されます。ゲストは開いているすべてのタブにアクセスし、新しいタブを作成できます。

    ホストはセッション中いつでも権限を変更できます。ゲストの名前を右クリックし、オプションのリストから許可を選択します。<guest_name> の権限ウィンドウで、それに応じて権限を更新します。

セッションサーバーのセッション名または URL を変更する

Code With Me 設定を使用して、作成されたセッションのデフォルト名を変更できます。

セッションで使用するロビーサーバーの URL を変更することもできます。セキュリティ上の理由から、自社のサーバーに切り替えると便利な場合があります。

Code With Me 設定にアクセスする

  1. メインメニューから設定 | ツール | Code With Me を選択します

  2. ユーザー名フィールドに、セッションの新しい名前を入力します。セッション名は再起動時に変更されます。システム名を使用するをクリックすると、セッション名がデフォルトの名前にリセットされます。

    ロビーサーバーの URL フィールドで、デフォルトのサーバー URL を変更できます。

  3. 変更を保存するには、OK をクリックします。

関連ページ:

WebStorm のライセンス購入と登録

WebStorm では、次のアクティベーションオプションが提供されます。30 日間のトライアル — IDE の機能をテストするための 30 日間の試用期間。有料ライセンス — 有償利用の場合は有料サブスクリプション。非営利目的利用 — WebStorm の 1 年間の非有償ライセンス。アクティベーションオプション:無料トライアルを始める WebStorm を起動すると表示されるダイアログで、体験版の開始オプションを選択します。試用の開始をクリックします。JetBrains の Web サイトにリダイレ...

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

メニューおよびツールバー

IDE を操作するとき、いくつかのアクションを他のアクションより頻繁に実行します。生産性を最大化するには、お気に入りのアクションのデフォルトのショートカットを学ぶか、それらにショートカットを割り当てます。メニューとツールバーをカスタマイズして、必要なアクションのみを含め、再グループ化し、アイコンを構成することもできます。メニューおよびツールバーをカスタマイズを押して設定を開き、を選択します。使用可能なメニューとツールバーのリストで、カスタマイズするノードを展開し、目的の項目を選択します。選択した...

Code With Me セキュリティの概要

Code With Me は、コードを共同で操作する機能を提供する強力なツールです。その機能には、コードとアクセスレベルを安全に保つ責任が伴います。接続ワークフロー:Code With Me を使用して相互に接続したい 2 人のユーザーがいるとしましょう。ユーザー(ホスト)が Code With Me セッションの開始アクションをクリックして、ローカル IDE でセッションを作成します。ローカル IDE は、セッションの作成に関する通知をロビーサーバーに送信し、セッション接続を要求します。登録後、...

セキュリティモデル

作業にリモートサーバーへのアクセスが含まれる場合、ローカルマシンとバックエンド間の接続が保護され、やり取りされるデータが十分に暗号化されていることを確認する必要があります。リモート開発セキュリティモデルを使用すると、作業のほぼすべてのセキュリティ面を制御できます。サーバー側とクライアント側の両方で実行される IDE コンポーネントがあります。バックエンドによってロードされた情報は、それ以上のユーザー操作なしでクライアントに転送できます。また、クライアントに提供されたすべての情報は、ユーザー操作な...

ターミナル

WebStorm には、IDE 内からコマンドラインシェルを操作するための組み込みターミナルエミュレータが含まれています。専用のターミナルアプリケーションに切り替えることなく、Git コマンドの実行、ファイルのアクセス許可の設定、その他のコマンドラインタスクの実行に使用します。ターミナルプラグインを有効にするこの機能は、デフォルトで WebStorm にバンドルされて有効になっているターミナルプラグインに依存しています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認して...