Visual Studio Code - *.drawio.svg や *.drawio.png の衝撃

はじめに

先日、 Visual Studio Code の Extension に Draw.io Integration という、VSCode で draw.io を使用出来る拡張機能がリリースされ話題になりました。

リリースされるや否や、界隈では盛り上がりを見せまして、Qiita の記事や #InfraStudy でも導入方法や事例が紹介されたりしました。

• VSCodeでDraw.ioが使えるようになったらしい！ - Qiita
• Infrastructure as Codeにおける理想のドキュメント管理を目指して #infrastudy | Developers.IO

そんな訳で、モデリングなどの設計作業をするときはこの方法で作図するのがデフォルトになってきたのですが、先日更に（個人的に）驚愕の機能を知ったのでご紹介します。

draw.io について

draw.io は無料の作図ツールで、Webブラウザやデスクトップアプリから利用できます。また、Confluence などでは拡張機能として draw.io の機能を用いて作図を行うことが出来ます。 作成した図形は SVG や PNG 、JPEG などの形式でエクスポートすることができ、また、 Google Drive など様々なストレージにファイルを保存することが出来ます。

draw.io default view

draw.io は以前からローカルストレージでファイル保存をすることが出来ましたが、編集作業を行うには前述の Webブラウザやデスクトップアプリが必要で、ちょっとした手間がありました。 また、Webブラウザを使用して編集する特性上、（個人的に）クラウドストレージにデータ保存することがデフォルトになっており、 git の管理に含めることは全くありませんでした。

しかし、VSCode の拡張機能として draw.io が使用できるようになったことで、VSCode でコーディングやドキュメンテーションをしながら、併せて作図までも行えるようになり、同時にそれらと同じ git レポジトリ配下で管理するということも容易になりました。これは本当に便利です。

VSCode + draw.io view

また、最近、モデルベース要件定義テクニック という書籍で RDRA を使ったモデリングについて学ぶ機会があり、そこで Enterprise Architect や astah* などの専用モデリングツールを知ったのですが、普段使いしているツールで代替できないか調べていたところでした。 これらのツールは、モデリングした図形をリポジトリとして管理出来ることも強みの一つだと思うのですが、なんと VSCode + draw.io の組み合わせでそれが代替利用できそうです。

VSCode で draw.io を使う

使用方法はとても簡単です。 VSCode 拡張機能として Draw.io Integration インストールし、 .drawio、.dio、.drawio.svg や .drawio.png といった拡張子のファイルを新規作成・開くだけです。

Web版とは一部機能の違いがあり、記事作成時点（2020/07/08）では画像のエクスポートが出来なかったりしますが、使い勝手は十分です。

*.drawio.svg と *.drawio.png

さてさて、上記で記載したとおり、VSCode で draw.io が使用できる拡張子には複数種類があります。

• .drawio
• .dio
• .drawio.svg
• .drawio.png

VSCode で draw.io が使えるだけで驚いていたのですが、下2つの拡張子の動作に驚きました。 なんと、 VSCode + draw.io でファイル作成・編集・保存すると、それぞれ、 SVG や PNG のファイルとして保存されるのです。

using .svg & .png

これで、 VSCode の拡張機能版に 画像の Export 機能がなくなった理由が分かった気がしました。

draw.io 単体で Webブラウザで作図する場合、1つのシートに複数の意味の図形を作図したり、シート分割したりしてました。しかし、 VSCode 版では 1つのファイルの1つ意味をもつ図形を作成し、そうすることでそれを画像として使用できるようになるのです。

なるほど、こういう使い方か。

確かに、1つのファイルに情報を詰め込みすぎてもっさりすることがよくあったので、この方が効率的かもしれません。

Markdown ファイルからの参照

上記で記載した 「VSCode 上は draw.io で編集しながら、保存したファイルは SVG や PNG になる」ということは、その保存したファイルを画像参照として Markdown ファイルなどから指定してあげれば、そのまま画像として表示できることを意味します。

これ、凄くないですか？

draw.io で作図した図形を Export することなく、そのまま参照させることが出来るのです。

• RDRA に習ってモデリングのリポジトリを作成し、Markdown で解説ドキュメントを作る
• 仕様書や設計メモを draw.io で作図した画像とともに Markdown で管理する

などなど、活用のアイデアは色々と浮かんできます。

Markdown view with drawio.svg

Live Sharing

上記の情報だけでも驚きづくしでしたが、もう一つ素晴らしい機能の組み合わせを知りました。

Draw.io real-time collaboration using Visual Studio Code and Live Share

なんと、 VSCode + draw.io + Live Sharing の組み合わせがいけるのです。

つまり、モデリング作業を複数メンバーがリアルタイムに１つのファイル編集する形で作業できるのです。

これは凄い。

draw.io の高機能性を活かしながら、複数メンバーが同時に同じ図形もモデリングできるなんて。

基本思想として考えられる、「 VSCode + draw.io で作図する図形はミニマム情報の単位でファイル作成する」ということを考えられると、そこまで複数のメンバーが同じファイルを同時に触るということはないかもしれません。

しかし、この機能を使用することで、ペアプログラミングならぬ、ペアデザイニングや、ブレーンストーミングしながら企画していく最中に 簡単な図形をガリガリ書いていくなんていう作業には向いているかもしれません。

また、KPT振り返りなど、miro が得意とするような機能の一部も代替できるかもしれません。（ miro は大好きですが、料金がネックとなりがち。 ）

まとめ

システムやソフトウェアの設計の際には、モデリングしながら作図することは数多くあると思います。 5年以上前は、（あくまで個人的には）Excelのオブジェクトでシーケンス図や処理フロー図を作成するなんてことが普通でしたが、いまは有料無料の作図ツールが充実してきており、特に draw.io の使い勝手の良さや拡張性の高さには驚くばかりです。

組織やプロジェクトなど利用するシーンによって使えるツールも異なると思いますが、 draw.io ( + VSCode ) の組み合わせは、コスト感でも使い勝手でも、一番良い部類に入るのではないでしょうか。

おわり。

Python - AmazonLinux2 に Python3.8 と Poetry をインストールした Dockerイメージを作成する

概要

Python で Webアプリケーションを作りたくなった為、 Docker を使用してローカル開発環境を構築するための Dockerfile を作成した。この Dockerfile によって、以下の構成のイメージ・コンテナを作成することができた。

Item	Content
OS	amazonlinux:2
Python	3.8.2
Pip	pip3.8
Poetry	1.0.5
OpenSSH	OpenSSH_7.4p1, OpenSSL 1.0.2k-fips 26 Jan 2017
Git	2.23.3

もくじ

はじめに

とある方面から Python 関連の技術的な質問を頂くことになりそうになったが、 Python についてはほとんど触ってこなかったため、最低限の実行環境を整備しておくくらいはしておこうと思い調査した。

方法

Qiita や Stack Overflow を中心とした技術系ブログを参考に、Dockerfile 及び関連操作について調査し、まとめた。

結果

作成したコードの clone

次のコマンドでコードを GitHub から clone する。

git clone https://github.com/anfangd/dockerfile-AmazonLinux2-python3.8-poetry.git

# Folder Structure
tree
.
├── Dockerfile
└── authorized_keys

なお、 Docker のインストールは事前に済んでいることを前提とする。

事前準備

起動したコンテナ内に SSH 接続をしたため、事前に以下のような手順で秘密鍵と公開鍵を作成しておく。

# Create keys
ssh-keygen -t rsa -b 4096 -C "hoge@example.com" -f ~/.ssh/id_rsa
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in id_rsa.
Your public key has been saved in id_rsa.pub.

ls ~/.ssh
id_rsa  id_rsa.pub

# Dockerfile と同階層に公開鍵を配置する。
cp ~/.ssh/id_rsa.pub <PROJECT_ROOT>/authorized_keys

Build

次のコマンドで、 Docker の新しいイメージをビルドする。

# Build
docker build -t "amazon-linux2/python" .

Start Container

次のコマンドで、新しく作成したイメージを起動する。

# Start Container
docker run --privileged --rm -d -p 10000:22 --name amazonlinux2-sshd-container amazon-linux2/python /sbin/init

SSH Access to Container

次のコマンドで、起動したコンテナに SSH アクセスする。

# SSH Access
ssh ec2-user@localhost -p 10000 -i ~/.ssh/private_key

Stop Container

作業が終わったら、次のコマンドでコンテナを停止させる。

# Stop Container
docker stop amazonlinux2-sshd-container

Example: Poetry install Django | Flask

作成したコンテナ内では、 Poetry を使用することが出来る。

例えば、 Poetry を使用して Django をインストールする方法は次の通り。

# Example: Poetry install Django
mkdir django-demo && cd $_
poetry init --no-interaction --dependency django
poetry install
poetry run django-admin.py startproject django-demo

また、 Poetry を使用して Flask をインストールする方法は次の通り。

# Example: Poetry install Flask
mkdir flask-demo && cd $_
poetry init --no-interaction --dependency flask
poetry install

Dockerfile

なお、 anfangd/dockerfile-AmazonLinux2-python3.8-poetry で取得する Dockerfile の中身は次の通り。

FROM amazonlinux:2

# 各環境変数を設定
ENV USER ec2-user
ENV HOME /home/${USER}

RUN echo "now building..."

# Install General Tools
RUN yum update -y \
        && yum install -y git wget tar make \
            gcc openssl-devel bzip2-devel libffi-devel

# Install Python 3.8 && Poetry
RUN cd /opt \
        && wget https://www.python.org/ftp/python/3.8.2/Python-3.8.2.tgz \
        && tar xzf Python-3.8.2.tgz \
        && cd Python-3.8.2 \
        && ./configure --enable-optimizations \
        && make altinstall \
        && rm -f /opt/Python-3.8.2.tgz \
        && python3.8 --version \
        && pip3.8 --version

# 手元の公開鍵をコピー
COPY authorized_keys /tmp/id_rsa.pub

# Install SSH Server && Create and setting ec2-user.
RUN yum -y install \
        sudo \
        openssh-server \
        openssh-clients \
        which && \
    yum clean all && \
    systemctl enable sshd.service && \
    echo "PasswordAuthentication no" >> /etc/ssh/sshd_config && \
    useradd ${USER} && \
    echo "ec2-user ALL=NOPASSWD: ALL" >> /etc/sudoers && \
    sudo -u ${USER} mkdir -p ${HOME}/.ssh && \
    mv /tmp/id_rsa.pub ${HOME}/.ssh/ && \
    chmod -R go-rwx ${HOME}/.ssh && \
    cat ${HOME}/.ssh/id_rsa.pub >> ${HOME}/.ssh/authorized_keys

# USER ${USER}
WORKDIR ${HOME}
RUN sudo -u ${USER} curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python3.8 \
        && echo 'alias poetry="python3.8 $HOME/.poetry/bin/poetry"' >> /home/ec2-user/.bashrc

RUN echo "finished."

考察

2020年5月10日時点では、特に問題なく期待通りの環境を構築することができた。

結論

Docker の AmazonLinux2 イメージの上に、Python3.8 と Poetry をインストールし、 Web　Application Framework を使用したアプリケーション開発を実現することが出来る。

課題

• Python の仮想環境の考え方をうまく理解できていない。
• Python の依存管理ツールの考え方をうまく理解できていない。

参考文献

• 【初心者向け】エイリアスの設定方法 - Qiita
• SSH接続エラー回避方法：.ssh/known_hostsから特定のホストを削除する/削除しないで対処する3つの方法 - Qiita
• Poetry documentation (日本語訳) -python - How to start a new Django project using poetry? - Stack Overflow
• Poetry 0.12.3 uses Python 2.7.10 despite specifying 3.7.0 · Issue #536 · python-poetry/poetry
• 論文の読み方 / How to survey - Speaker Deck