テレワークでこそ VSCode + Excalidraw を使ってポンチ絵を描こう！

こんにちは。皆さん、ポンチ絵描いてますか？

この記事では、VSCode + Excalidraw を使うことで素早くポンチ絵を描く方法について紹介します。

- [ポンチ絵、そして Excalidraw とは](#%E3%83%9D%E3%83%B3%E3%83%81%E7%B5%B5%E3%81%9D%E3%81%97%E3%81%A6-excalidraw-%E3%81%A8%E3%81%AF)
- [Excalidraw 拡張機能をインストール](#excalidraw-%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)
- [描いたポンチ絵をストックする！](#%E6%8F%8F%E3%81%84%E3%81%9F%E3%83%9D%E3%83%B3%E3%83%81%E7%B5%B5%E3%82%92%E3%82%B9%E3%83%88%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B)
- [テンプレートファイルでヘビロテ素材を一瞬で出す！](#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E3%83%98%E3%83%93%E3%83%AD%E3%83%86%E7%B4%A0%E6%9D%90%E3%82%92%E4%B8%80%E7%9E%AC%E3%81%A7%E5%87%BA%E3%81%99)
- [エクスポートして共有する！](#%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E3%81%97%E3%81%A6%E5%85%B1%E6%9C%89%E3%81%99%E3%82%8B)
- [ショートカットを使いこなす！](#%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88%E3%82%92%E4%BD%BF%E3%81%84%E3%81%93%E3%81%AA%E3%81%99)

## ポンチ絵、そして Excalidraw とは

仕事における「ポンチ絵」とは、概ね以下の意味合いです。

- 特定の物事を分かりやすくするための図
- 正式な図面ではない手書きのスケッチ

つまり **「脳内イメージを相手に伝えるために、手早く書き起こしたもの」** がポンチ絵です。

会議中、話しながらホワイトボードにシステム構成をさらさら描くことがありますよね。あれがまさしくポンチ絵です。

ホワイトボードに描くシーンを想像すると分かるように、ポンチ絵は **「その場でサッと描くこと」** が重要です。**頭がその物事について集中してる今この瞬間** に適切なポンチ絵を示すことで、理解を深めたり、複数人で認識を共有する効果を最大化できるからです。

[Excalidraw](https://excalidraw.com) は、そんなポンチ絵をディスプレイ上で描くことに特化したホワイトボードWebアプリです。Webアプリですが、後述の通り VSCode に拡張機能をインストールすることで、ローカルにファイルを保存して使うこともできます。

Web会議が増えた昨今、使いやすいホワイトボードアプリは必携です。Excalidraw、オススメです。

こんな絵がサッと描ける:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164949/5be38354-ada8-41af-3fa4-489951135ceb.png)

## Excalidraw 拡張機能をインストール

以下の拡張機能:

[Excalidraw - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor)

インストール後、適当なファイルを拡張子 `.excalidraw` で保存して開くとキャンバスが表示されるようになります。
(例: xxx構成.excalidraw)

## 描いたポンチ絵をストックする！

前述の Excalidraw 拡張機能を使うことでローカルにファイル保存し、簡単に開き直せるようになりました。これにより、 **今まで描いたポンチ絵を保管しておくことができるようになりました！**

過去に描いたポンチ絵が、別の場面で役に立つことは少なくありません。ストックしていくために、ファイル置き場を集約しましょう。また瞬間風速が大事なポンチ絵のために、そのディレクトリを VSCode で即座に開いて描き始められるようにしましょう。 

1. 適当なディレクトリを作成する
2. このディレクトリを VSCode で開く
    - `[ファイル] メニュー > フォルダーを開く` でも、 `code <対象ディレクトリ>` コマンドでも構いません
3. `VSCode 設定 > ワークスペース > Explorer: Sort Order` の設定を `modified` にする
    - これにより、このディレクトリを開いている場合にのみサイドバー上のファイル並び順が更新日時順になります
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164949/cbceacd2-79cf-59ec-763a-acdd98ba4037.png)
4. 上記の「ディレクトリを VSCode で開く」操作をいつでも行えるようショートカットを作っておく
    - Windows の場合、エクスプローラのアイコン右クリックで、開いたフォルダ履歴がリストアップされるので、対象アイテムを右クリックしてピン留めするのがオススメ
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164949/6ac20167-b307-3914-e2e9-86800d39740f.png)

## テンプレートファイルでヘビロテ素材を一瞬で出す！

Excalidraw には、ライブラリ機能があり、特定用途に便利な画像素材をダウンロードして好きなときに利用することができます。

素材サイト: [Excalidraw Libraries](https://libraries.excalidraw.com/)

**しかしながら、ライブラリ機能には検索機能やセクション分けなどの整理する機能が無いため、インポートした素材の数が増えてくると扱いづらくなります。**

そこで、自分がよく使うテンプレートファイルを用意し、それを VSCode のピン留め機能を使っていつでも見られるようにしておきましょう。

1. VSCode のサイドバー「エクスプローラー」から、新しいファイルを作成し、 `よく使うアイコンセット.excalidraw` を作成する ※ファイル名はお好みで。
2. [Excalidraw Libraries](https://libraries.excalidraw.com/) から好きなファイルをダウンロード。 `VSCode 上の Excalidraw キャンバス > 右上の [ライブラリ] ボタン > [︙] ボタン > [開く]` からインポートし、 `よく使うアイコンセット.excalidraw` に必要な画像素材を置いていく
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164949/0763f87a-6bf8-d1c5-964a-7c07bdead6be.png)
3. `よく使うアイコンセット.excalidraw` のタブを右クリック > ピン留めする
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164949/f2964722-118a-55dc-10b4-ff7955c6d4bd.png)

こうすることで、使いやすい素材をすぐに取り出すことができるようになりました。

テンプレートファイルから作成中のキャンバスへは、使う素材を選択し、Ctrl-C、Ctrl-V のいつものコピー&ペースト操作で行うことができます。

使いやすいようにセクション分けするなど、テンプレートの見た目を調整しておいても良いでしょう。

これで、ヘビロテしている素材をポンチ絵に入れるのが楽になりました！

## エクスポートして共有する！

`キャンバス左上のハンバーガーメニュー > 画像のエクスポート` から、描いた絵を各種形式でエクスポートできます。

ポンチ絵の特性上、Teams などのチャットに貼り付けてサクっと共有できると便利です。その場合は、 [クリップボードにコピー] でクリップボードにコピーして、チャット入力ボックスに Ctrl-V で貼り付けると軽快に使えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164949/a72b3370-77c5-540f-9efc-717136aded6c.png)

## ショートカットを使いこなす！

Excalidraw には様々なショートカットキーがあります。

キャンバス左上のハンバーガーメニュー > ヘルプ から確認できますが、まずは以下の3点だけを覚ておくと便利です。

- 上部のツールバーが数字キー `0～9` にそれぞれ割り当たっている
- キャンバス上をダブルクリックすることでテキストボックスを作成
- 矢印や四角などの図形をダブルクリックすることでテキスト入力

このあたりを使いこなせると、Web通話で画面共有をしながらさらさらと描くことができるようになります。