ウェブページにある表をクリップボードにポチッとコピーするブックマークレットの巻

はじめに

ワタシの仕事の作業記録表がウェブページ上で管理されているのですが、その作業記録のデータをExcelとかに持ってきてから集計や分析をしたいことがありまして。

そのウェブページ上の集計/分析機能が貧弱なので、何月の何週に何の作業をどれくらいやったかとかを正確に把握するにはExcelに持っていって集計や分析をしたほうがいいからなのです。

これまでは、何百行とある表データに対して毎回いちいちマウスでダアっとドラッグしてからコピーしてExcelに持っていってましたが、ちと面倒になってきたので、ウェブページ上の作業記録表をクリップボードにポチッとコピーできるようにしよう、Bookmarkletで。

と、いう話のメモです。

ブックマークレットとは、Webブラウザに登録して簡単な機能を実行できるようした簡易プログラムのことである。

IT用語辞典バイナリ「ブックマークレット」より

作ったBookmarklet

「ウェブページに表示されている表の内容をクリップボードにコピーする。で、うまくコピーできたかどうかをポップアップで表示する」だけのBookmarkletです。

なお、実際の作業記録表を公にするのはさすがに気が引けるので、この記事では気象庁の地震情報ページの表をコピーするBookmarkletとしています。

javascript:(async function(){var hoge=document.getElementById('quakeindex_table');try{await navigator.clipboard.writeText(hoge.innerText);alert('copied!')}catch(error){alert(error.message+"\n"+"copy failed!")}})();

１行だと読みにくいので読みやすくしたものを下に表示しておきます。

javascript:(
async function(){
　var hoge=document.getElementById('quakeindex_table');
　try{
　　await navigator.clipboard.writeText(hoge.innerText);
　　alert('copied!');
　}catch(error){
　　alert(error.message+"\n"+"copy failed!");
　}
}
)();

Chromeのデベロッパーツールで確認すると、

気象庁の地震情報ページの表のidは’quakeindex_table’です。

ですので、本番で使う際には

var hoge=document.getElementById('quakeindex_table');

の’quakeindex_table’を自分がコピーしたい表の要素のidに置き換えて使います。

例えばYahoo!の地震情報の表であれば、表のdivのidである’eqhist’にします。

まあ別にコピーする対象が表である必要はないですけども。

使いかた

コードをブックマークに登録したら、コピーしたい表があるウェブページを表示した状態で登録したブックマークをポチッと押すだけです。

Chromeのブックマークマネージャーから、

「新しいブックマークを追加」します。この時、ブックマークバーに入るようにしておくほうがベターです。

名前は「tablecopy」とでもしておきます。で、URLに先ほどのBookmarklet（１行で記載してるほう）をコピペで入力して保存します。これで準備ができました。

それでは、気象庁の地震情報のページに行ってから、

先ほど作ったお気に入りの「tablecopy」をお気に入りバーからポチッと押してみます。

うまく走ったみたいです。

Excelにペーストしてみると、ちゃんと貼り付けが出来ました。これでよし、と。

作ったBookmarkletは本命の作業記録表に対してもちゃんと使えることを確認しました。

これでほんのちょっとだけ楽になりました。めでたしめでたし。

なお、MITライセンスですのでご自由にお使いください。

その他のメモとか説明ざっくり

・即時関数にてグローバルな名前空間に影響が出ないように記述します。

(function(){やりたい処理})();

・async/awaitで非同期処理にしてクリップボードへのコピーが完了するのを待ってから次の処理に移ります（念のため）。

・try…catchで、コピーの成否についてalertを使ってポップアップメッセージを出します。

・document.getElementByID(‘要素名’);で、表の要素を取得します。

　気象庁の地震情報ページの表の要素名（tableのid）は’quakeindex_able’です（2021年7月29日時点）。
　取得した要素は変数hogeを宣言してhogeに入れときます。

var hoge=document.getElementById('quakeindex_table');

・navigator.clipboard.writeText()にて、

 navigator.clipboard.writeText(hoge.innerText);

　として、hoge.innnerTextでhoge（HTMLで書かれた表）のテキストを取得してクリップボードにコピーします。

　ちなみに、navigator.clipboard.writeText()はIEには対応していないんですと。
　https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText

　それと、クリップボードへのコピーについて検索でよく出てくるDocument.execCommand()は廃止なんですと。
　https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand
　
　Document.execCommand()の代替としてnavigator.clipboard.writeText()を使うのですね、なるほど。

動作確認したブラウザ

＊気象庁の地震情報のページで動作確認しています。（2021年7月29日に確認しました。）

<Mac OS Catalina; バージョン10.15.7>

　Chrome; バージョン: 92.0.4515.107（Official Build） （x86_64）

　Safari; バージョン14.1.2 (15611.3.10.1.5, 15611)

<Windows 10 Home; バージョン20H2（OSビルド19042.1052）>

　Chrome; Version 91.0.4472.106 (Official Build) (64-bit)

　Edge; バージョン 92.0.902.55 (公式ビルド) (64 ビット)

　＊注：Edgeでは「お気に入り」からでは動作せず「お気に入りバー」からなら動作することを確認しました。なんでじゃーo(｀ω´ )o