リンク付きタイトルをクリップボードにコピーするブックマークレット（Word,Gmail等に貼り付け可）

# 概要

タイトルとURLを取得するブックマークレットを2種類ご紹介します。
※IEでは機能しません。
![リンク付きタイトルをクリップボードにコピーするブックマークレット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44319/31ba2184-db05-2302-670c-bb96a9570922.png)

# ①タイトルとURLをコピーするブックマークレット。
下図のようにタイトルー[改行]ーURLの文字列を貼り付けることがでます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44319/487c6715-1caa-2028-6249-f1fee14049d3.png)
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYBwZPz" data-user="VideoNiks" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/VideoNiks/pen/LYBwZPz">
  Bookmarklet -Title&amp;Url-</a> by ryo fujii (<a href="https://codepen.io/VideoNiks">@VideoNiks</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



# ②ハイパーリンク付きタイトルを生成してコピーするブックマークレット。
WordやGmail等で下図のようにリンク付きで貼り付けることがでます。
※ノートやメモ帳では機能しない可能性があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44319/beecf68c-ec96-b2c9-840c-dc7b41764169.png)

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="WNKVwWB" data-user="VideoNiks" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/VideoNiks/pen/WNKVwWB">
  Bookmarklet -Hyperlink Title-</a> by ryo fujii (<a href="https://codepen.io/VideoNiks">@VideoNiks</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



⬇解説図（ブックマークツールバーにドラッグ&ドロップ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44319/29f80db7-48fd-3412-e49d-88ccf4655440.png)





# 補足
## ブックマークレットのコード
①ハイパーリンク付きタイトル
```
javascript:(function()%7Bnull%20!%3D%3Dnavigator.clipboard%20%3F%20navigator.clipboard.write(%5Bnew%20ClipboardItem(%7B'text%2Fhtml'%3A%20new%20Blob(%5B'%20%3Ca%20href%3D%22%20'%20%2B%20document.URL%20%2B%20'%20%22%3E%20'%20%2B(document.title%20!%3D%3D''%3F%20document.title%3Adocument.URL)%2B%20'%20%3C%2Fa%3E%20'%5D%2C%7Btype%3A%20'text%2Fhtml'%7D)%7D)%5D)%3A%20alert(%22navigator.clipboard%20not%20supported%22)%3B%7D)();
```

②タイトルとURL

```
javascript:(function()%7Bnull%20!%3D%3Dnavigator.clipboard%20%3F%20navigator.clipboard.writeText(document.title%20%2B%20'%5Cr'%20%2B%20document.URL%2B%20'%5Cr')%3A%20alert(%22navigator.clipboard%20not%20supported%22)%3B%7D)();
```


### ハイパーリンク付きタイトルを生成するコードについて
aタグの文字列をコピーしてもリンク付き文字列にはなりません。MIMEタイプをHTMLにする必要があります。そのためバイナリデータにしてからクリップボードに書きこんでいます。
```javascript:
(function () {
    null !== navigator.clipboard ?
        navigator.clipboard.write(
            [new ClipboardItem({'text/html':
                        new Blob([' <a href = " ' + document.URL + ' "> ' + (document.title !== '' ? document.title : document.URL) + ' </a> '],
                            {type: 'text/html'})
                        })]
            )
        : alert("navigator.clipboard not supported");
})()
```

### ラウザーの互換性

navigator.clipboardを使用しているので互換性は以下です。
[Navigator.clipboard - Web API | MDN　#ブラウザーの互換性](https://developer.mozilla.org/ja/docs/Web/API/Navigator/clipboard#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44319/644e8a78-d48a-544c-4a56-519349e57ef2.png)



### 動機
GoogleドキュメントではURLを書くとリンク先のタイトルに置きかえるよう提案してくれますがMicrosoft Wordではそのような機能が無いので作ました。