画像でダウンロード画面を出す


■Q&A

■Question

画像のダウンロード 2004.6.6 No.3421

画像ファイルのダウンロードのさせ方について教えてください。
JPEGファイルをダウンロードさせたいのですが、画像ファイル(JPEG)のリンクをクリックするとファイルがブラウザ上に表示されてしまいます。
ZIPやLHAファイル等のように、表示する前に”開くのか、保存するのか”を聞いてくるようにすることができるものでしょうか?
JPEGファイルをZIPなどにしておくといいのでしょうが、そのまま(JPEG形式)で”開くのか、保存するのか”を聞いてくるようにしたいのですが・・・・

■Answer

Re: 画像のダウンロード 回答者1 2004.6.6 No.3422

うわ、また難しい質問を・・・。これは・・・
「たぶん、実現する方法は無い事はない、とは思うが、
 おそらく その方法とは、まっとうな方法では無いと思います。」
こういう答えで間違ってはいないと思うんだけど。
というわけで、素直に「右クリックメニューから対象をファイルに保存してください」、と頼むのが最も良い方法だと思います。
※以下ひとりごと
ExecWBを頑張って調べてみたのだが僕の力では無理だった。ばたんきゅー

■Res

Re: 画像のダウンロード 2004.6.6 No.3425

早速のお答えありがとうございます。
やっぱりそうですか!

ページ上ではウインドーのレイアウトに見合うサイズで表示しているのですが、印刷用に解像度の高い画像を利用してもらいため(細かい文字などが有り)に考えていることで、そのまま開くと(クリックすると)ブラウザ上に開かれ、とんでもない画面になり、あまり知識のない人は「ビックリ!!」、これを避けるためなのです。
現に「右クリックで・・・」と説明しているのですが、現実は知り合いの者も「これどうなんだ?」と言う始末・・・・・
アラートを利用するとか、etcしか無いですか・・・・・ネ?

有難うございました。

■Answer

Re: 画像のダウンロード ぴろあき 2004.6.6 No.3430

自分の知る範囲では、可能なのは Netscape だけです。
ブラウザが余計な気遣いさえしなければ、本当はどれでも実現できるはずなんですけどね。
このケースの最適な選択は「自己解凍形式のアーカイブ」と思います。
http://faq.creasus.net/04/0606/

あるいは

function dialog() {
  var msg = "この画像ファイルは巨大ですので「リンク上で右クリック→対象をファイルに保存」を\n選ぶことをおすすめします。\n\nそれでもこの画像を表示しますか?";
  return window.confirm(msg);
}

<a href="image.jpg" onclick="return dialog()">巨大画像</a>

みたいなのとか…。

>ページ上ではウィンドーのレイアウトに(後略)
そういうことは最初に書いた方が効果的ですよ。

■Res

Re: 画像のダウンロード 回答者1 2004.6.7 No.3437

僕は、サムネイルをクリックすると大きなサイズの画像が、というのを想像していたので、あまり変わらない状況でした。

「印刷用」といいますが、どんな印刷のさせ方を想定しているのかで、また別の、もう少し良い方法があるかも知れません。
ブラウザの印刷機能を使うならば、(縦横の比率を保ったまま)ウインドウ内に収まるサイズで表示するよう変更するスクリプトを組んでも良いかもしれません。
画像をPDFなど他の形式にするのも良いかもしれません。
やはり画像ファイルとしてダウンロードさせて、各々任意の印刷方法で、と言うのなら、関係無い話ですが・・・。


■方法

ダウンロードダイアログは、ブラウザが自分で処理できないファイルを参照した時に出ます。
つまり、ブラウザに「この画像は処理できない」と判断させればいいわけです。
本来、ファイルの内容はMIMEタイプによって決定されるべきですから、.htaccess を利用すれば簡単に実現できることになります。

PNGに対してダウンロードするようにした場合、そのままだとサイトにあるすべてのPNGがダウンロード仕様になってしまうので、<Files> ブロックを用いて特定のファイルにのみ適用します。
JavaScript で選択させたい場合、問い合わせダイアログでOKを押した時に参照先をダウンロード仕様のファイル名に変更すればいいだけです。

これで万事うまくいく計算なのですが、しかしMIMEタイプをきちんと理解するブラウザは実に数少なく…


■.htaccess の中身

#XHTML11.pngのMIMEタイプは通常のPNG
<Files XHTML11.png>
  AddType image/png png
</Files>

#XHTML11dl.pngのMIMEタイプをアプリケーションにする
<Files XHTML11dl.png>
  AddType application/octet-stream png
</Files>


■実行結果

ファイル名で選択

XHTML11.png を表示(MIMEタイプが image/png)

XHTML11dl.png をダウンロード(MIMEタイプが application/octet-stream)

両方とも同じ画像ファイルで、ファイル名だけが違います。そして、ファイル名で違うMIMEタイプを設定しています。
MIMEタイプをちゃんと理解するブラウザなら、XHTML11dl.png のみダウンロード画面が出ます。

JavaScript で問い合わせ

表示かダウンロードを選択

選択ダイアログを出します。OKを押すと、参照先のファイル名を XHTML11dl.png に変更します。
MIMEタイプを理解しないブラウザだと、どっちを選んでもそのまま表示されてしまいます。


■この方法の対応ブラウザ

Netscape
全バージョンできちんと動くはず。(4.x以降では確認済み)
[ Netscape7での例 ]
IE
独自の利便主義を爆進するIEは、MIMEタイプもコンテントヘッダも拡張子さえも見ず、自分で勝手に判断します。
一番実現不可能なブラウザです。(Mac版のIEは不明)
Opera
標準設定ではMIMEタイプより拡張子が優先されるので、現実的に無理と思った方がいいでしょう。
Mac
Safari や iCab ではどうなのでしょう。環境がないのでわかりません。

■結論

最大のシェアを誇るIEで動作しない以上、意味のある方法ではないでしょう。
「自己解凍形式のアーカイブ」なら、どのブラウザでもダウンロード画面が出る上、解凍の方法がわからない初心者にも対応できます。一番スマートな方法じゃないでしょうか。

言うまでもなく、.htaccess の使用を許可されたサーバーでないとすべてが無意味に。


■ このページについて

このページは、質疑応答掲示板で使用した回答の残骸です。検索エンジンに捕まったりリサイクルしたりすることもあろうので、なんとなく残してあります。広く公開しているページではありませんが、第3者の閲覧を禁止するものでもありません。
恒久的なURIは保証できないものの、よほどのことがない限り削除されることはないでしょう。心配性な人はページの保存をおすすめします。(IEは mht 形式でないと保存できないかも)