Hatena::Groupsubtech

ういはるかぜの化学

Tuesday, December 10, 2013

Flip ahead (ページフリップ)を使う、実装する Flip ahead (ページフリップ)を使う、実装する - ういはるかぜの化学 を含むブックマーク はてなブックマーク - Flip ahead (ページフリップ)を使う、実装する - ういはるかぜの化学

このエントリーInternet Explorer Advent Calendar 201310日目です。

Internet Explorer 10からFlip ahead(ページフリップ)という機能がつきましたのでその紹介を。

Flip ahead (ページフリップ)とは

Internet Explorerを起動して使ってると「ページフリップ有効しますか?」みたいなメッセージが出てお前は何を言っているのかと思った人も多そうな気がします。

Flip aheadというのはどういう機能かというと新しいUIInternet Explorerで使える機能で、サイト側で「次のページのURL」をブラウザに教えることでフリップ(指ではじく操作)して次のページに遷移できる機能です。

新しいUIInternet Explorerではブラウザの戻る/進むがフリップ操作でできるようになっていますが、通常「進む」は一度見て戻った場合しか使えません。そこでこのFlip aheadを使うとまだ見ていない次のページも進むと同じ操作で進めるというわけです(挙動的には「次へ」が使えるようになるだけなので一応マウスでも操作できます)。

これが何が嬉しいかというとどんどんめくっていくような感覚ブラウズできるようになるのがよいところです。Tumblrのテンプレートに組み込んでみたやつBingGoogleといったところで試せます

うまく動かないときは設定を確認

しかしたら設定が無効になっているかもしれません。その時はチャームからInternet Explorerの「設定」の「プライバシーからページフリップを項目を有効にしてください。

Internet Explorer 11でのFlip ahead

さらInternet Explorer 11ではFlip aheadで指定されている次のページはプリレンダリングの対象ともなるようになっているため、さら体感的にめくる感触が良くなっています

じつは昨日の先読みの話は今回の前振りとして用意したわけでした。

実装方法

さてそんな便利そうなFlip aheadですがいい感じで勝手にやってくれるわけはなく、ページコンテンツ側での対応必要になります必要にはなるのですがいたって簡単です。次のようなlink要素を追加するだけで独自拡張でもありません。

<link rel="next" href="http://www.example.com/" />

これを書くだけでプリレンダリングまでやってくれます。簡単ですね。

ちなみにrel="prev"で前のページのURLも指定することができます

まとめ

Flip aheadはページ分割されているコンテンツなどでは有用ですし、組み込みも簡単かつ悪影響も考えにくいので是非組み込んでみてはいかがでしょうか。

トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20131210