VS Code + Remote - Containers上のDiagramsで日本語フォントを利用する

以前、Remote - Containersを利用してクラウド構成図を書いた。 

kdnakt.hatenablog.com

 

このときはコンテナ側に日本語フォントが不足しており日本語を含んだ構成図を出力することができなかったが、今回対応方法を見つけたのでメモしておく。

 

 

[CJKフォントをサポートするプルリク]

先日、クラウド構成図用に新しく追加されたアイコンがないかとDiagramsのリポジトリを見ていたときに、次のプルリクエストを見つけた。

github.com

 

修正内容としては、Diagrams自体の開発で利用するDockerイメージを更新しているようだった。

修正は2点行われていた。前半ではcurlやopensansフォントのインストールが行われているだけなので、日本語フォントの利用には特段関係ない。

 

ということは、自分がRemote - Containersで利用しているDockerfileを、プルリクエストの後半の修正内容と同じ様に変更すれば、Diagrams本体をバージョンアップしなくても日本語フォントを利用できそうなことがわかった。

 

[Dockerfileの修正]

先ほどのプルリクエストを参考に、以前利用していたDockerfileにNotoSansCJKフォントのインストールコマンド(太字斜体部分)を実装した。

Dockerfile全体は以下のようになる。

FROM python:3
USER root

RUN apt-get update
ENV TZ JST-9

# install font 
RUN curl -O https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip \
  && mkdir -p /usr/share/fonts/NotoSansCJKjp \
  && unzip NotoSansCJKjp-hinted.zip -d /usr/share/fonts/NotoSansCJKjp/ \
  && rm NotoSansCJKjp-hinted.zip \
  && fc-cache -fv

RUN apt-get install -y vim less
RUN pip install --upgrade pip
RUN pip install --upgrade setuptools

# project specific settings
RUN apt-get -y install graphviz
RUN pip install diagrams

 

以前環境構築した際のものをベースにしており、Diagramsのバージョンは0.14.0となっている。

 

テストに利用する構成図は以下のシンプルな内容のものとする(simple.py)。

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("Web Service (Japanase, diagrams 0.14.0)", show=False):
    ELB("ロードバランサー") >> EC2("Webサーバー") >> RDS("データベース")

 

f:id:kidani_a:20200907234746p:plain

左がNotoSansCJKフォントのインストールコマンド追記前のDockerfileで構築したコンテナ内でpython simple.pyを実行して出力した構成図、右がコマンド追記後のDockerfileで構築したコンテナ内で出力した構成図である。

たしかに日本語部分が正しく出力できている!

 

[まとめ]

  • クラウド構成図をPythonで実装できるDiagramsをコンテナ上で動かし、日本語フォントをコンテナに追加した
  • 日本語文字列を含むクラウド構成図を出力できた
  • 実装したコードは以下のリポジトリにまとめてある

github.com