HTML 表の「特定の列」だけをコピーしたい（Bookmarklet 版）

## はじめに

HTML 表の特定の列だけをコピーしたいという要件は少なくありません（しかし多くもないかもしれません）。

調べると以下のような方法があります。

- Excel や Word にコピペしてから
- Firefox の機能拡張を使う
- Chrome の機能拡張を使う

しかしもっと手軽にやりたいので Bookmarklet を作成しました。

## ブックマークレット

```javascript:ブックマークレット
javascript:(function(){!function(d,f,s){s=d.createElement("script");s.src="https://code.jquery.com/jquery-1.12.4.min.js";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){var r = "";var s=document.getSelection();if (!s) {alert("Please select strings.");return;}var c=-1;c=$(s.focusNode).closest("td").index();if (c<0) {c=$(s.focusNode).closest("th").index();}if (c<0) {alert("Please select strings in some table.");return;}var o=$(s.focusNode.parentNode).closest("table");o.find("tr").each(function () {var t = $(this).find("td:eq("+c+")").text().trim();if (t=='') {t = $(this).find("th:eq("+c+")").text().trim();}r+=t+"<br/>";});if (r=="") {return;}var w=window.open("");var d=w.document.open();d.write(r);d.close();});})();
```


```javascript:すこし見やすく
!function(d,f,s){s=d.createElement("script");s.src="https://code.jquery.com/jquery-1.12.4.min.js";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){
    var r = "";
    var s=document.getSelection();
    if (!s) {
        alert("Please select strings.");return;
    }
    var c=-1;
    c=$(s.focusNode).closest("td").index();
    if (c<0) {
        c=$(s.focusNode).closest("th").index();
    }
    if (c<0) {
        alert("Please select strings in some table.");return;
    }
    var o=$(s.focusNode.parentNode).closest("table");
    o.find("tr").each(function () {
        var t = $(this).find("td:eq("+c+")").text().trim();
        if (t=='') {
            t = $(this).find("th:eq("+c+")").text().trim();
        }
        r+=t+"<br/>";
    });
    if (r=="") {return;}
    var w=window.open("");
    var d=w.document.open();
    d.write(r);
    d.close();
});
```


## お世話になります

以下の記事のコードを使わせていただいています。たいへんお世話になります。

[ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita](https://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c)

以下のサービスを使わせていただきました。お世話になります。

[WDF - Software : ブックマークレット作成スクリプト](http://www.eonet.ne.jp/~wdf/software/bookmarklet_creator.html)

## 説明

多くの現場では Excel のワークシートでテーブル定義書を作って管理しているのではないでしょうか。

私はテーブル定義書を HTML で作っています [^1] 。HTML でテーブル定義書を作成すると、例えば [Launcy](https://www.launchy.net/) や [Quicksilver](https://qsapp.com/) のようなもので必要なテーブルのみ素早く参照できるため非常に便利です。

しかしながら Excel と異なり、HTML の表では特定の列だけをコピペできません。多くのカラムを持つテーブルから SQL 文を作成するとき、コピペして楽したいと思っても思うようにいきません。

そのような不便を解決するために、このブックマークレットを作成しました。

## このようなテーブル定義から

| No | 論理名         | 物理名        | 型       | Null可否 |
|----|----------------|---------------|----------|----------|
| 1  | 社員番号       | employee_id   | Number   |          |
| 2  | 氏名           | employee_name | Varchar2 |          |
| 3  | 生年月日       | birth_day     | Date     |          |
| 4  | 部署           | section_id    | Number   |          |
| 5  | メールアドレス | email_address | Varchar2 |          |

このテーブルには三列目にお目当ての「カラムの物理名」が入っています。

## テーブル内のいずれかの文字列を選択して実行

ブラウザ上で **テーブルの中の文字列を選択して Bookmarklet を実行** すると、その列の文字列を取得して表示します。

あとは好みのテキストエディタにコピペすれば若干楽ができます。

## 列の指定

選択した文字列の存在する列を取得しています。文字列を取得せず、クリックするだけでいいかもしれません。

## 動作確認

IE と Firefox と Vivaldi で動作確認しました。

## 変更

初出時、列の指定をハードコーディングしていましたが、選択文字列から取得するように変更しました。

[^1]: 正確には Sphinx を使ってドキュメントを作っています。