- Web IDEを開く
- ファイル検索
- シンタックスハイライト
- Web IDEの設定
- 変更をコミット
- 変更点のレビュー
- CIジョブログの表示
- マージリクエストの切り替え
- ブランチの切り替え
- マークダウン編集
- ライブ・プレビュー
- ウェブIDEのための対話型ウェブ端末
Web IDE
- GitLab Ultimate10.4から導入されました。
- 10.7でGitLab Coreに移行しました。
Web IDE エディターは、コミットステージングを備えた高度なエディターを提供することで、プロジェクトへの変更をより速く簡単に貢献します。
Web IDEを開く
Web IDE は、ファイルを表示しているとき、リポジトリのファイルリストから、マージリクエストから開くことができます。
ファイル検索
ファイルファインダーを使用すると、現在のブランチ内のファイルを検索してすばやく開くことができます。 ファイルファインダーは、キーボードショートカット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 画面全体に適用されます。
ソーラーライトのテーマ | ソラライズダークテーマ | ダークテーマ |
---|---|---|
![]() | ![]() | ![]() |
Web IDEの設定
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ボタンをクリックして、変更したファイルのリストをレビューします。
変更が確定したら、コミットメッセージを追加して変更をコミットし、直接マージリクエストを作成することができます。 選択したブランチへの書き込み権限がない場合は警告が表示されますが、新しいブランチを作成してマージリクエストを開始することはできます。
特定のファイルの変更を破棄するには、変更タブでそのファイルの変更破棄ボタンをクリックします。 すべての変更を破棄するには、変更サイドバーの右上にあるゴミ箱アイコンをクリックします。
変更点のレビュー
変更をコミットする前に、レビュアーモードに切り替えるか、変更一覧からファイルを選択することで、前回のコミットと比較することができます。
マージリクエストを開くと、変更をコミットした場合にマージリクエストの差分のプレビューを表示する、追加のレビュアーモードが利用できます。
CIジョブログの表示
Web IDE でブランチやマージリクエストを開き、失敗したジョブのログを開くことで、失敗したテストをすばやく修正できます。 右上のパイプラインボタンをクリックすると、最新のパイプラインのすべてのジョブのステータスと、現在のコミットのジョブのトレースにアクセスできます。
パイプラインの状態は、左下のステータスバーにも常に表示されます。
マージリクエストの切り替え
作成者と割り当てられたマージリクエストを切り替えるには、サイドバー上部のドロップダウンをクリックし、マージリクエストのリストを開きます。 別のマージリクエストに切り替える前に、すべての変更をコミットまたは破棄する必要があります。
ブランチの切り替え
現在のプロジェクトリポジトリのブランチを切り替えるには、サイドバー上部のドロップダウンをクリックしてブランチのリストを開きます。 別のブランチに切り替える前に、すべての変更をコミットするか破棄する必要があります。
マークダウン編集
Web IDEでMarkdownファイルを編集するとき、ファイルエディタの上にあるPreview Markdownタブをクリックすると、変更内容をプレビューすることができます。 MarkdownプレビューはGitLab Flavored Markdownをサポートしています。
また、Markdownファイルに直接貼り付けることで、任意のローカル画像をアップロードすることもできます。画像は同じディレクトリにアップロードされ、デフォルトではimage.png
という名前になります。同じ名前のファイルがすでに存在する場合、ファイル名に数字の接尾辞が自動的に追加されます。
ライブ・プレビュー
Web IDE を使用して、ブラウザで JavaScript プロジェクトをプレビューできます。 この機能は CodeSandbox を使用して、Web アプリケーションのプレビューに使用する JavaScript をコンパイルおよびバンドルします。
さらに、公開プロジェクトの場合は、CodeSandboxで開くボタンが利用でき、プロジェクトの内容をCodeSandboxの公開プロジェクトに転送して、プロジェクトを他の人とすばやく共有することができます。
ライブプレビューの有効化
ライブプレビュー機能はGitLabインスタンスの管理設定で有効にする必要があります。 ライブプレビューはGitLab.comのすべてのプロジェクトで有効になっています。
これを行うと、Web IDE 内でpackage.json
ファイルとmain
エントリポイントを持つプロジェクトをプレビューできます。package.json
の例を以下に示します。
{
"main": "index.js",
"dependencies": {
"vue": "latest"
}
}
ウェブIDEのための対話型ウェブ端末
- GitLab Ultimate11.6で導入されました。
- 13.1でGitLab Coreに移動しました。
インタラクティブWebターミナルは、プロジェクトメンテナーユーザーがターミナルにアクセスし、Web IDEを通してなど、GitLabから直接Runnerと対話できるようにします。
ランナーの構成
対話型ウェブターミナルを動作させるには、ランナーでいくつかの設定を行う必要があります:
- ランナーは、
[session_server]
が適切に設定されている必要があります。。このセクションでは、少なくともsession_timeout
値(デフォルトは1800秒)とlisten_address
値が必要です。advertise_address
が定義されていない場合、listen_address
が使用されます。 - GitLab インスタンスでリバースプロキシを使っている場合は、ウェブターミナルを有効にする必要があります。
ターミナルを開いていて、ジョブがタスクを終了した場合、ターミナルウィンドウを閉じるまで、[session_server].session_timeout
で設定された時間、ターミナルはジョブの終了をブロックします。
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のターミナルジョブが停止します。 ここから、[ターミナルの再起動] をクリックして、新しいターミナルセッションを開始します。
ウェブ端末へのファイル同期
- GitLab Ultimate12.0から導入されました。
- 13.1でGitLab Coreに移動しました。
Web IDE でのファイルの変更は、実行中の Web ターミナルに同期できます。 これにより、ユーザーは設定済みのターミナル環境でコードの変更をテストできます。
ウェブ端末へのファイル同期を有効にするには、.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 経由でファイルに加えた変更は、実行中のターミナルに同期されます:
- ファイル編集中に Ctrl +S (Mac ではCmd +S ) を押します。
- ファイルエディタ外のものは、ファイル編集後にクリックされます。
- ファイルやフォルダの作成、削除、名前の変更。
制限事項
インタラクティブターミナルはベータ版であり、今後のリリースで改良される予定です。 その間、一度にアクティブなターミナルは1つに制限されます。
トラブルシューティング
- ターミナルのテキストが灰色で無反応の場合、ターミナルは停止しており、もはや使用できません。 停止したターミナルは、[ターミナルの再起動] をクリックして再起動できます。
- ターミナルがConnection Failureと表示した場合、ターミナルはrunnerに接続できませんでした。 ターミナルを停止して再起動してください。 問題が解決しない場合は、runnerの設定を再度確認してください。