VSCodeで議事録を作成しよう

業務やPJでのMTGが増えるたびに、
以下のような課題から毎日ぷち憂鬱になっていました。

• MTGが増えるたびにコピペとはいえ、毎度、議事録のフォーマットをひっぱりだしてくるのが面倒だったり
• メモ帳でテキストファイルだとぶっちゃけ読みずらい…目が痛い…
• あの議事録どこに保存したっけ？議事録連携してませんでしたっけ？
  etc…

本当は議事録自動生成AIツールとか導入できればいいんですけど、
無料のものって今ないんですよねー。

無料で柔軟に出来ること、ないかなーってことで。

フォルダで一元管理しつつ、
VScode＋Markdown形式で書いてわかりやすく
MTG毎にスニペットを作成してテンプレート呼び出しもスムーズに。
かつ、GoogleDriveへ自動保存される形にしちゃえば共有も楽々！！

ということでやっていきましょう。

前書き

必要に応じて設定、不要であれば読み飛ばしてください。

VSCodeに必要な拡張機能を導入

• Markdown All in One
• Markdown PDF
• Markdown Preview Enhanced
• markdownlint

Windows版 GoogleDriveの導入

以下の記事を参考にさせていただきました。

詳細は公式ドキュメントを参照。

まずはWindows版GoogleDriveをダウンロードしましょう。
画面の指示に従いインストール＆Googleログインまで進めましょう。

インストール&ログインができるとPC上にGoogleDriveが追加されます。

続いて、同期の設定などやっていきましょう。

Windows版GoogleDriveの設定

タスクバーからGoogleDriveアイコンをクリック

右上の 歯車アイコン > 設定 をクリック

左側メニューから「Google ドライブ」を選択

ファイルをストリーミングするになっていることを確認。

インフォメーションにもある通り
仮想ドライブ・仮想フォルダを通してDriveにアクセスされるので
windows環境上に実ファイルが置かれることはなく、容量が抑えられます。
なので基本的にはストリーミングで良いと思います。

※まあ、今回こちらは使わないのでお好みの設定にしてもらえればと思います。

Google Drive連携用のフォルダを作成

今回は次のようなフォルダ構成を想定してやって行こうと思います。
この最上位の議事録フォルダをDriveに同期させるイメージです。

議事録
├── ProjectA
│   ├── 議事録A
│   └── 議事録B
├── ProjectB
│   ├── 議事録A
│   └── 議事録B
└── ...

マイノートパソコン > フォルダを追加をクリック

ドキュメント直下あたりにでも、議事録フォルダを作成して選択します

Driveと同期するか聞かれるのでチェックを入れて完了をクリック。

表示が変わってGoogleDriveにも議事録フォルダが出来ていればOK。
右下の保存をクリック。

これでGoogleDriveの設定は出来たので、続けてVSCodeの設定をやっていきましょう。

VSCodeの設定

先程作成した議事録フォルダをVSCodeで開きましょう

開き方によってはワークスペースが登録されていないと思うので、
ファイル > 名前を付けてワークスペースを保存 からワークスペースとして登録しましょう。

左下の歯車マークから設定を選択

タブをワークスペースに切り替えて、
検索欄にdefaultLangと入力し、検索。
入力欄にmarkdownと入力。

検索欄にeditrorTabと入力し、検索
選択欄からonlySnippetsを選択する。

できたら、閉じちゃってOK！

ワークスペースタブで設定をすることで、〇〇.code-workspaceファイルに設定が追加されます。
こうするとワークスペース単位で設定を切り分けられるので、
他のワークスペース・プロジェクトに影響することなく設定を反映することが出来ます。

スニペットの設定

ディレクトリ＆スニペット作成

ワークスペース内に.vscodeフォルダを作成します。
スニペットはこの中に作成します
。
こちらの記事を参考にしつつスニペットを追加していきます

meeting-notes.code-snippetsという名前でファイルを作成します。
名前は何でも良いのですが、拡張子を.code-snippetsとしてください。

中身はこんな感じにしました

meeting-notes.code-snippets

{
  "Meeting Template": {
    "prefix": "@mtg",
    "body": [
      "# 〇〇プロジェクト定例MTG議事録",
      "",
      "## 日付: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
      "## 参加者: ${1:氏名A, 氏名B}",
      "",
      "## アジェンダ",
      "- ${2:議題1}",
      "- ${3:議題2}",
      "",
      "## 議事内容",
      "### ${3:議題1}",
      "- 概要: ${5:ここに概要を記載}",
      "- 決定事項: ${6:ここに決定事項を記載}",
      "- アクション: ${7:誰が何をいつまでに}",
      "",
      "### ${4:議題2}",
      "- 概要: ${8:ここに概要を記載}",
      "- 決定事項: ${9:ここに決定事項を記載}",
      "- アクション: ${10:誰が何をいつまでに}",
            "",
      "### 宿題",
      "- 概要: ${11:ここに概要を記載}",
      "- 担当/期限: ${12:誰がいつまでに}",
      "",
      "## 次回会議",
      "- 日時: ${13:YYYY-MM-DD HH:mm}",
      "- 場所 / URL: ${14:会議室 or オンラインURL}",
      "- 議題: ${15:次回予定議題}"
    ],
    "description": "〇〇プロジェクト定例MTGのスニペット"
  }
}

作成出来たら保存しましょう。

次に、新たにプロジェクト用のフォルダを作成し、
その中にmarkdownファイルを作成しました。

使い方

作成したMarkdownファイル(.md)に、
先程のスニペットファイルでprefix項目に設定した@mtgと入力します。

2025-05-29.md

@mtg

入力出来たらTab、もしくはCtrl + Spaceを押しましょう。
上手く設定できていれば、テンプレートが呼び出されます！

2025-05-29.md

# 〇〇プロジェクト定例MTG議事録

## 日付: 2025-05-29
## 参加者: 氏名A, 氏名B

## アジェンダ
- 議題1
- 議題2

## 議事内容
### 議題2
- 概要: ここに概要を記載
- 決定事項: ここに決定事項を記載
- アクション: 誰が何をいつまでに

### 議題2
- 概要: ここに概要を記載
- 決定事項: ここに決定事項を記載
- アクション: 誰が何をいつまでに

### 宿題
- 概要: ここに概要を記載
- 担当/期限: 誰がいつまでに

## 次回会議
- 日時: YYYY-MM-DD HH:mm
- 場所 / URL: 会議室 or オンラインURL
- 議題: 次回予定議題

${n:}としている箇所は、タブ移動できるように設定しています。
同じ数字を振ると、同時に編集することが出来ます。便利！

最後に、ブラウザでGoogle Driveも確認してみましょう。
パソコン > マイノートパソコンという場所が新たに増えています。

ばっちり同期されてますね！

まとめ

今回は議事録を例として作成しましたが、
独自スニペットはいろいろ使えるので、よく使うコードだったり、
CSSデザインやコンポーネントなんかも登録しておくことで
コーディングが爆速になるかと思います。

今回はworkspace/.vscodeに作成しましたが
以下の記事のようにユーザー用のスニペットとして登録しておくのも良いかと思います。

参考にさせていただいた記事