Markdown形式の画像リンクをテーブル形式に変換するブックマークレット

# 概要

データ分析やアプリのエビデンスで、**キャプチャ画像を表形式で並べて表示したい**時がありますよね。そんな時に私が使っているブックマークレットをご紹介いたします。

このブックマークレットは、

- テキストエリアにMarkdown形式の画像リンクをペーストすると、
    - （特にGitHubにアップロードした画像や動画リンク）
- タイトルと画像をテーブル形式に変換したMarkdownテキストを
- OSのクリップボードにコピーします。

# 圧縮コード

``` javascript
javascript:(function(){function convertFullWidthNumToHalf(str){return str.replace(/[０-９]/g,t=>String.fromCharCode(t.charCodeAt(0)-65248))} function generateTable(inputText,width){const lines=inputText.trim().split("\n");const titles=lines.map(line=>line.match(/\[([^\]]+)\]/)[1]);const urls=lines.map(line=>line.match(/\(([^)]+)\)/)[1]);const widthTag=width?` width="${width}"`:"";return[`| ${titles.join(" | ")} |`,`| ${"-".repeat(titles[0].length)}${titles.slice(1).map(title => " | "+ "-".repeat(title.length)).join("")} |`,`| ${titles.map((title, i) => width ? `<img src="${urls[i]}" alt="${title}"${widthTag}/>` : `![${title}](${urls[i]})`).join(" | ")} |`].join("\n")} const textarea=document.createElement("textarea");textarea.rows=10;textarea.cols=80;textarea.style.position="fixed";textarea.style.top="10%";textarea.style.left="10%";textarea.style.width="80%";textarea.style.height="30%";textarea.style.zIndex=10000;textarea.placeholder="ここにMarkdown形式の画像リンクをペーストしてください。\n\n(Sample)\n```\n![Image_Title_1](your_image_url_1)\n![Image_Title_2](your_image_url_2)\n```";document.body.appendChild(textarea);const widthInput=document.createElement("input");widthInput.type="text";widthInput.style.position="fixed";widthInput.style.top="42%";widthInput.style.left="10%";widthInput.style.width="80%";widthInput.style.zIndex=10001;widthInput.placeholder="(Option) 画像の横幅を指定 (Sample) `300`";document.body.appendChild(widthInput);textarea.focus();textarea.onpaste=function(){setTimeout(function(){let width=widthInput.value.trim();if(width){width=convertFullWidthNumToHalf(width);if(!/^\d+$/.test(width)){alert('入力された横幅は数値ではありません。');return}} const result=generateTable(textarea.value,width);const copyText=document.createElement("textarea");document.body.appendChild(copyText);copyText.value=result;copyText.select();document.execCommand("copy");document.body.removeChild(copyText);document.body.removeChild(textarea);document.body.removeChild(widthInput);alert("変換されたテキストがクリップボードにコピーされました")},100)}})()
```

# サンプル

## 入力エリア

![ブックマークレット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1170961/369762dd-d55b-ebb1-5672-22ccfd6cd61c.png)

## Input

```markdown
![300_pixel](your_image_url_300_pixel.png)
![200_pixel](your_image_url_200_pixel.png)
![100_pixel](your_image_url_100_pixel.png)
```

## Output

横幅を指定しない時（デフォルト）
```
| 300_pixel | 200_pixel | 100_pixel |
| --------- | --------- | --------- |
| ![300_pixel](your_image_url_300_pixel.png) | ![200_pixel](your_image_url_200_pixel.png) | ![100_pixel](your_image_url_100_pixel.png) |
```

横幅を指定した時（オプション）
```markdown
| 300_pixel | 200_pixel | 100_pixel |
| --------- | --------- | --------- |
| <img src="your_image_url_300_pixel.png" alt="300_pixel" width="300" /> | <img src="your_image_url_200_pixel.png" alt="200_pixel" width="300" /> | <img src="your_image_url_100_pixel.png" alt="100_pixel" width="300" /> |
```

# 使い方

1. 上記の圧縮コードをコピーして、ブラウザのブックマークとして登録します。
2. ページでブックマークを実行すると、テキストエリアが表示されます。
3. 上部テキストエリアにMarkdown形式の画像リンクをペーストします。
4. オプションとして、（下部テキストエリアに）画像の横幅を指定することもできます。
5. ペースト後、自動的にテーブル形式のMarkdownコードがクリップボードにコピーされます。

## 使用上の注意

- このブックマークレットは、主にデスクトップのWebブラウザでの利用を想定しています。
- サイトによっては、スクリプトの実行が制限されている場合があります。そのようなサイトでは、ブックマークレットは動作しないことがあります。
- 複数行に渡るMarkdownの画像リンクが正しく変換されることを前提としています。一度に一つのテーブルしか作りません。不正な形式を入力すると、期待する動作をしない可能性があります。
- ガチガチには作ってないので、使用する際は、自己責任でお願い致します。

# 圧縮前のコード

``` javascript
javascript:(function(){
    function convertFullWidthNumToHalf(str) {
        return str.replace(/[０-９]/g, t => String.fromCharCode(t.charCodeAt(0) - 65248));
    }

    function generateTable(inputText, width) {
        const lines = inputText.trim().split("\n");
        const titles = lines.map(line => line.match(/\[([^\]]+)\]/)[1]);
        const urls = lines.map(line => line.match(/\(([^)]+)\)/)[1]);
        
        const widthTag = width ? ` width="${width}"` : "";
    
        return [
            `| ${titles.join(" | ")} |`,
            `| ${"-".repeat(titles[0].length)}${titles.slice(1).map(title => " | "+ "-".repeat(title.length)).join("")} |`,
            `| ${titles.map((title, i) => width ? `<img src="${urls[i]}" alt="${title}"${widthTag} />` : `![${title}](${urls[i]})`).join(" | ")} |`
        ].join("\n");
    }

    const textarea = document.createElement("textarea");
    textarea.rows = 10;
    textarea.cols = 80;
    textarea.style.position = "fixed";
    textarea.style.top = "10%";
    textarea.style.left = "10%";
    textarea.style.width = "80%";
    textarea.style.height = "30%";
    textarea.style.zIndex = 10000;
    textarea.placeholder = "ここにMarkdown形式の画像リンクをペーストしてください。\n\n(Sample)\n```\n![Image_Title_1](your_image_url_1)\n![Image_Title_2](your_image_url_2)\n```";
    document.body.appendChild(textarea);

    const widthInput = document.createElement("input");
    widthInput.type = "text";
    widthInput.style.position = "fixed";
    widthInput.style.top = "42%";
    widthInput.style.left = "10%";
    widthInput.style.width = "80%";
    widthInput.style.zIndex = 10001;
    widthInput.placeholder = "(Option) 画像の横幅を指定 (Sample) `300`";
    document.body.appendChild(widthInput);
    
    textarea.focus();

    textarea.onpaste = function() {
        setTimeout(function() {
            let width = widthInput.value.trim();
            if (width) {
                width = convertFullWidthNumToHalf(width);
                if(!/^\d+$/.test(width)){
                    alert('入力された横幅は数値ではありません。');
                    return;
                }
            }
            const result = generateTable(textarea.value, width);
            const copyText = document.createElement("textarea");
            document.body.appendChild(copyText);
            copyText.value = result;
            copyText.select();
            document.execCommand("copy");
            document.body.removeChild(copyText);
            document.body.removeChild(textarea);
            document.body.removeChild(widthInput);
            alert("変換されたテキストがクリップボードにコピーされました");
        }, 100);
    }
})();
```