Web IDE

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

ファイルを管理する

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

ファイルを開く

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

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

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

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

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

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

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

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

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

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

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の左側で、Source Control（ソース管理） ( ) を選択するか、Control+Shift+Gを押します。

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

ブランチを切り替える

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

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

ブランチを作成する

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

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

Web IDEは、チェックアウトされたブランチをベースとしてブランチを作成します。または、次の手順に従って、別のベースからブランチを作成することもできます:

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

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

ブランチの削除

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

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

変更をコミットする

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

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

コミットして強制プッシュ

変更をコミットして強制プッシュするには、次の手順に従います:

1. アクションボタンメニューを選択するか、省略記号（ ）を選択します。
2. Commit and Force push（コミットして強制プッシュ）を選択します。

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

最後のコミットを修正して強制プッシュするには、次の手順に従います:

1. アクションボタンメニューを選択するか、省略記号（ ）を選択します。
2. Amend commit and Force push（コミットを修正して強制プッシュ）を選択します。

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

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

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

1. 変更をコミットします。
2. 右下に表示される通知で、Create MR（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（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. 次のチェックボックスをオンまたはオフにします:
   • 設定
   • キーボードショートカット
   • User snippets（ユーザースニペット）
   • User tasks（ユーザータスク）
   • UI state（UIの状態）
   • Extensions（拡張機能）
   • Profiles（プロファイル）

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

見逃した通知を表示する

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

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

拡張機能を管理する

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

前提要件:

• ユーザー設定で、拡張機能マーケットプレースを統合する必要があります。
• GitLab Self-ManagedおよびGitLab Dedicatedの場合、GitLab管理者が拡張機能レジストリを有効にする必要があります。
• エンタープライズユーザーの場合、グループオーナーがエンタープライズユーザー向けに拡張機能マーケットプレースを有効にする必要があります。

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

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

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

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

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

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

拡張機能のセットアップ

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

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

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

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

AsciiDocのサポート

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

関連トピック

• Web IDEのGitLab Duo Chat

トラブルシューティング

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

入力時の文字オフセット

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

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

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

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

前提要件:

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

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（GitLab Web IDE）で、編集を選択します。
4. OAuthコールバックURLを入力します。複数のURLを改行で区切って入力できます。

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

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

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

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

Workhorseの依存関係

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）設定が必要です。Web IDEをサポートするには、GitLab APIエンドポイント（/api/*）に次のHTTPレスポンスヘッダーが含まれている必要があります:

Web IDE originのサブドメイン部分は動的に生成されるため、CORS設定は次のようになっている必要があります:

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

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

エアギャップ環境またはオフライン環境

Web IDEは、ユーザーのWebブラウザがhttps://*.cdn.web-ide.gitlab-static.net外部アセットホストに接続できないエアギャップ環境またはオフライン環境では、拡張機能マーケットプレースとWebビューを無効にします。Web IDEは、オーナーのデータを保護するために、サンドボックス化された環境で、VS Code拡張機能およびWebビューからのサードパーティコードを実行するために、外部アセットホストを使用します。

Web IDEエンジニアリングチームは、今後、エアギャップ環境のサポートを向上させる予定です。このエピックで最新の開発状況を追跡できます。

問題を報告する

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

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

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