Markdownで画像を表示する時はGyazoを使うのが便利

Markdownで画像を表示したい時は下記の書き方で表示ができます。

!(alt属性)[画像URL "title属性"]
!(alt属性)[画像URL] //title属性は省略も可能

ただこの方法だと、他人にMarkdownファイルを渡す時に、一緒に画像ファイルも渡す必要が出てきますし、画像パスを書いていくのは面倒です。

そこで最近はGyazoという画像共有サービスを利用して、画像を表示させるようにしています。

Gyazoの画像URL

Gyazoは画像をアップロードして、URLを共有する事で他人と画像を共有できるサービスです。
PCに画像が保存される事もないですし、URLなので画像をやり取りするよりも容量が軽く済むので、非常に便利です。

また、公式アプリもあって、Mac標準のスクリーンショットと同じ用な使い勝手で、撮影したスクリーンショットをすぐにGyazoにアップ→共有ができます。

下の画像は実際のGyazoページになります。

Gyazoは普通のWebページなのですが、URLの末尾に「.png」や「.jpg」などの拡張子を付け加える事で画像リンクとして扱えます（拡張子の種類は画像によって変わりますが、公式アプリで普通に撮影した場合は、基本PNGだと思って問題ありません）。

通常のリンク： https://gyazo.com/e40db813498509a96c83b6dee769dc5f
画像リンク： https://gyazo.com/e40db813498509a96c83b6dee769dc5f.png

この画像リンクをMarkdownに埋め込めばちゃんと表示されます。

追記：Gyazoの画像ページから直接Markdownをコピーする方法

Twitterにてもっと簡単な方法を教えていただきました。
Gyazoの画像ページにてcommand + option + Cを押せばMarkdown用に整形された画像リンクがコピーされます。

画像ページでcmd+option+cを押すとMarkdownがコピーされます（Windowsの場合はCtrl+Alt+c） https://t.co/qP8euFcrbC

— Hiroki Akiyama (@akiroom) February 18, 2019

ただMacのChromeやSafariでは、開発用のショートカットとしてcommand + option + Cが既に割り当てられているらしく、自分の環境ではうまく機能しませんでした。

しかし、command + option + fn + Cでそれを回避してコピー出来ました。
何故かは分かりませんが、もし同じような症状になった方は試してみてください。

Create Linkでもっと楽する

ここから更に、Markdownの記述もすぐ生成できるようにしたいので、Create LinkというChrome拡張機能をインストールします。

chrome.google.com

Create Link

https://chrome.google.com/webstore/detail/create-link/gcmghdmnkfdbncmnmlkkglmnnhagajbm?hl=ja

Copy current page URL to clipboard in various formats.

Create Linkは現在いるWebページのURLやタイトルを取得して、すぐに目的の形のURLを生成してくれる拡張機能です。

追加されたアイコンをクリックして［Configure…］を選択します。

設定画面が表示されるので。「+」ボタンをクリックしてフォーマットを追加します。

Nameは分かりやすい名前を付けて（自分の場合はGyazo → Markdown）Formatには下記のコードを入力します。

![%text%](%url%.png)

「%text%」には表示中のWebサイトのタイトル、「%url%」にはURLが入るのでその後に「.png」を付けています。
後はGyazoのページでCreate Linkを使用すればすぐにMarkdown記法の画像リンクをコピーできます。

Create Linkにショートカットキーをつける

更に楽をするために、Create Linkにショートカットキーを付けます。

先ほど同様に、Create Linkの設定画面へいき「Default Format」にショートカットキーを設定したいフォーマットを選択します。

その後、すぐ下の「Configure shortcut」リンクをクリックします。
するとChrome拡張機能のショートカットキー設定画面へ移動するので、ここでCreate Linkの「Current tab in default format」にショートカットキーを設定します。

自分の場合はcontrol + Cに設定しました。
これで、Gyazoページを開いてcontrol + CすればすぐにMarkdown記法のURLがコピーされます。

Markdownファイル単体で済むようになる

このように、Gyazoを使用するとMarkdownファイル単体の受け渡しで済むようになります。単純に受け渡し時の容量削減にもなりますし、Gyazoは意図して削除しない限り画像URLは残るので安心です。