VSCode+MPEセットアップ手順書

<!-- Qiita向け修正
---
puppeteer:
    format: "a4"
    landscape: false
    printBackground: true
    margin:
        top:    12.7mm
        bottom: 12.7mm
        left:   12.7mm
        right:  12.7mm
---

# VSCode+MPEセットアップ手順書
Qiita向け修正 -->
# 0. はじめに
    
個人環境にMarkdown Preview Enhancedをセットアップしてみたところ、
妙なところに癖があって手間取ったので手順を書き残しておくことにしました。
先達の投稿には感謝です。
<!-- Qiita向け修正 -->

# 1. Markdown Preview Enhancedのすゝめ

こちらの記事から引用しています。
[Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う (2017-10月時点) #VSCode - Qiita](https://qiita.com/kitfactory/items/2fde799fa092f0d8f0f1)

## 1.1 Markdownのメリット

- テキスト形式のため、とにかく編集が簡単。
- テキスト形式なので、GitHubのプルリクエスト形式やGitLabのマージリクエストのプロセスに馴染みやすく、ここ、間違ってない？と誰かが修正することも容易。
- テキスト形式のため、変更差分の管理が容易である。
- テキスト形式のため、各種プログラムによる処理／自働化に馴染みやすい。

## 1.2 Markdown Preview Enhancedで出来るようになること

- 様々なUML図を描画する。(PlantUML連携)

<div style="float: left; width: 100%;">
<div style="float: left; width: 50%;">

```plantuml
@startuml シーケンス図
    title シーケンス図

    actor Foo
        activate Foo
        activate Bar
    Foo --> Bar: barMethod
        activate Baz
    Bar --> Baz: bazMethod
    Bar <-- Baz: responce
        deactivate Baz
    Foo <-- Bar: responce
        deactivate Bar
@enduml
```

<script> /* Qiita向け削除
</div><!-- float: left; width: 50%; -->
<div style="float: left; width: 50%;">
Qiita向け削除 */ </script>

```plantuml
@startuml アクティビティ図
    title アクティビティ図

    (*) --> Foo
    -> Bar
    if Bar? then
        ->[ok] Baz
        --> ==B1==
    else
        ->[no] Qux
        --> ==B1==
    endif
    -->(*)
@enduml
```

</div><!-- float: left; width: 50%; -->
</div><!-- float: left; width: 100%; -->

<div style="break-before: page;"></div>

<div style="float: left; width: 100%;">
<div style="float: left; width: 50%;">

```plantuml
@startuml ステート図
    title ステート図

    [*] --> Foo
    Foo -> Bar: disable
    Foo <- Bar: enable
    Foo --> Baz: close
    Bar --> Baz: close
    Baz --> [*]
@enduml
```

<script> /* Qiita向け削除
</div><!-- float: left; width: 50%; -->
<div style="float: left; width: 50%;">
Qiita向け削除 */ </script>

```plantuml
@startuml クラス図
    title クラス図

    class Group {
        name
        id
        users
    }

    class User {
        username
        password
        id
        +sign_in()
    }

    Group . User
@enduml
```

</div><!-- float: left; width: 50%; -->
</div><!-- float: left; width: 100%; -->

- 様々な数式を描画する。

$\sum_{n=1}^{100}foo(n)+bar(n^2)$

- CSV表の取り込み
- 別フォーマットでのエクスポート

<div style="break-before: page;"></div>

# 2. PlantUMLを使うための下準備

こちらの記事から引用しています。
[Visual Studio CodeでPlantUMLを使うメモ (Windows編).md - GitHub](https://gist.github.com/yoggy/bd68b3f1f55dbd742bea71424ca66564)
[PlantUMLの現場活用例 #uml - Qiita](https://qiita.com/zousan010sanpotyu/items/a55798e38a809b860235)

## 2.1 Graphvizのインストール

PlantUMLはdotを使って図を作成するので、
あらかじめGraphvizをインストールしておく必要があります。以下URLから、
stable版のインストーラをダウンロード＆インストールしてください。
https://www.graphviz.org/download/

dotコマンドが使えるように環境変数PATHにGraphvizのパスが必要です。
インストール時は「Add Graphviz to the System PATH」を選択してください。
![graphviz_setup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943373/99a24ea8-0942-c753-760c-ebfbc64d0281.png)

<div style="break-before: page;"></div>

## 2.2 Javaのインストール

JavaにはOpenJDKを使用します。
昔のPlantUML導入記事ではOracle Javaが使用されているものもありますが、
2019年4月16日から有償化されているため商用利用では使用できません。

以下よりOpenJDKをダウンロードします。
https://jdk.java.net/

zipを解凍して出てくるフォルダを以下にコピーします。
フォルダ名は「OpenJDK」にリネームしておくと良いでしょう。

- `C:\Users\ユーザー名\AppData\Local`

コピーできたら、ユーザー環境変数「Path」に以下を追加します。

| 変数 | 値 |
| - | - |
| Path | `C:\Users\ユーザー名\AppData\Local\OpenJDK\bin` |

コマンドプロンプトで「`java --version`」を入力し、
OpenJDKのバージョン情報が出力されたらインストール成功です。

## 2.3 環境変数の設定

あと、ユーザー環境変数に以下を追加しておきましょう。
これはPlantUMLで大きな図を描くと途切れてしまう対策です。([参考URL](https://plantuml.com/ja/faq))

| 変数 | 値 |
| - | - |
| PLANTUML_LIMIT_SIZE | `8192` |

<div style="break-before: page;"></div>

# 3. Visual Studio Codeの設定

こちらの記事から引用しています。
[VSCode | Visual Studio Codeを日本語化する](https://www.javadrive.jp/vscode/install/index4.html)
[Markdownの文書にPlantUMLを使ってUMLを埋め込む #VSCode - Qiita](https://qiita.com/ker38c/items/c51b780aeb6665a8a974)
[Markdown Preview EnhancedでPDF出力する。 #VSCode - Qiita](https://qiita.com/kenichiuda/items/5c76748297f42106d797)

## 3.1 Visual Studio Codeのインストール

VSCodeを以下よりダウンロードし、インストールします。
https://code.visualstudio.com/

インストール設定はデフォルトでも問題ありませんが、
使い勝手が良くなるのでコンテキストメニューの追加をオススメします。
![vscode_setup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943373/82c71dfa-beac-af00-fdf6-cefe25fc89b9.png)

<div style="break-before: page;"></div>

## 3.2 Visual Studio Codeを日本語化する

以下の拡張機能をインストールします。

- Japanese Language Pack for Visual Studio Code

インストールが完了したらVSCodeの再起動を行います。
完了後に画面右下に「Change Language and Restart」と表示されるので
クリックしてください。

## 3.3 VSCodeの拡張機能のインストール

VSCodeの拡張機能から以下の拡張機能を導入します。

- PlantUML
- Markdown Preview Enhanced

## 3.4 Markdown Preview Enhancedの設定

VSCodeの設定から以下の設定を変更します。

| 設定 | 値 |
| - | - |
| Markdown-preview-enhanced:<div style="text-align: right;">Chrome Path</div> | `C:\Program Files (x86)\Microsoft\Edge\`<div style="text-align: right;">`Application\msedge.exe`</div> |
| Markdown-preview-enhanced:<div style="text-align: right;">Enable Extended Table Syntax</div> | `☑` Enable extended table syntax<div style="text-align: right;">to support merging table cells.</div> |
| Markdown-preview-enhanced:<div style="text-align: right;">Plantuml Jar Path</div> | `C:\Users\ユーザー名\.vscode\extensions\`<div style="text-align: right;">`jebbs.plantuml-バージョン番号\plantuml.jar`</div> |

<div style="break-before: page;"></div>

## 3.5 VSCode上でのUMLの描画

以下のサンプルコードのプレビューがVSCode上で描画できるか確認します。

**サンプルコード**

<!-- Qiita向け修正
sample\.md

````
Qiita向け修正 -->
````:sample.md
```plantuml
@startuml サンプルコード
skinparam classAttributeIconSize 0

title サンプルクラス

class Encoder{
    + translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
```
````

**プレビュー**

コマンドパレットから以下を実行すると表示できます。
プレビューが表示できれば動作確認はOK。

- Markdown: Markdown Preview Enhanced: Open Preview to the Side

```plantuml
@startuml プレビュー
skinparam classAttributeIconSize 0

title サンプルクラス

class Encoder{
    + translate()
}
Interface Reader
Reader <|-- CsvReader
Encoder .> Reader
@enduml
```

<div style="break-before: page;"></div>

## 3.6 PDFで出力する

プレビュー上でマウスを右クリックし、下図の順で選択すると
mdファイルと同じフォルダに同名のpdfファイルが出力されます。
pdfファイルが既に存在する場合は上書きされます。

![export_pdf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3943373/1cf76985-0f32-bec0-b348-5b4e79cbc986.png)

<script> /*
```plantuml
@startuml PDFで出力する
    left to right direction

    metaclass "Right Click" as rclick {
        <size:18><&external-link></size> Open in Browser
        <color:white><back:steelblue>□ Export　　　　　　</back></color>
        <size:18><&pencil></size> Edit Markdown
        <color:yellowgreen><size:18><&command></size> <b>Zen Mode</b></color>
        <size:18><&map></size> Image Helper
        <size:18><&loop-circular></size> Sync Source
        <size:18><&contrast></size> Preview Theme
        　 Code Block Theme
        　 Reveal.js Theme
        <size:18><&clock></size> About
    }

    metaclass "Export" as export {
        HTML
        <color:white><back:steelblue>Chrome（Puppeteer）</back></color>
        PDF（Prince）
        eBook
        Pandoc
        Save as Markdown
    }

    metaclass "Chrome（Puppeteer）" as chrome {
        <color:white><back:steelblue>PDF　　　　　　　　　　</back></color>
        PNG
        JPEG
    }

    rclick::Export --> export::HTML
    export::Chrome --> chrome::PDF
@enduml
```
*/ </script>

<div style="break-before: page;"></div>

# 4. プログラミングフォントMyrica

必須ではありませんが、視認性が良くなるので導入をオススメします。
こちらのサイトが頒布元です。
[プログラミングフォント Myrica | Myrica （ミリカ）は、フリーなプログラミング用 TrueType フォントです。](https://myrica.estable.jp/)

## 4.1 Myricaのフォントイメージ

<!-- Qiita向け修正
<img src="https://raw.githubusercontent.com/tomokuni/Myrica/refs/heads/master/Source/myrica_FontImage.png" width="80%">
Qiita向け修正 -->
![myrica_FontImage.png](https://raw.githubusercontent.com/tomokuni/Myrica/refs/heads/master/Source/myrica_FontImage.png)
<!-- Qiita向け修正 -->

<div style="break-before: page;"></div>

## 4.2 Myricaのインストール

以下よりMyrica.zipをダウンロードします。
https://github.com/tomokuni/Myrica/blob/master/product/Myrica.md

zipを解凍して出てくるMyrica.TTCを右クリックしてインストールします。

## 4.3 Myricaの設定

VSCodeの設定から以下の設定を変更します。

| 設定 | 値 |
| - | - |
| Editor: Font Family | `'Myrica M'` |
| Editor: Font Size | `16` |