「リンクを押すとブラウザで開いちゃう…」を解決！aタグの`download`属性でファイルを直接ダウンロードさせる方法
Webサイトを作っていると、「PDFの資料や画像を、ブラウザで表示させるんじゃなくて、ユーザーのパソコンに直接保存させたい！」という場面、必ずと言っていいほど出てきますよね。
普通、Webサイトのリンクをクリックすると、ブラウザは「よし、中身を見せてあげよう！」と気を利かせて画面に表示しようとします。でも、今回やりたいのは「見て確認する」のではなく「手元に持っていく」こと。いわば、ブラウザという「展示室」を通さずに、倉庫から直接荷物を運ぶようなイメージです。
そんなとき、HTMLの`a`タグに添える魔法の言葉が`download`属性です。今日はこれをマスターして、ユーザーさんに親切なサイト作りを一緒に目指しましょう！
—
そもそも、どうしてそのままではダメなの？
例えば、`href=”report.pdf”` とだけ書いたリンクを設置したとします。ユーザーがこれをクリックすると、ブラウザの設定によっては、そのPDFがブラウザの画面上でパッと開いてしまいますよね。
これだと、ユーザーはわざわざ「名前を付けて保存」という操作をしなければならず、ちょっと面倒です。そこで、この`download`属性の出番です。これを一言書き加えるだけで、ブラウザは「あ、これは見せるんじゃなくて、ダウンロードさせるためのものね！」と瞬時に理解してくれます。
魔法のコードはこれだけ！
書き方はとってもシンプルです。いつもの`a`タグの中に、`download`と書くだけ。これだけでOKです。
「え、これだけでいいの？」と思うかもしれませんが、本当にこれだけでブラウザの挙動が変わるんです。Webの世界って、ときどきこういう「魔法の単語」があるから面白いですよね。
—
さらに便利に！ダウンロード時の「ファイル名」も指定できる
`download`属性のすごいところは、ただダウンロードさせるだけじゃないんです。属性の中に値を書くことで、保存されるときのファイル名を自由に変更できるんです。
例えば、サーバー上のファイル名が`kikaku_ver12_final_final.pdf`みたいな、ちょっと人に見せたくないような名前だったとしても、ユーザーには綺麗で分かりやすい名前で保存させることができます。
これ、地味ですけどユーザーさんにとっては「何のファイルか一目瞭然」なので、とっても親切な工夫だと思いませんか？
—
ちょっとだけ注意！知っておくべき「壁」の話
ここまで聞いて「よし、全部ダウンロードにしちゃおう！」と思った方、ちょっとだけストップです。いくつか気をつけておきたいポイントがあります。
1. 「同じドメイン」が基本ルール
`download`属性がしっかり効くのは、あなたのサイトと同じサーバー内にあるファイルであることが前提です。別のサイト（外部ドメイン）にある画像やPDFを勝手にダウンロードさせることは、セキュリティの都合上、ブラウザ側で制限されてしまうことがほとんどです。
2. ブラウザによっての「性格の違い」
最近のChromeやEdge、Firefoxなどは問題なく対応していますが、古いブラウザや特定の環境では、`download`属性を無視して普通に開いてしまうこともあります。「100%確実にダウンロードさせる」というのは、Webの世界では実は結構難しいことなんです。
「できればダウンロードしてね、ダメなら開いちゃうけどごめんね」くらいの、少し肩の力を抜いた気持ちで実装するのが、Web開発者として長続きするコツですよ。
—
まとめ：小さな気遣いが「使いやすいサイト」を作る
`a`タグの`download`属性は、まさに「ユーザーの時間を節約する」ための小さな気遣いです。
- `download`属性を書くと、ブラウザは「保存」の準備を始める
- `download=”名前”`と書くと、保存時のファイル名を変えられる
- 同じサイト内のファイルで使うのがルール！
Web制作を始めたばかりの頃は、タグの数や属性の多さに圧倒されてしまうこともあるかもしれません。でも大丈夫。今日覚えたこの「魔法の言葉」を一つずつ自分の道具箱に入れていくことで、少しずつ「自分の思い通りに動くサイト」が作れるようになっていきます。
まずは手元のテキストエディタで、適当なPDFや画像を置いて試してみてください。ブラウザから「保存しますか？」と聞かれた瞬間、きっとちょっと感動しますよ！
何か分からないことがあれば、いつでもまた聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！
コメント