カテゴリー別アーカイブ: HTML

aタグのdownload属性

aタグのdownload属性を利用すると, 例えば, リンク先 (href属性) にファイルを指定していても, ダウンロードのダイアログを出すことが可能になります.

つまり, わざわざサーバー側にリクエストを送って, Content-Disposition: attachment; のレスポンスヘッダーを返す必要がなくなります.

// download属性がないと, 別タブでファイルが開いてしまいます.
<a href="http://xxx/sample.pdf">PDFダウンロード</a>

// しかたがないので, 一度サーバーサイドにリクエストを送り,Content-Disposition: attachment; のレスポンスヘッダーを返す…

download属性を利用すれば, 簡単にダウンロードダイアログを出すことが可能になります.

<a href="http://xxx/sample.pdf" dowload="sample.pdf">PDFダウンロード</a>

ちなみに, download属性にはダウンロード時のファイル名を指定します (Content-Disposition: attachment; filename=”ファイル名” と同じ要領です) .

欠点としては, IEなど一部のブラウザは対応していないことです. その場合は属性指定していない場合と同様に, 別タブでファイルが開きます. まあ, 最低限のアクセシビリティは確保できるのである程度利用環境が限定できる (IEは対応していないHTML5 APIを利用したWebアプリケーションなど) のであれば, 積極的に使いたいですね.

[type=”email”] の値

備忘録的に…

HTML5のフォームコントロール要素強化の1つに, input要素のtype=”email”がある.

メールアドレスの形式として不正であれば, submitのときにツールチップが出て警告をしてくれる.

しかしながら, メールアドレスの形式として不正な場合, 何らかの文字列が入力されていてもvalueは空文字列として認識されてしまう.

ごく稀にこれではまずいケースもあるかとは思いますので, その場合は今までと同じく, type=”text”として入力して, プログラム側でメールアドレスとして妥当かどうかを判定するほうがいいかなと思いました.

MediaElementAudioSourceNode

MediaElementAudioSourceNodeの対応状況まとめ

Web Audio APIで定義されているノードの1つである,

MediaElementAudioSourceNodeの主要ブラウザの対応状況をまとめてみました.

ただし, 今後のブラウザのアップデートにより変わる可能性は大きいです.

Chrome (Mac / Windows)

問題なく使えます.

Opera (Mac / Windows)

Chromeとほぼ同等に使えますが, mp3には対応していないようです.

Safari (Mac)

どうやら使えないようです. 最低限, HTML5 MediaElementでの再生は実行されます.

Firefox (Mac / Windows)

おそらく使えません…という微妙な表現をしたのは, ノードの接続によっては使えているときがあるようなのですが…その法則まではわかりません…

IE, Safari (Windows)

そもそも, Web Audio APIが実装されていません.

注意したいのは, Safari (Mac), Firefoxでもノードの生成自体はできているという点です. でもなぜか使えない…

今後のアップデートに期待しましょう.

ではでは.