ブログ書いてたりすると、「このサイトのタイトルとURLまとめてコピーしたいな〜」ってことがわりとある。（あるよね？？）
そんな場合、chromeやFirefoxなら拡張機能として下記のようなツールを使えば簡単にできるっぽい。
TitleUrlCopy – Chrome ウェブストア
TitleUrlCopy – Firefox 向けアドオン
ただ、何らかの理由でブラウザにこれ以上アドオンを入れたくない場合などもあるかもしれない。
そんなときは、ブックマークレットなんか使ってみてはいかがだろうか？
※ブックマークレットって何？どうやって使うの？って方は下記をご覧ください。
ブックマークレットの登録方法 – Qiita
ブックマークレット／Bookmarkletの作り方 – catch.jp-wiki
ぶっちゃけ今ご紹介したリンク見ればこの話済むんですけど、せっかくブログ書き始めちゃったからもう最後まで書こうと思います。
暇な人、どうやって動かしてるのか中身見たい人は続きをどうぞ。
もくじ
サイトのタイトルとURLをまとめてコピーするブックマークレット三連発！
カンマ区切りにするver.
まずは、サイト名とURLをカンマ区切りにするやつです。
エクセルにサイトのタイトルとURLをまとめたいときとかに便利です。
ブックマークレット用
そのまま下記をコピペしてください↓
|
1 |
javascript:(()=>{const d = document;const title = d.querySelector('title').innerText;const href = location.href;const data = `"${title}","${href}"`;const input = d.createElement('input');input.type = 'text';input.value = data;d.querySelector('body').prepend(input);input.select();d.execCommand('copy');input.style.display = 'none';})(); |
閲覧用（改行、インデント、コメント付き）
コードの体裁を整えて見やすくしたものです。ブックマークレットとしては動かないのでご注意。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
javascript:(()=>{ // 毎回'document'って書くと文字数くうから一文字にしちゃう const d = document; // ページのタイトル const title = d.querySelector('title').innerText; // url const href = location.href; // タイトルとURLをカンマ区切りの文字列にするよ const data = `"${title}","${href}"`; // クリップボードに保存する'd.execCommand('copy')'コマンドは // テキストボックス内の文字じゃなきゃだめっぽいから作る const input = d.createElement('input'); input.type = 'text'; // textboxに出力用の結果（title,urlの文字列）をセット input.value = data; // 作ったtextboxをbodyのどアタマに埋め込む d.querySelector('body').prepend(input); // テキストボックスを選択してコピー input.select(); d.execCommand('copy'); // 見えたらダサいから非表示。おーわり！ input.style.display = 'none'; })(); |
<a>タグにするver.
HTMLの基本中の基本、リンクを貼る際に使う<a>タグの形式にするやつです。
ブログとかにそのままペタッと貼るのにいいかも。
ブックマークレット用
そのまま下記をコピペしてください↓
|
1 |
javascript:(()=>{const d = document;const title = d.querySelector('title').innerText;const href = location.href;const data = `<a href="${href}" target="_blank">${title}</a>`;const input = d.createElement('input');input.type = 'text';input.value = data;d.querySelector('body').prepend(input);input.select();d.execCommand('copy');input.style.display = 'none';})(); |
閲覧用（改行、インデント、コメント付き）
コードの体裁を整えて見やすくしたものです。ブックマークレットとしては動かないのでご注意。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
javascript:(()=>{ const d = document; const title = d.querySelector('title').innerText; const href = location.href; // aタグにするで〜 const data = `<a href="${href}" target="_blank">${title}</a>`; // 以下略 const input = d.createElement('input'); input.type = 'text'; input.value = data; d.querySelector('body').prepend(input); input.select(); d.execCommand('copy'); input.style.display = 'none'; })(); |
マークダウン記法にするver.
HTML形式でマークアップなんかダルすぎる&ダサすぎる！という方はこちら。
[リンク文字列](URL)の形式にするよ。
ブックマークレット用
そのまま下記をコピペしてください↓
|
1 |
javascript:(()=>{const d = document;const title = d.querySelector('title').innerText;const href = location.href;const data = `[${title}](${href})`;const input = d.createElement('input');input.type = 'text';input.value = data;d.querySelector('body').prepend(input);input.select();d.execCommand('copy');input.style.display = 'none';})(); |
閲覧用（改行、インデント、コメント付き）
コードの体裁を整えて見やすくしたものです。ブックマークレットとしては動かないのでご注意。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
javascript:(()=>{ const d = document; const title = d.querySelector('title').innerText; const href = location.href; // マークダウン記法 => [リンク文字列](url) にするよ const data = `[${title}](${href})`; // あとは同じ const input = d.createElement('input'); input.type = 'text'; input.value = data; d.querySelector('body').prepend(input); input.select(); d.execCommand('copy'); input.style.display = 'none'; })(); |
最後に感想とか
車輪の再発明は愚だが、勉強にはちょうどいいのかもしれない。まぁたのしかったので佳しとしたい。
