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

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

はじめに

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

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

PublicDomainPicturesによるPixabayからの画像_numbers

 

これまでは、何百行とある表データに対して毎回いちいちマウスでダアっとドラッグしてからコピーして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!")}})();

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

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’です。

kisyoutyou_quake

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

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

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

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

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

使いかた

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

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

bookmarklet_chrome_make_favorite01

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

bookmarklet_chrome_make_favorite02r

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

bookmarklet_chrome_make_favorite03

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

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

bookmarklet_chrome_use01

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

bookmarklet_chrome_use02

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

bookmarklet_to_Excel

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

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

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

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

(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


このブログはエックスサーバー で運営しております。


Word Press専用クラウド型レンタルサーバーwpX Speed

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!


世界にたった一つ、あなただけのドメインを登録しよう!

格安ドメイン取得サービス─ムームードメイン─

こんなものが欲しい、あんなものを試してみたいを実現します!「海外直送」

たまには自分をいたわろ、ねぎらお。ご帰宅途中にお気軽に。
全国630店舗以上!もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】