ブックマークレットで Markdown 用のリンクテキストを自動生成

またまた、バッチシリーズです。

今回は Markdown 用のリンクテキストを自動生成するブックマークレットを作成したのでご紹介いたします。

最近、手動で Markdown や Textile で参考サイトのリンクを作るのが面倒になってきたので自動化したら、（個人的には）面倒ではなくなりました。
※ただし、Mac の Safari と Chrome しか動作確認していないので、ご注意ください。

仕様

例：Yahoo のサイトでブックマークレットを実行した場合、以下のテキストがクリップボードにコピーされる

[Yahoo! JAPAN](https://www.yahoo.co.jp/)

ブックマークレットを実行したら、開いているサイトの Markdown 用リンクテキストをクリップボードにコピーする。
失敗時は alert or prompt で通知する。

あとは良しなにペーストしてお使いください。

使い方

まずはブックマークレット作成

1. ブラウザでブックマークを追加する（空でも何でも良いです）
2. 以下に記載してある 圧縮後 (Markdown_Link) の JavaScript をコピーする
3. 追加したブックマークの URL に JavaScript をそのままペーストして保存する

参考サイト

• ブックマークレットの登録方法 - Qiita
• JavaScript / Css 圧縮・軽量化（Minify）：ファイルを圧縮して表示速度を上げる | ラッコツールズ🔧

ブックマークレットを実行

1. リンクテキストを作りたいサイトをブラウザで表示する
2. ブラウザのお気に入りからブックマークレットを選択する
3. ブックマークレットが実行され、リンクテキストがクリップボードにコピーされる
4. あとは Markdown テキストにペーストしてお使いください

JavaScript (Markdown_Link)

(
    () => {
// ---------------------------------------------------------------
const pageTitle = document.title;
const url = location.href;
if (pageTitle && url) {
    // link text (Markdown)
    const text = '[' + pageTitle + '](' + url + ')';

    // textarea
    const ta = document.createElement('textarea');
    ta.textContent = text;
    document.body.appendChild(ta);

    // select text
    ta.select();

    // copy to clipboard
    if (!document.execCommand('copy')) {
        prompt('コピー失敗', text)();
    }

    // remove textarea
    ta.parentNode.removeChild(ta);
} else {
    alert('テキスト取得失敗');
}
// ---------------------------------------------------------------
    }
)();

圧縮後 (Markdown_Link)

javascript:(()=>{const pageTitle=document.title;const url=location.href;if(pageTitle&&url){const text='['+pageTitle+']('+url+')';const ta=document.createElement('textarea');ta.textContent=text;document.body.appendChild(ta);ta.select();if(!document.execCommand('copy')){prompt('コピー失敗',text)()} ta.parentNode.removeChild(ta)}else{alert('テキスト取得失敗')}})()

実行結果

[Yahoo! JAPAN](https://www.yahoo.co.jp/)

JavaScript (Textile_Link)

Redmine をお使いの方は Textile 版も用意しましたので、こちらをお使いください。

(
    () => {
// ---------------------------------------------------------------
const pageTitle = document.title;
const url = location.href;
if (pageTitle && url) {
    // link text (Textile)
    const text = '\"' + pageTitle + '\":' + url;

    // textarea
    const ta = document.createElement('textarea');
    ta.textContent = text;
    document.body.appendChild(ta);

    // select text
    ta.select();

    // copy to clipboard
    if (!document.execCommand('copy')) {
        prompt('コピー失敗', text)();
    }

    // remove textarea
    ta.parentNode.removeChild(ta);
}
// ---------------------------------------------------------------
    }
)();

圧縮後 (Textile_Link)

javascript:(()=>{const pageTitle=document.title;const url=location.href;if(pageTitle&&url){const text='\"'+pageTitle+'\":'+url;const ta=document.createElement('textarea');ta.textContent=text;document.body.appendChild(ta);ta.select();if(!document.execCommand('copy')){prompt('コピー失敗',text)()} ta.parentNode.removeChild(ta)}})()

実行結果

"Yahoo! JAPAN":https://www.yahoo.co.jp/

参考サイト

• プレーンテキストとしてコピーするブックマークレット - Qiita
  • ソースはこちらの記事のほぼ完コピーです。（ちょっと違うぐらい）
  • @c3091 さん、素晴らしい記事をありがとうございます！
• ページタイトルとURLを取得できるブックマークレットの例｜JavaScript・promptメソッド
• 初心者必見！JavaScript if~elseが即わかる！andやorなどの論理演算子も紹介
• JavaScriptの正規表現でエスケープが必要な文字を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

注意事項

Document.execCommand()廃止

• Document.execCommand() は廃止されたので、いつまで使えるのか分かりません
• ブラウザで使えなくなった時のためにエラー時は手動コピーしやすいように prompt で表示させてます

参考サイト

• Document.execCommand() - Web API | MDN

Chrome の「新しいタブ」画面でブックマークレットが動かない

• テスト実行時はどこかのWebサイトを表示している状態でブックマークレットを実行して下さい

参考サイト

• Chromeの「新しいタブ」画面でブックマークレットが動かない | 怠けblog

ドロップした仕様

元々はキーボードから手を離さずに実行出来るようにしたかったのですが、以下のやり方では Mac 版 Chrome で実行しても XML が表示されるだけだったので今回は諦めました。

手順

1. 適当なショートカット（.webloc）を作成する
2. webloc の URL にブックマークレットを入れて保存する
3. Commnad + space で Spotlight を表示
4. Spotlight でショートカット（.webloc）を検索して、ブックマークレットを実行
5. [NG] Chrome で XML が表示されるだけ

参考サイト

• 【簡単】お気に入りページのショートカットを作る｜Chrome
• ファイル拡張子WEBLOC

番外編

タイトルのみ取得するブックマークレット

表示サイトのタイトルのみ取得するブックマークレットです。（よく使うので追記しておきます）
実行結果：Yahoo! JAPAN

JavaScript(Title_only)

javascript:(
    () => {
// ---------------------------------------------------------------
const pageTitle = document.title;
if (pageTitle) {
    // set text
    // const text = '[' + pageTitle + '](' + url + ')'; // 加工したい時はここで
    const text = pageTitle;

    // textarea
    const ta = document.createElement('textarea');
    ta.textContent = text;
    document.body.appendChild(ta);

    // select text
    ta.select();

    // copy to clipboard
    if (!document.execCommand('copy')) {
        prompt('コピー失敗', text)();
    }

    // remove textarea
    ta.parentNode.removeChild(ta);
} else {
    alert('テキスト取得失敗');
}
// ---------------------------------------------------------------
    }
)();

圧縮後(Title_only)

javascript:(()=>{const pageTitle=document.title;if(pageTitle){const text=pageTitle;const ta=document.createElement('textarea');ta.textContent=text;document.body.appendChild(ta);ta.select();if(!document.execCommand('copy')){prompt('コピー失敗',text)()} ta.parentNode.removeChild(ta)}else{alert('テキスト取得失敗')}})()