Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML5
Webdesign

直ぐに試せる: HTML5 "download" 属性を使う

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Quick Tip: Don’t Forget the “optgroup” Element
All You Need to Know About the HTML5 Data Attribute

Japanese (日本語) translation by Yuma Yanagisawa (you can also view the original English article)

HTMLにダウンロードリンクを作るのはわかりやすい。anchorタグを記述してhref属性に任意のファイル名を指定するだけ。 だけど、ファイル形式によってはダウンロードされない(e.g. images, .pdf, .doc) それらは、代わりにブラウザで開いてしまう。

もしwebサイトのサーバサイドにアクセスできればできることはある。例えば".htaccess"を設置して直接ダウンロードできるように設定するなどだ。 もしサイトがフリーのサービスにホストされていたら(WordPress.com, Blogspot, おそらくGithubもだと思う)、さっきのようなことはできない。そこで"download"属性を使うことを考えてはどうだろう。

"Download"属性を使う

download属性はHTML5スペックの一つでリンクを遷移リンクではなく、ダウンロードリンクとして扱うよう示している。

またdownload属性はダウンロード時のファイル名も変更できる。 ファイルがサーバにあるとき、特に自動生成されたものだと数字とダッシュで機械的に命名されていたりする、例えばacme-doc-2.0.1.txtなど。 ユーザにとってはもっと意味のある名前の方がいいだろう、たぶんAcme Documentation (ver. 2.0.1).txt(拡張子を付け忘れない)。

実際はこんな感じになる。

デモページで試してみてほしい。download属性で指定したファイル名でダウンロードできるのがわかると思う。

気になること

  • Firefoxはセキリュティの観点から同一ドメインのファイルダウンロードしかできない。 ファイルは必ず同じサーバあるいはドメイン名からでないといけない、そうしないとファイルはブラウザで開く。
  • Chromeと最新Opera、Chromium/Blinkでは他ドメインファイルのダウンロードができるが、どちらも属性値を無視する。 言い換えれば、ファイル名は変わらないままである。

フォールバックを与える

執筆時は、download属性はSafari、(思っていたように)Internet Explorerでは実装されていない。 そうは言うものの、modern IE statusによれば、開発リストのトップにあって多くの投票を受けている。

しばらくの間、きちんと代わりを加える必要があるかもしれない、例えばサポートしていないブラウザにはダウンロードリンクの下に特別な説明を用意するなど。 そのために、download機能テストが入ったModernizrをダウンロードする必要がある。

Modernizrをbuildに設定しよう。

そうすると次のスクリプトを加えられる。

このスクリプトはブラウザがdownload属性をサポートしているかと調べて、サポートしていなければ<div>タグを追加する。このタグはスタイル指定のためのclass名と説明のテキストが含まれている。このタグはすぐにdownload属性を持ったリンクの直下に挿入される。

Safariに説明が表示されている

まとめ

download属性を使えばサーバサイドへのアクセスを持たない誰でもダウンロードリンクを扱うのが便利になる。 すぐにInternet ExplorerとSafariがdownload属性を実装するか楽しみ!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.