正式なドキュメントは英語版であり、この日本語訳はAI支援翻訳により作成された参考用のものです。日本語訳の一部の内容は人間によるレビューがまだ行われていないため、翻訳のタイミングにより英語版との間に差異が生じることがあります。最新かつ正確な情報については、英語版をご参照ください。

Web IDE

  • プラン: Free、Premium、Ultimate
  • 提供形態: GitLab.com、GitLab Self-Managed、GitLab Dedicated

Web IDEは高度なエディタであり、直接GitLab UIで複数のファイルを編集したり、変更をステージングしたり、コミットを作成したりできます。Webエディタとは異なり、Web IDEはソース管理機能を備えたフル機能の開発環境を提供します。

Web IDEでのGitLab Flavored Markdownのプレビューのサポートは、エピック15810で提案されています。

Web IDEを開く

Web IDEには、いくつかの方法でアクセスできます。

キーボードショートカットを使用する

  1. 上部のバーで、検索または移動先を選択して、プロジェクトを見つけます。
  2. .キーボードショートカットを使用します。

ディレクトリから

  1. 上部のバーで、検索または移動先を選択して、プロジェクトを見つけます。
  2. ディレクトリに移動します。
  3. コード > Web IDEで開くを選択します。

ファイルから

  1. 上部のバーで、検索または移動先を選択して、プロジェクトを見つけます。
  2. ファイルに移動します。
  3. 編集 > Web IDEで開くを選択します。

マージリクエストから作成する

  1. 上部のバーで、検索または移動先を選択して、プロジェクトを見つけます。
  2. マージリクエストに移動します。
  3. 右上で、コード > Web IDEで開くを選択します。

Web IDEでは、新規ファイルと変更されたファイルが別々のタブで開き、変更点が並んで表示されます。読み込み時間を短縮するため、変更された行数が最も多い10個のファイルのみが自動的に開きます。

Web IDEインターフェースの左側のサイドバーのエクスプローラービューで、新規または変更されたファイルの横に、マージリクエストアイコン（ merge-request ）が表示されます。ファイルの変更を表示するには、ファイルを右クリックしてマージリクエストベースと比較を選択します。

ファイルを管理する

Web IDEを使用して、複数のファイルを開いたり、編集したり、アップロードしたりできます。

ファイルを開く

Web IDEでファイル名を指定してファイルを開くには:

  1. Command+Pを押します。
  2. 検索ボックスに、ファイル名を入力します。

開いているファイルを検索する

Web IDEで開いているファイルを検索するには:

  1. Shift+Command+Fを押します。
  2. 検索ボックスに検索語句を入力します。

ファイルをアップロードする

Web IDEでファイルをアップロードするには:

  1. Web IDEの左側で、エクスプローラー（ documents ）を選択するか、Shift+Command+Eを押します。

  2. ファイルをアップロードするディレクトリに移動します。新しいディレクトリを作成するには:

    • エクスプローラービューの右上にある新しいフォルダー（ folder-new ）を選択します。

  3. ディレクトリを右クリックして、アップロードを選択します。

  4. アップロードするファイルを選択します。

一度に複数のファイルをアップロードできます。ファイルがアップロードされ、自動的にリポジトリに追加されます。

コミットされていない変更を復元する

Web IDEで編集するファイルを手動で保存する必要はありません。Web IDEは変更したファイルをステージングするため、変更をコミットできます。コミットされていない変更は、ブラウザのローカルストレージに保存されます。ブラウザのタブを閉じたり、Web IDEを更新したりしても、変更は保持されます。

コミットされていない変更が利用できない場合は、ローカル履歴から変更を復元できます。Web IDEでコミットされていない変更を復元するには、次の手順に従います。

  1. Shift+Command+Pを押します。
  2. 検索ボックスに、Local History: Find Entry to Restoreと入力します。
  3. コミットされていない変更を含むファイルを選択します。

ソース管理を使用する

ソース管理を使用して、変更されたファイルを表示したり、ブランチを作成および切り替えたり、変更をコミットしたり、マージリクエストを作成したりできます。

変更されたファイルを表示する

Web IDEで変更したファイルの一覧を表示するには:

  • Web IDEの左側で、ソース管理 ( branch ) を選択するか、Control+Shift+Gを押します。

CHANGES、STAGED CHANGES、およびMERGE CHANGESが表示されます。詳細については、VS Codeドキュメントを参照してください。

ブランチを切り替える

Web IDEでは、デフォルトで現在のブランチが使用されます。Web IDEでブランチを切り替えるには、次の手順に従います。

  1. 下部のステータスバーの左側で、現在のブランチ名を選択します。
  2. 既存のブランチを入力または選択します。

ブランチを作成する

Web IDEで現在のブランチからブランチを作成するには:

  1. 下部のステータスバーの左側で、現在のブランチ名を選択します。
  2. ドロップダウンリストから、新しいブランチを作成を選択します。
  3. 新しいブランチ名を入力します。

Web IDEは、チェックアウトしたブランチをベースとしてブランチを作成します。または、異なるベースからブランチを作成するには、以下の手順に従ってください:

  1. Web IDEの左側で、ソース管理 ( branch ) を選択するか、Control+Shift+Gを押します。
  2. ソース管理パネルの右上にある省略記号メニュー ( ellipsis_h ) を選択します。
  3. ドロップダウンリストから、ブランチ > **Create branch from…**を選択します。
  4. ドロップダウンリストから、ベースとして使用するブランチを選択します。

リポジトリへの書き込みアクセス権がない場合、新しいブランチを作成は表示されません。

ブランチの削除

  1. Web IDEの左側で、ソース管理 ( branch ) を選択するか、Control+Shift+Gを押します。
  2. ソース管理パネルの右上にある省略記号メニュー ( ellipsis_h ) を選択します。
  3. ドロップダウンリストから、ブランチ > ブランチを削除を選択します。
  4. ドロップダウンリストから、削除したいブランチを選択します。

Web IDEからは保護ブランチを削除できません。

変更をコミットする

Web IDEで変更をコミットするには:

  1. Web IDEの左側で、ソース管理 ( branch ) を選択するか、Control+Shift+Gを押します。
  2. コミットメッセージを入力します。
  3. 次のいずれかのコミットオプションを選択します:
    • Commit to current branch - 現在のブランチにコミットします。
    • Create a new branch - 新しいブランチを作成し、変更をコミットします。
    • Commit and force push - 変更をリモートブランチに強制プッシュします。
    • Amend commit and force push - 最後のコミットを修正し、強制プッシュします。

コミットと強制プッシュ

変更をコミットし、強制プッシュするには:

  1. アクションボタンメニューを選択するか、省略記号 ( ellipsis_h ) を選択します。
  2. Commit and Force pushを選択します。

このアクションは現在のブランチのリモート履歴を上書きします。注意して使用してください。注意して使用してください。

コミットを修正して強制プッシュ

最後のコミットを修正して強制プッシュするには:

  1. アクションボタンメニューを選択するか、省略記号 ( ellipsis_h ) を選択します。
  2. Amend commit and Force pushを選択します。

これにより、最後のコミットが更新され、リモートリポジトリに強制プッシュされます。これは、新しいコミットを作成せずに最近のコミットを修正するために使用します。

マージリクエストを作成する

Web IDEでマージリクエストを作成するには:

  1. 変更をコミットします。
  2. 右下に表示される通知で、MRの作成を選択します。

詳細については、見逃した通知を表示を参照してください。

Web IDEをカスタマイズする

キーボードショートカット、テーマ、設定、および同期に関する好みに合わせてWeb IDEをカスタマイズします。

コマンドパレットを使用する

コマンドパレットを使用して、多くのコマンドにアクセスできます。Web IDEでコマンドパレットを開いてコマンドを実行するには:

  1. Shift+Command+Pを押します。
  2. コマンドを入力または選択します。

設定を編集する

設定エディタを使用して、ユーザーとワークスペースの設定を表示および編集できます。Web IDEで設定エディタを開くには、次の手順に従います。

  • トップメニューバーで、ファイル > 設定 > 設定を選択するか、Command+,を押します。

設定エディタで、変更する設定を検索できます。

キーボードショートカットを編集する

キーボードショートカットエディタを使用して、利用可能なすべてのコマンドのデフォルトのキーバインドを表示および変更できます。Web IDEでキーボードショートカットエディタを開くには、次の手順に従います。

  • トップメニューバーで、ファイル > 設定 > Keyboard Shortcutsを選択するか、Command+Kの後Command+Sを押します。

キーボードショートカットエディタでは、以下を検索できます。

  • 変更するキーバインド
  • キーバインドを追加または削除するコマンド

キーバインドは、キーボードレイアウトに基づいています。キーボードレイアウトを変更すると、既存のキーバインドが自動的に更新されます。

配色テーマを変更する

Web IDEのさまざまな配色テーマを選択できます。デフォルトのテーマはGitLab Darkです。

Web IDEで配色テーマを変更するには:

  1. トップメニューバーで、ファイル > 設定 > テーマ > Color Themeを選択するか、Command+Kの後Command+Tを押します。
  2. ドロップダウンリストから、矢印キーでテーマをプレビューします。
  3. テーマを選択します。

Web IDEは、アクティブな配色テーマをユーザー設定に保存します。

同期設定を構成する

Web IDEで同期設定を構成するには:

  1. Shift+Command+Pを押します。
  2. 検索ボックスに、Settings Sync: Configureと入力します。
  3. 次のチェックボックスをオンまたはオフにします。
    • 設定
    • キーボードショートカット
    • ユーザースニペット
    • ユーザータスク
    • UIの状態
    • 拡張機能
    • プロファイル

これらの設定は、複数のWeb IDEインスタンス間で自動的に同期されます。ユーザープロファイルを同期したり、同期された設定の以前のバージョンに戻したりすることはできません。

見逃した通知を表示する

Web IDEでアクションを実行すると、右下に通知が表示されます。見逃した可能性のある通知を表示するには、次の手順に従います。

  1. 下部のステータスバーの右側で、ベルのアイコン（ notifications ）を選択して、通知の一覧を表示します。
  2. 表示する通知を選択します。

拡張機能を管理する

  • 提供形態: GitLab.com、GitLab Self-Managed、GitLab Dedicated

VS Code拡張機能マーケットプレースは、Web IDEの機能を強化する拡張機能へのアクセスを提供します。デフォルトでは、GitLab Web IDEはOpen VSX Registryに接続します。

VS Code拡張機能マーケットプレースにアクセスするには、ブラウザが.cdn.web-ide.gitlab-static.netアセットホストにアクセスできる必要があります。このセキュリティ要件により、サードパーティの拡張機能が分離された環境で実行され、アカウントにアクセスできないようになります。これはGitLab.comとGitLab Self-Managedの両方に適用されます。

前提条件:

拡張機能をインストールする

Web IDEで拡張機能をインストールするには:

  1. トップメニューバーで、表示 > Extensionsを選択するか、Command+Shift+Xを押します。
  2. 検索ボックスに、拡張機能名を入力します。
  3. インストールする拡張機能を選択します。
  4. インストールを選択します。

拡張機能をアンインストールする

Web IDEで拡張機能をアンインストールするには:

  1. トップメニューバーで、表示 > Extensionsを選択するか、Command+Shift+Xを押します。
  2. インストールされている拡張機能の一覧から、アンインストールする拡張機能を選択します。
  3. アンインストールを選択します。

拡張機能のセットアップ

Web IDE拡張機能をプロジェクトで動作させるには、追加の設定が必要な場合があります。

Vimキーバインドを使用する

Vimキーバインドを使用して、Vimテキストエディタのキーボードショートカットでテキストをナビゲートおよび編集します。拡張機能マーケットプレースを使用すると、VimキーバインドをWeb IDEに追加できます。

Vimキーバインドを有効にするには、Vim拡張機能をインストールします。詳細については、拡張機能をインストールするを参照してください。

AsciiDocサポート

AsciiDoc拡張機能は、Web IDEでAsciiDocファイルのライブプレビュー、構文ハイライト、およびスニペットを提供します。Web IDEでAsciiDocマークアッププレビューを使用するには、AsciiDoc拡張機能をインストールする必要があります。詳細については、拡張機能をインストールするを参照してください。

トラブルシューティング

Web IDEの操作中に、以下の問題が発生する可能性があります。

入力時の文字オフセット

Web IDEで入力すると、4文字のオフセットが発生する場合があります。次の回避策で対応します。

  1. トップメニューバーで、ファイル > 設定 > 設定を選択するか、Command+,を押します。
  2. 右上隅で、**設定を開く（JSON）**を選択します。
  3. settings.jsonファイルで、"editor.disableMonospaceOptimizations": trueを追加するか、"editor.fontFamily"設定を変更します。

詳細については、VS Codeイシュー80170を参照してください。

OAuthコールバックURLを更新する

  • 提供形態: GitLab Self-Managed

前提条件:

  • インスタンスへの管理者アクセス権が必要です。

Web IDEは、認証にインスタンス全体のOAuthアプリケーションを使用します。OAuthコールバックURLが正しく設定されていない場合、次のメッセージが示されたCannot open Web IDEエラーページが表示されることがあります。

The URL you're using to access the Web IDE and the configured OAuth callback URL do not match. This issue often occurs when you're using a proxy.

この問題を解決するには、OAuthコールバックURLを更新して、GitLabインスタンスへのアクセスに使用するURLと一致させる必要があります。

前提条件:

  • 管理者アクセス権が必要です。

OAuthコールバックURLを更新するには:

  1. 右上隅で、管理者を選択します。
  2. 左サイドバーで、アプリケーションを選択します。
  3. GitLab Web IDEで、編集を選択します。
  4. OAuthコールバックURLを入力します。複数のURLを改行で区切って入力できます。

アクセストークンのライフタイムを5分未満にできない

  • 提供形態: GitLab Self-Managed

アクセストークンのライフタイムを5分未満にできないというエラーメッセージが表示されることがあります。

このエラーは、GitLabインスタンスの設定で、アクセストークン有効期限が5分未満になっている場合に発生します。Web IDEが正常に機能するには、最低5分のライフタイムを持つアクセストークンが必要です。

この問題を解決するには、インスタンス設定でアクセストークンのライフタイムを5分以上に増やします。アクセストークンの有効期限の設定について詳しくは、アクセストークンの有効期限を参照してください。

Workhorseの依存関係

  • 提供形態: GitLab Self-Managed

GitLab Self-Managedでは、WorkhorseをGitLab Railsサーバーの前にインストールして実行する必要があります。そうでない場合、Web IDEを開いたり、Markdownプレビューなどの特定の機能を使用したりする際に問題が発生する可能性があります。

セキュリティのため、Web IDEの一部は別のoriginで実行する必要があります。このアプローチをサポートするために、Web IDEはWorkhorseを使用して、Web IDEアセットとの間でリクエストを適切にルーティングします。Web IDEアセットは静的なフロントエンドアセットであるため、この作業のためにRailsを使用すると、不要なオーバーヘッドが発生します。

CORSに関する問題

Web IDEがGitLab Self-Managedのインスタンスで正しく機能するには、特定のクロスオリジンリソース共有 (CORS) 設定が必要です。GitLab APIエンドポイント (/api/*) は、Web IDEをサポートするために、次のHTTPレスポンスヘッダーを含める必要があります:

ヘッダー値説明
Access-Control-Allow-Originhttps://[subdomain].cdn.web-ide.gitlab-static.netWeb IDEのoriginからのリクエストを許可します。The [subdomain]は動的に生成される英数字文字列（最大52文字）です。
Access-Control-Allow-HeadersAuthorization認可ヘッダーをクロスオリジンリクエストで許可します。
Access-Control-Allow-MethodsGET, POST, PUT, DELETE, OPTIONS許可されるHTTPメソッドを指定します（推奨）。
Access-Control-Allow-CredentialsfalseWeb IDEは、このヘッダーによって制御される認証情報をHTTPリクエストに含める必要はありません。
Access-Control-Expose-HeadersLink, X-Total, X-Total-Pages, X-Per-Page, X-Page, X-Next-Page, X-Prev-Page, X-Gitlab-Blob-Id, X-Gitlab-Commit-Id, X-Gitlab-Content-Sha256, X-Gitlab-Encoding, X-Gitlab-File-Name, X-Gitlab-File-Path, X-Gitlab-Last-Commit-Id X-Gitlab-Ref, X-Gitlab-Size, X-Request-Id, ETagGitLab RestおよびGraphQL APIで使用されるヘッダー。
VaryOriginCORSレスポンスの適切なキャッシュ動作を保証します。

Web IDEは、拡張機能ホストドメインのサブドメイン部分を動的に生成します。CORSヘッダーが次のルールを満たしていることを確認してください:

  • Pattern matching: パターンhttps://*.cdn.web-ide.gitlab-static.netに一致するoriginを受け入れます。
  • 検証: サブドメインには英数字のみが含まれ、52文字以下であることを確認してください。
  • セキュリティ: ワイルドカード (*) をAccess-Control-Allow-Originに使用しないでください。これはセキュリティ上のリスクをもたらします。

GitLabインスタンスのデフォルトCORS設定はこれらの要件を満たしています。GitLab Self-ManagedインスタンスがHTTPリバースプロキシサーバーの背後にある場合、またはカスタムのCORSポリシー設定を使用している場合、問題が発生する可能性があります。

オフライン環境

Web IDEは、デフォルトの拡張機能ホストドメイン (https://*.cdn.web-ide.gitlab-static.net) に接続できない場合、機能が制限されます。オフライン環境では、GitLab管理者がカスタム拡張機能ホストドメインを回避策として設定できます。

問題を報告する

問題を報告するには、次の情報を含む新しいイシューを作成します。

  • エラーメッセージ
  • エラーの完全な詳細
  • 問題が発生する頻度
  • 問題を再現する手順

有料プランをご利用の場合は、サポートにお問い合わせいただくこともできます。