aタグのdownload属性でサーバを介さずにファイルダウンロードする

この記事はHTML5 Advent calendarの16日目の記事です。

HTML5からaタグにdownloadという属性が指定可能になったようです。
この属性が指定されたaタグは、href属性の値をブラウザで開くのではなく、リンク先をファイルとしてダウンロードします。

今までcanvasで画像を生成した画像など、jsで生成したファイルをユーザに保存させるにはwindow.openにdata urlを渡して新窓で表示させ、ユーザに右クリ等で保存してもらう方法しか知らなかったのですが、
aタグのdownload属性がまさにやりたいことドンピシャだったので備忘録を残します。

Continue Reading…

HTML5のConstraint validationでライブラリ要らずならくらくバリデーション

こんにちは。
Hamee Advent Calendar 2015 8日目の記事です。

Chromeの開発者ツールでHTMLの要素を眺めていたらvalidityという属性を見つけました
validityプロパティの中にはpatternMismatch, tooLongなどそれっぽいプロパティとbool値。

調べてみたら フォームのバリデーションはこれだけで十分なのでは
と思うほどに便利だったので詳しい機能の紹介と、より便利に扱う小ネタの紹介です。

Continue Reading…

webページにローカルファイルをドロップ可能にするjQueryプラグインを作ってみた

webページにローカルファイルをドロップ可能にするjQueryプラグインを作ってみた

こんにちは。
セミが鳴き出しましたね。夏、嫌な季節です。

さて、Macで良いリネームアプリを探しているのですが、
なかなか決定版が見つからずに嘆いています。
そんな時ふと思いました。

(使ったことないけど)HTML5のFileAPI使えばリネームって出来るんじゃないか?

あと、いちいちファイルをチューザーからファイルを選択するのも面倒だし、
HTML5のDrag&DropAPI使ってブラウザにファイルをドロップできるようにしよう!

と思いFileAPIとDrag&DropAPIを調べてみたら、
ちょっとした小物を作るのにも地味に面倒だったのでメモを残します。

Continue Reading…