タイトルは釣りです。
以前オフィスランチを食べながら同僚と話していたものを実装してみました。
このページをスマートフォンで開くとリバーシブルなウェブページを楽しむことができます。
Android 4.1で動作を確認済み。iOS 6.1でも動作を確認しましたが、一部CSSが意図通りに解釈されませんでした。
仕組みとしては、
- deviceorientationイベントで端末の傾きを取得する
- 傾きに応じてコンテンツを出し分ける。このとき、body要素に
-webkit-transform: rotate(180deg);といったようなCSSを適用して回転させる
というものです。
一つの端末で向きによってコンテンツを出し分けられるので、リアルコミュニケーション系のゲームなどに活用できると考えています。 今回は手抜きなのでジャンケンですが、カードゲームなどを実装してみたら結構おもしろい体験をつくれるのではないでしょうか。
shimobayashi/reversible-web-demo · GitHub
ソースコードなどはgithubのプロジェクトページからどうぞ。
