menu

09.10.26

category

comments

0

trackbacks

0

permalink

iPhone Web App : PastryKit

まずは「iPhoneユーザガイド(http://help.apple.com/iphone/3/mobile/)」を開いてみてほしい。
(モバイル Safari から見てください)
ナビゲーションバーが提供され、テーブルセルをタップして項目をブラウズする。
あたかもネイティブアプリケーションのようなふるまい。webappだ。

fig.1 iPhone ユーザガイド。一見ネイティブアプリケーション。

ここで注目してほしいのはナビゲーションバーの配置。
本来モバイルSafariでのスクロールはwindow自体が移動するため、このようにwindowが移動せずにスクロールが提供されているような画面は通常つくれない(fig. 1)。

fig. 2 window.onscrollイベントでナビゲーションバーの移動をおこなっている。

javascriptとwindowイベントを使ってナビゲーションバーを固定したかのように見せる方法を思いつくかもしれないが、モバイルSafariではwindow.onscrollイベントがスクロールが完了したタイミングで発行されるため、スクロールされている間はナビゲーションバーの位置の更新ができない(fig. 2)


では apple はどのようにこれを実装しているのか?

ソースを見てみると
<!-- PastryKit -->
<link rel="stylesheet" href="dist/PastryKit-ug-compact.css">
<script type="text/javascript" src="dist/PastryKit-ug-compact.js" charset="utf-8"></script>
    
<!-- Our logic and style -->
<link rel="stylesheet" href="style/stylesheet.css">
<script type="text/javascript" src="javascript.js" charset="utf-8"></script>
という記述が見つかる。

おそらく「PastryKit-ug-compact.js」でフレームワーク的なものを提供して、「javascript.js」でwebapp自体の動作を司っているのだろうと予想がつく。

そして PastryKit-ug-compact.js をDLして中身をのぞくと... でてくるでてくる。
「PKScrollView()」やら「PKTableView()」やらどこぞで聞き覚えのあるネーミングがされたクラスが。

中身の解説ができるほどお勉強できる子ではないので、そのあたりはそれぞれ見ていただくとして、注目はスクロールを手前で実装しなおしているところだ。

・PKScrollView()
・PKScrollIndicator(a)

ざらっと見ていくと、
PKScrollIndicator.prototype.createLayer = function(){
    this.layer = document.createElement("div");
    this.layer.addClassName("pk-scroll-indicator");
    this.layer.addEventListener("webkitTransitionEnd", this, false);
    this.start = this.layer.appendChild(document.createElement("div"));
    this.middle = this.layer.appendChild(document.createElement("img"));
    this.end = this.layer.appendChild(document.createElement("div"))
};
というメソッドでは明らかにインディケータの生成をおこなっていそうだ。

また、
const PKScrollViewDesiredAnimationFrameRate = 1000 / 60;
という記述を見つける。1000/60ミリ秒でタイマーをまわして再描画を行っているのだろう。
ほかにも興味深いパラメータがちらほら見える。

実はこのコードを見たとき、こういう実装のアイディアは数ヶ月前にデモ(fig. 3)を作っていたこともあって、やられた感というか、同じでよかった感というか、ともかく考え方は間違ってなかったことが証明されたのでちょっと嬉しかった。

fig.3 スクロールを手前で実装するデモ。
ナビゲーションバーとタブバーが固定されている。
手前実装なのでスクロールインディケータが表示されていないことにも注目。

ちなみにPastryとは「(パイなどの)生地」という意味。
この名前が示すものが何なのか興味はつきません。
今回はご紹介がてらこのあたりで終わりたいと思いますが、いろいろわかってきたらまた紹介したいと思います。

ともあれ、PastryKit、一度のぞいてみてください。

add your comment

Name
Mail
URL

comments

up down

comments


up down