【Blogger】URLとタイトルをクリップボードにコピーするボタンをjQueryは使わずJavaScript clipboard APIで作成

日付:
以前、jQueryのプラグイン"clipboard.js"を実行してURLとタイトルをクリップボードにコピーする機能を記事ページに追加実装しました。

簡単便利な機能なのですが、BloggerでjQueryを使用するにはプラグインも含めCDNへのアクセスが必須。
しかし、余計なアクセスを出来る限り廃止したいと思い、今回はjQueryとプラグインを使わずJavaScriptのみでクリップボードへコピーする仕様のボタンを作成してみました。



jQueryを使わず"URLをコピーするボタン"を作る

改めて考えてみるとJavaScriptのみで記述しても難しい事は無い。…と言うのもJavaScript APIにシステム（os）に読み書きできるclipboard APIを使います。IEを除く殆どのブラウザの最新Verで実行可能です。

基本型は以下の通り。

htmlに<input>タグでボタンを作ります。
<input id='urlcopyBtn' onclick='urlCopy()' type='button' value='xxxxx'/>
ボタンをクリックすると、onclick属性に指定した関数を実行します。
関数'urlCopy()'は、後述する<script>で囲んだ関数になります。名前は別に何でもいいけど必ず同じ名前にする。

value='xxxxx' はボタンに表示されるテキストです。'xxxxx'は適当な文言に差し替えます。

以下がJavaScriptの記述。上記<input>タグがクリックされると実行されます。

1.URLをクリップボードにコピーするJavaScript

<!-- URL copy button script  -->
<script> // <![CDATA[ 
 function urlCopy() { 
  var url = location.href; navigator.clipboard.writeText(url); 
  document.getElementById("urlcopyBtn").value="yyyyy";
}
// ]]>
</script>
システム（os）のクリップボードにテキストを書き出す動作と、コピーボタンに表示されるテキストを変更を実行しています。

変数urlにlocation.href（現在のページのurl）を代入して、navigator.clipboard.writeText(url)でクリップボードにコピーします。

document.getElementById("urlcopyBtn").value="yyyyy";}は、ボタンに表示されている元のテキスト'xxxxx'をクリック後に"yyyyy"変えます。

urlcopyBtnは<input>タグのidです。

2.タイトルとURLをクリップボードにコピーするJavaScript

<!-- URL copy button script  -->
<script> // <![CDATA[ 
 function urlCopy() { 
  var url = location.href;
  var title = document.title;
  navigator.clipboard.writeText("【"+title +"】"+" " + url);
  document.getElementById("urlcopyBtn").value="yyyyy";
}
// ]]>
</script>
変数title に document.title（現ページのタイトル）を代入。
navigator.clipboard.writeText(title + " " + url);でクリップボードにURLとタイトルをコピーします。

基本は以上です。

コピーボタンの追加（QooQの場合）

QooQに実装してみます。
HTMLにコピーボタン用の<b:include>,<b:includable>タグを追加します。
これらはBlogger特有の要素で、<b:include>で要素を配置して関数の<b:includableを呼び出す感じ。

HTMLを変更します

テーマ（テンプレート）のバックアップを取ってから変更しましょう。

HTMLの変更はBloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。


デモサイトのQooQに実装してみました。

<b:include>の追加

今回はシェアボタンの上部に設置したいので、<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>の直上に以下青字を追加。
<b:include name='copy-url'/>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>

<b:includable>の追加

次に<b:include>で呼び出される関数、<b:includable>を記述します。
<b:includable id='main' var='top'>以下に記述されている複数の<b:includable id=''>〜</b:includable>の最後に追加すれば良いと思います。保存すると勝手にidのアルファベット順に並べ替えられます。

<b:includable id='copy-url' var='post'>
 <!--URL copy button-->
  <div class='copy-url'>
   <input id='urlcopyBtn' onclick='urlCopy()'     type='button' value='URLをコピーします。'/>
  </div>
</b:includable>


JavaScriptの追加

</body>の直前に以下を追加します。タイトルとURLのコピーする仕様です。
<!-- URL copy button script  -->
<script>
// <![CDATA[ 
 function urlCopy() {
 var url = location.href; 
 var title = document.title;
 navigator.clipboard.writeText("【"+title +"】"+" " + url);
 document.getElementById("urlcopyBtn").value="クリップボードにコピーしました。";
 }
// ]]>
</script>


その他、ボタンのスタイル等はcssでお好みで仕上げてください。

実際の稼働確認は以下のデモページを用意しているので確認ください。
デモページ


同様機能をjQueryで実行するよりは速度等で有利になるはずです。

QooQデフォルトでは関係ありませんが、Vaster2等テーマによってはjQueryで様々な関数を実行しているテーマもあります。
これらも脱jQueryが可能であれば、多少ページ速度も上がると思います。

以上 

コメント

コメントを投稿