2011-05-22

devicePixelRatioについて調べてみた

web Design

devicePixelRatioとは

1pxの画像をそのディバイス上では何pxで表示するかを指定した設定
webkit系に存在する

なぜそんな設定があるのか？

iPhone3G,3GSの解像度と、iPhone4の解像度の違いから考える

機種	解像度
iPhone3G,3GS	480 x 320
iPhone4	960 x 640

iPhone4は前のiPhoneに比べて解像度が4倍ある。
画面のサイズは3.5インチと同じな為、1pxあたりの大きさがiPhone4の方が小さく敷き詰められている
このことから、同じ5 x 5 の画像を表示しても通常はiPhone4の方が1/2に小さく表示されてしまう。

そのような自体を防ぐ為、1pxあたりの大きさが小さくなったiPhone4では1pxを2pxとして表示されるようにdevicePixelRatioで制御させれている。

縦と横の両方が2倍になることで、1/2に小さくなった画像が元通りの大きさで表示される

devicePixelRatioで起きるトラブル

devicePixelRatioのおかげて大きさは元通りになるが、小さく表示された画像を大きくしてしまうのでiPhone4では画像がぼやける。。。(´・ω・｀)

対応策

iPhone4の解像度で画像を作り、html,css側で高さ、幅を制御

・メリット
　画像が1枚で済むので楽
・デメリット
　3G回線だとおもい。。

JS等で動的に表示する画像を書き換える

・メリット
　ディバイスに合わせて画像をロードさせられる
・デメリット
　だし分けが難しい

画像を使わず表示させる(CSSを駆使する or SVGを利用)

・メリット
　拡大、縮小しても変化なし
・デメリット
　複雑な画像は用意できない

参考

詳しい実装はKayacさんのブログを参照
http://design.kayac.com/topics/2010/08/iphone4-retina-web.php

2011-05-21

Cocproxyを入れてみた

javascript css Mac

ruby1.9のインストール

ruby1.9前提なので、入れる
ruby1.8でも動いた。。。

$ brew install ruby

準備

利用フォルダの作成

$ mkdir -p cocproxy/files

書き換え対象ファイルを用意

$ cd cocproxy/files
$ curl -O http://www.rakuten.co.jp/com/inc/home/20080930/beta/css/liquid/common.css

ダウンロード

$ cd ../
$ curl -O http://svn.coderepos.org/share/lang/ruby/cocproxy/proxy.rb

確認

$ tree
.
├── files
│        └── common.css
└── proxy.rb

起動

cocproxyの起動

$ ruby proxy.rb

ブラウザの設定変更

ブラウザのプロキシ設定をlocalhost:5432にする

修正

files/common.cssを適当にいじる

アクセス

http://www.rakuten.co.jpにアクセス
common.cssの修正が反映される

停止

proxy.rbの停止

$ ps x | grep proxy.rb
$ kill -INT [プロセス番号]

注意点

キャッシュのせいで変更にならない場合があるので、その場合は下記URLのアクセスする

http://[対象のURL]?clearcache=1

2011-05-21

Responsive Web Designについて調べて、実践してみた

web Design

Responsive Web Designとは

http://www.alistapart.com/articles/smartphone-browser-landscape/
上記、Smartphone Browser Landscapeの記事でEthan Marcotteさんが提唱。

http://all-web-blog.blogspot.com/2011/03/blog-post_09.html
を参考に実践してみる

具体的には下記の方法で実現する

ピクセルデザインをする
ピクセルデザインを相対値(%)に変換する
画像はFluid imageにする
メディアクエリを指定する
Responsive Type Settingsを設定する

1 ピクセルデザインをする

普通にpx単位でデザインする

2 ピクセルデザインを相対値(%)に変換する

margin, paddingを%にする

対象要素の大きさ / 全体の大きさ * 100

3 画像はFluid imageにする

Fluid imageとは画面の大きさにより画像を拡大、縮小させる指定方法

・IE以外

img,object {
  max-width:100%;
  max-height:auto;
}

・IE
※max-widthをサポートしていない為

img {
  width:100%;
  height:auto;
}

4 メディアクエリを指定する

https://spreadsheets.google.com/ccc?hl=en&key=t4vQwiyPh3U7piST8Ptc3mw&hl=en#gid=0

上記調査から「480px」, 「768px」,「1024px」が多く使われていることがわかる
画面サイズに合わせて、スタイルを変える

5 Responsive Type Settingsを設定する

文字サイズやフォントスタイルをディバイスに合わせる
特に480pxの画面での文字サイズはPCの80%くらい

注意点

多分、この設計の問題点は表示上はディバイス対応されているが、HTMLや画像などのコンテンツはディバイス対応されていない点。
つまり、PCと同じ量のコンテンツ、画像をスマフォなどの細い回線にダウンロードさせている点である

対応策として

html,css,jsの圧縮
js,css等の最低化、高速化
CDNを利用した配信
expireヘッダを用いたアクセス数制御

などなど、スマフォへの負荷を抑える試作が必須

実際、上記allwebでも説明させているように、海外のコンテンツはhtmlやCSSも圧縮されている

Demo

http://www.ksrtmyk.info/liquid/index.html

2011-05-15

cookieの制限について調べてみた

仕様

RFC 2109(obsolete)に規定
http://www.ietf.org/rfc/rfc2109.txt

形式
　・key=valueでひとつ
個数
　・1ブラウザにつき最低300個
　・1ホスト(ドメイン)につき最低20個
サイズ
　・cookie1つあたり最低4kbyte

ブラウザ実装状況

JavaScriptによりjQuery Cookie プラグインを利用し実験
サーバサイドの言語でやると別の結果になるかも。。。

Win xp

ブラウザ	バージョン	個数	備考
IE	6/7	50	-
FireFox	4.0	50	-
Opera	11.0	60	-
Safari	3.2	無限	ブラウザには1万個までセットできた。しかしセットは可能だが取得時に4kbyteに達した時点までしかとれない
Chrome	-	150〜170	毎回個数がかわる。

Mac snow lepard

ブラウザ	バージョン	個数	備考
FireFox	3.6	50	-
Opera	11.0	60	-
Safari	5.0	無限	ブラウザには1万個までセットできた。しかしセットは可能だが取得時に4kbyteに達した時点までしかとれない
Chrome	11.0	150〜170	毎回個数がかわる。

iPhone

ブラウザ	バージョン	個数	備考
mobile safari	iPhone OS 4_2_1	50	iPhone simulatorだと無限に入るので注意。必ず実機で確認

Android

ブラウザ	バージョン	個数	備考
chrome lite	Android 2.2	50〜55	毎回個数がかわる。

わかったこと

セットし個数が上限に達すると古いものから削除される
仕様では20個だけど、どのブラウザも50個はいけるみたい
個数とサイズ、どちらからの制限に達した時点でSET(もしくはGET)できなくなる

注意点

Cookieサイズが大き過ぎるとHTTPリクエストヘッダのサイズも同時に肥大化する。
ApacheだとLimitRequestFieldSize ディレクティブにてHTTPリクエストのヘッダ
のサイズを制限しているため、その制限を超えないようにする必要もある

ちなみにLimitRequestFieldSize ディレクティブのデフォルトは8190byte

http://httpd.apache.org/docs/2.0/mod/core.html#limitrequestfieldsize

2011-05-07

パッケージ管理ソフトHomebrewを入れてみた

Mac

MacPortsのアンインストール

http://guide.macports.org/chunked/installing.macports.uninstalling.html

インストール方法

https://github.com/mxcl/homebrew/wiki/installation

よく使うコマンド

インストール

$ brew install <パッケージ名>

アンインストール

$ brew uninstall <パッケージ名>

情報取得

$ brew info <パッケージ名>

インストール済み一覧

$ brew list -version

インストール済みパッケージのアップデート確認

$ brew outdated

2011-05-03

vimの使い方いろいろ

vim

surround.vim plugin

ds[削除文字]

カーソルがある行の削除文字で指定した文字を削除

dst[削除タグ]

カーソルがある行の削除タグで指定したタグを削除

cs[置換文字]

カーソルがある行の置換文字で指定した文字を置換

cst[置換タグ]

カーソルがある行の置換タグで指定したタグを置換

ysiw[文字]

カーソルがある文字の周りを文字でくくる

ysst[タグ]

カーソルがあるタグの周りをタグでくくる

yankring.vim plugin

: YRShow

ヤンクした履歴を表示

vimの標準機能

cit

カーソルがあるタグの中身を削除

vat

カーソルがあるタグをすべて選択

f[文字]

文字の場所までジャンプ

df[文字]

カーソルがある箇所から文字の場所まで削除

vf[文字]

カーソルがある箇所から文字の場所まで選択

: vnew [ファイル名]

ファイルを窓を縦分割で開く

ctr + v

矩形選択

ctr + v + I + [文字]

矩形選択後、選択部分を文字に置き換える

ctr + v + A + [文字]

2011-05-01

zen-codingの意外な使い方

coding

ul+ / ol+ / table+

ul+

<ul>
  <li></li>
</ul>

ol+

<ol>
  <li></li>
</ol>

table+

<table>
  <tr>
     <td></td>
  </tr>
</table>

独自の属性値を設定する

jquery mobile等でdata-role="page"のような特別な属性をzen-codingで付与する方法

div#header[data-role=page]

<div id="header" data-role="page"></div>

idやclassの属性値に連番をふる

・$の部分が連番になる
・$の数を増やすことで桁数を指定できる

ul>li.menu$$*3

<ul>
  <li class="menu01"></li>
  <li class="menu02"></li>
  <li class="menu03"></li>
</ul>