Skip to content

Commit dbc8800

Browse files
committed
docs(readme): modify Quick Start item
1 parent e420e1e commit dbc8800

File tree

4 files changed

+95
-14
lines changed

4 files changed

+95
-14
lines changed

README.md

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ The sample is in python, but other images are also possible.
1919
- [Table of Contents](#table-of-contents)
2020
- [Prerequisites](#prerequisites)
2121
- [Quick Start](#quick-start)
22+
- [If you are using an editor other than VS code](#if-you-are-using-an-editor-other-than-vs-code)
23+
- [VS code User](#vs-code-user)
2224
- [Make usage](#make-usage)
2325
- [Directory structure](#directory-structure)
2426
- [License](#license)
@@ -32,6 +34,8 @@ Required
3234

3335
(Required to display Docker GUI on windows)
3436

37+
- git
38+
3539
- [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
3640
(Build any environment with virtual containers)
3741

@@ -48,12 +52,48 @@ Optional
4852
Otherwise, the wslg directory will not be mounted correctly and the GUI will not
4953
be displayed.
5054

51-
Run the following command.
55+
---
56+
57+
### If you are using an editor other than VS code
58+
59+
Step 1: Run the following command.
5260

5361
```bash
54-
git clone
62+
git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
63+
cd docker-wslg-gui-template
5564
```
5665

66+
Step2: Enter the following command and then enter the container created.
67+
68+
```bash
69+
make compose
70+
```
71+
72+
---
73+
74+
### VS code User
75+
76+
Step 1: Run the following command.
77+
78+
```bash
79+
git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
80+
cd docker-wslg-gui-template
81+
code .
82+
```
83+
84+
Step 2: Click on the WSL: `<Linux name>` icon in the lower left corner.
85+
86+
<p align="center">
87+
<img src="./docs/images/WSL-button.png" alt="wsl-ubuntu" height="300" width="800"/>
88+
</p>
89+
90+
Step 3: Select the item `Reopen in Container` from the palette that appears in
91+
the center.
92+
93+
<p align="center">
94+
<img src="./docs/images/remote-container.png" alt="wsl-ubuntu" height="300" width="800"/>
95+
</p>
96+
5797
## Make usage
5898

5999
| Command | Description |
@@ -82,6 +122,7 @@ docker-wslg-gui-template
82122
| └── devcontainer.json
83123
├── .editorconfig
84124
├── .github
125+
| ├── dependabot.yml
85126
| └── workflows
86127
| └── ci.yml
87128
├── docker

docs/i18n/jp/README.md

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,14 @@ Docker + WSLg + devcontainer.json + Pythonのテンプレートです。
1717
- [Docker + WSLg GUI-Template](#docker--wslg-gui-template)
1818
- [概要](#概要)
1919
- [目次](#目次)
20-
- [クイックスタート](#クイックスタート)
2120
- [前提条件](#前提条件)
21+
- [クイックスタート](#クイックスタート)
22+
- [VS code以外のエディタをお使いの場合](#vs-code以外のエディタをお使いの場合)
23+
- [VS codeをお使いの場合](#vs-codeをお使いの場合)
2224
- [Make の使い方](#make-の使い方)
2325
- [ディレクトリ構造](#ディレクトリ構造)
2426
- [ライセンス](#ライセンス)
2527

26-
## クイックスタート
27-
28-
<font color=red>警告:</font> **必ずWSLのディレクトリ内で実行**してください。
29-
でないと正しくwslgディレクトリが正しくマウントされず、GUIが表示できません。
30-
31-
Run the following command.
32-
33-
```bash
34-
git clone
35-
```
36-
3728
## 前提条件
3829

3930
必須
@@ -43,6 +34,8 @@ git clone
4334

4435
(WindowsでDockerのGUIを表示するために必要)
4536

37+
- git
38+
4639
- [Docker Desktop for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows)
4740
(仮想コンテナーによる任意の環境構築のため)
4841

@@ -53,6 +46,52 @@ git clone
5346
- 拡張機能
5447
[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
5548

49+
## クイックスタート
50+
51+
<font color=red>警告:</font> **必ずWSLのディレクトリ内で実行**してください。
52+
でないと正しくwslgディレクトリが正しくマウントされず、GUIが表示できません。
53+
54+
---
55+
56+
### VS code以外のエディタをお使いの場合
57+
58+
Step 1: 以下のコマンドを実行します。
59+
60+
```bash
61+
git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
62+
cd docker-wslg-gui-template
63+
```
64+
65+
Step2: 以下のコマンドを実行後、作成されたコンテナに入ってください。
66+
67+
```bash
68+
make compose
69+
```
70+
71+
---
72+
73+
### VS codeをお使いの場合
74+
75+
Step 1: 以下のコマンドを実行します。
76+
77+
```bash
78+
git clone https://github.com/SARDONYX-sard/docker-wslg-gui-template.git
79+
cd docker-wslg-gui-template
80+
code .
81+
```
82+
83+
Step 2: 左下のWSL: `<Linux name>`というアイコンをクリックします。
84+
85+
<p align="center">
86+
<img src="../../images/WSL-button.png" alt="wsl-ubuntu" height="300" width="800"/>
87+
</p>
88+
89+
Step 3: 中央に現れたパレットから`Reopen in Container`というを項目を選択します。
90+
91+
<p align="center">
92+
<img src="../../images/remote-container.png" alt="wsl-ubuntu" height="300" width="800"/>
93+
</p>
94+
5695
## Make の使い方
5796

5897
| コマンド | 説明 |
@@ -78,6 +117,7 @@ docker-wslg-gui-template
78117
| └── devcontainer.json
79118
├── .editorconfig
80119
├── .github
120+
| ├── dependabot.yml
81121
| └── workflows
82122
| └── ci.yml
83123
├── docker

docs/images/WSL-button.png

1.41 MB
Loading

docs/images/remote-container.png

1.43 MB
Loading

0 commit comments

Comments
 (0)