Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@kyo_nanba

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

最近他の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 さんありがとうございます!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
13
Help us understand the problem. What are the problem?