Markdown用のリンクを生成するブックマークレット書いた

ちらほらと鳴き出すセミが出てきたよ(5•7•5)。そういえばセミが鳴くのはオスの求愛行動って聞きますが、早く地上に這い出てしまったセミは子孫繁栄に失敗しやすいのか、はたまた成功しやすいのか気になる所ですね。

話は変わって、何かマークダウンで書いている時に参考サイトのリンクを書くタイミングで僕はよくこうなります。

• titleを抜き出すのめんどくさい
  • ソース見たりとか
• titleコピって、URLコピって、リンクの書式書くのめんどくさい
• そもそもリンクの書式ってどうだったっけ？

はてなだと、確かURLを貼ったら自動で生成してくれたから楽だったんだけどWordpressだとそこまでやってくれない。だからいつも自作業。
※なんかそういうプラグインあるんだろうか
※ほかのCMSは分かりません

で、 リンク(インライン)の書式 ※1 はこう。

[リンクテキスト](URL "タイトル")

(自分の中では、リンクテキストとタイトルは一緒になる事が多いと思う)

例： こう書くと

[セミはどうして（あんなにうるさく）鳴くの｜科学なぜなぜ110番｜学研サイエンスキッズ](https://kids.gakken.co.jp/kagaku/110ban/text/1233.html "セミはどうして（あんなにうるさく）鳴くの｜科学なぜなぜ110番｜学研サイエンスキッズ")

セミはどうして（あんなにうるさく）鳴くの｜科学なぜなぜ110番｜学研サイエンスキッズ
こうなります。

書式とか覚えればいいんだけど、普段の業務でマークダウンを書く機会がそこまで無いからいつもググっています。

というわけで上記問題を解決する為、リンクの書式を生成するブックマークレットを書きました。
(リンクの書式は色々あるんですが、自分が使うのはほぼ上記の書式※1なので上記書式のみの対応です)

WordPressのlinkボタンを使えばいいんじゃないか疑惑

WordPressのlinkボタンを使えばリンクを作ってくれるけど、やっぱりtitleのコピーとURLのコピーが面倒くさい

ソース

2016/07/13 ちょっと修正しました

javascript:(function(){var e=document.body,t="___bookmarklet-display-title___",l=document.getElementById(t),o=document.title,i=location.href,d="["+o+"]("+i+' "'+o+'")';null!==l&&e.removeChild(l);var n=document.createElement("textarea");e.insertBefore(n,e.firstChild),n.id=t,n.value=d,n.style.width="100vw",n.style.position="fixed",n.style.top=0,n.style.left=0,n.style.zIndex=2147483647,n.focus()})();

手順

1. 上の文字列をコピー
2. 適当なページをブックマークに追加
3. 追加したブックーマークの編集をする
4. 適当なタイトル（md用link　とか適当に）をつける
5. アドレス(URL)に上でコピーした文字列をペースト（貼付け）する
6. リンクを生成したいページに行って、作ったブックマークを開く

上記手順を実行すると画面上部に[リンクテキスト](URL "タイトル")の文字列が埋め込まれたtextareaが表示されます。（修正点があれば修正して）あとはコピペです。

ソース(圧縮前)

一応圧縮前のソース

javascript:(function() {
  var body = document.body;
  var dummyId = '___bookmarklet-display-title___';
  var dummy = document.getElementById(dummyId);
  var title = document.title;
  var url = location.href;
  var md4link = '[' + title + '](' + url + ' "' + title + '")';

  if (dummy !== null) {
    body.removeChild(dummy);
  }

  var content = document.createElement('textarea');
  body.insertBefore(content, body.firstChild);

  content.id = dummyId;
  content.value = md4link;
  content.style.width = '100vw'; // 100%を指定するとChrome for iOSで動かなかった。。なんで？
  content.style.position = 'fixed';
  content.style.top = 0;
  content.style.left = 0;
  content.style.zIndex = 2147483647;
  content.focus();
})();

注意点

スマホだと上手く動かないですね。。とりあえずPC限定で！
2016/07/13 修正したのでスマホでもいけるはずです！

余談

ホントは、

javascript:!function(){var e=document.body,t="___bookmarklet-display-title___",l=document.getElementById(t),o=document.title,i=location.href,d="["+o+"]("+i+' "'+o+'")';null!==l&&e.removeChild(l);var n=document.createElement("textarea");e.insertBefore(n,e.firstChild),n.id=t,n.value=d,n.style.width="100vw",n.style.position="fixed",n.style.top=0,n.style.left=0,n.style.zIndex=2147483647,n.focus()}();

としたかったけど、これだとFirefoxで上手く動かない(!function(){}()がダメ？？)

2016/07/15 追記

上記!function(){}()問題は、後ろにvoid(0);をつければ動くことが分かりました。

javascript:!function(){var e=document.body,t="___bookmarklet-display-title___",l=document.getElementById(t),o=document.title,i=location.href,d="["+o+"]("+i+' "'+o+'")';null!==l&&e.removeChild(l);var n=document.createElement("textarea");e.insertBefore(n,e.firstChild),n.id=t,n.value=d,n.style.width="100vw",n.style.position="fixed",n.style.top=0,n.style.left=0,n.style.zIndex=2147483647,n.focus()}();void(0);

これでFirefoxでも動きます！