World Wide Windblue: 7月 2012

2012年7月15日日曜日

iOSシミュレータでピンチイン・ピンチアウトする方法

「option」ボタンを押すと2点のマルチタップができるようになります

iOSシミュレータを起動して「option」ボタンを押すと、下記のように、2つのポインタが表示されます。
ボタンの1点はマウスがポイントしているところ、もう一点はシミュレータの中心から正反対のところに表示されます。

その状態からマウスを動かすと、もう一点のポインタもシミュレータの中心から点対称で動きます。
つまりこれでピンチイン・ピンチアウトできます。

また「option」と同時に「shift」ボタンを押すと、2点のポインタの位置関係を維持したまま移動できます。

2012年7月8日日曜日

iOSのUIWebViewでアニメーションを滑らかにする(アクセラレータで)

JavaScriptでタイマーを張ってのアニメーション

それだと、iOS(特にiPod touch)ではマシンパワーが足りないのでカクカクしてしまいます。

でもハードウェアアクセラレータを有効にすると、滑らかになります。

このエントリの目次

アクセラレータが効いているかを確認する
アクセラレータを効かせる方法
検証用ページを作ってみた
検証用ページをシミュレータで確認してみる
さいごに

1.アクセラレータが効いているかを確認する

iOSシミュレータで確認できます。

下記のようにiOSシミュレータを起動した状態で、ブレンドレイヤー（カラー）を有効にすると確認できるようになります。

有効にすると、画面が赤と緑で塗りつぶされるようになります。
赤い部分がアクセラレータが効いている領域で、緑の部分が効いていない領域です。
(下の図でいうと、シミュレータ画面下部の「戻る」、「進む」「更新」ボタンなどです)

2.アクセラレータを効かせる方法

iOSのアクセラレーターが使えるCSS3 | ゆるふわWebデベロッピングによると、CSS3のtranslateを使うとハードウェアアクセラレータが有効になるようです。

translateが使えないとき

でもUIの仕様によってはtranslateが使えない場合もあると思います。

そんなときは、アニメーションをさせたいDOMに対して

-webkit-transform: translate3d(0, 0, 0);

もしくは

-webkit-transform-style: preserve-3d;

というCSSを適用すると、その領域のアクセラレータが有効になります。
(GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 | 5509より)

3.検証用ページを作ってみた

サンプルとしてアクセラレータがきいていないページとアクセラレータがきいているページを作ってみました。
あるdiv領域をタップすると、それが大きくなったり小さくなったりするだけの簡単なページです。

動作を確認するときは、作ったサンプルアプリ(GitHub)をインストールしてみて下さい。
(UIWebviewで検証ページを表示しているだけですが、アプリじゃないとアクセラレータがきいているかどうかシミュレータで確認できません)。
それが面倒くさい場合はiOSのsafariで検証用ページを開いてみて下さい。

アクセラレータがきいていない方が若干カクカクして見えます(このレベルのアニメーションだとよく見ないと違いが分かりませんが)。

4.検証用ページをシミュレータで確認してみる

上記ののサンプルアプリをXcodeで開いてください。

アクセラレータがきいていない場合は青の部分がそのままの色で表示されています。

一方、アクセラレータがきいている場合は青の部分に赤色が重なって紫色になっています。
意図したとおりにアクセラレータがきいています。

5.さいごに

実は僕のCSS力が低くて、本当はどんな場合もtranslateを適用できるのかもしれませんが...。
でもサクッとチューニングできるので、工数が足りない場合に使えると思います。

参考にさせて頂いたサイト

2012年7月5日木曜日

Mac OS X Lion 10.7.4 で tree コマンドを使えるようにする

MacPortsで一発です

$sudo port install tree
Password:
--->  Computing dependencies for tree
--->  Fetching tree
--->  Attempting to fetch tree-1.5.2.2.tgz from ftp://ftp.jp.FreeBSD.org/pub/FreeBSD/ports/distfiles/
--->  Verifying checksum(s) for tree
--->  Extracting tree
--->  Applying patches to tree
--->  Configuring tree
--->  Building tree
--->  Staging tree into destroot
--->  Installing tree @1.5.2.2_0
--->  Activating tree @1.5.2.2_0
--->  Cleaning tree

これでtreeコマンドが使えるようになりました。