VScode Dev Container on macOS でポータブルな Typst の日本語執筆環境を構築する（結論要約版）

:::note info
本記事は [Typst Advent Calendar 2024](https://qiita.com/advent-calendar/2024/typst) の3日目の記事です。2日目は [kimushun1101 さん](https://zenn.dev/kimushun1101/articles/typst-jp-documentation-translation) でした。
:::

[前記事](https://qiita.com/doraTeX/items/41995b99b3e9ef59e296)は、やり方を少しずつ改良していく過程を記述したので長くなりました。そこで **「最終的な結論として得られた、やるべき最良の手順をまとめた要約版」** の記事を改めて別にまとめることとしましょう。

# この記事の手順でできること

* VScode と Docker がインストールされている macOS の環境において、Dev Container を使い、簡単・便利・ポータブルな、VScode による Typst の執筆環境を整える。
* macOSに標準インストールされている和文フォントなどのフォントを、Docker コンテナ内の Typst から使えるようにする。
* 出来合いの Docker コンテナが用意されていない最新の Typst 環境を Docker コンテナ内に用意する。

# 用意するもの

* macOS
* VScode
* Docker Desktop for Mac

# 準備

## Docker 側の準備

後ほど、Dockerコンテナ内からmacOS標準インストールのフォント類が使えるようにするために、macOSのフォントディレクトリをDockerからバインドマウントするわけですが、Dockerからアクセス可能にするために、Docker Dekstopの設定に追加が必要です。

### Step 1
Docker Desktopのダッシュボードを起動し、設定の歯車アイコンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/201201ea-63e1-5a91-7095-854aa0be8712.png)

### Step 2

`Resources` → `File Sharing` を選び、右側の `Virtual file shares` までスクロールします。
そして、次に、`/path/to/exported/directory` のところの `Browse` ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/ed9f7614-7a0d-0008-3734-d5b9c133c184.png)


### Step 3

`/System/Library/Fonts` を選び、`+` ボタンを押して追加します。同じことを、`/Library/Fonts` に対しても繰り返します。両方が灰色の状態になれば追加成功です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/a7946c5f-552c-be99-55a3-0a74d0120b18.png)

### Step 4

右下の `Apply & restart` ボタンを押し、Dockerサービスを再起動して、設定変更を反映させます。

## VScode側の準備

VScodeの拡張機能で、`Dev Containers`、あるいはそれを含むパックである `Remote Development` をインストールしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/f1e4915f-a953-3b59-b757-c4ad1422e057.png)

## macOS側の準備

macOSのセキュリティに起因するトラブルを避けるため、VScodeとDockerに対して、フルディスクアクセスの権限を与えておきましょう。システム設定アプリの検索欄に「フルディスク」と打ち込んでフルディスクアクセスの画面を開き、`+` ボタンを押して、`/Applications/Visual Studio Code.app` と `/Applications/Docker.app` を追加しておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/dfe1fabd-fb8d-ea23-bddc-2e946e49651f.png)

そして、VScode や Docker を再起動しましょう。

# Dev Container の用意

前記事で用意した `Dockerfile` や `.devcontainer.json`、およびサンプルファイル一式をまとめた[Gitレポジトリ](https://github.com/doraTeX/typst-devcontainer)を用意しました。これをもとに Typst の文書執筆フォルダを作ります。ここでは `~/Documents` 内に用意することにします。

```sh:ホスト側に必要ファイル一式をダウンロード
$ cd ~/Documents
$ git clone https://github.com/doraTeX/typst-devcontainer
$ cd typst-devcontainer
$ code .
```

最後の `code .` は、VScode の CUI インターフェースである `code` コマンドがインストールされている場合です。インストールされていないときは、`typst-devcointainer` フォルダを、VScode の「フォルダを開く」から開いてください。

# コンテナのビルド

VScode で次の画面が出ますので、「`コンテナーで再度開く`」を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/582a5a4e-225d-32ce-729b-3de00497f20e.png)

もしも表示されなければ、`Command + Shift + P` でコマンドパレットを開き、`reopen`と打ち込めば、`Dev Containers: Reopen in Container` という項目が現れるはずですので、それを選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/918565f5-da97-5c86-1aea-ea3269bfedc0.png)

すると、多少時間がかかりますが、記事執筆時点で最新の Typst v.0.12.0 の環境がソースコードからコンパイルされてコンテナ化されます。そして、VScode の Dev Container によって、コンテナ内の Typst 環境が、あたかも手元にあるかのように執筆が進められます。

# サンプル文書のタイプセット実験

同梱されているサンプル文書 `font-test.typ` や `sample.typ` をタイプセットしてみましょう。画面上部の `Preview` ボタンを押すと、右側に高速プレビューが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/d70640b1-2946-3011-9f64-f64c82f6ebd5.png)

ただし、`font-test.typ` 内のカラー絵文字については、`Preview` では正しく表示されず、欠落してしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/87b7de5e-32c8-1f64-14c2-6fbfc2a95689.png)

ですが、`Export PDF` (`"tinymist.showPdf"`コマンド)を押して最終版PDFを生成させれば、きちんとカラー絵文字グリフがPDFに埋め込まれていることが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41739/78abf08c-875c-21b9-be36-c3051492344a.png)

# おすすめ設定：このコンテナ内での `Command+T` をPDF生成のショートカットキーに設定する

ユーザーワイドの `keybindings.json` に設定を加えます。ここでは TeXShop にならって `Command+T` としましょう。このショートカットキーは、このコンテナを開いている VScode でのみ機能するように制限しておきます。

```json:keybindings.json
    {
        "key": "cmd+t",
        "command": "tinymist.showPdf",
        "when": "config.containerKeybindings.myTypst.enabled"
    }
```

これで、コンテナ内で `Command+T` を押すと、PDF生成が発動します。

# ポータブルな Typst 執筆環境が実現できた！

この `~/Documents/typst-devcontainer` を持ち運べば、他のmacOS環境でも、VScode と Docker さえあれば、どこでも Typst 執筆環境が実現できたことになります。ただし、`.devcontainer.json` は、ドット始まりのファイルであるため、デフォルトではFinder上で不可視となります。ファイル単位でコピーするときに抜け落ちやすいですから、気をつけましょう。