【VSCode】Project Managerでプロジェクト切り替え時に自動で音楽を流してポモドーロタイマーを実現

1. 開発に集中して取り組むぞ！

開発作業をしていると、「このプロジェクトでは集中したい」「ポモドーロテクニックを活用したい」と思うことはありませんか？ そんなときに便利なのが VSCode の Project Manager × tasks.json を組み合わせる方法です。プロジェクトを切り替えた瞬間に音楽を自動で流し、一定時間後にチャイムを鳴らすことで、ポモドーロタイマーのように活用できます。本記事では、この仕組みを簡単に導入する方法を解説します。

なお、以下の例はmacで動作確認をしています。Windows、Linuxの方は適宜修正して下さい。修正方法はChatGPTあたりに聞いてみると良いかもしれません。（丸投げ）

2. VSCodeでプロジェクト切り替えを楽にする Project Manager プラグイン

VSCode で複数のプロジェクトを扱う際に、毎回フォルダを開いたり閉じたりするのは面倒ですよね。そんなときに便利なのが Project Manager プラグイン です。この拡張機能を使えば、プロジェクトのリストを作成し、ワンクリックで素早く切り替えることができます。

インストール方法

1. VSCode の拡張機能メニュー を開く。
2. 「Project Manager」 を検索してインストール。

Project Manager の設定方法

1. ワークスペースを保存する

   • プロジェクトのタブやフォルダの開き方を維持したい場合、VSCode の 「ファイル」→「ワークスペースとして保存」 から .code-workspace ファイルを作成して保存します。

2. Project Manager でプロジェクトを保存する

   • コマンドパレット（Cmd + Shift + P）を開き、「Project Manager: Save Project」 を実行。
   • 現在のプロジェクトに名前を付けて保存。

3. 登録したプロジェクトをサイドバーのアイコンもしくは「Project Manager: List Projects」から簡単に切り替え可能！

   • これで、サイドバーのアイコンからでも、コマンドパレットから「Project Manager: List Projects」でリストを確認しクリックからでも、簡単にプロジェクトを切り替え可能！

この機能を活用すれば、複数のプロジェクトをスムーズに切り替えられるだけでなく、この後説明するtasks.json を利用することで特定のタスクを登録し、必要に応じて手動または自動で実行できる ようになります。

3. VSCode の tasks.json を使ってタスクを実行する

VSCode には tasks.json という機能があり、ユーザーがmacに実行させたいものをタスクとして登録して、VSCodeから実行させることが出来る機能です。また、開くたびに特定のタスクを自動で実行することができます。これを使うことで、プロジェクト切り替え時に指定のタスクを実行し、例えばローカルの開発環境を整えることが可能になります。

tasks.json とは？

VSCode の .vscode フォルダ 内にある tasks.json ファイルにタスクの設定を記述し、エディタの操作を自動化できる機能です。たとえば、以下のようなタスクを定義できます。

• 開発サーバーの起動 (npm start)
• Docker コンテナの立ち上げ
• 環境変数の読み込み
• エディタの設定変更

以下の説明では音楽を手動で再生するタスクを作成します。

tasks.json にタスクを登録する方法

1. VSCode の「ウィンドウ」メニューから「ターミナル」→「タスクの構成」を選択。
2. 初めて設定する場合、「テンプレートからtasks.jsonを生成」がメニューに表示されるので、「Others 任意の外部コマンドを実行する」を選ぶ。「テンプレートからtasks.jsonを生成」がメニューに無い場合は既に.vscodeフォルダにtasks.jsonが存在しているはずです。
3. .vscode フォルダ内に tasks.json ファイルが作成される。
4. 作成したtasks.jsonに以下のようなタスクを記述して、タスクを登録する。

※MP3ファイルは自分で用意したものに修正して下さい。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Play MP3",
      "type": "shell",
      "command": "bash",
      "args": ["-c", "afplay $HOME/Music/sonnasoubidedaijoubuka.mp3"],
      "problemMatcher": []
    }
  ]
}

これで、手動でタスクを実行できる準備ができました。

手動でタスクを実行する方法

1. コマンドパレット（Cmd + Shift + P）を開く。
2. 「Tasks: Run Task」 を選択。
3. 作成したタスク（例：「Play MP3」）を選択して実行。

手動で音楽を再生することが出来ました！

4. Project Manager × tasks.json で、プロジェクト切り替え時に音楽を鳴らす

Project Manager でプロジェクト切り替えと同時にタスクを実行する方法

Project Manager と tasks.json の合わせ技で、プロジェクトを切り替えた際に自動で tasks.json のタスクを実行することができます。そのためには、以下の設定を tasks.json に追加します。

"runOptions": {
  "runOn": "folderOpen"
}

この設定により、プロジェクトフォルダを開いた際に tasks.json のタスクが自動的に開始されます。

Music ファイルとポモドーロタイマーの時間設定方法

以下の tasks.json では、json内で音楽ファイルやポモドーロタイマーの時間を変更できます。

音楽ファイルの変更

tasks.json を直接編集することで、再生する音楽ファイルとポモドーロタイマーの時間を変更できます。そのためには以下の部分を修正します。

"args": [
  "-c",
  "MUSIC_FILE=\"$HOME/Music/custom-music.mp3\"; DURATION=\"1500\"; start_time=$(date +%s); afplay \"$MUSIC_FILE\" & pid=$!; while [ $(($(date +%s) - start_time)) -lt $DURATION ]; do sleep 1; done; kill $pid 2>/dev/null; afplay /System/Library/Sounds/Glass.aiff"
]

上記の custom-music.mp3 の部分を任意の音楽ファイルに変更してください。
作業時間を変更する場合は DURATION の値を変更してください。
例えば、50分（3000秒）に設定する場合、1500 → 3000に変更してください。

この方法を使えば、作業スタイルに合わせてポモドーロタイマーの長さをカスタマイズできます。

では、VSCode を開いた際に自動で音楽を流す設定を追加 します。

tasks.json の設定（自動実行）

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Pomodoro Timer",
      "type": "shell",
      "command": "bash",
      "args": [
        "-c",
        "MUSIC_FILE=\"$HOME/Music/custom-music.mp3\"; DURATION=\"1500\"; start_time=$(date +%s); afplay \"$MUSIC_FILE\" & pid=$!; while [ $(($(date +%s) - start_time)) -lt $DURATION ]; do sleep 1; done; kill $pid 2>/dev/null; afplay /System/Library/Sounds/Glass.aiff"
      ],
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      },
      "presentation": {
        "reveal": "never",
        "focus": false,
        "panel": "dedicated"
      }
    }
  ]
}

これでプロジェクトが開かれた際にタスクが自動的に実行されます。音楽が再生されて指定した時間が経過するとチャイムが鳴り、ポモドーロタイマーが完了します！

5. まとめ

今回の記事では、Project Manager と tasks.json を組み合わせて、プロジェクト切り替え時に音楽を自動再生する方法 を紹介しました。

この仕組みは音楽の再生以外にも応用可能で、たとえば Docker の自動起動、環境変数の設定、エディタのカスタマイズ など、さまざまな用途に活用できます。ぜひ、あなたの開発環境に取り入れてみてください！

採用情報

現在エンジニア募集しています！

▼ 採用ページ
https://recruit.peraichi.co.jp/

▼ 選考をご希望の方はこちら（募集職種一覧）
https://recruit.peraichi.co.jp/careers/?utm_source=techblog&utm_medium=referral&utm_campaign=article-01jjr5n8f4e1yanvmpzchajjrs

▼ まずはカジュアル面談をご希望の方はこちら
https://casual.hp.peraichi.com/?utm_source=techblog&utm_medium=referral&utm_campaign=article-01jjr5n8f4e1yanvmpzchajjrs

募集中の職種についてご興味がある方は、お気軽にお申し込みください（CTO がお会いします）