<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" xml:lang="ja"><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://naoqoo2.com/feed.xml" rel="self" type="application/atom+xml" /><link href="https://naoqoo2.com/" rel="alternate" type="text/html" hreflang="ja" /><updated>2026-04-10T23:35:27+09:00</updated><id>https://naoqoo2.com/feed.xml</id><title type="html">naoqoo2</title><subtitle>naoqoo2のエンジニアブログです。</subtitle><author><name>naoqoo2</name></author><entry><title type="html">急がば回れ｜今週の気づき</title><link href="https://naoqoo2.com/retrospective/20260403/" rel="alternate" type="text/html" title="急がば回れ｜今週の気づき" /><published>2026-04-03T00:00:00+09:00</published><updated>2026-04-03T00:00:00+09:00</updated><id>https://naoqoo2.com/retrospective/20260403</id><content type="html" xml:base="https://naoqoo2.com/retrospective/20260403/"><![CDATA[<p>新しい環境に入ってすぐの今、正直なところ「わからないことだらけ」です。
業務知識も、進め方も、文化の違いも、毎日がはじめての連続。</p>

<p>「まだチームの力になれていないな」と感じる瞬間も多くて、
人間関係や信頼関係も、これから一つずつ積み上げていく段階。</p>

<p>だからこそ、ふとしたタイミングで、
「この選択は本当に良かったのかな……？」
そんな不安や焦りが顔を出すこともあります。</p>

<p>でも、今週あらためて思ったのは、
最短の近道は、じっくり確実に進むことだということ。</p>

<p>わからないことが多い中、すべてを完全に把握することは不可能なので、
一つひとつ学んで、吸収して、次に活かす。
小さくても確実に前進する。</p>

<p>焦って背伸びするより、地に足をつけて積み上げるほうが、
結果的に早く、遠くまで行ける。</p>

<p><strong>急がば回れ。</strong></p>

<p>この言葉を、しばらく自分の合言葉にして進んでいきます。</p>]]></content><author><name>naoqoo2</name></author><category term="retrospective" /><category term="ふりかえり" /><category term="急がば回れ" /><summary type="html"><![CDATA[新しい環境に入ってすぐの今、正直なところ「わからないことだらけ」です。 業務知識も、進め方も、文化の違いも、毎日がはじめての連続。]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Playwright でページの一部だけを自動化する方法</title><link href="https://naoqoo2.com/blog/selenium-ide-playwright/" rel="alternate" type="text/html" title="Playwright でページの一部だけを自動化する方法" /><published>2026-02-09T00:00:00+09:00</published><updated>2026-02-09T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/selenium-ide-playwright</id><content type="html" xml:base="https://naoqoo2.com/blog/selenium-ide-playwright/"><![CDATA[<p>これまで Selenium IDE を使って</p>

<ul>
  <li>「ページの一部だけを自動化したい」</li>
  <li>「ちょっとした操作を繰り返したい」</li>
</ul>

<p>という用途でブラウザ操作を自動化していました。<br />
テストのために特定のフォームだけ自動入力したりとかね。</p>

<p>しかし最近、Selenium IDE がサポート終了となり Chrome の拡張機能で使えなくなってしまったため、AIちゃんにおすすめされた Playwright を試してみることにしました。</p>

<p>結論から言うと、Selenium IDE 的な使い方もできて満足！</p>

<p>この記事では、</p>

<ul>
  <li>Playwright のインストール方法</li>
  <li>Selenium IDE っぽく「ページの一部だけ自動化」する方法</li>
  <li>ハマりポイント（ウィンドウが閉じる問題）</li>
</ul>

<p>をまとめます。</p>

<h1 id="playwright-のインストール方法">Playwright のインストール方法</h1>

<p>Node.js が入っていれば、まずはこれだけで試せます。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx playwright codegen https://example.com
</code></pre></div></div>

<p>初回は Playwright 本体やブラウザのインストールが走ります。もし途中でエラーが出た場合は、以下を実行してください。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx playwright <span class="nb">install</span>
</code></pre></div></div>

<p>これで録画モード（codegen）が起動し、操作すると自動でコードが生成されます。</p>

<h1 id="playwright-は開いているウィンドウを操作できない">Playwright は「開いているウィンドウ」を操作できない</h1>

<ul>
  <li>すでに開いている Chrome / タブを対象にすることはできない</li>
  <li>Playwright が起動したブラウザのみ操作対象</li>
</ul>

<p>となります。（Selenium IDE も同様）</p>

<p>昔の時代の Selenium IDE は「今見ているページの一部だけ自動化」ができて便利だったのになぁ。。</p>

<p>ということで工夫が必要です。</p>

<h1 id="ページの一部だけを自動化する方法">ページの一部だけを自動化する方法</h1>

<p>ここで活躍するのが <code class="language-plaintext highlighter-rouge">await page.pause()</code> です。</p>

<p>基本の考え方</p>

<ul>
  <li>Playwright でブラウザを起動する</li>
  <li>対象ページを開く</li>
  <li>pause で止める</li>
  <li>自動化したい処理を実行</li>
  <li>また pause で止める</li>
</ul>

<p>実際のコード例</p>

<div class="language-ts highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">test</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">@playwright/test</span><span class="dl">'</span><span class="p">;</span>

<span class="nx">test</span><span class="p">(</span><span class="dl">'</span><span class="s1">部分的に自動化する</span><span class="dl">'</span><span class="p">,</span> <span class="k">async</span> <span class="p">({</span> <span class="nx">page</span> <span class="p">})</span> <span class="o">=&gt;</span> <span class="p">{</span>
  <span class="c1">// ① まず起動してページを開く</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">goto</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://example.com</span><span class="dl">'</span><span class="p">);</span>

  <span class="c1">// ② 手動操作したいところで止める</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>

  <span class="c1">// ③ 自動実行したい処理</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">locator</span><span class="p">(</span><span class="dl">'</span><span class="s1">#submit</span><span class="dl">'</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">locator</span><span class="p">(</span><span class="dl">'</span><span class="s1">#count</span><span class="dl">'</span><span class="p">).</span><span class="nx">fill</span><span class="p">(</span><span class="dl">'</span><span class="s1">3</span><span class="dl">'</span><span class="p">);</span>

  <span class="c1">// ④ 再び止める（結果確認用）</span>
  <span class="k">await</span> <span class="nx">page</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>
<span class="p">});</span>
</code></pre></div></div>

<p>この状態で</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npx playwright <span class="nb">test</span> <span class="nt">--debug</span>
</code></pre></div></div>

<p>を実行すると、</p>

<ul>
  <li>pause の位置で完全に停止</li>
  <li>ブラウザを手動で操作できる</li>
  <li>Inspector から再開できる</li>
</ul>

<p>という流れになります。旧Selenium IDE の「途中から操作 → 再生」にかなり近い体験ができます。</p>

<h1 id="なぜ-pause-を挟むのが重要なのか">なぜ pause を挟むのが重要なのか</h1>

<p>Playwright は</p>

<ul>
  <li>テストが最後まで走る</li>
  <li>終了するとブラウザを自動で閉じる</li>
</ul>

<p>という設計です。</p>

<p>つまり、</p>

<ul>
  <li>pause を入れない</li>
  <li>自動処理が最後まで終わる</li>
</ul>

<p>と、ウィンドウが一瞬で閉じてしまいます。</p>

<p>「確認したい」「途中で操作したい」場合は、必ず <code class="language-plaintext highlighter-rouge">await page.pause()</code> を入れるのがポイントです。</p>

<h1 id="まとめ">まとめ</h1>

<ul>
  <li>Selenium IDE の代替として Playwright は十分使える</li>
  <li>ただし既に開いているウィンドウは操作できない</li>
  <li><code class="language-plaintext highlighter-rouge">await page.pause()</code> を使えば途中で止めたり、ページの一部だけ自動化できる</li>
  <li>pause を入れないと最後にウィンドウが閉じるので注意</li>
</ul>

<p>旧Selenium IDE に慣れている人ほど、最初は思想の違いに戸惑いますが、pause を使いこなせると一気に世界が変わると感じました。</p>

<p>「ちょっとした自動化」「デバッグ用途」でも Playwright、かなりアリです。</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="Playwright" /><category term="E2Eテスト" /><category term="ブラウザ自動化" /><summary type="html"><![CDATA[これまで Selenium IDE を使って]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">俺のCodex</title><link href="https://naoqoo2.com/blog/%E4%BF%BA%E3%81%AEcodex/" rel="alternate" type="text/html" title="俺のCodex" /><published>2026-02-03T00:00:00+09:00</published><updated>2026-02-03T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/%E4%BF%BA%E3%81%AEcodex</id><content type="html" xml:base="https://naoqoo2.com/blog/%E4%BF%BA%E3%81%AEcodex/"><![CDATA[<p>「<a href="/blog/my-antigravity/">俺のAntigravity</a>」に続いて、Codex CLI の設定メモを置いておきます。</p>

<h1 id="サンドボックスでネットワークを許可する">サンドボックスでネットワークを許可する</h1>

<p><code class="language-plaintext highlighter-rouge">gh</code> コマンドで GitHub の PR を見たい時、サンドボックスのネットワークが遮断されていると失敗します。（以前は不要だったのにいつからかセキュリティ周り厳しくなってました）</p>

<p>下記を追記すればOK！</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>vi ~/.codex/config.toml
</code></pre></div></div>

<div class="language-toml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">[sandbox_workspace_write]</span>
<span class="py">network_access</span> <span class="p">=</span> <span class="kc">true</span>
</code></pre></div></div>

<ul>
  <li><code class="language-plaintext highlighter-rouge">sandbox_workspace_write</code> セクションで <code class="language-plaintext highlighter-rouge">network_access = true</code> にすると、サンドボックスから外部ネットワークへ出られるようになります。</li>
  <li>これで <code class="language-plaintext highlighter-rouge">gh pr view</code> や <code class="language-plaintext highlighter-rouge">gh pr checkout</code> がサンドボックス内で動作するようになります。</li>
</ul>

<h1 id="mcp-設定の詳しい手順">MCP 設定の詳しい手順</h1>

<p>MCP の追加やコマンド運用の詳細は、別途まとめた記事に置きました。</p>

<ul>
  <li><a href="/blog/codex-cli-mcp-command-guide/">Codex CLI MCP コマンド活用ガイド</a></li>
</ul>

<h1 id="さいごに">さいごに</h1>

<p>Codex も Antigravity と同じく、まずサンドボックス設定を整えてから使うのオススメです。
今後も細かいTipsをこの「俺のCodex」に追記していきます。</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="Codex" /><category term="俺の" /><summary type="html"><![CDATA[「俺のAntigravity」に続いて、Codex CLI の設定メモを置いておきます。]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">俺のAntigravity</title><link href="https://naoqoo2.com/blog/my-antigravity/" rel="alternate" type="text/html" title="俺のAntigravity" /><published>2026-01-29T00:00:00+09:00</published><updated>2026-01-29T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/my-antigravity</id><content type="html" xml:base="https://naoqoo2.com/blog/my-antigravity/"><![CDATA[<p>GoogleのAIエージェント「Antigravity」のショートカットや設定方法を忘れないようにまとめます。</p>

<h1 id="ショートカット">ショートカット</h1>

<h2 id="エージェントマネージャーへの切り替え">エージェントマネージャーへの切り替え</h2>

<p><code class="language-plaintext highlighter-rouge">Ctrl + E</code></p>

<p>メイン ウィンドウ Editor と Agent Manager を切り替えます。</p>

<h2 id="設定画面へ">設定画面へ</h2>

<p>エージェントマネージャーで</p>

<p><code class="language-plaintext highlighter-rouge">Ctrl + ,</code></p>

<p>設定を変更したい時に素早くアクセスできます。</p>

<h1 id="設定">設定</h1>

<h2 id="auto-continue--on">Auto-continue = ON</h2>

<p>生成が途切れた時に、自動で「続き（Continue）」をしてくれる設定です。
長いコードを生成している時などに、途中で止まってしまうのを防いでくれます。</p>

<h2 id="enable-terminal-sandbox--on">Enable Terminal Sandbox = ON</h2>

<p>ターミナルコマンドをサンドボックス環境で実行する設定です。
ローカル環境（macOS）への影響を抑え、安全にコマンドを実行させるためにONにしておきます。</p>

<h2 id="sandbox-allow-network--on">Sandbox Allow Network = ON</h2>

<p>サンドボックス内でネットワークリクエストを許可する設定です。
これがOFFだと、<code class="language-plaintext highlighter-rouge">npm install</code> や外部APIへのアクセスなどが失敗してしまうため、基本的にはONにしておきます。</p>

<h2 id="artifact-review-policy--agent-decides">Artifact Review Policy = Agent Decides</h2>

<p>成果物（Artifact）のレビューを求めるか。
Agent Decides はタスクの複雑さやユーザーの好みに基づいて、エージェントが自律的に判断します。
基本的には効率よくAIに作業してもらうため、エージェントの自律性を優先しています。</p>

<h2 id="terminal-command-auto-execution--always-proceed">Terminal Command Auto Execution = Always Proceed</h2>

<p>ターミナルコマンドの実行前にユーザーに確認を求めるか。
Always Proceedにして、拒否リストにあるものを除き許可しています。
こちらは予期せぬコマンドを実行される懸念もありますが、サンドボックスで実行されるようになったので安心かなと。</p>

<h2 id="browser-javascript-execution-policy--always-proceed">Browser Javascript Execution Policy = Always Proceed</h2>

<p>ブラウザでのJavaScript実行時に許可を求めない設定です。
JavaScriptは基本ONでないと多くのサイトが操作できないため、Always Proceedにしています。
セキュリティ的な懸念もそこまで高くないと判断しています。</p>

<h1 id="mcp">MCP</h1>

<h2 id="設定ファイルのパス">設定ファイルのパス</h2>

<p><code class="language-plaintext highlighter-rouge">~/.gemini/antigravity/mcp_config.json</code></p>

<p>中身こんな感じ。JSONなので最後にカンマあるとエラーになるので編集時注意。</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
  </span><span class="nl">"mcpServers"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="nl">"slack"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="p">},</span><span class="w">
    </span><span class="nl">"notionApi"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="p">}</span><span class="w">
  </span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<h2 id="slack-mcp">Slack MCP</h2>

<h3 id="手順">手順</h3>

<ol>
  <li><a href="https://api.slack.com/apps">Slack API</a> でアプリを作成（From scratch）</li>
  <li><strong>OAuth &amp; Permissions</strong> で <code class="language-plaintext highlighter-rouge">chat:write</code>, <code class="language-plaintext highlighter-rouge">channels:history</code> などの権限を付与</li>
  <li><strong>Install to Workspace</strong> を実行し、<code class="language-plaintext highlighter-rouge">Bot User OAuth Token</code> (<code class="language-plaintext highlighter-rouge">xoxb-...</code>) を取得</li>
  <li>ワークスペースのURLなどから <code class="language-plaintext highlighter-rouge">Team ID</code> (<code class="language-plaintext highlighter-rouge">T...</code>) を取得</li>
</ol>

<h3 id="設定の記述">設定の記述</h3>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nl">"slack"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
  </span><span class="nl">"command"</span><span class="p">:</span><span class="w"> </span><span class="s2">"npx"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"args"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"-y"</span><span class="p">,</span><span class="w"> </span><span class="s2">"@modelcontextprotocol/server-slack"</span><span class="p">],</span><span class="w">
  </span><span class="nl">"env"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="nl">"SLACK_BOT_TOKEN"</span><span class="p">:</span><span class="w"> </span><span class="s2">"xoxb-xxxx..."</span><span class="p">,</span><span class="w">
    </span><span class="nl">"SLACK_TEAM_ID"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Txxxx..."</span><span class="w">
  </span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<h2 id="notion-mcp">Notion MCP</h2>

<h3 id="手順-1">手順</h3>

<ol>
  <li><a href="https://www.notion.so/my-integrations">My Integrations</a> で新しいインテグレーションを作成</li>
  <li><code class="language-plaintext highlighter-rouge">Internal Integration Secret</code> (<code class="language-plaintext highlighter-rouge">ntn_...</code>) を取得</li>
  <li>接続したいページで、右上の「…」メニュー &gt; <strong>Connect</strong> (接続) &gt; 作成したインテグレーションを選択</li>
</ol>

<h3 id="設定の記述-1">設定の記述</h3>

<p><code class="language-plaintext highlighter-rouge">OPENAPI_MCP_HEADERS</code> にJSON形式で認証情報を渡します。</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nl">"notionApi"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
  </span><span class="nl">"command"</span><span class="p">:</span><span class="w"> </span><span class="s2">"npx"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"args"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"-y"</span><span class="p">,</span><span class="w"> </span><span class="s2">"@notionhq/notion-mcp-server"</span><span class="p">],</span><span class="w">
  </span><span class="nl">"env"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="nl">"OPENAPI_MCP_HEADERS"</span><span class="p">:</span><span class="w"> </span><span class="s2">"{</span><span class="se">\"</span><span class="s2">Authorization</span><span class="se">\"</span><span class="s2">: </span><span class="se">\"</span><span class="s2">Bearer ntn_xxxx...</span><span class="se">\"</span><span class="s2">, </span><span class="se">\"</span><span class="s2">Notion-Version</span><span class="se">\"</span><span class="s2">: </span><span class="se">\"</span><span class="s2">2022-06-28</span><span class="se">\"</span><span class="s2"> }"</span><span class="w">
  </span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<h2 id="figma-mcp">Figma MCP</h2>

<h3 id="手順-2">手順</h3>

<p>FigmaデスクトップアプリをインストールしてデスクトップMCPサーバーとして実行します。そのためトークンは不要。</p>

<ol>
  <li>Figmaデスクトップアプリをインストール（最新版）</li>
  <li>Figma Designファイルを開く</li>
  <li><strong>Dev Mode</strong> に切り替える (<code class="language-plaintext highlighter-rouge">Shift + D</code>)</li>
  <li>インスペクトパネルの <strong>MCP Server</strong> セクションで「デスクトップMCPサーバーを有効化」をクリック</li>
</ol>

<h3 id="設定の記述-2">設定の記述</h3>

<p>Figmaアプリとローカル通信を行う設定になります。</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nl">"figma-dev-mode-mcp-server"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
  </span><span class="nl">"command"</span><span class="p">:</span><span class="w"> </span><span class="s2">"npx"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"args"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="s2">"mcp-remote"</span><span class="p">,</span><span class="w">
    </span><span class="s2">"http://127.0.0.1:3845/sse"</span><span class="w">
  </span><span class="p">],</span><span class="w">
  </span><span class="nl">"env"</span><span class="p">:</span><span class="w"> </span><span class="p">{}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<h3 id="備考">備考</h3>

<p>Figmaアプリ入れずにリモートMCPサーバーで動作させてみようとしたがイマイチ記法がわからず諦めました。</p>

<p>参考：<a href="https://help.figma.com/hc/ja/articles/32132100833559">Figmaの公式ヘルプ</a></p>

<h2 id="github-mcp">GitHub MCP</h2>

<h3 id="手順-3">手順</h3>

<ol>
  <li>GitHubの <a href="https://github.com/settings/tokens">Developer Settings</a> へ</li>
  <li><strong>Personal access tokens (Classic)</strong> または <strong>Fine-grained tokens</strong> を作成</li>
  <li>必要な権限（Repo, Userなど）を付与して生成</li>
</ol>

<h3 id="設定の記述-3">設定の記述</h3>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nl">"github-mcp-server"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
  </span><span class="nl">"command"</span><span class="p">:</span><span class="w"> </span><span class="s2">"docker"</span><span class="p">,</span><span class="w">
  </span><span class="nl">"args"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
    </span><span class="s2">"run"</span><span class="p">,</span><span class="w">
    </span><span class="s2">"-i"</span><span class="p">,</span><span class="w">
    </span><span class="s2">"--rm"</span><span class="p">,</span><span class="w">
    </span><span class="s2">"-e"</span><span class="p">,</span><span class="w">
    </span><span class="s2">"GITHUB_PERSONAL_ACCESS_TOKEN"</span><span class="p">,</span><span class="w">
    </span><span class="s2">"ghcr.io/github/github-mcp-server"</span><span class="w">
  </span><span class="p">],</span><span class="w">
  </span><span class="nl">"env"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
    </span><span class="nl">"GITHUB_PERSONAL_ACCESS_TOKEN"</span><span class="p">:</span><span class="w"> </span><span class="s2">"ghp_xxxx..."</span><span class="w">
  </span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="Antigravity" /><category term="俺の" /><summary type="html"><![CDATA[GoogleのAIエージェント「Antigravity」のショートカットや設定方法を忘れないようにまとめます。]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">電車の中でスマホで開発する時代が来ました！Codexという選択</title><link href="https://naoqoo2.com/blog/coding-on-smartphone-with-codex/" rel="alternate" type="text/html" title="電車の中でスマホで開発する時代が来ました！Codexという選択" /><published>2026-01-28T00:00:00+09:00</published><updated>2026-01-28T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/coding-on-smartphone-with-codex</id><content type="html" xml:base="https://naoqoo2.com/blog/coding-on-smartphone-with-codex/"><![CDATA[<h2 id="はじめに">はじめに</h2>

<p>「開発は PC の前でやるもの」。</p>

<p>そう思っていましたが、最近その前提が崩れ始めています。<br />
理由はシンプルで、<strong>AI がコードを書くようになったから</strong>です。</p>

<p>この記事では、</p>

<ul>
  <li>電車の中</li>
  <li>スマホだけ</li>
  <li>ローカル環境なし</li>
</ul>

<p>という制約下で、<br />
<strong>どこまで実用的な開発ができるのか</strong>を整理します。</p>

<hr />

<h2 id="スマホ開発が難しかった理由">スマホ開発が難しかった理由</h2>

<p>これまでスマホでの開発が現実的でなかった理由は明確です。</p>

<ul>
  <li>キーボード入力が厳しい</li>
  <li>ローカル環境が必要</li>
  <li>エディタ・ターミナル操作が前提</li>
</ul>

<p>要するに <strong>「コードを書く」こと自体がスマホに向いていませんでした</strong>。</p>

<hr />

<h2 id="前提が変わったai-がコードを書く">前提が変わった：AI がコードを書く</h2>

<p>近年の AI コーディングは、</p>

<ul>
  <li>補完する</li>
  <li>提案する</li>
</ul>

<p>段階を越えて、<strong>タスクを渡すと AI が実装までやる</strong>フェーズに入っています。</p>

<p>ここで重要なのは <strong>人間がコードを書かなくてもよくなった</strong> 点です。</p>

<hr />

<h2 id="codex-という存在">Codex という存在</h2>

<p>Codex は、この流れを決定的にした存在です。</p>

<p>ブラウザ上で Codex を使うと、</p>

<ul>
  <li>GitHub リポジトリを選ぶ</li>
  <li>「この Issue を直して」と指示する</li>
  <li>Codex が自動で：
    <ul>
      <li>リポジトリを clone</li>
      <li>実行環境を構築</li>
      <li>修正・テスト</li>
      <li>diff/PR を生成</li>
    </ul>
  </li>
</ul>

<p>人間は、</p>

<ul>
  <li>指示する</li>
  <li>結果を確認する</li>
  <li>判断する</li>
</ul>

<p>だけでOK。</p>

<hr />

<h2 id="codex-と-codex-cli-の違い">Codex と Codex CLI の違い</h2>

<p>本記事で扱う「Codex」は <strong>ブラウザ上で利用する Codex（Web UI）</strong> を指しています。<br />
Codex には CLI ツールとして <strong>Codex CLI</strong> もありますが、思想と利用体験が大きく異なります。</p>

<h3 id="codexブラウザ版">Codex（ブラウザ版）</h3>

<ul>
  <li>ブラウザで完結</li>
  <li>GitHub と直接連携</li>
  <li>環境構築は不要</li>
  <li>タスク単位で実行</li>
  <li>同じリポジトリに対して <strong>複数タスクを並列で依頼できる</strong></li>
</ul>

<h3 id="codex-cli">Codex CLI</h3>

<ul>
  <li>ターミナルで利用</li>
  <li>ローカルにリポジトリが必要</li>
  <li>実行環境は自分で管理</li>
  <li>並列タスクは自前で工夫が必要</li>
</ul>

<p>比較すると以下の通り。</p>

<table>
  <thead>
    <tr>
      <th>項目</th>
      <th>Codex（ブラウザ）</th>
      <th>Codex CLI</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>利用形態</td>
      <td>ブラウザ</td>
      <td>ターミナル</td>
    </tr>
    <tr>
      <td>環境構築</td>
      <td>不要（自動）</td>
      <td>必要</td>
    </tr>
    <tr>
      <td>GitHub連携</td>
      <td>あり</td>
      <td>なし（ローカル）</td>
    </tr>
    <tr>
      <td>並列タスク</td>
      <td>可能</td>
      <td>基本不可</td>
    </tr>
    <tr>
      <td>スマホ利用</td>
      <td>可能</td>
      <td>不可</td>
    </tr>
  </tbody>
</table>

<hr />

<h2 id="なぜ-codex-はスマホと相性がいいのか">なぜ Codex はスマホと相性がいいのか</h2>

<h3 id="1-ブラウザだけで完結する">1. ブラウザだけで完結する</h3>

<ul>
  <li>ローカル環境不要</li>
  <li>SSH 不要</li>
  <li>エディタ操作不要</li>
</ul>

<p><strong>スマホの弱点をすべて回避しています。</strong></p>

<hr />

<h3 id="2-入力が最小限">2. 入力が最小限</h3>

<p>スマホでやることはほぼこれだけ。</p>

<ul>
  <li>「A を修正して」</li>
  <li>「テスト追加して」</li>
  <li>「別案も作って」</li>
</ul>

<p>長文のコード入力は不要です。</p>

<hr />

<h3 id="3-並列タスクができる">3. 並列タスクができる</h3>

<p>Codex の本質的な強みはここにあります。</p>

<ul>
  <li>同じリポジトリに対して</li>
  <li>複数の Codex 実行を</li>
  <li>同時に走らせられる</li>
</ul>

<p>例：</p>

<p>バグ修正 → Codex A<br />
リファクタ → Codex B<br />
テスト追加 → Codex C</p>

<p><strong>人間 1 人 + AI 複数人</strong> という構図が成立します。</p>

<h2 id="電車の中でできる実用的な開発">電車の中でできる「実用的な開発」</h2>

<p>実際に電車内でできることは多いです。</p>

<ul>
  <li>Issue を投げる</li>
  <li>PR をレビューする</li>
  <li>実装方針をコメントする</li>
  <li>並列タスクの結果を比較する</li>
  <li>マージ判断をする</li>
</ul>

<p>もはやこれは <strong>「開発」ではなく「マネジメント」</strong> に近いです。</p>

<hr />

<h2 id="開発者の役割が変わる">開発者の役割が変わる</h2>

<p>スマホで書けるかどうかより、<br />
<strong>AI に任せられる範囲が広がったこと</strong>が本質です。</p>

<p>開発者は「実装する人」から、<br />
<strong>方向を決めて結果を判断する人</strong>へ移ってきています。</p>

<p>通勤時間に方針を決めてAIに依頼。
出社後に結果をレビューして判断する。</p>

<hr />

<h2 id="まとめ">まとめ</h2>

<ul>
  <li>変化の中心は <strong>AI に実装を任せられるようになったこと</strong></li>
  <li>Codex（ブラウザ版）は
    <ul>
      <li>環境構築</li>
      <li>実装</li>
      <li>実行</li>
      <li>PR 作成
までを肩代わりする</li>
    </ul>
  </li>
  <li>電車の中でできるのは
    <ul>
      <li>「書く」ことではなく</li>
      <li><strong>「任せる」「判断する」こと</strong></li>
    </ul>
  </li>
</ul>

<hr />

<h2 id="おわりに">おわりに</h2>

<p>開発の現場は、静かに「書く」から「任せる」へ移りました。<br />
これからの開発者は「実装する人」より「判断する人」になります。</p>

<p>場所は自由、役割は明確。<br />
次に変わるのは、<strong>開発者という役割そのもの</strong>かもしれません。</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="AI" /><category term="Codex" /><category term="スマホで開発" /><summary type="html"><![CDATA[はじめに]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">LaravelでN+1問題を防ぐ！ relationLoaded と preventLazyLoading のすすめ</title><link href="https://naoqoo2.com/blog/laravel-n-plus-one-prevent/" rel="alternate" type="text/html" title="LaravelでN+1問題を防ぐ！ relationLoaded と preventLazyLoading のすすめ" /><published>2026-01-24T00:00:00+09:00</published><updated>2026-01-24T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/laravel-n-plus-one-prevent</id><content type="html" xml:base="https://naoqoo2.com/blog/laravel-n-plus-one-prevent/"><![CDATA[<h1 id="n1問題困るよね">N+1問題、困るよね</h1>

<p>N+1問題は「親データを取った後、子データを件数分だけ追加で取得してしまう」ことで、SQLが爆増してパフォーマンスが落ちる現象。<br />
特にResourceなどのループ処理でリレーションにアクセスすると、気づかないうちに発生しがちです。</p>

<h1 id="何が起きるか">何が起きるか</h1>

<ul>
  <li>1件なら問題ない</li>
  <li>100件になると +100 クエリ</li>
  <li>気づかずリリースして本番で重い！😱</li>
</ul>

<p>N+1は、リリース後に発覚すると辛いので「起きない仕組み」を作ることが大事。</p>

<h1 id="今まではチェックしてたけど下記で防げるよ">今まではチェックしてたけど、下記で防げるよ！</h1>

<p>これまでは開発中にデバッグしてN+1問題が発生していないかSQLチェックしてました。これが地味に面倒で大変。。</p>

<h2 id="relationloaded-を使う">relationLoaded を使う</h2>

<p>Resourceクラス（APIのレスポンス整形層）はループ処理を行うことが多いです。<br />
ここで不用意にリレーションにアクセスすると、データ数分だけSQLが発行されてしまいます。</p>

<p><code class="language-plaintext highlighter-rouge">relationLoaded()</code> を使うことで、</p>

<ul>
  <li>UseCase側で <code class="language-plaintext highlighter-rouge">with()</code> してロード済みなら使う</li>
  <li>そうでなければ無視する</li>
</ul>

<p>という安全な実装になります。<br />
Resource側は「読み込まれていたら使う」だけにしておけば、N+1の温床になりません。これは便利！</p>

<h3 id="例">例</h3>

<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">if</span> <span class="p">(</span><span class="nv">$user</span><span class="o">-&gt;</span><span class="nf">relationLoaded</span><span class="p">(</span><span class="s1">'books'</span><span class="p">))</span> <span class="p">{</span>
    <span class="nv">$books</span> <span class="o">=</span> <span class="nv">$user</span><span class="o">-&gt;</span><span class="n">books</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>UseCase側で必要なデータだけを効率よく <code class="language-plaintext highlighter-rouge">with()</code> しているので、Resource側は安全にそれを参照するだけの構成にできます。</p>

<h1 id="設定しようmodelpreventlazyloading">設定しよう！　Model::preventLazyLoading</h1>

<p>でも毎回 relationLoaded を書くのも手間ですよね。<br />
Laravelデフォルトでそうしておいてほしいですね。そんな機能はないの？</p>

<p>あります！<br />
Laravel 8以降は <code class="language-plaintext highlighter-rouge">Model::preventLazyLoading()</code> で「うっかりN+1」を防げます！</p>

<p>これを有効にすると、<code class="language-plaintext highlighter-rouge">with()</code> していないリレーションにアクセスした瞬間に例外を投げてくれます。<br />
開発中にN+1を完全に防げるので、超強力。</p>

<div class="language-php highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// AppServiceProvider など</span>
<span class="kn">use</span> <span class="nc">Illuminate\Database\Eloquent\Model</span><span class="p">;</span>

<span class="k">public</span> <span class="k">function</span> <span class="n">boot</span><span class="p">()</span>
<span class="p">{</span>
    <span class="nc">Model</span><span class="o">::</span><span class="nf">preventLazyLoading</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></div></div>

<p>開発中と書きましたが、もちろん本番も同じ設定しててOKです。<br />
ローカルや開発環境でしっかりテストしていれば、そこで検知できるので、本番で発生したらバグですね！</p>

<h1 id="まとめ">まとめ</h1>

<ul>
  <li>すでに運用中のシステムなら
    <ul>
      <li><strong>relationLoaded で安全に対策していく</strong></li>
    </ul>
  </li>
  <li>新規構築システムなら
    <ul>
      <li><strong>preventLazyLoading を導入して事故を防ぐ</strong></li>
    </ul>
  </li>
</ul>

<p>この2つを使いこなせば、N+1問題とおさらばですね！<br />
寒い冬はしっかり手洗いうがいをして、インフルエンザとN+1問題を防ぎましょう！</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="Laravel" /><category term="N+1" /><category term="パフォーマンス" /><summary type="html"><![CDATA[N+1問題、困るよね]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">【2026年版】AIコーディング：AIエージェントを使いこなすための実践的Tips</title><link href="https://naoqoo2.com/blog/ai-agent-cording-2026/" rel="alternate" type="text/html" title="【2026年版】AIコーディング：AIエージェントを使いこなすための実践的Tips" /><published>2026-01-15T00:00:00+09:00</published><updated>2026-01-15T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/ai-agent-cording-2026</id><content type="html" xml:base="https://naoqoo2.com/blog/ai-agent-cording-2026/"><![CDATA[<p>2025年6月から約半年間、Claude CodeやCodex CLI、Antigravityを業務で使い込んできました。
日々これらのAIエージェントと過ごす中で見えてきた、開発速度を最大化するための付き合い方・コツについてまとめます。</p>

<hr />

<h2 id="1-そもそも自分で実装しない">1. そもそも「自分で実装しない」</h2>
<ul>
  <li><strong>「書かない」という決意</strong>
    <ul>
      <li>極力、自分では1行もコードを書かない。書こうとした瞬間に「あ、これはエージェントに任せられるな」と立ち止まる。</li>
      <li>自分で実装し始めたら、それはAIエージェントをただの「補完ツール」に格下げしてしまっているのと同じ。</li>
    </ul>
  </li>
  <li><strong>自分の役割は「意思決定」と「確認」</strong>
    <ul>
      <li>実装という実務はエージェントに譲り、自分は「何を作るか」「それは正しいか」の判断に集中する。</li>
    </ul>
  </li>
</ul>

<h2 id="2-ざっくり依頼する">2. ざっくり依頼する</h2>
<ul>
  <li><strong>細かく指示しすぎない</strong>
    <ul>
      <li>実装方法まで細かく指示すると、結局自分でコードを書いているのと変わらない。</li>
      <li>「自分の頭の中にあるもの」をなぞらせるだけだと、作業感が出てストレスが溜まる。</li>
    </ul>
  </li>
  <li><strong>思わぬ発見を楽しむ</strong>
    <ul>
      <li>あえて抽象的に依頼することで、自分では思いつかなかったスマートな実装やUIを提案してくれる可能性がある。</li>
      <li>AIエージェントのポテンシャルを信じて、設計から任せてみる。（DB定義なんかも任せてます）</li>
    </ul>
  </li>
</ul>

<h2 id="3-aiに依頼する前に相談する">3. AIに「依頼する」前に「相談する」</h2>
<ul>
  <li><strong>納得して進むための「問い」</strong>
    <ul>
      <li>自分が納得したいがゆえに、あえて問いかける。「どう思う？どうしたらいいかなぁ？」</li>
      <li>誰かに（AIに）認めてもらうことで、心理的に進みやすくなる効果は大きい。</li>
      <li>命名に迷った時も、候補を投げれば爆速で決まる。</li>
    </ul>
  </li>
  <li><strong>まずは計画を出させて壁打ち</strong>
    <ul>
      <li>いきなりコードを書かせず、まず「実装計画」を教えてもらう。</li>
      <li>計画の段階で議論することで、手戻りを最小限に抑えられる。</li>
    </ul>
  </li>
  <li><strong>未知の領域は事前にリサーチしてもらう</strong>
    <ul>
      <li>情報の少なそうな箇所や新しいライブラリは、先にAIに調べさせて、詳しくなってから本題に入る。</li>
    </ul>
  </li>
</ul>

<h2 id="4-設定ファイルclaudemd等はあえて作り込まない">4. 設定ファイル（CLAUDE.md等）はあえて作り込まない</h2>
<ul>
  <li><strong>AIの進化を邪魔しない</strong>
    <ul>
      <li><code class="language-plaintext highlighter-rouge">CLAUDE.md</code> や <code class="language-plaintext highlighter-rouge">.AGENTS.md</code> といった指示ファイルをガチガチに固めない。</li>
      <li>AI自体が日々進化しているため、古いルールや余計な情報で思考を惑わさないようにしている。</li>
    </ul>
  </li>
  <li><strong>「素の知能」を使いこなす</strong>
    <ul>
      <li>凝った指示書を作るよりも、その時々のAIの「素の状態」と対話する方が、柔軟で最新の提案を受けやすい。</li>
    </ul>
  </li>
</ul>

<h2 id="5-行き詰まったら中の人を変える">5. 行き詰まったら「中の人」を変える</h2>
<ul>
  <li><strong>泥沼にはまらない</strong>
    <ul>
      <li>AIが同じミスを繰り返したり、ハマり出したりしたら潔く再起動するようにしてます。同じAIでもかなりアウトプット変わってきます。</li>
    </ul>
  </li>
  <li><strong>別の人（モデル）にも依頼してみる</strong>
    <ul>
      <li>一つのエージェントで解決しない時は、別のエージェントに同じ依頼を投げてみる。</li>
      <li>同一AIでも並行して依頼してみたりも有効です（Codexなど）</li>
    </ul>
  </li>
</ul>

<h2 id="6-開発のリズムを作るtips">6. 開発のリズムを作るTips</h2>
<ul>
  <li><strong>適度にコミットする</strong>
    <ul>
      <li>キリのいいところでコミットを挟んでおくのは大事です。少し前の挙動が良かったなぁというときにAIが戻せないことは多々あるので。</li>
    </ul>
  </li>
  <li><strong>コミット前に差分確認する</strong>
    <ul>
      <li>コーディング中は正しく動作することに重きを置き、コードを見るのは最後にしています。よほどおかしな実装をしていたり、保守性が悪い場合のみ指摘し修正してもらうことで余計な時間を使わない。人がコードを見ることは今後ますます少なってくると思うので。</li>
    </ul>
  </li>
  <li><strong>gitやCLIツールをフル活用</strong>
    <ul>
      <li><code class="language-plaintext highlighter-rouge">gh</code> コマンドを使ってPRをサクッと参照させたり、作成してもらいます。</li>
      <li>git履歴を元に現在の実装状況を把握してもらうと、AIエージェント再起動後もやりたいことを理解してくれて便利です。</li>
    </ul>
  </li>
</ul>

<hr />

<h2 id="まとめ目的を伝えてあとはやってもらう">まとめ：目的を伝えて、あとはやってもらう</h2>

<p>AIエージェントは単なるツールではなく、頼れる爆速開発者です。
大切なのは、詳細な実装方法を伝えることではなく、明確な「目的（Why）」を伝えて信頼すること。
彼らに任せたほうが、自分が考えた設計よりもずっと良いものが早く出来上がる。そんな体験が、これからの開発の当たり前になっていくはずです。</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="AIコーディング" /><category term="AIエージェント" /><category term="ClaudeCode" /><category term="Codex" /><category term="CodexCLI" /><category term="Antigravity" /><summary type="html"><![CDATA[2025年6月から約半年間、Claude CodeやCodex CLI、Antigravityを業務で使い込んできました。 日々これらのAIエージェントと過ごす中で見えてきた、開発速度を最大化するための付き合い方・コツについてまとめます。]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Monosnapが起動しなくなったときの完全リセット手順</title><link href="https://naoqoo2.com/blog/monosnap-reset/" rel="alternate" type="text/html" title="Monosnapが起動しなくなったときの完全リセット手順" /><published>2025-12-24T00:00:00+09:00</published><updated>2025-12-24T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/monosnap-reset</id><content type="html" xml:base="https://naoqoo2.com/blog/monosnap-reset/"><![CDATA[<p>macOSでMonosnapが突然起動しなくなったり、画面収録の許可を与えているのに拒否されるときは <strong>TCC（Transparency, Consent, and Control）データベースが壊れている</strong> 可能性が高いです。アプリを消して再インストールするだけでは直らないので、以下の「完全リセット」手順を順番に実行してください。</p>

<h2 id="症状">症状</h2>

<p>何度起動しても画面週力を許可してくれポップアップが出る。。
<img src="/assets/images/20251224/image.png" alt="alt text" /></p>

<h2 id="結論原因">結論（原因）</h2>

<ul>
  <li>macOS側の「画面収録（ScreenCapture）」権限が壊れている</li>
  <li>Monosnapを入れ直してもTCCの権限DBが更新されていない</li>
  <li>設定UI上はONでも、内部のDBが壊れている状態だとアプリが拒否され続ける</li>
</ul>

<h2 id="-解決手順確実版">✅ 解決手順（確実版）</h2>

<h3 id="-monosnapを完全終了">① Monosnapを完全終了</h3>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>killall Monosnap
</code></pre></div></div>

<p>バックグラウンド常駐を含めて強制終了します。</p>

<h3 id="-画面収録の権限を一度外す">② 画面収録の権限を一度外す</h3>

<p><code class="language-plaintext highlighter-rouge">システム設定 &gt; プライバシーとセキュリティ &gt; 画面収録</code> で Monosnap のチェックを外します。ここではまだ起動できません。</p>

<h3 id="-権限キャッシュtccをリセット重要">③ 権限キャッシュ（TCC）をリセット【重要】</h3>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>tccutil reset ScreenCapture
</code></pre></div></div>

<p>パスワードを求められたら入力し、エラーが出なければ成功です。これでmacOSが抱えていた壊れた許可情報が削除されます。</p>

<h3 id="-macを再起動必須">④ Macを再起動（必須）</h3>

<p>ここは絶対に飛ばさないでください。再起動せずにMonosnapを起動すると、古いキャッシュが復活してやり直しになる確率が高いです。</p>

<h3 id="-monosnapを起動し許可を新規登録">⑤ Monosnapを起動し、許可を“新規登録”</h3>

<ol>
  <li>Finderの「アプリケーション」からMonosnapを起動</li>
  <li>警告ダイアログが出たら「Open System Preferences」を押す</li>
  <li><code class="language-plaintext highlighter-rouge">画面収録 &gt; Monosnap</code> のチェックを付け直す</li>
  <li>「再起動が必要」と言われたらMonosnapのみ再起動</li>
</ol>

<h3 id="-それでもダメな場合最終手段">⑥ それでもダメな場合（最終手段）</h3>

<p>Monosnap.app自体を物理的に削除して再登録します。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo rm</span> <span class="nt">-rf</span> /Applications/Monosnap.app
</code></pre></div></div>

<p>公式DMGから入れ直し、手順⑤をもう一度実施してください。</p>

<h2 id="-なぜこれで直るのか">🔍 なぜこれで直るのか</h2>

<ul>
  <li>macOSの設定UIと実際の許可DB（TCC）は別物</li>
  <li>UI上はONでもDBが壊れているとアプリは拒否される</li>
  <li><code class="language-plaintext highlighter-rouge">tccutil reset ScreenCapture</code> が壊れたレコードを消す唯一の正攻法</li>
</ul>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="macOS" /><category term="Monosnap" /><category term="TCC" /><summary type="html"><![CDATA[macOSでMonosnapが突然起動しなくなったり、画面収録の許可を与えているのに拒否されるときは TCC（Transparency, Consent, and Control）データベースが壊れている 可能性が高いです。アプリを消して再インストールするだけでは直らないので、以下の「完全リセット」手順を順番に実行してください。]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Notionでステータスが進行中になったら着手開始日を自動入力する方法</title><link href="https://naoqoo2.com/blog/notion-status-start-date/" rel="alternate" type="text/html" title="Notionでステータスが進行中になったら着手開始日を自動入力する方法" /><published>2025-12-24T00:00:00+09:00</published><updated>2025-12-24T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/notion-status-start-date</id><content type="html" xml:base="https://naoqoo2.com/blog/notion-status-start-date/"><![CDATA[<p>Notionでタスク管理してると、着手開始日を自動保存したくなるとき、あるよねー！</p>

<p>ということで今回は Notion Automation を使って、<strong>ステータスを進行中にしたタイミングで一度だけ「着手開始日」を埋め、それ以降は上書きされない</strong>仕組みを作ったのでメモしておきます。</p>

<h2 id="やりたいこと">やりたいこと</h2>

<ul>
  <li>ステータスが「進行中」になったタイミングで日付を自動入力したい</li>
  <li>その後、「レビュー」や「テスト」のように別ステータスへ変更しても入力済みの日付は上書きされないようにしたい</li>
</ul>

<h2 id="しくみ">しくみ</h2>

<p>Notionのオートメーションは「このプロパティが空なら実行」といった条件をまだ指定できません。</p>

<p>そこで条件を指定したフィルタビューを作り、そのビューに対してのみオートメーションを設定する工夫をしています。</p>

<h2 id="手順">手順</h2>

<h3 id="1-着手開始日フィールドを作成">1. 「着手開始日」フィールドを作成</h3>

<p>データベース（タスクDBなど）に <code class="language-plaintext highlighter-rouge">着手開始日</code> という Date プロパティを追加します。通常の Date でOKです。</p>

<h3 id="2-未入力フィルタビューを作る">2. 未入力フィルタビューを作る</h3>

<p><code class="language-plaintext highlighter-rouge">着手開始日</code> が空のページだけを抽出するフィルタビュー（またはビュー専用のフィルタグループ）を作ります。<br />
例：<code class="language-plaintext highlighter-rouge">着手開始前</code></p>

<p><img src="/assets/images/20251224/image-1.png" alt="alt text" style="width:60%; height:auto;" /></p>

<p>このフィルタビューのみにオートメーションを適用することで、<code class="language-plaintext highlighter-rouge">着手開始日</code> が空欄の行だけに動作し、上書きされることを防ぎます。</p>

<h3 id="3-notion-automationを設定">3. Notion Automationを設定</h3>

<ol>
  <li>右上の「•••」から <code class="language-plaintext highlighter-rouge">Automations</code> を開く</li>
  <li><code class="language-plaintext highlighter-rouge">New automation</code> を作成</li>
  <li>Entry filter に、手順2で作った「着手開始前」ビューを指定</li>
  <li>Trigger: <code class="language-plaintext highlighter-rouge">When property changes</code> を選び、<code class="language-plaintext highlighter-rouge">ステータス</code> が <code class="language-plaintext highlighter-rouge">進行中</code> になったときに発火するよう設定</li>
  <li>Action: <code class="language-plaintext highlighter-rouge">Edit property</code> で <code class="language-plaintext highlighter-rouge">着手開始日</code> に <code class="language-plaintext highlighter-rouge">Trigger timestamp</code> をセット</li>
</ol>

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <img src="/assets/images/20251224/image-2.png" alt="Automation設定画面" style="width:40%; min-width:220px; height:auto;" />
  <img src="/assets/images/20251224/image-3.png" alt="トリガー条件の設定" style="width:40%; min-width:220px; height:auto;" />
</div>

<p>これで完成です！動作確認してみてください！</p>

<h2 id="補足">補足</h2>

<ul>
  <li>進行中以外のステータスでも着手日を残したいなら、ビューのフィルタ条件を増やすだけで応用できます。</li>
  <li>「着手開始日を手動で調整したい」ケースでも、既に値が入っていればオートメーションは動かないので安心です。</li>
</ul>

<p>こんな感じで、Notion Automation × フィルタービュー の組み合わせを使えば色々な使い方ができて便利ですね！着手遅れの分析やリードタイム計測にもぜひどうぞ。</p>

<p>それでは良きNotionライフを！</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="Notion" /><category term="オートメーション" /><category term="プロジェクト管理" /><summary type="html"><![CDATA[Notionでタスク管理してると、着手開始日を自動保存したくなるとき、あるよねー！]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry><entry><title type="html">Codex CLIでMCPを使う方法まとめ</title><link href="https://naoqoo2.com/blog/codex-cli-mcp-command-guide/" rel="alternate" type="text/html" title="Codex CLIでMCPを使う方法まとめ" /><published>2025-12-23T00:00:00+09:00</published><updated>2025-12-23T00:00:00+09:00</updated><id>https://naoqoo2.com/blog/codex-cli-mcp-command-guide</id><content type="html" xml:base="https://naoqoo2.com/blog/codex-cli-mcp-command-guide/"><![CDATA[<p>Codex CLI v0.4 以降は、<code class="language-plaintext highlighter-rouge">codex mcp</code> コマンドで MCP サーバーの追加・削除・一覧確認をすべて完結できます。ここでは、CLI 上でよく使う 4 つのコマンドをストーリー形式でまとめました。Chrome DevTools MCP を例にしていますが、他の MCP でも同じ流れで応用できます。</p>

<h2 id="1-まずは全体像を掴む-codex-mcp---help">1. まずは全体像を掴む (<code class="language-plaintext highlighter-rouge">codex mcp --help</code>)</h2>

<p>オプション構成が分からないまま手を動かすと迷子になりがちです。<code class="language-plaintext highlighter-rouge">--help</code> でサブコマンドの説明をざっと眺め、使い方の全体像を掴んでから進みましょう。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>codex mcp <span class="nt">--help</span>
</code></pre></div></div>

<p>ここで確認できるポイント</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">add</code>, <code class="language-plaintext highlighter-rouge">list</code>, <code class="language-plaintext highlighter-rouge">remove</code> など MCP 管理に関係する主要コマンド</li>
  <li>1 コマンドで <code class="language-plaintext highlighter-rouge">command</code> と <code class="language-plaintext highlighter-rouge">args</code> を一括登録できるフォーマット</li>
  <li>グローバル設定ファイル <code class="language-plaintext highlighter-rouge">~/.codex/config.toml</code> が更新対象であること</li>
</ul>

<h2 id="2-chrome-devtools-mcp-を追加する-codex-mcp-add-">2. Chrome DevTools MCP を追加する (<code class="language-plaintext highlighter-rouge">codex mcp add …</code>)</h2>

<p>インストールや設定ファイルの手編集は不要です。以下の 1 行で <code class="language-plaintext highlighter-rouge">command</code> と <code class="language-plaintext highlighter-rouge">args</code> が <code class="language-plaintext highlighter-rouge">config.toml</code> に追記され、頭から Codex CLI で利用できるようになります。Chrome DevTools MCP の場合は <code class="language-plaintext highlighter-rouge">--headless=false</code> を付けてデバッガ画面を出しながら使うのが分かりやすいです。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>codex mcp add chrome-devtools <span class="nt">--</span> npx chrome-devtools-mcp@latest <span class="nt">--headless</span><span class="o">=</span><span class="nb">false</span>
</code></pre></div></div>

<p>コマンドの読み方</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">chrome-devtools</code> が MCP サーバー名。<code class="language-plaintext highlighter-rouge">mcp_servers."chrome-devtools"</code> として保存される</li>
  <li><code class="language-plaintext highlighter-rouge">--</code> 以降は OS 上で実行するプロセス (<code class="language-plaintext highlighter-rouge">npx</code> + 引数)</li>
  <li><code class="language-plaintext highlighter-rouge">--headless=false</code> を args に入れるとブラウザ UI を開いた状態で DevTools オートメーションを扱える</li>
</ul>

<p>実行後は <code class="language-plaintext highlighter-rouge">~/.codex/config.toml</code> に以下のように追記されます（例）:</p>

<div class="language-toml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">[mcp_servers."chrome-devtools"]</span>
<span class="py">command</span> <span class="p">=</span> <span class="s">"npx"</span>
<span class="py">args</span> <span class="p">=</span> <span class="p">[</span><span class="s">"chrome-devtools-mcp@latest"</span><span class="p">,</span> <span class="py">"--headless</span><span class="p">=</span><span class="kc">false</span><span class="s">"]</span><span class="err">
</span></code></pre></div></div>

<h2 id="3-登録済み-mcp-を確認する-codex-mcp-list">3. 登録済み MCP を確認する (<code class="language-plaintext highlighter-rouge">codex mcp list</code>)</h2>

<p>設定を追加したら正しく反映されているか、その場で確認しておくと安心です。<code class="language-plaintext highlighter-rouge">list</code> は <code class="language-plaintext highlighter-rouge">config.toml</code> を読み込み、登録済みの MCP 名と実行コマンドを一覧表示してくれます。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>codex mcp list
</code></pre></div></div>

<p>出力例では各 MCP に割り当てられた <code class="language-plaintext highlighter-rouge">command</code> / <code class="language-plaintext highlighter-rouge">args</code> の要約を確認できるので、設定の typo や引数漏れを早期に検出できます。加えて <code class="language-plaintext highlighter-rouge">list --json</code>（ヘルプ参照）を使えばスクリプトからの検査にも応用可能です。</p>

<h2 id="4-不要になった-mcp-を片付ける-codex-mcp-remove-">4. 不要になった MCP を片付ける (<code class="language-plaintext highlighter-rouge">codex mcp remove …</code>)</h2>

<p>検証が終わった MCP を放置すると <code class="language-plaintext highlighter-rouge">~/.codex/config.toml</code> が肥大化し、目的の MCP を探しづらくなります。不要になったタイミングで <code class="language-plaintext highlighter-rouge">remove</code> を実行し、設定をクリーンに保ちましょう。</p>

<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>codex mcp remove chrome-devtools
</code></pre></div></div>

<p><code class="language-plaintext highlighter-rouge">remove</code> は指定した MCP 名に紐づく <code class="language-plaintext highlighter-rouge">command</code> と <code class="language-plaintext highlighter-rouge">args</code> を丸ごと削除します。後から同じ MCP を再利用したくなったら「2. add」からやり直せば OK です。</p>

<h2 id="まとめとワークフロー例">まとめとワークフロー例</h2>

<ol>
  <li><code class="language-plaintext highlighter-rouge">codex mcp --help</code> でコマンド体系を把握</li>
  <li><code class="language-plaintext highlighter-rouge">codex mcp add …</code> で必要な MCP を追加</li>
  <li><code class="language-plaintext highlighter-rouge">codex mcp list</code> で設定確認（必要なら <code class="language-plaintext highlighter-rouge">--json</code> で自動テスト）</li>
  <li>使い終わったら <code class="language-plaintext highlighter-rouge">codex mcp remove …</code> でクリーンアップ</li>
</ol>

<p>Codex CLI は設定ファイルがグローバル共有な点に気を付けながら、この 4 コマンドをルーティンにすると MCP との付き合いがぐっと楽になります。ぜひターミナルのお供にどうぞ。</p>]]></content><author><name>naoqoo2</name></author><category term="blog" /><category term="CodexCLI" /><category term="MCP" /><summary type="html"><![CDATA[Codex CLI v0.4 以降は、codex mcp コマンドで MCP サーバーの追加・削除・一覧確認をすべて完結できます。ここでは、CLI 上でよく使う 4 つのコマンドをストーリー形式でまとめました。Chrome DevTools MCP を例にしていますが、他の MCP でも同じ流れで応用できます。]]></summary><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" /><media:content medium="image" url="https://naoqoo2.com/assets/images/naoqoo2.jpg" xmlns:media="http://search.yahoo.com/mrss/" /></entry></feed>