diff --git a/src/docs/asciidoc/Chapter01/images/2023-09-17-13-43-06.png b/src/docs/asciidoc/Chapter01/images/2023-09-17-13-43-06.png new file mode 100644 index 0000000..a8b477c Binary files /dev/null and b/src/docs/asciidoc/Chapter01/images/2023-09-17-13-43-06.png differ diff --git a/src/docs/asciidoc/Chapter01/index.adoc b/src/docs/asciidoc/Chapter01/index.adoc index c83764e..404f3cc 100644 --- a/src/docs/asciidoc/Chapter01/index.adoc +++ b/src/docs/asciidoc/Chapter01/index.adoc @@ -163,9 +163,9 @@ TIP: Gradle は JAVA_HOME 環境変数を元に Java の実行環境を探すた #### Windows 環境の WSL2 上の Ubuntu を使う場合 -Windows は標準で WSL2 と呼ばれる Linux 仮想環境を使うことができ、仮想環境上に Ubuntu 22.04 を導入することでも執筆環境の構築が可能です。メインの執筆環境が Ubuntu や macOS の場合に、Windows 上でも WSL2 Ubuntu を使うと各種操作が統一できて便利かもしれません。 +Windows の WSL2 Linux 仮想環境上の Ubuntu 22.04 でも環境構築が可能です。メインの執筆環境が macOS や Ubuntu の場合に、Windows 上でも WSL2 Ubuntu を使うと各種操作が統一できて便利かもしれません。 -WSL2 に Ubuntu 22.04 LTS が導入済みであることを前提に、執筆環境の構築手順は次のようになります。 +WSL2 に Ubuntu 22.04 LTS が導入済みであること、Windows に VS Code が導入されていることを前提に、環境構築手順は次のようになります。 [source, bash] [caption=""] @@ -183,7 +183,9 @@ $ fc-cache -f # <4> <3> 起動シェル環境を ``UTF-8`` に設定。 <4> 念のためフォントキャッシュを更新。 -次に、通常の Ubuntu と同様に sdkman で Java 環境の導入を行います。 +NOTE: 日本語設定は後述のダイアログ表記を使う場合に図表がずれないようにするために必要です。 + +次に、通常の Ubuntu の手順と同様に sdkman で Java 環境の導入を行います。 [source, bash] [caption=""] @@ -212,7 +214,9 @@ that run on the Windows Subsystem for Linux (WSL). You get all the productivity of Windows while developing with Linux-based tools, runtimes, and utilities. ____ -拡張導入後、WSL2 Ubuntu のターミナル画面でカレントディレクトリをプロジェクトフォルダに移し、`code .` コマンドを入力することで VS Code が起動します。 +拡張導入後、一度 VS Code を終了します。 + +次に、WSL2 Ubuntu のターミナル画面でカレントディレクトリをプロジェクトフォルダに移し、`code .` コマンドを入力することで VS Code が WSL2 Ubuntu から起動します。 [source, bash] [caption=""] @@ -221,3 +225,34 @@ ____ $ cd asciidoctor-gradle-template # <1> $ code . # <2> ---- +<1> VS Code のワークスペースとして開きたいフォルダにカレントディレクトリを移動する。 +<2> ``.``（カレントディレクトリ）を指定して VS Code を起動する。 + +初回起動時は Linux 側に VS Code のサーバサイドモジュールのダウンロード処理が動作するため僅かに時間がかかります。 + +[NOTE] +==== +VS Code WSL2 拡張は Linux 側で VS Code 内部処理が、クライアント Windows 側で画面のフロントエンドが連携しながら動作するイメージです。詳細については以下のドキュメントを参照してください。 + +[quote, Developing in the Windows Subsystem for Linux with Visual Studio Code] +____ +https://code.visualstudio.com/docs/remote/wsl + +The Visual Studio Code WSL extension lets you use the Windows Subsystem for Linux (WSL) as your full-time development environment right from VS Code. You can develop in a Linux-based environment, use Linux-specific toolchains and utilities, and run and debug your Linux-based applications all from the comfort of Windows. +____ +==== + +以上で準備完了です。 + +NOTE: WSL2 環境の場合は次項以降の手順の Ubuntu 項を参照して操作してください。 + +.WSL2 Linux 環境の作業ディレクトリ +**** +WSL2 Linux 上で文書の編集などを行う作業ディレクトリは、Linux 側のホームディレクトリ（``/home/[ユーザ名]/``）配下が良いでしょう。 ``/mnt/c/`` から見える Windows 側のファイルシステムを作業フォルダとして使うこともできますが、I/O 処理速度が遅くなるため文書の変換処理のボトルネックになる場合があります。 + +なお、逆に Windows 側から Linux のファイルシステムをエクスプローラから見ることができます。WSL2 上で作成した文書を Windows 側で取得する場合にこの機能を使うと便利でしょう。 + +.Windows エクスプローラからみた WSL2 ファイルシステム +[caption="画面. "] +image::2023-09-17-13-43-06.png[pdfwidth=80%, width=80%] +**** diff --git a/src/docs/asciidoc/Chapter02/images/2023-09-17-13-30-33.png b/src/docs/asciidoc/Chapter02/images/2023-09-17-13-30-33.png new file mode 100644 index 0000000..b9a37bb Binary files /dev/null and b/src/docs/asciidoc/Chapter02/images/2023-09-17-13-30-33.png differ diff --git a/src/docs/asciidoc/Chapter02/index.adoc b/src/docs/asciidoc/Chapter02/index.adoc index 10a8ae1..b31faf8 100644 --- a/src/docs/asciidoc/Chapter02/index.adoc +++ b/src/docs/asciidoc/Chapter02/index.adoc @@ -136,6 +136,10 @@ NOTE: 拡張機能の推奨は ``.vscode/extention.json`` で設定されてい . btn:[すべてインストール] ボタンをクリックします。 + image::vscode-extention1.png[vscode, pdfwidth=50%] ++ +WSL2 Ubuntu 環境を使っている場合は合わせて WSL2 側にも拡張の導入を行います。 ++ +image::2023-09-17-13-30-33.png[pdfwidth=60%, width=60%] . btn:[再読み込み] ボタンをクリックします。 + @@ -146,6 +150,8 @@ image::vscode-extention2.png[vscode, pdfwidth=50%] + image::vscode-asciidoc.png[vscode, 600] +WSL2 Ubuntu からの VS Code 起動後、推奨拡張として導入される Asciidoc 拡張などを次の形で WSL2 側にもインストールしてください。 + ==== クリップボードからの画像挿入 本手順で VS Code の推奨拡張として導入される https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image[Paste Image]（``mushan.vscode-paste-image``） は、クリップボード上にある画像をファイルとして指定の位置に格納した上で、Asciidoc 文書にリンクを挿入する便利な拡張です。