Web IDE

Web IDE エディターは、コミットステージングを備えた高度なエディターを提供することで、プロジェクトへの変更をより速く簡単に貢献します。

Web IDEを開く

Web IDE は、ファイルを表示しているとき、リポジトリのファイルリストから、マージリクエストから開くことができます。

Open Web IDE

ファイル検索

GitLabCore10.8 で導入されました。

ファイルファインダーを使用すると、現在のブランチ内のファイルを検索してすばやく開くことができます。 ファイルファインダーは、キーボードショートカットCommand-p、Control-p、またはt （エディターにフォーカスがない場合）を使用して起動します。 ファイル名またはファイルパスの断片を入力すると、結果が表示されます。

シンタックスハイライト

IDE に期待されるように、Web IDE 内の多くの言語のシンタックスハイライトにより、直接の編集がさらに簡単になります。

現在、Web IDEは以下の機能を提供しています：

  • XML、PHP、C#、C++、Markdown、Java、VB、Batch、Python、Ruby、Objective-Cなど、さまざまなプログラミング言語、スクリプト言語、マークアップ言語の基本構文のカラー化。
  • TypeScript、JavaScript、CSS、LESS、SCSS、JSON、HTMLなど。

Web IDE はMonaco Editorをベースにしているため、サポートされている言語の完全なリストはMonaco languagesリポジトリにあります。 Monaco はシンタックスハイライトにMonarchライブラリを使用しています。

もし、Syntax Highlightingのサポートがない言語があれば、Syntax Highlightingのサポートを追加する方法を簡単に説明します。

注：単一ファイル編集はエースエディターに基づいています。

テーマ

GitLabがシンタックスハイライトのためにサポートしているすべてのテーマは、Web IDEのコードエディタに追加されています。プロファイルの環境設定からテーマを選ぶことができます。

テーマは Web IDE ファイルエディターでのみ使用できます。ただし、ダークテーマと ソラリゼーションダークテーマはWeb IDE 画面全体に適用されます。

ソーラーライトのテーマ ソラライズダークテーマ ダークテーマ
Solarized Light Theme Solarized Dark Theme Dark Theme

Web IDEの設定

GitLabCore13.1 で導入されました。

Web IDE は、.editorconfig ファイルを使用することで、特定のエディター設定の構成をサポートしています。 ファイルを開くとき、Web IDE は現在のディレクトリとすべての親ディレクトリで.editorconfig という名前のファイルを探します。設定ファイルが見つかり、そのファイルのパスに一致する設定がある場合、これらの設定は開かれたファイルに適用されます。

Web IDE は現在、以下の.editorconfig 設定をサポートしています：

  • indent_style
  • indent_size
  • end_of_line
  • trim_trailing_whitespace
  • tab_width
  • insert_final_newline

変更をコミット

  • GitLab Ultimate10.4から導入されました。
  • 10.7でGitLab Coreに移行しました。
  • GitLab12.7以降では、ファイルは自動的にステージされるようになりました。
  • GitLab 12.9以降では、ステージされていないデータの損失を防ぐためにステージングファイルのサポートが削除されました。 現在のすべての変更は、必然的にコミットされるか破棄されなければなりません。

変更後、左下のCommitボタンをクリックして、変更したファイルのリストをレビューします。

変更が確定したら、コミットメッセージを追加して変更をコミットし、直接マージリクエストを作成することができます。 選択したブランチへの書き込み権限がない場合は警告が表示されますが、新しいブランチを作成してマージリクエストを開始することはできます。

特定のファイルの変更を破棄するには、変更タブでそのファイルの変更破棄ボタンをクリックします。 すべての変更を破棄するには、変更サイドバーの右上にあるゴミ箱アイコンをクリックします。

Commit changes

変更点のレビュー

変更をコミットする前に、レビュアーモードに切り替えるか、変更一覧からファイルを選択することで、前回のコミットと比較することができます。

マージリクエストを開くと、変更をコミットした場合にマージリクエストの差分のプレビューを表示する、追加のレビュアーモードが利用できます。

CIジョブログの表示

GitLab Core11.0 で導入されました。

Web IDE でブランチやマージリクエストを開き、失敗したジョブのログを開くことで、失敗したテストをすばやく修正できます。 右上のパイプラインボタンをクリックすると、最新のパイプラインのすべてのジョブのステータスと、現在のコミットのジョブのトレースにアクセスできます。

パイプラインの状態は、左下のステータスバーにも常に表示されます。

マージリクエストの切り替え

GitLab Core11.0 で導入されました。

作成者と割り当てられたマージリクエストを切り替えるには、サイドバー上部のドロップダウンをクリックし、マージリクエストのリストを開きます。 別のマージリクエストに切り替える前に、すべての変更をコミットまたは破棄する必要があります。

ブランチの切り替え

GitLabCore11.2 で導入されました。

現在のプロジェクトリポジトリのブランチを切り替えるには、サイドバー上部のドロップダウンをクリックしてブランチのリストを開きます。 別のブランチに切り替える前に、すべての変更をコミットするか破棄する必要があります。

マークダウン編集

Web IDEでMarkdownファイルを編集するとき、ファイルエディタの上にあるPreview Markdownタブをクリックすると、変更内容をプレビューすることができます。 MarkdownプレビューはGitLab Flavored Markdownをサポートしています。

また、Markdownファイルに直接貼り付けることで、任意のローカル画像をアップロードすることもできます。画像は同じディレクトリにアップロードされ、デフォルトではimage.png という名前になります。同じ名前のファイルがすでに存在する場合、ファイル名に数字の接尾辞が自動的に追加されます。

ライブ・プレビュー

Web IDE を使用して、ブラウザで JavaScript プロジェクトをプレビューできます。 この機能は CodeSandbox を使用して、Web アプリケーションのプレビューに使用する JavaScript をコンパイルおよびバンドルします。

Web IDE Live Preview

さらに、公開プロジェクトの場合は、CodeSandboxで開くボタンが利用でき、プロジェクトの内容をCodeSandboxの公開プロジェクトに転送して、プロジェクトを他の人とすばやく共有することができます。

ライブプレビューの有効化

ライブプレビュー機能はGitLabインスタンスの管理設定で有効にする必要があります。 ライブプレビューはGitLab.comのすべてのプロジェクトで有効になっています。

Admin Live Preview setting

これを行うと、Web IDE 内でpackage.json ファイルとmain エントリポイントを持つプロジェクトをプレビューできます。package.json の例を以下に示します。 

{
  "main": "index.js",
  "dependencies": {
    "vue": "latest"
  }
}

ウェブIDEのための対話型ウェブ端末

警告：Web IDE用のインタラクティブWebターミナルは現在ベータ版です。 共有ランナーはまだインタラクティブWebターミナルをサポートしていませんので、この機能を使うにはあなた自身の非公開ランナーを使う必要があります。

インタラクティブWebターミナルは、プロジェクトメンテナーユーザーがターミナルにアクセスし、Web IDEを通してなど、GitLabから直接Runnerと対話できるようにします。

ランナーの構成

対話型ウェブターミナルを動作させるには、ランナーでいくつかの設定を行う必要があります：

  • ランナーは、[session_server] が適切に設定されている必要があります。。このセクションでは、少なくともsession_timeout 値（デフォルトは1800秒）とlisten_address 値が必要です。advertise_address が定義されていない場合、listen_address が使用されます。
  • GitLab インスタンスでリバースプロキシを使っている場合は、ウェブターミナルを有効にする必要があります。

ターミナルを開いていて、ジョブがタスクを終了した場合、ターミナルウィンドウを閉じるまで、[session_server].session_timeoutで設定された時間、ターミナルはジョブの終了をブロックします。

注：すべてのexecutorがサポートされているわけではありません。File Sync機能はKubernetes runnerでのみサポートされています。

Web IDE 設定ファイル

Web IDE 端末を有効にするには、リポジトリのルート内部に.gitlab/.gitlab-webide.yml というファイルを作成する必要があります。このファイルはCI 設定ファイルの構文とよく似ていますが、いくつかの制限があります：

  • グローバルブロックは定義できません（例：before_script またはafter_script）。
  • このファイルには、terminal という名前のジョブを1つだけ追加できます。
  • ジョブの設定に使用できるのは、image、services、tags、before_script、script、variables のキーワードのみです。
  • 対話型ターミナルに接続するには、terminal ジョブがまだ生きていて、実行中でなければなりません。そうでなければ、ターミナルはジョブのセッションに接続できません。 デフォルトでは、script キーワードは、ジョブが終了して Web IDE が接続するのに十分な時間を与えるのを防ぐために、sleep 60 という値になっています。 つまり、デフォルトのscript の値を上書きする場合は、sleepのようにジョブを実行し続けるコマンドを追加する必要があります。

以下のコードに、この設定ファイルの例があります： 

terminal:
  # This can be any image that has the necessary runtime environment for your project.
  image: node:10-alpine
  before_script:
    - apt-get update
  script: sleep 60
  variables:
    RAILS_ENV: "test"
    NODE_ENV: "test"

ターミナルが起動すると、コンソールが表示され、プロジェクトのリポジトリファイルにアクセスできるようになります。

重要ターミナルのジョブはブランチに依存します。 つまり、ターミナルのトリガーと設定に使用される設定ファイルは、Web IDE の選択されたブランチにあるものになります。

ブランチに設定ファイルがない場合、エラーメッセージが表示されます。

Web IDE での対話型ターミナルの実行

インタラクティブターミナルが現在のユーザーで利用可能な場合、Web IDE の右サイドバーにターミナルボタンが表示されます。 このボタンをクリックすると、ターミナルタブを開いたり閉じたりできます。

このタブが開くと、[Web Terminal の開始] ボタンが表示されます。 環境が正しく設定されていない場合、このボタンが無効になることがあります。 その場合、ステータスメッセージにイシューが表示されます。Web Terminal の開始]が無効になる理由は次のとおりです：

  • .gitlab/.gitlab-webide.yml が存在しないか、正しく設定されていません。
  • プロジェクトに参加できる非公開ランナーはいません。

アクティブの場合、[Start Web Terminal]（ウェブターミナルの開始）ボタンをクリックすると、ターミナルビューがロードされ、ランナーのターミナルへの接続が開始されます。ターミナル]タブはいつでも閉じて再度開くことができ、ターミナルの状態に影響はありません。

ターミナルが起動し、runnerに正常に接続されると、runnerのシェルプロンプトがターミナルに表示されます。 ここから、runnerの環境内で実行されるコマンドを入力することができます。 これは、ローカルターミナルまたはSSH経由でコマンドを実行するのと似ています。

ターミナルの実行中に、[ターミナルの停止] をクリックしてターミナルを停止することができます。 これにより、ターミナルが切断され、runnerのターミナルジョブが停止します。 ここから、[ターミナルの再起動] をクリックして、新しいターミナルセッションを開始します。

ウェブ端末へのファイル同期

Web IDE でのファイルの変更は、実行中の Web ターミナルに同期できます。 これにより、ユーザーは設定済みのターミナル環境でコードの変更をテストできます。

注：Web IDEでのファイル変更のみがターミナルに同期されます。 ターミナルでの変更はWeb IDEには同期されません。 この機能はKubernetes Runnerでのみ利用可能です。

ウェブ端末へのファイル同期を有効にするには、.gitlab/.gitlab-webide.ymlファイルにwebide-file-sync サービスを設定する必要があります。以下は、このサービスを使用する Node JS プロジェクトの設定例です： 

terminal:
  # This can be any image that has the necessary runtime environment for your project.
  image:
    name: node:10-alpine
  services:
    - name: registry.gitlab.com/gitlab-org/webide-file-sync:latest
      alias: webide-file-sync
      entrypoint: ["/bin/sh"]
      command: ["-c", "sleep 5 && ./webide-file-sync -project-dir $CI_PROJECT_DIR"]
      ports:
        # The `webide-file-sync` executable defaults to port 3000.
        - number: 3000
  • webide-file-sync 、プロジェクト・ディレクトリが利用可能になった後に実行ファイルを開始する必要があります。 このため、commandにsleep 5 を追加する必要があります。 詳しくはイシューをご覧ください。
  • $CI_PROJECT_DIR は GitLab Runner 用の定義済み環境変数です。 ここにプロジェクトのリポジトリが置かれます。

ファイル同期用に Web ターミナルを設定すると、Web ターミナルが起動したときに、ステータスバーにターミナルステータスが表示されます。

Web IDE Client Side Evaluation

Web IDE 経由でファイルに加えた変更は、実行中のターミナルに同期されます：

  • ファイル編集中に Ctrl +S (Mac ではCmd +S ) を押します。
  • ファイルエディタ外のものは、ファイル編集後にクリックされます。
  • ファイルやフォルダの作成、削除、名前の変更。

制限事項

インタラクティブターミナルはベータ版であり、今後のリリースで改良される予定です。 その間、一度にアクティブなターミナルは1つに制限されます。

トラブルシューティング

  • ターミナルのテキストが灰色で無反応の場合、ターミナルは停止しており、もはや使用できません。 停止したターミナルは、[ターミナルの再起動] をクリックして再起動できます。
  • ターミナルがConnection Failureと表示した場合、ターミナルはrunnerに接続できませんでした。 ターミナルを停止して再起動してください。 問題が解決しない場合は、runnerの設定を再度確認してください。