参考サイトとして表示するurlを形式ごと取得する

初書：2020/10/25

前書き

QiitaのMarkdownを書く際に、参考サイトとしてurlをコピーして貼り付け・・・をするわけだが、
それをJavascriptで形式ごと（[タイトル](url)）取得するコードを作成する。
元々これを書いてくれていたページがあって、LGTMしていたはずなのだが、知らぬ間に消えていたので改めて自分でコードを作ることにした。

前提

mac版safari:14.0
mac版chrome:86.0
の二つで動作確認。それ以外(特にIE)は知らない

タイトル・urlを取得する

これは調べたらいくらでも出てくる。

    var str = "["+document.title+"]("+location.href+")";
    alert(str);

これで、例えばこのページなら[参考サイトとして表示するurlを形式ごと取得する - Qiita](https://qiita.com/yuu_1st/items/11c2ca89276962b2e488)が表示されるはず

一応これで完成なのだが、せっかくなのでもう少し便利にしたい。

取得したものをクリップボードにコピーする

調べてみると、以下のサイトに出会った。
[JavaScript]クリップボードを使ったコピーとペースト - Qiita

ClipboardEvent.clipboardDataとAsync Clipboard APIがあったのだが、後者の方が簡単に記述できるので、今回はこちらを使用する。
対応状況をみると、IE以外は対応しているみたい？ Clipboard API - Web APIs | MDN

ということで、コードを記述してみる

if(navigator.clipboard){
    navigator.clipboard.writeText("["+document.title+"]("+location.href+")")
        .then(()=>alert("コピーしました"))
        .catch((e)=>console.error("コピーできませんでした"));
}else{
    alert("コピーできませんでした。");
}

一応alertでコピーできたかのエラーを吐くようにした。
writeTextは非同期処理なので、thenとcatchを使用している。仕様がわからない人はjavascript promiseで検索

・・・せっかくなのでもっと便利にしよう。

ブックマークに追加する

ブックマークに追加すれば、ボタン一つでクリップボードにコピーすることが出来る。ctrl+cは一切使わない。
一応上記を独自minifyしたコードを下に置いておく。

if(navigator.clipboard)navigator.clipboard.writeText("["+document.title+"]("+location.href+")").then(()=>alert("コピーしました")).catch(()=>console.error("コピーできませんでした"));else alert("コピーできませんでした。");

これをコピーして、先頭にjavascript:を追加してブックマークすれば、完成。
（ブックマークへの追加の仕方の説明は要らないよね。。。？）

終わりに

上のコードをChromeのアドレスバーに入れると、「アクティブウィンドウがありません」というエラーを吐くので、とりあえず試してみようって感じで入れる場合は注意。

括弧の順番いつも迷うので、こういうのを保存しておくと便利かも。