「ブラウザで開いちゃう問題」を解決！aタグのdownload属性でファイルをスマートに渡す方法
Webサイトを作っていると、「PDFや画像ファイルをリンク先に設定したのに、クリックするとブラウザの中でそのまま開いちゃう…」という悩みにぶつかることはありませんか？
ユーザーとしては「ダウンロードして手元に保存したい」のに、ブラウザが気を利かせて中身を表示してしまう。これ、意外とあるあるですよね。
実はこれ、HTMLの``タグにちょこっと魔法の言葉を付け加えるだけで、驚くほど簡単に解決できるんです。今回は、ダウンロードを制御する`download`属性について、初心者の方にも分かりやすくお話ししていきますね。
—
そもそも、なぜブラウザは勝手に開いてしまうの？
例えるなら、ブラウザは「おせっかいな執事」のような存在です。
あなたが「このファイルを見せて！」とリンクをクリックすると、執事であるブラウザは「かしこまりました！すぐに中身を広げてお見せします！」と言って、自分のウィンドウの中にファイルを表示してしまいます。
でも、私たちユーザーが「いや、そうじゃなくて、お土産として持って帰りたいんだよ（ダウンロードしたいんだよ）」という時もありますよね。そんな時に使うのが、今回紹介する`download`属性です。
download属性の使い方はとってもシンプル
書き方は、いつもの``タグに`download`という言葉を添えるだけ。これだけで、ブラウザの「中身を表示する」というおせっかいを止めて、「ファイルとして保存する」という動作に切り替えることができます。
これだけで、ブラウザは「おっと、これは保存用ですね。ではお持ち帰りください」と、ファイルを保存する画面を呼び出してくれるようになります。
ファイル名を変えて保存させることもできる！
面白いのは、ダウンロードした時のファイル名を、元のファイル名とは別の名前に指定できることなんです。`download`属性に値をセットするだけでOKです。
これ、実はすごく便利なんです。サーバー上のファイル名が「data_v2_final_final_01.pdf」みたいに謎の英数字になっていても、ユーザーの手元には分かりやすい名前で保存させることができますよね。
—
知っておきたい「注意点」とブラウザの相性
ここまで聞くと「最強の属性じゃん！」と思えるかもしれませんが、少しだけ注意点があります。
1. 「同じドメイン」が基本ルール
残念ながら、全く別のWebサイトにあるファイルを、この属性を使って強制的にダウンロードさせることはできません（セキュリティ上の理由です）。あくまで、自分のサイト内にあるファイルを扱う時に使うものだと覚えておいてくださいね。
2. ブラウザの「お気持ち」は尊重される
最近のブラウザは賢いので、基本的には`download`属性に従ってくれます。ただ、古いブラウザや、ユーザーが設定で「PDFは常にブラウザで開く」と決めている場合は、そちらの優先度が高くなることもあります。
「絶対にダウンロードさせないと困る！」という場合は、サーバー側で「このファイルはダウンロード用ですよ」と設定する手法（Content-Dispositionというヘッダーの設定）が必要になりますが、まずはこの`download`属性で9割方カバーできるはず。大丈夫、まずはここから一歩ずつ試してみましょう！
—
最後に：まずは手を動かしてみよう！
Web制作を始めたばかりの頃は、「思った通りに動かない」ことが本当に多いですよね。でも、それはあなたが一つずつ新しい知識を積み上げている証拠です。
今回紹介した`download`属性も、手元のエディタで画像やテキストファイルを置いて、ぜひ一度試してみてください。「本当に保存された！」という小さな成功体験が、一番のモチベーションになりますから。
もし上手くいかないことがあっても、それはブラウザというおせっかいな執事との対話の練習中だと思って、気楽に楽しんでくださいね。応援しています！
コメント