Online Storageの画像を貼る
Online Storage上にアップロードした画像をBlog等に貼る方法を考察します。
index
Blogサービス・HomePageサーバーによっては容量制限が厳しいゆえに、Online Storageに画像を保存しておいて、その画像をBlog・HomePageに貼りつけたい時があります。
DropBoxを使う
DropBoxのPublicフォルダを使う方法が一昔前までは一番簡単だったように思えますが、今は新規無料ユーザーにはPublicフォルダが用意されていないようです。
Publicフォルダに投入されたファイル（HTMLや画像など）はホスティングされるので、Publicフォルダへのリンク / ファイル名にアクセスすれば、HTMLファイルであればHomePageとして、画像であればViewerを介さず画像を直接見れました。
DropBoxの古参ユーザーであればこの方法が単純で良いと思われますが、そうでなければ他の方法を使いましょう。
Google Driveを使う
まず新たな共有フォルダを作ることをお勧めします。【その2】の方法では、画像ごとに共有設定をすることも可能ですが、少々手間です。
新たなフォルダを作ったら、共有の設定を「リンクを知っている全員」に設定して下さい。「ウェブ上で一般公開」にしても良いですが、わざわざ外部から検索可能な状態にする必要は感じられません。
以後、そのフォルダに投下されたファイルには、自動的にフォルダの共有設定が引き継がれます。
【その1】
https://googledrive.com/host/フォルダID/ファイル名にアクセスすると、画像をViewerを介さず直に見れます。
フォルダIDは、Googleドライブ上で共有フォルダを右クリックした後「リンクを取得」をクリックして得られたURL
https://drive.google.com/open?id=************************************************************************
のうちの************************************************************************の部分です。
ただ、この方法だと一部デバイス（スマートフォンなど）で正しく表示されなかったりします。
【その2】
https://drive.google.com/uc?export=view&id=ファイルIDにアクセスしても、画像をViewerを介さず直に見れます。
ファイルIDは、Googleドライブ上でファイルを右クリックした後「リンクを取得」をクリックして得られたURL
https://drive.google.com/open?id=****************************
のうちの****************************の部分です。
この方法だと、ファイルごとにIDを調べる必要があるので少々手間ですが、スマートフォン（少なくともAndroid）でも正しく表示できました。
ただ、【その1】に比べると画像の表示が遅く感じます。
【その3】
- Googleドライブ上で画像ファイルをダブルクリックして表示
- 右上の「ポップアウト」ボタン（×ボタンの隣の、四角形から矢印が飛び出してるボタン）をクリック
- 「その他の操作」ボタン（・が縦に3つ並んでいるボタン）をクリック
- 「アイテムを埋め込む」をクリックするとCodeが表示されるので、それをBlog・HomePageに貼り付ける
この方法だと、画像は埋め込まれたViewer上に表示されます。また、スマートフォンなど一部デバイスでは正しく表示されませんでした。
Blog・HomePageに画像を貼り付ける
DropBox並びにGoogleDriveで【その1】【その2】の方法を用いる場合は、
<img src="アドレス">
を画像の貼り付けたい箇所に書けば大丈夫です。HTMLじゃない場合も、htmlの<img>タグに準ずるものを使えば画像を貼付できるはずです。
