WebStorm 2024.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 アカウントを選択します。

  6. 必要な情報を入力し、アクティブにするをクリックします。

    The License Activation dialog

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 を選択します。

  3. 開いたリストで、Code With Me セッションの開始をクリックします。

    Enable Code With Me Access
  4. Code With Me: セッションの開始ダイアログで、ゲストのアクセス許可を構成し、セッションの開始をクリックします。

    Enable Code With Me Access dialog

    WebStorm は、共同作業に招待したいゲストに送信できるリンクを作成します。招待リンクをコピーするには、Code With Me コードウィズミーアイコンをクリックし、セッションリンクのコピーを選択します。

    Copy session link
  5. リンクをゲストに送信します。ゲストがリンクをクリックすると、WebStorm はゲストを受け入れるか拒否するかを提案するポップアップを表示します。このステップでは、コードがゲストとあなたで等しいことを確認する必要があります。

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

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

  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 Browse button をクリックし、開いたリストから設定を選択します。

許可

ホストとしての新しいゲストがあなたのマシンでアクセスできるかどうかを設定できます。例: ゲストがファイルを編集し、ターミナルを使用し、コードを実行できるかどうかを指定します。音声呼び出しオプションを有効または無効にすることもできます。権限は、セッション全体またはセッション内の特定のゲストに対して構成できます。

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

権限を追加する

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

    Open Permissions dialog

    セッションを作成すると、権限オプションのあるダイアログが自動的に開きます。

  2. Code With Me: セッションの開始ダイアログで、次のオプションを指定します。

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

      Read only permissions
    • ファイルの編集 : ゲストがファイルのみを編集し、ターミナルにアクセスしたり、コードを実行したりしないようにする場合は、この権限を選択します。

      Edit files permissions

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

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

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

      Full access permissions
    • カスタム : この権限を選択して、ゲストのファイル、ターミナルへのアクセスをカスタマイズし、アクションを実行します。カスタム権限に切り替えると、それらに関連付けられたオプションは、以前に選択された権限からの選択を繰り返します。それに応じて変更できます。

      Custom permissions
  3. 通話の開始オプションはデフォルトで有効になっていますが、無効にすると、セッションで音声呼び出しが無効になります。

  4. 権限を構成した後、セッションを作成している場合は、セッションの開始をクリックします。権限を編集する場合は、適用をクリックします。

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

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

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

Start call

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

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

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

    Call Options

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

Code With Me ツールウィンドウで呼び出し、カメラ、画面共有を制御することもできます。

Code With Me tool window

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

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

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

  2. 必要なアクションを実行するには、呼び出しタブのコントロールパネルを使用します。

    Handle the voice call from the Main toolbar

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

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

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

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

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

画面をゲストと共有する

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

    または、Code With Me ツールウィンドウを開きます。

  2. 画面共有の有効化 the Share Screen icon を選択します。

    Screen sharing

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

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

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

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

ポートを転送する

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

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

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

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

  4. ポート転送ダイアログでポートを追加し、プロトコルを選択して OK をクリックします。

    Port Forwarding dialog

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

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

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

招待を受け入れる

  1. 受信したリンクをクリックします。

    または、the Code With Me icon をクリックし、リストからセッションに参加を選択して、開いたダイアログにリンクを貼り付けます。

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

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

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

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

セッションを終了する

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

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

    Disconnect and close the project

    セッションが終了し、Code With Me ウェルカム画面が表示されます。同じリンクを使用するホストからのプロセスを受け入れることなく、同じセッションにすばやく戻ることができます。

    WebStorm Client welcome screen

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

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

  • Code With Me ログ:

    ~/Library/Logs/JetBrains/JetBrainsClient<plugin_version>

    %LOCALAPPDATA%\JetBrains\JetBrainsClient<plugin_version>\log

    ~/.cache/JetBrains/JetBrainsClient<plugin_version>/log

  • Code With Me キャッシュ:

    ~/Library/Caches/JetBrains/JetBrainsClient<plugin_version>

    %LOCALAPPDATA%\JetBrains\JetBrainsClient<plugin_version>

    ~/.cache/JetBrains/JetBrainsClient<plugin_version>

  • Code With Me 設定:

    ~/Library/Application\ Support/JetBrains/JetBrainsClient<plugin_version>

    %APPDATA%\Roaming\JetBrains\JetBrainsClient<plugin_version>

    ~/.config/JetBrains/JetBrainsClient<plugin_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 other 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 other participant

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

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

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

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

    Select Pair Coding mode

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

    Select Pair Coding Mode

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

    Pair Coding mode

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

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

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

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

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

    Kick User

    WebStorm は、選択した参加者のセッションを終了し、ゲスト側に通知を表示します。WebStorm はゲストプロジェクトを閉じ、ゲストを Code With Me ウェルカム画面に戻します。

    WebStorm Client welcome screen

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

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

  1. Code With Me のウェルカム画面で、設定の横にある the More Options icon をクリックします。

  2. 表示されたリストからログと診断データを収集を選択します。

    Collect Logs and Diagnostic Data

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

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

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

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

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

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

Submit feedback

権限をリクエストする

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

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

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

    Permissions notification

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

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

    Permissions dialog

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

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

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

    Terminal permissions

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

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

  2. パーミッションが付与されると、共有ターミナルのあるタブが開き、ゲストが使用できるようになります。この場合、ホストには 2 つのターミナルタブがあります。1 つは private で、もう 1 つは shared です

    ホストはセッション中いつでも権限を変更できます。ゲストの名前を右クリックし、オプションのリストから許可を選択します。権限の編集ダイアログで、それに応じて権限を更新します。

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

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

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

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

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

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

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

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

関連ページ:

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

WebStorm は最大 30 日間無料で評価できます。無料トライアルを始める WebStorm を起動すると表示されるライセンスダイアログで、無料 30 日間トライアルの開始ボタンをクリックします。JetBrains の Web サイトにリダイレクトされ、トライアルが開始されたことを確認するメッセージが表示されます。試用版の有効期限が切れたら、WebStorm を引き続き使用するには、ライセンスを購入して登録する必要があります。WebStorm の次のリリースバージョンでは、新しい試用期間が利用...

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

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

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

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

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

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

セキュリティモデル

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

ターミナル

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