🔗

コピペ地獄よ、さようなら！選択範囲のリンクを根こそぎ引っこ抜く「link-copier-bookmarklet」を開発した話

に公開
JavaScript
Bookmarklet
業務効率化
自治体dx
ツール開発
tech

🎯 この記事の対象読者

  • 自治体職員の方々で、日々の情報収集や資料作成をもっと効率化したいと思っている方
  • 単純なコピー＆ペースト作業に「この時間、もっと他のことに使えないかな…」と感じている方
  • プログラミングは難しそうだけど、自分の手で便利なツールを作ってみたいと思っているDXに関心のあるすべての方
  • 「ブックマークレット」という言葉にピンときた、または「何それ？」と興味が湧いたエンジニアの方

💡 この記事を読むと得られること

  • Webページ上の必要な情報（特にURL）を一瞬で収集する具体的な方法がわかります。
  • JavaScriptの短いコードをブラウザのブックマークに登録するだけで、自作ツールが作れるという感動を体験できます。
  • 「DXって、こういう小さな一歩から始められるんだ！」という自分ごととしての実感を得られます。
  • 明日からの情報収集作業が、きっと30分は時短できます！

🚀 はじめに：なぜこの記事を書いたか

自治体の現場で働く皆さん、そしてDXの推進に奮闘する皆さん、こんばんわ！

突然ですが、こんな経験はありませんか？
関連情報をリサーチするためにいくつものWebサイトを巡り、必要な情報が載っている箇所を見つけては、ひたすら右クリック → リンクのアドレスをコピー → Excelやドキュメントにペースト…。この無限ループ。気づけばあっという間に1時間が溶けている…。

私もずっと、この「単純だけど時間を奪われる作業」にモヤモヤしていました。「AIだ、DXだ、と言われているこの時代にまだこんな手作業を続けていていいのだろうか？」と。

この記事でお伝えしたいのは、たった一つのシンプルな事実です。
「ほんの少しの知識と工夫で、その“無限コピペ地獄”から一瞬で抜け出せる」ということ。そして、そのための便利なツールは、意外なほど簡単に、あなた自身の手で作れるということです。

今回は、超シンプルなツール「link-copier-bookmarklet」を題材に、その作り方と、その先にある「自分で業務を省力化する楽しさ」を共有したいと思います。この記事が、あなたの「DXの第一歩」を踏み出すきっかけになれば、これ以上嬉しいことはありません！

😫 課題：情報収集の“コピペ地獄”

企画立案のための情報収集、補助金事業のリスト作成、イベント告知サイトの一覧化…。自治体の業務では、Web上から多くの情報を集約する場面が頻繁にあります。

これまでの一般的な手作業は、まさに苦行そのものでした。

インターネットから情報をリスト化するときの流れ図

一つ一つの作業は数秒でも、数十、数百のリンクを扱う頃には、膨大な時間と集中力を消耗します。単純作業であるがゆえにミスも起こりやすく、精神的な疲労も大きい。これが、多くの職員が直面している「つらい現実」ではないでしょうか。

そんな“コピペ地獄”を解決するために開発したのが、この「link-copier-bookmarklet」です！
これは、ブラウザのブックマークとして登録できる小さなプログラム（ブックマークレット）です。

使い方は超カンタン。

  1. 情報収集したいWebページを開く
  2. 欲しいリンクが含まれている範囲をマウスでドラッグして選択する
  3. ブックマークバーに登録したこのツールをクリック！

たったこれだけで、選択範囲に含まれる全てのURLを抽出し、クリップボードにコピーしてくれます。あとはExcelやメモ帳に貼り付けるだけ！あの地道なクリック＆コピペの連打は、もう必要ありません。

項目 内容
ツール名 link-copier-bookmarklet
概要 ブラウザで表示しているWebページ上で、マウスで選択した範囲に含まれるURLを抽出し、クリップボードにコピーするブックマークレット。
利用シーン 関連情報のURLリスト作成、参考サイトの一覧化など、Webからの情報収集全般。
GitHubリポジトリ https://github.com/HosoyaYusaku/link-copier-bookmarklet

🛠️ 技術スタックと選定理由

このツールは、非常にシンプルな技術で作られています。

技術 役割 選定理由
JavaScript 開発言語 ブラウザ上で動作する唯一のプログラミング言語であり、特別な開発環境が不要なため。ブックマークレットはJavaScriptで記述するのが基本です。手軽さと即時性を最優先しました。

📜 コードのハイライト

このツールの心臓部は、「マウスで選択した範囲」と「ページ上のリンク」が重なっているかを判定する部分です。このロジックがあるからこそ、ページ全体ではなく、本当に欲しい部分のリンクだけを的確に抜き出すことができます。

// --- 選択範囲とリンクが重なっているか判定する部分 ---

// 2つの矩形（四角形）が重なっているか判定する関数
function isIntersecting(rect1, rect2) {
  return (
    rect1.left < rect2.right &&
    rect1.right > rect2.left &&
    rect1.top < rect2.bottom &&
    rect1.bottom > rect2.top
  );
}

// ページ上の全リンク要素に対して、選択範囲との重なりをチェック
allLinks.forEach(link => {
  const linkRects = Array.from(link.getClientRects());
  for (const selectionRect of selectionRects) {
    for (const linkRect of linkRects) {
      if (isIntersecting(selectionRect, linkRect)) {
        pickedLinks.push(link);
        return; // 同じリンクは一度だけ追加
      }
    }
  }
});

getClientRects()という関数で、選択範囲やリンク要素の位置とサイズを「矩形（四角形）」の情報として取得します。そして、それらの四角形が少しでも重なっている（isIntersecting）かを一つずつチェックしていく、という地道ながらも確実な方法でリンクを抽出しています。

💻 使い方

「ツール」と聞くと環境構築が大変そう…と思うかもしれませんが、ブックマークレットは驚くほど簡単です。

① 事前準備：ツールの登録 (初回のみ)

まず、ツールを使えるようにブラウザに登録します。この作業は一番最初に一度だけ行えばOKです。

  1. コードのコピー:
    GitHubリポジトリにある link-copier-bookmarklet.js ファイルの中身をすべてコピーします。

  2. ブックマークの作成:
    お使いのブラウザで、ブックマークバーを右クリックし、「ページを追加」や「ブックマークを追加」を選択します。

    • 名前: 🔗リンク引っこ抜き など、分かりやすい名前を付けます。
    • URL: ここが最重要ポイントです。URLの入力欄に、先ほどコピーしたコードをそのまま貼り付けます。

  3. 保存して完了！
    これだけで準備は完了です。ブックマークバーに、今作ったツールが表示されているはずです。

② リンクを引っこ抜く！ (実際の使い方)

ツールが登録できたら、あとは好きなだけ使うだけです！

  1. 情報収集したいWebページを開きます。
  2. 欲しいリンクが含まれている範囲をマウスでドラッグして選択します。
  3. ブックマークバーに登録したツール（🔗リンク引っこ抜きなど）をクリックします。

③ 出力結果（Before / After）

Before: Webページ上で、必要な情報が載っているエリアをマウスで選択します。

After: ブックマークバーのツールをクリックすると、「〇個のリンクをコピーしました！」というアラートが表示されます。

あとは、Excelやメモ帳を開いてペーストするだけ！選択範囲にあったURLが、改行区切りで綺麗に貼り付けられます。

[https://example.com/link1](https://example.com/link1)
[https://example.com/link2](https://example.com/link2)
[https://example.com/link3](https://example.com/link3)
...

🧗 開発でつまづいた点と解決策

実はこのツール、「30分で役立つツールを作る」という自分へのチャレンジで開発したものです。だからこそ、いくつかユニークな苦労がありました。

  • 課題：時間内に作れる、シンプルで効果絶大なアイデアが出てこない！
    • 原因・解決策： 焦ってすごいアイデアを探そうとしても、なかなか出てきません。そこで、発想を転換し、「自分がこれまで面倒だと感じた作業、イライラした作業は何か？」をひたすら思い返してみました。「あ、あの時の情報収集、ひたすらコピペでマジでつらかったな…」という実体験から、このツールのアイデアが生まれました。すごい技術より、**身近な「面倒くさい・嫌な体験」**が、最高のアイデアの源泉でした。

🔭 今後の展望と野望

多くの自治体関係者の方が、「AIやDXをどう活用すればいいのか…」と悩んでいると思います。大規模なシステム導入ももちろん重要ですが、私はまず、職員一人ひとりが「自分で手を動かして、業務が楽になる感動」を味わうことが何より大切だと考えています。
これは常々お伝えしていることですが、本当に大事なことなので何度でも言わせてください。

このブックマークレットのような小さなツールでも、自分で作って、実際に業務が楽になれば、「もっとこうしたら便利かも？」「あの作業も自動化できるんじゃないか？」という発想が自然と湧き上がってきます。

他人事だった「DX」が、初めて「自分ごと」になる瞬間です。

昭和の時代に、電卓やワープロが「OA（オフィスオートメーション）化」として職場に普及し、当たり前になったように、令和の時代には、AIやプログラミングが当たり前に業務に溶け込み、私たちを面倒な作業から解放してくれる。そんな世界を私たち自身の手で、今すぐ広げていくことができると信じています。

🔚 おわりに：小さな一歩が、大きな変化を生むと信じて

今回ご紹介したブックマークレットは、ほんの数十行の小さなプログラムです。しかし、この小さなコードが、あなたの業務から「30分の退屈な時間」を消し去ってくれるかもしれません。

生まれた30分で、新しい企画を考えたり、住民の方と向き合う時間に使ったり、あるいは少し早く帰って家族と過ごしたりする。そんな小さな変化の積み重ねが、やがて組織全体の大きな変革に繋がっていくのではないでしょうか。

この記事を読んで「面白そう！」「自分でもやってみたい！」と感じていただけたら、ぜひ、あなたのブラウザにもこの「link-copier-bookmarklet」を登録してみてください。
そして、あなたの手で「DXの第一歩」を踏み出してみてください。

さあ、一緒に“コピペ地獄”にサヨナラを告げましょう！

Discussion