<h2 id="%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%8D%E3%81%A3%E3%81%8B%E3%81%91" aria-hidden="true"></a> 開発のきっかけ</h2>
<p data-line="2" class="code-line">Arcブラウザを普段遣いしてる筆者としてLive FolderでGitHubのプルリクエストをリアルタイムに確認できる機能は便利でした。<br>
しかし</p>
<ul data-line="4" class="code-line">
<li data-line="4" class="code-line">Arcの開発がストップしたという情報</li>
<li data-line="5" class="code-line">OpenAIから新しく出たAtlasブラウザの出現</li>
<li data-line="6" class="code-line">AntigravityというIDEのデバッグ機能が今のところchromeでの動作っぽいのでchrome回帰を念頭に入れる必要がある</li>
</ul>
<p data-line="8" class="code-line">などブラウザ開発が活発になった昨今の情勢を受け、どの環境へ移行しても同じ体験ができる拡張機能を作ろうと考えました。</p>
<h2 id="%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95%E3%81%A8%E4%BD%BF%E7%94%A8%E3%83%84%E3%83%BC%E3%83%AB" data-line="10" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95%E3%81%A8%E4%BD%BF%E7%94%A8%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 作成方法と使用ツール</h2>
<p data-line="12" class="code-line">実装はAIに任せました。利用したツールは以下です。</p>
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">Antigravity（IDE）</li>
<li data-line="15" class="code-line">claude code</li>
<li data-line="16" class="code-line">gemini cli</li>
</ul>
<p data-line="18" class="code-line">これらを通じて拡張機能を形にしました。</p>
<h2 id="%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 拡張機能の主な機能</h2>
<ul data-line="22" class="code-line">
<li data-line="22" class="code-line">GitHubで自分がAssigneeやReviewerに指定されているPRを一覧でパネル表示</li>
<li data-line="23" class="code-line">ArcのLiveFolderのように更新があれば即座に反映されるリアルタイム性</li>
<li data-line="24" class="code-line">複数のOrganizationを使っている場合でも、組織ごとにフィルタリングして表示可能</li>
</ul>
<h2 id="%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E6%96%B9%E6%B3%95" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E6%96%B9%E6%B3%95" aria-hidden="true"></a> ダウンロード方法</h2>
<p data-line="27" class="code-line"><a href="https://chromewebstore.google.com/detail/pr-dashboard-for-github/dhjlpiodljcfjbhfdgkhnkehedcobekc?authuser=0&amp;hl=ja" target="_blank" rel="nofollow noopener noreferrer">こちら</a>のリンクから拡張機能をダウンロードする</p>
<h2 id="%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9" data-line="29" class="code-line">
<a class="header-anchor-link" href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 基本的な使い方</h2>
<h3 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h3>
<p data-line="31" class="code-line">あらかじめ拡張機能を使用するブラウザでGithubにログインしておく</p>
<h3 id="1.-%E5%88%9D%E6%9C%9F%E7%94%BB%E9%9D%A2" data-line="33" class="code-line">
<a class="header-anchor-link" href="#1.-%E5%88%9D%E6%9C%9F%E7%94%BB%E9%9D%A2" aria-hidden="true"></a> 1. 初期画面</h3>
<p data-line="35" class="code-line">拡張機能をインストール後、ツールバーのアイコンをクリックすると、初期画面が表示されます。</p>
<p data-line="37" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/2bb472b41bdc-20251127.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="39" class="code-line"><strong>Get PRs</strong>ボタンをクリックして、プルリクエストを取得します。</p>
<h3 id="2.-%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E4%B8%80%E8%A6%A7" data-line="41" class="code-line">
<a class="header-anchor-link" href="#2.-%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E4%B8%80%E8%A6%A7" aria-hidden="true"></a> 2. プルリクエスト一覧</h3>
<p data-line="43" class="code-line">PR を取得すると、以下のような一覧が表示されます。</p>
<p data-line="45" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/231f67521072-20251127.png" alt="" class="md-img" loading="lazy"></p>
<h2 id="%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 主な機能</h2>
<h3 id="%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%AE%E8%A1%A8%E7%A4%BA" data-line="49" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%81%AE%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> プルリクエストの表示</h3>
<p data-line="51" class="code-line">各 PR には以下の情報が表示されます：</p>
<ul data-line="53" class="code-line">
<li data-line="53" class="code-line">
<strong>タイトル</strong>: PR のタイトル（長い場合は省略され、ホバーで全文表示）</li>
<li data-line="54" class="code-line">
<strong>リポジトリ名</strong>: <code>organization/repository</code> 形式</li>
<li data-line="55" class="code-line">
<strong>更新時刻</strong>: 最終更新からの経過時間（例: "2 hours ago"）</li>
<li data-line="56" class="code-line">
<strong>ステータスラベル</strong>:
<ul data-line="57" class="code-line">
<li data-line="57" class="code-line">
<strong>Draft</strong>: ドラフト PR</li>
<li data-line="58" class="code-line">
<strong>Approved</strong>: 承認済み PR</li>
</ul>
</li>
</ul>
<h3 id="%E7%B5%84%E7%B9%94%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC" data-line="60" class="code-line">
<a class="header-anchor-link" href="#%E7%B5%84%E7%B9%94%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC" aria-hidden="true"></a> 組織フィルター</h3>
<p data-line="62" class="code-line">複数の組織の PR がある場合、「Filter by Organization」セクションでフィルタリングできます。</p>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">チェックボックスで表示したい組織を選択</li>
<li data-line="65" class="code-line">選択した組織の PR のみが表示されます</li>
<li data-line="66" class="code-line">フィルター設定は自動的に保存されます</li>
</ul>
<h3 id="pr-%E3%81%AE%E4%B8%A6%E3%81%B9%E6%9B%BF%E3%81%88%EF%BC%88%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%26%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%89" data-line="68" class="code-line">
<a class="header-anchor-link" href="#pr-%E3%81%AE%E4%B8%A6%E3%81%B9%E6%9B%BF%E3%81%88%EF%BC%88%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%26%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%89" aria-hidden="true"></a> PR の並べ替え（ドラッグ&amp;ドロップ）</h3>
<p data-line="70" class="code-line">PR をドラッグ&amp;ドロップで自由に並べ替えることができます。</p>
<ol data-line="72" class="code-line">
<li data-line="72" class="code-line">PR アイテムにマウスを乗せると、カーソルが「手のひら」アイコンに変わります</li>
<li data-line="73" class="code-line">PR をクリックしてドラッグすると、カーソルが「掴んだ手」アイコンに変わります</li>
<li data-line="74" class="code-line">好きな位置にドロップして並べ替えます</li>
<li data-line="75" class="code-line">並び順は自動的に保存され、次回起動時も維持されます</li>
</ol>
<h3 id="pr-%E3%81%AE%E5%89%8A%E9%99%A4" data-line="77" class="code-line">
<a class="header-anchor-link" href="#pr-%E3%81%AE%E5%89%8A%E9%99%A4" aria-hidden="true"></a> PR の削除</h3>
<p data-line="79" class="code-line">各 PR の右側に表示される「×」ボタンをクリックすると、その PR を一覧から削除できます。</p>
<ul data-line="81" class="code-line">
<li data-line="81" class="code-line">ホバー時のみ「×」ボタンが表示されます</li>
<li data-line="82" class="code-line">削除した PR は一覧から非表示になります</li>
</ul>
<h3 id="%E6%9B%B4%E6%96%B0" data-line="84" class="code-line">
<a class="header-anchor-link" href="#%E6%9B%B4%E6%96%B0" aria-hidden="true"></a> 更新</h3>
<p data-line="86" class="code-line"><strong>Refresh</strong>ボタンをクリックすると、最新の PR 情報を取得します。</p>
<ul data-line="88" class="code-line">
<li data-line="88" class="code-line">PR を取得後、ボタンのラベルが「Get PRs」から「Refresh」に変わります</li>
<li data-line="89" class="code-line">自動更新は 1 分ごとに実行されます</li>
</ul>
<h2 id="%E9%AD%85%E5%8A%9B" data-line="91" class="code-line">
<a class="header-anchor-link" href="#%E9%AD%85%E5%8A%9B" aria-hidden="true"></a> 魅力</h2>
<ul data-line="93" class="code-line">
<li data-line="93" class="code-line">PR一覧が拡張機能のパネル内にまとまって表示されるため、Slack連携や別ツールを開く手間が省けます</li>
<li data-line="94" class="code-line">GitHubにログインしていればすぐに利用でき、設定もシンプルです。</li>
</ul>
<h2 id="%E8%AA%B2%E9%A1%8C" data-line="96" class="code-line">
<a class="header-anchor-link" href="#%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> 課題</h2>
<p data-line="98" class="code-line">現在のバージョンでは、プルリクエストの状態（Approved、Draftなど）をパネル上で表現できていません。<br>
今後の改善点として検討しています。</p>
<h2 id="%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E7%82%B9" data-line="101" class="code-line">
<a class="header-anchor-link" href="#%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E7%82%B9" aria-hidden="true"></a> 苦労した点</h2>
<p data-line="103" class="code-line">拡張機能開発の経験がなかったため、実装方法を調べながら進めたことが大変でした。<br>
初期はAPIを利用して実装を試みましたが、組織のデータは相手側の許可がないと取得できないことが途中で判明し、実装方針を変える必要がありました。<br>
また、今回のリリースには含めていませんが、GitHubの画面取得の制約からApprovedやDraftなどの状態を取得できなかった点も課題として残っています。</p>


ArcのLiveFolderライクな拡張機能を作って公開してみた

PR の並べ替え（ドラッグ&ドロップ）

Discussion