【個人開発】ネットで調べ物するたびに、タイトルとアドレスをメモれるツールを作って10年以上使っている話

たいした技術力はないのですが、個人開発の簡単なサンプルとして紹介したいと思います。

## Webコピ太郎とは

[Webコピ太郎](https://www.catch.jp/program/copy-taro/)は、いま見ているWebページのタイトルとアドレスを取り出すだけのツールです。

1. Webページを見ているとき、メモっておきたいと思ったら、このツールを呼びだす
2. 自動で、ページのタイトルとアドレスを抽出して、テキストボックスに表示
3. クリップボードにコピー

![copy-taro.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86880/cb0eae92-8887-d3eb-5a05-92abc890bf19.png)

## なぜ、このツールを作ったのか

ネットで調べ物をする度に、役立ちそうなページのアドレスとタイトルをコピペして、テキストファイルにメモするなんてありませんか？

たくさんの参考ページをメモろうとすると、何度もタイトルとアドレスをコピーするのでたいへん面倒くさい。

でも、メモを残さないときに限って、もう一度検索しても、みつからなかったり。

もちろん、ブックマークサービスを使ってもいいし、とりあえずツイートしてもいいんだけど、今度はそこから簡単に見つからないし、見つけたやつをもう一度コピペしなくちゃならないので、やっぱり面倒くさい。

そこで、このツールを作りました。

### 類似のツール

Qiitaで検索すると、似たようなツールの作り方がいくつか出てくるので、皆さん案外、同じような悩みを持っているのかも。

- [【Javascript】Markdown形式のウェブページのリンクを、ブックマークレットで取得する - Qiita](https://qiita.com/eyuta/items/859d1e8952eef4d8f061)
- [WebページタイトルとURLを一発でコピーできるBookmarklet - Qiita](https://qiita.com/zamaezaaa/items/29839025108ff9e5eb7b)
- [WebページのタイトルとURLをワンクリックでコピーするBookmarklet - Qiita](https://qiita.com/xshoji/items/93d5345d4bf282f60817)

## ブックマークレットとは

Webページから情報を取り出すのに、Bookmarklet(ブックマークレット)という機能を使っています。

これは、Webブラウザにユーザーが追加できるJavascriptのプログラムです。

ブックマーク(お気に入り)にJavascriptのコードを置いといて、そこから呼び出すことができるので、こんな名前になってます。

選択したテキストをWikipediaや英和辞書で調べたり、今見ているWebページをちょっと加工したり、なんてことができます。

たとえば、hello worldは、こんな感じ。

```js
javascript:alert("hello%20world");
```

このコードをブックマークのURLに格納しておきます。

で、ブックマークを呼び出すと、alertでhello worldを表示します。

Webページ上で選択したテキストをWikipediaで検索するコードは、こんな感じです。

```js
javascript:var%20d=document;
var%20tx=d.selection?d.selection.createRange().text:d.getSelection();
var%20subw=window.open('http://ja.wikipedia.org/wiki/'+tx).document;
```

大昔に書いたコードなので var とか使ってますね。スペースは%20に置き換えています。複数行のコードは、行末に「;」(セミコロン)を置いて、改行を削除して1行にまとめます。

Webページでテキストを選択して、このブックマークを呼び出すと、Wikipediaの該当ページを表示してくれるんです。

このコードは、ブラウザ上で動作します。

### ブックマークレットの作り方

ちなみに、ブックマークレットの作り方は、こちらのメモが参考になると思います。

- [ブックマークレット／Bookmarkletの作り方 - catch.jp-wiki](https://www.catch.jp/blog3/posts/2008/1/01/wiki2_bookmarklet/)

これは、私が大昔から運用している個人用Wiki。ブックマークレットの解説も、2008年ごろからあります。

## 最初のバージョン

このブックマークレットの技術を利用して、見ているWebページから、タイトルとアドレスだけ取り出すブックマークレットを作りました。2008年ごろです。

Javascriptなので、Google ChromeでもFirefoxでも動きます。


```js
javascript:(function(){function%20o(s){var%20d=window.open().document;
d.writeln('<textarea%20rows=15%20cols=80>'+s+'</textarea>');
d.close()}
o(document.title+"\n"+location.href);})();
```

![bookmarklet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/86880/387398c8-b73d-2ddf-460b-55a4d1902bc0.png)

10年くらい、この状態で使ってきました。

## PHPと組み合わせるように改良

ただし、ブックマークレットだけだと、機能を追加するのが大変です。

そこで、2年ほど前、PHPのコードを呼び出すように改良しました。

あわせて、Githubでオープンソースとして公開してみました。

名付けて、Webコピ太郎。

- Webコピ太郎 https://www.catch.jp/program/copy-taro/
- Github https://github.com/ycatch/copy-taro

これで、かなり便利になりました。

JavascriptからPOSTで送った情報をサーバーサイドで取り出しています。

Milligram.css というCSSフレームワークを使って、見栄えも大幅に改善しました。


## フォーマットを加工できるように改良

ところが、マークダウン形式でメモを取っていると、コピペしたタイトルとアドレスを、箇条書きやリンクに加工するなんてことが頻繁におこりました。

そこで先日、さらにJavascriptのコードを追加して、フォーマットを加工する機能を追加しました。

Markdownで箇条書きにしたり、リンクにしたり、HTMLにしたりという加工の手間がなくなりました。

これで、いっそう使いやすくなりました。

---

たいしたプログラムではありませんが、ないと面倒くさいので、ずっと使っています。

いつか、このページからツイートなどできるようにしたいと思っています。

個人開発のエントリーがいろいろあがっていたので、しょっぱい例ですがアウトプットしてみました。

こんなものでもいいんだと、誰かの参考になれば幸いです。

## 参考になるページ

- [ブックマークレットの登録方法 - Qiita](https://qiita.com/aqril_1132/items/b5f9040ccb8cbc705d04)
- [Bookmarkletを作る際に便利なWebツールやソフトウェア - Qiita](https://qiita.com/zamaezaaa/items/86293a5eee809af99996)