input type=fileの使用可否判定

html5のfile apiを使えば、ローカルに保存されてる画像などのファイルへアクセスする事が出来ますが、現時点でのiOSではhtml5のinput type=”file”が使えないので画像をアップする、みたいなUIが提供出来ない。

で、input type=”file”が使えるかどうかの判定を使用として、ちょっぴり躓いたのでメモ。

最初に、file apiが使えるかどうかで判別しようとしてみた。

if(window.file){
 alert('hoge')
}

が、iOSでもwindow.fileはtrueが返ってきたのでこれだと駄目。。。

なんやかんやで、input type=fileの要素をhtml上に隠しておいておいて、disabledかどうかで判定を行うとうまくいった。

var check = document.getElementById('test').disabled;
alert(check)
<input type="file">

iOSではinput type=fileのUIはdisabledの状態になっていて、htmlのコードが下記のようになっている。

<input type="file" disabled="">

なので、getAttributeなどで属性値を参照しようとすると空文字が返ってくるが、プロパティにアクセスすれば適切な値が返ってくるみたい。

なんか他にいい方法があるのかなぁ、、、

input type=fileの使用可否判定

icon fontとfont-faceを使ったアイコンの表示

CSS-TRICKSに面白いアイコンの表示方法が紹介されていて、触発されたのでサンプルを作ってみた。

Icon Fonts are Awesome | CSS-TRICKS

上記URLのデモはアイコンの様なフォント(というかアイコン)をCSS3のfont-faceを使って表示するというもの。
ここでは空の要素にafter/before疑似要素を使って文字を出してるが、そこはめんどくさいので割愛。

CSS3を使えばwebkit向けであればマスクを使う事ができるので、フォントにグラデーションも掛けてみた。(Androidは現時点でテキストのグラデーションは使えないけど。。)

サンプルページ

fontなのでどれだけ拡大してもアイコンがぼやけることもないし、スマートフォンであれば解像度別に画像を用意する必要もないので非常に便利ですね。
英数字+日本語までいれると用意できる数には問題ないですし、文字自体をCSSの擬似要素で出せばHTML的にも問題ないので個人的にはとても使いたいテクニック。

Androidさえいなければ。。。

デモで使ったフォントは以下のフリーフォントを利用させてもらいました。

Free Icon Font Pack | offset media

icon fontとfont-faceを使ったアイコンの表示