21
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ブックマークレットでmarkdown用のリンクを生成する

Last updated at Posted at 2017-07-19

最近他のWebページへのリンクを含む記事をmarkdownで書くことが頓に多いのですが、そのページのタイトルでリンクを作ることが多いことといちいちURLとタイトルをコピペするのが面倒になってきたのでとりあえずサクッとブックマークレットにしました。

今時ブックマークレットとか流石に古臭過ぎてどうかと思うけど、今時のやり方とかあるのだろうか…?

※ 以下の手順のショートカットキーなどはMacOS + Google Chromeの場合です。

おもむろに⌘+dでブックマークBookmark Addedする

image.png

Edit...を押してブックマークの詳細編集画面を開く

87316959-33d2-c5ae-e51b-2b5c4f4692af.png

NameとURLを編集する

Nameを「create md link」とか「mdリンク生成」とか適当に付けます。

URLには以下の文字列をコピペします。

javascript:(function(){window.prompt("リンク文字列作成DONE","["+document.title+"]("+location.href+")");})();
Screen Shot 2017-07-19 at 16.57.49.png

そしたら自分の使いやすい場所(Bookmark Bar等)に保存。

実際に使ってみる

作成したブックマークレットをクリックすると生成されたリンク文字列にフォーカスが当たった状態でpromptが出て来る。

image.png

これで今開いてるページのリンクをmarkdownで書いてる記事に貼りたくなったら

  1. リンクをクリック
  2. ⌘+c
  3. escapeキーを押下

でOKになった。

おしまい。

追記

頂いたコメントを試してみたところ、以下のJSを使うことで、わざわざpromptを表示して⌘+cしてescapeすることなくクリップボードにコピーされました。

javascript:(function(){const e=document.createElement('input');e.value=`[${document.title}](${location.href})`;document.querySelector('body').append(e);e.select();document.execCommand('copy');e.remove();})();

素晴らしい。これでブックマークレットを起動するだけになったので手順が3つから1つになりました。しかも描画がないので一瞬。

@Nawada さんありがとうございます!

21
15
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?