LabEx VM WebIDE インターフェース

​

WebIDE プレビュー

1. さまざまなプログラミング言語 (Java、JavaScript、Python など) でのコードの記述とデバッグ
2. ライブプレビュー機能を備えた Web 開発プロジェクトについては、WebIDE で最初の HTML ページを作成する を参照してください。
3. 直感的なインターフェースを介したプロジェクトファイルとディレクトリの管理
4. コマンドラインタスク用の統合ターミナル操作

​

環境レイアウト

1. 左サイドバー:
   • プロジェクトナビゲーション用のファイルエクスプローラー
   • 検索機能
   • Git 操作用のソース管理
   • 拡張機能パネル
2. エディター領域：メインコーディングワークスペース
3. 下部パネル：ターミナル、問題、および出力
4. ステータスバー: 設定とライブプレビューへのクイックアクセス
5. 上部メニューバー: ファイル、編集、表示、およびその他のオプション

​

ターミナルへのアクセス

1. 左下の隅にある アイコンをクリックし、ターミナルタブに切り替えます。
2. 上部メニューを使用します：ターミナル > 新しいターミナル

​

HTML のプレビュー

1. WebIDE で、右下の「Go Live」ボタンをクリックします。
2. HTML ページがレンダリングされた新しいブラウザタブが開きます。
3. または、「Web 8080」タブをクリックしてプレビューを開くこともできます。
4. プロジェクトがサブディレクトリにある場合は、エクスプローラーでサブディレクトリ名をクリックしてアクセスできます。すると、そのディレクトリの index.html ファイルが自動的にプレビューされます。
5. プロジェクトに index.html を含む複数の HTML ファイルがある場合は、ファイル名を URL に追加して直接プレビューできます。たとえば、https://xxx.labex.io/another-file.html です。
6. 「新しいタブで開く」ボタンをクリックして、プレビューを新しいタブで開くことができます。新しいブラウザタブでプレビューが開きます。

• Web サーバーを起動します
• コードを変更するとリアルタイムで更新を提供します

ヒント：LabEx VM はポート 8080 でプレビューをホストします。他の人とプレビューリンクを共有して、作業を紹介できます。ラボ VM が停止すると、プレビューリンクは機能しなくなります。

​

使用シナリオ

Java 開発サンプル

Your First Java Lab

これは、LabEx WebIDE を使用して、シンプルな Java プログラムを記述、コンパイル、実行する方法を示す Java ラボのサンプルです。

WebIDE での Java プロジェクトの操作：

1. エクスプローラーから新しい Java ファイルを作成します
2. 構文の強調表示を使用して Java コードを記述します
3. ターミナルでコンパイルして実行します。

Copy

javac MyClass.java
java MyClass

4. コンパイルエラーと警告をリアルタイムで表示します

Web 開発サンプル

Your First HTML Lab

これは、LabEx WebIDE を使用してシンプルな Web ページを作成する方法を示す HTML ラボのサンプルです。

フロントエンド開発タスクの場合：

1. HTML、CSS、および JavaScript ファイルを作成します
2. 右下の「Go Live」ボタンをクリックします
3. Web ページにアクセスするには：
   • LabEx VM の上部にある Web 8080 タブ
   • • ボタンを使用して新しいポートプレビュータブを作成します

注：プロジェクトは LabEx サーバー上のパブリック URL に自動的にデプロイされるため、Web タブからアクセスできます。

Python 開発サンプル

Create an Astronaut Name Tag Processor

これは、LabEx WebIDE を使用して宇宙飛行士の名前を処理する方法を示す Python チャレンジのサンプルです。

Python プログラミングの場合：

1. エクスプローラーで Python ファイルを作成します
2. 次の機能を使用して Python コードを記述します。
   • 構文の強調表示
   • コード補完
   • エラー検出
3. ターミナルでスクリプトを実行します。

Copy

python3 script.py

4. 統合デバッガーを使用してステップバイステップで実行します

​

よくある質問

Web アプリケーションにアクセスするにはどうすればよいですか？

LabEx VM は、Web プロジェクトを自動的にデプロイします。

1. デフォルトポート 8080:
   • LabEx VM の上部にある「Web 8080」タブをクリックします
   • アプリケーションはパブリック URL を介してアクセスできるようになります
2. カスタムポート：
   • • ボタンをクリックして、新しいポートプレビュータブを作成します
   • 各ポートには独自のパブリック URL があります
   • 複数のサービス (フロントエンドとバックエンドなど) を実行する場合に便利です

注：ローカル開発とは異なり、LabEx はクラウドで実行されるため、localhost に直接アクセスすることはありません。

重要なキーボードショートカットは何ですか？

WebIDE の一般的なショートカット：

• ファイル操作
  • 新規ファイル：Ctrl+N
  • 保存：Ctrl+S
  • 検索：Ctrl+F
  • 置換：Ctrl+H
• パネルコントロール
  • サイドバーの切り替え：Ctrl+B
  • ターミナルの切り替え：Ctrl+`
  • コマンドパレット：Ctrl+Shift+P
• エディター機能
  • マルチカーソル：Alt+ クリック
  • すべての出現箇所を選択：Ctrl+Shift+L
  • ドキュメントのフォーマット：Shift+Alt+F

追加のツールやパッケージをインストールできますか？

はい、Ubuntu パッケージマネージャーを使用して追加のツールをインストールできます。

Copy

sudo apt update
sudo apt install package-name

言語固有のパッケージマネージャーの場合：

• Node.js/npm:

Copy

npm install package-name

• Python/pip:

Copy

pip install package-name

インストールは一時的であり、セッションが終了するとリセットされることに注意してください。

ファイルのアップロードとダウンロードを処理するにはどうすればよいですか？

WebIDE には、ファイルを管理するためのいくつかの方法があります。

1. ファイルのアップロード:
   • ファイルをエクスプローラーにドラッグアンドドロップします
   • エクスプローラーを右クリックした後、アップロード/ダウンロードを使用します
   
2. ファイルのダウンロード:
   • エクスプローラーでファイルを右クリックします
   • 「ダウンロード」を選択します
3. コピー/貼り付け:
   • テキストコンテンツは、ローカルマシンと WebIDE 間で直接コピーできます
   • バイナリファイルは、アップロード/ダウンロード機能を使用する必要があります

すべてのファイルは一時的であり、セッションが終了すると失われることに注意してください。