Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

Facebookアプリ「Paper」を先取り!加速度センサーによる写真のチルト機能を実現するphotoTilt.js

先日、Facebookの新しいアプリ「Paper」が米国でリリースされました。(日本ではまだですが)

「Paper」のプレビュー動画も公開されています。

[vimeo]http://vimeo.com/85421325[/vimeo]

その中でも新しいジェスチャーのUXは斬新なものです。

今までスマートフォンなどの小さいディスプレイで写真を閲覧する場合、ピンチオープン(2本の指を使ってズームインする)やピンチクローズ(2本の指を使ってズームアウトする)のジェスチャーで拡大・縮小して写真を確認していました。

しかし、どちらのジャスチャーも2本の指を使うので、片手で操作することはできません。

「Paper」では、加速度センサーによって写真のチルト機能を実現するジャスチャーを搭載しています。

「Paper」のプレビュー動画内では下記のような使い方をしています。

これであれば、片手で左右に傾けるだけで、写真の隅々まで確認することができるので便利です。

このUIは単純だけど良いアイデアだと思います。そこで、これを実現してくれるJavaScriptのライブラリーがないか調べてみると、なんと見つかりました!

JavaScriptで加速度センサーによる写真のチルト機能を実現する「photoTilt.js」です。

Facebookの「Paper」からインスパイアして作られたようで、GitHubにソースが公開されています。

実際にデモが用意されていたので、iPad miniで試してみました。(もちろんiPhoneでも動作しました)

本体を傾けるだけで写真のチルト機能が実現できています。

デモのソースを確認すると、下記のように画像ファイルを指定するだけなので簡単に使えそうです

<script src="photoTilt.js"></script>
<script>
    (function() {
        var photoTilt = new PhotoTilt({
            url:'http://farm5.staticflickr.com/4016/4251578904_f13592585c_b.jpg',
            lowResUrl: 'http://farm5.staticflickr.com/4016/4251578904_f13592585c_m.jpg'
        });
    })();
</script>

photoTilt.js」を使えば、簡単にこのようなチルト機能が組み込めると思います。

是非、試してみてください。

それでは、また!