今回は、.clipboard.writeText() メソッドを使って、指定タグをクリックでURLをコピーするコードについて解説します。
.clipboard.writeText()
JavaScriptの .clipboard.writeText() は、指定されたテキスト文字列をシステムのクリップボードを書き込むメソッドです。
writeText(newClipText).clipboard.writeText()は、非同期のAPIで.then()と.catch()を使用して成功またはエラーの処理を行います。
そして、コピーが成功したらアラートを表示し、失敗したらエラーをコンソールに表示します。
似たようなメソッドに document.execCommand('copy') がありますが、現在非推奨となっているので、.clipboard.writeText() を使うようにしましょう。
指定タグをクリックでURLをコピー可能なサンプル
早速サンプルです。
4つの見出し「1〜4」をクリックすると、見出しタグに設定されているアンカーURLがクリップボードにコピーされます。
見出し1個目
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
見出し2個目
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
見出し3個目
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
見出し4個目
本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
クリップボードにコピーされると「Copied to clipboard」と言うアラートも表示されます。
クリップボードにコピーされるので、アドレスバーに入力するとその見出しにジャンプします。
実装の手順と方法
コードの詳細の前に、実装の手順と方法について解説していきます。
まずはじめに、HTMLを記述します。
<p class="midashi">見出し1個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<p class="midashi">見出し2個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<p class="midashi">見出し3個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<p class="midashi">見出し4個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>記述する場所は、任意の場所でOKです。
次に、JavaScriptのコードをHTMLを設置したページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
document.addEventListener("DOMContentLoaded", function() {
// スマホの時はイベントオフ
if (!(/Mobi|Android/i.test(navigator.userAgent))) {
var headers = document.querySelectorAll(".javaSample .midashi"); // タグや要素を指定。
var idCount = 1;
headers.forEach(function(header) {
header.id = "toc" + idCount++;
header.addEventListener('click', function() { // クリックしたら発動
var anchorLink = window.location.href + '#' + this.id;
navigator.clipboard.writeText(anchorLink).then(function() {
alert('Copied to clipboard: ' + anchorLink);
})
.catch(function(err) {
console.error('Could not copy text: ', err);
});
});
});
}
});最後に、見た目を整える為CSSを記述します。
p.midashi {
cursor: pointer;
transition: 0.3s ease-in-out;
font-size: 1.3rem;
font-weight: 600;
position: relative;
}
p.midashi:hover {
opacity: 0.7;
}
p.midashi:before {
content: "\f0c1";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1.1em;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -30px;
opacity: 0;
transition: 0.3s ease-in-out;
}
p.midashi:hover:before {
opacity: 0.4;
}これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。ざっくりですが、順に解説していきます。
HTML
HTMLは、全て p タグでできていて、見出しには「midashi」のclass名を付与したシンプルなつくりです。
<p class="midashi">見出し1個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<p class="midashi">見出し2個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<p class="midashi">見出し3個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
<p class="midashi">見出し4個目</p>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>サンプル色が強く、詳細の解説が難しいので、割愛させてください。
JavaScript
JavaScriptコードは、はじめに .addEventListener() の「DOMContentLoaded」でWebページのDOMが完全に読み込まれたときに動作します。
その次に、/Mobi|Android/i.test(navigator.userAgent)を使って、ユーザーがモバイルデバイスを使用しているかどうかを確認します。
もしユーザーがデスクトップデバイスを使用している場合、「.javaSample .midashi」classを持つ全要素を選択し順序付けられたID（”toc1″、”toc2″といった形）を割り当てています。
document.addEventListener("DOMContentLoaded", function() {
// スマホの時はイベントオフ
if (!(/Mobi|Android/i.test(navigator.userAgent))) {
var headers = document.querySelectorAll(".javaSample .midashi"); // タグや要素を指定。
var idCount = 1;
headers.forEach(function(header) {
header.id = "toc" + idCount++;
header.addEventListener('click', function() { // クリックしたら発動
var anchorLink = window.location.href + '#' + this.id;
navigator.clipboard.writeText(anchorLink).then(function() {
alert('Copied to clipboard: ' + anchorLink);
})
.catch(function(err) {
console.error('Could not copy text: ', err);
});
});
});
}
});そして、該当要素をクリックすると動作しすることで、クリップボードにコピーし、一時的なinput要素は削除します。最後に、コピーしたURLを表示するアラートを生成します。
これにより、ユーザーはクリックした見出し要素へ直接ジャンプするURLを手に入れることができます。
比較的シンプルなコードなので、カスタマイズもしやすいと思います。
CSS
CSSは以下のように、それぞれプロパティを記述しています。
p.midashi {
cursor: pointer; /* マウスカーソルが要素上にあるときにポインターに変わるようにします */
transition: 0.3s ease-in-out; /* 要素の遷移効果（色、大きさなど）をスムーズにするための時間とアニメーションタイプを設定します */
font-size: 1.3rem; /* フォントサイズを1.3remに設定します（1remは親要素のフォントサイズ） */
font-weight: 600; /* フォントの太さを設定します（600は半太字に相当） */
position: relative; /* 要素の位置を相対的に設定します。これは子要素に対して相対的な位置を与えるための基準点になります */
}
p.midashi:hover {
opacity: 0.7; /* マウスカーソルが要素上にあるときに透明度を0.7に設定します */
}
p.midashi:before {
content: "\f0c1"; /* 要素の前に挿入するコンテンツを設定します。ここではFont Awesomeのアイコンを使用しています */
font-family: "Font Awesome 5 Free"; /* Font Awesomeのフォントを指定します */
font-weight: 900; /* フォントの太さを900（最も太い）に設定します */
font-size: 1.1em; /* フォントサイズを1.1emに設定します（1emは自身のフォントサイズ） */
position: absolute; /* 要素の位置を絶対的に設定します。これは親要素（ここではp.midashi）に対する位置を指定します */
top: 50%; /* 要素の上辺を親要素の高さの50%の位置に設定します */
transform: translateY(-50%); /* 要素を縦方向（Y軸）に-50%移動させます。 */
left: -30px; /* 要素の左辺を親要素の左辺から-30pxの位置に設定します */
opacity: 0; /* 要素の透明度を0（完全に透明）に設定します */
transition: 0.3s ease-in-out; /* 要素の遷移効果（色、大きさなど）をスムーズにするための時間とアニメーションタイプを設定します */
}
p.midashi:hover:before {
opacity: 0.4; /* マウスカーソルが要素上にあるときに:beforeの透明度を0.4に設定します */
}
コメントアウトにそれぞれの効果を書いているので、参考にしてみてください。
さいごに
今回は、.clipboard.writeText() を使ってURLをコピーするコードについて解説しました。
サンプルでは p タグにしていましたが、実際は h2 などの h タグに使うことが多いと思うので、要素指定のところをカスタマイズして使ってください。
