stylusでbackgroundに指定した画像のサイズ変更に対応する。

スマートフォン向けのcssを書く場合、アイコンなど背景画像として設置することが多いですが、device-pixel-ratioに合わせて高解像度用の画像を用意し、background-sizeでratioの比率に縮小することが多いです。

このとき結構困るのが画像のサイズ、特に横幅が変わってしまうといちいちcssで指定しているbackground-sizeも変えないとならないので、運用を考えると結構めんどくさいです。

うまい方法ないかなぁと考えてたら、stylusに画像サイズを取得するimage-size関数が用意されてたんですね。。。

iconPath = '../images/icon.png'
.icon
  display block
  height 20px
  width @height
  background-image url(iconPath)
  tmp = image-size(iconPath)
  h = tmp[0]/2
  w = tmp[1]/2
  background-size h w

こんな感じで指定してやると、

.icon{
	display: block;
	height: 20px;
	width: 20px;
	background-image: url("../images/icon.png");
	background-size: 500px 50px;
}

半分の画像サイズの値でCSSがコンパイルされてきます(icon.pngは1000px x 100pxの画像)

こうすることで背景に使っている画像のサイズ変更に簡単に対応することができました。

background-positionを%など相対表記していると結局ずれてしまいますが、
僕の場合、アイコンはほとんど::beforeか::after疑似要素を作ってそこに画像を表示させているので、background-positionによるズレを気にしなくてすみました。

最近Sass使ってないから分からないけど、同じような方法がSassにもあると嬉しいなぁ。。

stylusでbackgroundに指定した画像のサイズ変更に対応する。

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の使用可否判定

Mac(Lion)にnpmをインストールするのにはまった。

家のMBPにnodeをインストールしようとして、npmのインストールにはまったのでめも。

node.jsまわりの環境は結構な頻度でバージョンアップして方法が変わっている久野で注意が必要ですね。

ちなみにhomebrewを使ってインストールします。

まずnodeをインストール

$ brew install node

これでnodeのインストールは終了。

npmをインストール

やり方を忘れてしまっていたのでちょっと調べてやってみたけど以下のコマンドだとだめ。

$ curl http://npmjs.org/install.sh | sh

で、sudoつけないとちゃんとインストール出来ないぽかったので、sudoを追加

curl http://npmjs.org/install.sh | sudo sh

正直こういうコマンドとか詳しくないので、なんで駄目だったのかいまいちよく分かってないですが、とりあえずこれで動いたのでよしとしよう。

Mac(Lion)にnpmをインストールするのにはまった。