Dropboxを利用してMarkdownで画像を表示する方法

#1.自己紹介
どうも、超初心者の都会で頑張る田舎者です。
文系大学卒の元OLです。
ひょんなことからデータサイエンシストへ弟子入りし、プログラミングの世界に導かれやってきました。
Python、git、docker、Ubuntu、raspberry piなどなどを修行しております。

今回は、そんな初心者がDropboxを利用してMarkdownで画像を表示する方法についてまとめたいと思います。

#2.はじめに
Qiitaを投稿するにあたって、Markdownについても勉強しました。
が・・・！初心者ゆえに”画像の貼り付け”という所につまずいてしまいました。
そこで、先人の知恵をお借りしたく、ネット上を徘徊して得た方法をまとめ程度で記載したいと思います。

###・Markdownとは
Markdown（マークダウン）は、文章の書き方です。デジタル文書を活用する方法として考案されました。
参考：[Markdownとは·日本語Markdownユーザー会](http://www.markdown.jp/what-is-markdown/)
#3.Markdownで画像表示方法
###1.Dropboxログイン
アカウントがない場合は[アカウント作成](https://www.dropbox.com/login?src=logout)へ
※グーグルアカウントからもログインできます。
###2.DropboxをPCにインストール
新規ログインすると、[インストール画面](https://www.dropbox.com/install)が現れます。
既存アカウント利用の場合は、自分のアイコンをクリックして、「インストール」を選択。
![ドロップ１](https://dl.dropboxusercontent.com/s/p6zm7zmz1urywyh/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%91.png?dl=0)

###3.お好みの画像をDropboxに保存
今回は例として私の愛猫を保存してみました(=^x^=)

###4.保存した画像を共有
####・4−1.Web版Dropboxからの共有方法
共有したい画像の右にある「共有」をクリックし、「リンクをコピー」をクリックする。
![ドロップ２](https://dl.dropboxusercontent.com/s/ea4yokt66bnmsf5/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%92.png?dl=0)

![ドロップ３](https://dl.dropboxusercontent.com/s/uxosaq35t7owmls/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%93.png?dl=0)

####・4−2.PCダウンロード版Dropboxからの共有方法
PC上にある共有したい画像を右クリックし、「Dropbox リンクをコピー」をクリックする。
![ドロップ４](https://dl.dropboxusercontent.com/s/o4xk5kko9byez32/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%94.png?dl=0)
・・・・・ふてぶてしい顔で見てます。

”「×××.jpg」のリンクをクリップボードにコピーしました。”と出てきたらOK。
![ドロップ５](https://dl.dropboxusercontent.com/s/jex1js02ycpisuy/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%95.png?dl=0)

###5.コピーしたリンクを貼り付け（失敗編）
このまま貼り付けては・・・・意味がない。
https://www.dropbox.com/s/vnx2t4mfibk9kz1/IMG_5227.jpg?dl=0

`![代替テキスト](画像のURL)`で貼り付けてみよう！
例:`![ふてねこ](https://www.dropbox.com/s/vnx2t4mfibk9kz1/IMG_5227.jpg?dl=0)`

◎結果：
![ふてねこ](https://www.dropbox.com/s/vnx2t4mfibk9kz1/IMG_5227.jpg?dl=0)

・・・・・なんでや。

###6.コピーしたリンクを貼り付け（成功編）
例:`![ふてねこ](https://dl.dropboxusercontent.com/s/vnx2t4mfibk9kz1/IMG_5227.jpg?dl=0)`

◎結果:
![ふてねこ](https://dl.dropboxusercontent.com/s/vnx2t4mfibk9kz1/IMG_5227.jpg?dl=0)
はい、できました〜〜！ふてぶてしい猫！

→先人に知恵によりますと、
`https://www.dropbox.com/s/vnx2t4mfibk9kz1/IMG_5227.jpg?dl=0`は共有リンクURLなので、
`www.dropbox.com`の部分を`dl.dropboxusercontent.com`に変えると、直接ダウンロードできると書いておりました。
ということで、
`www.dropbox.com`の部分を`dl.dropboxusercontent.com`に変えてみたら成功したということです。

めでたしめでたし。
参考：[DropboxのPublicフォルダが終了したので共有リンクに切り替える](http://www.foxism.jp/entry/2017/03/18/121019)
→勉強になりました。ありがとうございました！m(_ _)m
　
#4.その他〜追記〜
###1.GitHubからでもできる模様。

GitHubにプッシュした画像を右クリックして「画像アドレスをコピー」をクリックして、貼り付けてOK！
　→[petadimensionlabのGitHub](https://github.com/petadimensionlab/picture/blob/master/%E3%81%B5%E3%81%A6%E3%81%AD%E3%81%93.jpg)

![ドロップ６](https://dl.dropboxusercontent.com/s/0jzp3jpv34xkxyp/%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%EF%BC%96.png?dl=0)

例：`![ふてねこ]
(https://github.com/petadimensionlab/picture/blob/master/%E3%81%B5%E3%81%A6%E3%81%AD%E3%81%93.jpg?raw=true)`

◎結果：
![ふてねこ]
(https://github.com/petadimensionlab/picture/blob/master/%E3%81%B5%E3%81%A6%E3%81%AD%E3%81%93.jpg?raw=true)

###2.Googleドライブからもできる模様
Web版Googleドライブから、貼り付けたい画像を右クリック「共有可能なリンクを取得」をクリックし、
取得したURL`https://drive.google.com/open?・・・・・・・`の
`open?`を`uc?export=view&`に変えて貼り付ける。

例：`![ふてねこ_クリver]
(https://drive.google.com/uc?export=view&id=1P39f8XjJhh5-bD6NymwKANc47zpVL7Kj-w)`

◎結果：
![ふてねこ_クリver]
(https://drive.google.com/uc?export=view&id=1P39f8XjJhh5-bD6NymwKANc47zpVL7Kj-w)

参考：[googleドライブの画像をmarkdownに貼る](https://qiita.com/kokuyokugetter/items/3b75f4daac73331b2cc4)

###3.そもそもQiitaには・・・
[画像のアップロード方法](https://help.qiita.com/ja/articles/qiita-image-upload)の通り、投稿画面でドラッグアンドドロップ、もしくは画像を選択で簡単にアップロードできるようです！！！
今知りました（照）![IMG_4087.JPG](https://qiita-image-store.s3.amazonaws.com/0/241094/57d69a8d-96f3-2dd2-347a-b67c3ede6739.jpeg)
こちらはドラッグアンドドロップで貼り付けてみました。あら簡単。。。！！
やっぱりこれが一番ですね！

-----
以上です！どれも便利そうです！
GitHubの利点はURLをそのまま貼り付けられることですかね。
（ただ、当方のGitHubは別用途で使用したいので、Dropbox法で表示していこうと思います。）

他に良い方法が見つかれば、追記したいと思います！
　追記（2018.3.20）：Qiitaの投稿画面からのアップロード方法（3.そもそもQiitaには・・・）を更新

→また近日中に、GitHubについて勉強したまとめ記事も投稿したいと思います。