<h1 id="%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%82%84%E3%82%8B%E3%81%93%E3%81%A8" aria-hidden="true"></a> やること</h1>
<p data-line="2" class="code-line">下記の画像のように Claude Code に投げたタスクが完了した際に、サウンド付きでデスクトップ通知してサボり者の自分にムチをうちます。</p>
<p data-line="4" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/b64927070169-20250706.png" loading="lazy" class="md-img"></p>
<h1 id="%E5%8B%95%E6%A9%9F" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E6%A9%9F" aria-hidden="true"></a> 動機</h1>
<p data-line="9" class="code-line">私は怠け者ですので Claude Code にタスクを投げたまま Youtube を見てしまい、無限に時間を溶かし続けていました。</p>
<p data-line="11" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__cce24fe030656" src="https://embed.zenn.studio/card#zenn-embedded__cce24fe030656" data-content="https%3A%2F%2Fdocs.anthropic.com%2Fen%2Frelease-notes%2Fclaude-code" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.anthropic.com/en/release-notes/claude-code" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.anthropic.com/en/release-notes/claude-code</a></p>
<p data-line="13" class="code-line">上記の Release Notes にあるように、2025/06/30（多分 JST じゃないと思う....） に Claude Code に <code>Hooks</code> という機能が追加されました。</p>
<p data-line="15" class="code-line">これが神機能で、Introduction にあるように</p>
<p data-line="17" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__1e70f6eaf7c03" src="https://embed.zenn.studio/card#zenn-embedded__1e70f6eaf7c03" data-content="https%3A%2F%2Fdocs.anthropic.com%2Fen%2Fdocs%2Fclaude-code%2Fhooks%23introduction" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.anthropic.com/en/docs/claude-code/hooks#introduction" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.anthropic.com/en/docs/claude-code/hooks#introduction</a></p>
<blockquote data-line="19" class="code-line">
<p data-line="19" class="code-line">Claude Code hooks are user-defined shell commands that execute at various points in Claude Code’s lifecycle.</p>
</blockquote>
<p data-line="21" class="code-line">とのこと。Hook を登録しておけば Claude Code のライフサイクルイベントとして発火できるよということですね。</p>
<p data-line="23" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4e140d390dbaf" src="https://embed.zenn.studio/card#zenn-embedded__4e140d390dbaf" data-content="https%3A%2F%2Fdocs.anthropic.com%2Fen%2Fdocs%2Fclaude-code%2Fhooks%23stop" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.anthropic.com/en/docs/claude-code/hooks#stop" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.anthropic.com/en/docs/claude-code/hooks#stop</a></p>
<blockquote data-line="25" class="code-line">
<p data-line="25" class="code-line">Stop<br>
Runs when the main Claude Code agent has finished responding.</p>
</blockquote>
<p data-line="28" class="code-line">こいつを使えば agent のタスク完了を通知できそうということで作業に取り掛かかりました。</p>
<h1 id="%E6%89%8B%E9%A0%86" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%E6%89%8B%E9%A0%86" aria-hidden="true"></a> 手順</h1>
<p data-line="32" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__8bbed3b7b4008" src="https://embed.zenn.studio/card#zenn-embedded__8bbed3b7b4008" data-content="https%3A%2F%2Fdocs.anthropic.com%2Fen%2Fdocs%2Fclaude-code%2Fhooks%23quickstart" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.anthropic.com/en/docs/claude-code/hooks#quickstart" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.anthropic.com/en/docs/claude-code/hooks#quickstart</a></p>
<p data-line="34" class="code-line">これはもう公式ドキュメントを見るべきですが、自分が行った作業を簡単に書き記しておきます。</p>
<h2 id="%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E7%94%A8%E6%84%8F%E3%81%99%E3%82%8B" aria-hidden="true"></a> 登録するコマンドを用意する</h2>
<p data-line="38" class="code-line">要件は、<code>macOS のデスクトップに通知をする</code> です。色々と拘ろうと思えばいくらでも拘れる気もしますが、一旦はシンプルに目的を達成するためのものを用意しました。</p>
<p data-line="40" class="code-line">そもそも、何を使えばいいのかすら知らなかったので <code>desktop notifications cli macOS</code> と入力しググってみたところ <code>osascript</code> というコマンドがあることを知りました。</p>
<p data-line="42" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7f1de5756eb21" src="https://embed.zenn.studio/card#zenn-embedded__7f1de5756eb21" data-content="https%3A%2F%2Fblog.petehouston.com%2Fsend-desktop-notification-from-command-line-in-macos%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://blog.petehouston.com/send-desktop-notification-from-command-line-in-macos/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://blog.petehouston.com/send-desktop-notification-from-command-line-in-macos/</a></p>
<p data-line="44" class="code-line">深く考えず、このコマンドを使うだけで良さそう。<code>OSA</code> や <code>-e</code> オプションについては下記を見てください。</p>
<p data-line="46" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d63bca45310d9" src="https://embed.zenn.studio/card#zenn-embedded__d63bca45310d9" data-content="https%3A%2F%2Fja.wikipedia.org%2Fwiki%2FOpen_Scripting_Architecture" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ja.wikipedia.org/wiki/Open_Scripting_Architecture" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ja.wikipedia.org/wiki/Open_Scripting_Architecture</a></p>
<p data-line="48" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f965f8a087066" src="https://embed.zenn.studio/card#zenn-embedded__f965f8a087066" data-content="https%3A%2F%2Fss64.com%2Fmac%2Fosascript.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://ss64.com/mac/osascript.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://ss64.com/mac/osascript.html</a></p>
<p data-line="50" class="code-line">これらの情報を元に作ったコマンドは以下の通りです。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="52">osascript <span class="token parameter variable">-e</span> <span class="token string">'display notification "Invoke \"Stop\" event." with title "Claude Code" sound name "Glass"'</span>
</code></pre></div><h2 id="%E9%80%9A%E7%9F%A5%E3%81%8C%E9%A3%9B%E3%81%B6%E3%81%8B%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B" data-line="56" class="code-line">
<a class="header-anchor-link" href="#%E9%80%9A%E7%9F%A5%E3%81%8C%E9%A3%9B%E3%81%B6%E3%81%8B%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B" aria-hidden="true"></a> 通知が飛ぶかチェックする</h2>
<p data-line="58" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/4c1d24caf47c-20250706.png" loading="lazy" class="md-img"></p>
<p data-line="60" class="code-line">画像の通り、<code>Glass</code> という SE が鳴り、デスクトップに通知が飛んでくれました。</p>
<p data-line="62" class="code-line">ちなみに、SE はこの Hooks を布教した知り合いが <code>Glass</code> を使っていて、確かに気づけそう且つ不快じゃないということで真似させてもらいました（でも、もしかしたら不快な音の方が気づけるかもしれない）。下記のリポジトリのファイル名を CLI に打ち込んで片っ端から試すのがいいと思います。</p>
<p data-line="64" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7f61c2a07fcfa" src="https://embed.zenn.studio/card#zenn-embedded__7f61c2a07fcfa" data-content="https%3A%2F%2Fgithub.com%2Fextratone%2FmacOSsystemsounds%2Ftree%2Fmain%2Faiff" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/extratone/macOSsystemsounds/tree/main/aiff" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/extratone/macOSsystemsounds/tree/main/aiff</a></p>
<p data-line="66" class="code-line">前述のコマンドの <code>Glass</code> の部分を <code>Basso</code> とかに変えて気に入ったやつを使ってください。もしかしたらこのフォルダ配下にはないが、指定可能な SE もあるかもしれない。がしかし <code>Glass</code> が気に入ったので、これ以上調べなかったです。</p>
<h2 id="hooks-%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B" data-line="68" class="code-line">
<a class="header-anchor-link" href="#hooks-%E3%81%AB%E7%99%BB%E9%8C%B2%E3%81%99%E3%82%8B" aria-hidden="true"></a> Hooks に登録する</h2>
<ol data-line="70" class="code-line">
<li data-line="70" class="code-line">Claude Code を起動する</li>
</ol>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="72">claude
</code></pre></div><ol start="2" data-line="76" class="code-line">
<li data-line="76" class="code-line">
<code>/hooks</code> と入力する</li>
</ol>
<p data-line="78" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d8e40c020557-20250706.png" loading="lazy" class="md-img"></p>
<ol start="3" data-line="80" class="code-line">
<li data-line="80" class="code-line">ライフサイクルイベントを選ぶ</li>
</ol>
<p data-line="82" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/5fd2910c0de2-20250706.png" loading="lazy" class="md-img"></p>
<p data-line="84" class="code-line">今回はタスク完了後に通知が欲しいので <code>Stop</code> を選択しました。</p>
<ol start="4" data-line="86" class="code-line">
<li data-line="86" class="code-line">new hook として登録する</li>
</ol>
<p data-line="88" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/440fba4b58b6-20250706.png" loading="lazy" class="md-img"></p>
<ol start="5" data-line="90" class="code-line">
<li data-line="90" class="code-line">コマンドをコピペする</li>
</ol>
<p data-line="92" class="code-line">先ほど CLI で試したコマンドをそのままコピペすればいいです。</p>
<p data-line="94" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d7b79e6559e4-20250706.png" loading="lazy" class="md-img"></p>
<ol start="6" data-line="96" class="code-line">
<li data-line="96" class="code-line">Hooks の適用スコープを決める</li>
</ol>
<p data-line="98" class="code-line">今回の設定はあらゆるプロジェクトで有効にしたかったので <code>User</code> スコープに設定しました。</p>
<p data-line="100" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/86fd7836c8f8-20250706.png" loading="lazy" class="md-img"></p>
<p data-line="102" class="code-line">User スコープでは画像の通り <code>~/.claude/settings.json</code> に保存がされます。</p>
<p data-line="104" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9de2f9c61d31-20250706.png" loading="lazy" class="md-img"></p>
<p data-line="106" class="code-line">こんな感じになっています。<code>matcher</code> を指定することで発火条件を絞り込めるようですが、今回は常に発火してほしいものなので未指定。</p>
<h1 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" data-line="108" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h1>
<p data-line="110" class="code-line">少し見づらいが、画像の右上に通知が出ていることが分かる。</p>
<p data-line="112" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/dd5cddcb928e-20250706.png" loading="lazy" class="md-img"></p>
<p data-line="114" class="code-line">めでたしめでたし。</p>


Claude Code の Hooks でタスクの完了をデスクトップ通知する

Discussion