Dropboxに保存した画像をブログに埋め込む方法

Dropboxのpublicディレクトリが利用停止になるため、ブログに埋め込んだ画像のURLを一斉に変更しました。
公式では案内されておりませんが、その方法をまとめます。

経緯

Dropboxを使っている理由

本ブログはWordpressで運用しています。
Wordpressでは画像などのリソース管理もサポートしておりますが、以下の理由からDropboxを使っています。

  • バックアップファイルのサイズが肥大化してしまう
  • WordPressにアップロードしたり管理が面倒 (個人差あると思います)

最近まではDropboxのPublicディレクトリを使用していました。
Publicディレクトリは 固定のURL + ファイル名 でリソースにアクセスできました。
アップロードもPCのDropboxディレクトリに放り込むだけでシンプル。

Publicディレクトリの廃止

しかし、Dropboxのpublicディレクトリは廃止されることになりました。

DropboxのPublicフォルダ、無料ユーザーは2017年3月15日で廃止・終了〜 – 再起動戦士はなろぐZ

AWS S3やGoogle Driveなども考えましたが、以下の理由で断念しました。

  • S3
    • 有料でコストがよめない (当ブログの規模なら雀の涙程度だとは思いますが..)
    • アップロードが面倒
  • Google Drive
    • rawファイルにアクセスする方法がない (実はあるけど知らないだけかも)
    • アップロードが面倒

Dropboxでもrawファイルのアクセスが難しそうだったのですが、なんとか解決方法を見つけました。

やり方

ここで紹介するやり方は非公式の方法です。
途中で利用できなくなる覚悟がある方のみお試し下さい

共有リンクを取得する

PCの同期機能を使用しているのであれば、右クリックメニュー > Dropbox リンクをコピー で取得出来ます。
以下のようなリンクを取得できます。

https://www.dropbox.com/s/f6vp7exhlmb6pmo/20161018_1.jpg?dl=0

ハッシュ値とファイル名以外を書き換える

以下のようにURLを書き換えましょう。

  • 変更前
    • https://www.dropbox.com/s/${hash}/${file}?dl=0
  • 変更後
    • https://dl.dropboxusercontent.com/s/${hash}/${file}

先ほど取得したリンクを書き換えると以下の様になります。

https://dl.dropboxusercontent.com/s/f6vp7exhlmb6pmo/20161018_1.jpg

確認する

作成したURLをブラウザなどで開いてみましょう。
画像がそのまま表示されればOKです。

あとはimgタグなどでブログに埋め込みましょう。

ダメだった方法

チャレンジしてダメだった方法も共有します。

共有リンクそのまま

<img src="https://www.dropbox.com/s/f6vp7exhlmb6pmo/20161018_1.jpg?dl=0" />

画像は表示されません。
なぜなら、このリンクはDropboxのビューワで閲覧するためのリンクだからです。

dl=0 を外しても同じです。

共有リンクのdl=0raw=1に変更する

<img src="https://www.dropbox.com/s/f6vp7exhlmb6pmo/20161018_1.jpg?raw=1" />

記事では一見正しく表示されます。
ただ、Wordpressの場合はサムネイルとしてリンク切れになるなどの問題が発生しました。

この方法はraw=1というクエリを通して、rawデータを返却していると思います。
WordpressはURLのrewriteを行うケースがあり、その際にクエリが正しく処理されていない可能性があります。

※ 手間がかかりそうだったので解決方法の模索まではしていません

総括

Publicディレクトリを使わずDropboxに保存した画像をブログ内に埋め込む方法を紹介しました。

非公式ではありますが、ブログのリソース管理をDropboxで行いたい場合の選択肢の1つになると思います。

コメントを残す