ブラウザの表示を90度回転。JavaScriptとCSSで。

皆さんの中には、おそらくこんな↓格好で寝そべりながらネットをしている人も居ると思うのですが、

首が痛くならないですか。ブラウザ画面を横倒しにできたら楽なのになぁ...なんて人に朗報です。

とりあえずFirefox3.5.x以上限定ですが、こんなのを作ってみた。

　　→ 右回転。 (Firefox 3.5以上)

JavaScriptのブックマークレットなので、Macな人はControl+クリック、Winな人は右クリックしてFirefoxのブックマークツールバーに保存してやると良いです。横倒しにしたいページをブラウザで表示してから、ブックマークした「右回転。」をクリックすると、どんなページでも右90度に回転して表示します。

ソースはこんな感じ。見やすいように改行を入れています。

javascript:(function(){
   var b=document.body;
   sh=b.offsetHeight;
   sw=b.offsetWidth;
   b.style.MozTransformOrigin='100% 100%';
   b.style.MozTransform='rotate(90deg) translateX('+(sw-sh)+'px)';
   scroll(sh,0);
})();

CSS3で採用される予定のプロパティ"Transform"を使っています。表示されているページのbodyにTransformプロパティをスタイル指定しているだけ。

Transformについては、以下のページが参考になります。

　　→ CSS3大接近：第３回 transformプロパティ｜Gihyo.jp

　　→ CSS 2D Transforms Module Level 3｜W3C.org (英語)

表示を横倒しにするだけなので簡単に出来ると思いきや、オレの頭が悪いのか、実装が中途半端な所為なのか分かりませんが、X軸とY軸、縦と横、高さと幅が入り乱れて、ブラウザの表示領域をはみ出したり、ページが途中で切れたりと大騒ぎ。結局、たまたま上のようなコードでだいたい満足できましたが、これが将来にわたって(そして現在に於いても)正しいとは限りません。

このtransformプロパティ、SafariやGoogle ChromeなどのWebKit系ブラウザでも実装されています。だからと言って、上のコードのブラウザ接頭辞を 'Moz' から 'Webkit' に書き換えただけでは上手く行かないのだなぁ。どなたか作ってみませんか。

ところで「オレは左側を下にして寝そべるのだが...」という人は、こちら↓をどうぞ。

　　→ 左回転。 (Firefox 3.5以上)

ソースは以下の通り。

javascript:(function(){
   var b=document.body;
   sh=b.offsetHeight;
   sw=b.offsetWidth;
   b.style.MozTransformOrigin='100% 0';
   b.style.MozTransform='rotate(270deg) translateY('+(-sw)+'px)';
   scroll(0,sw-document.documentElement.clientHeight);
})();

すみ春魚

2014年1月28日 15:15

初めまして。

ブログの縦長記事をキャプチャーする時、「ディスプレイが縦になるか、ブラウザを横向きにできたらいいのに・・・」と思っていました。
でも探してみたら、こんな便利なものを作っている方がおられたのですね。

最初はCSSのソースを貼るのかと、ちょっと敷居が高そうに思えたのですが、「右回転」、「左回転」のリンク文字を右クリックして、「このリンクをブックマーク」とし、フォルダに「ブックマーク・ツールバー」を選んだら、firefox のブックマーク・ツールバーに表示されました。

あまりに簡単に回転するので、うれしくなって「右回転」、「左回転」の両方を入れました。
どうもありがとうございます。

freefielder.jp

ブラウザの表示を90度回転。JavaScriptとCSSで。

カテゴリ:

タグ:

コメント

すみ春魚