ページを90°回転させるブックマークレットの作成

タイトルの通り。
画像を回転させたいときに、いちいち保存してギャラリーから回転させるのが面倒だったので作った。

といっても非常に簡単なコードなので特に説明することもない。
ただbody要素にstyle="transform: rotate( 90deg )"を追加するだけである。
style要素の追加方法についてはわからなかったので、以下のサイトを参考にした。
[JavaScript] Style要素の追加方法 | ぱんだシステム

実際に作成したコードは以下の通り。

var style = document.createElement('style');
document.head.appendChild(style);
var sheet = style.sheet;
sheet.insertRule('body {transform: rotate( 90deg )}');

これをブックマークレットとして使用可能な形に直すと以下のようになる。

javascript:(function(){var style=document.createElement("style");document.head.appendChild(style);var sheet=style.sheet;sheet.insertRule("body {transform: rotate( 90deg )}");})();

コンパイルにはこのサイトを利用した。
Closure Compiler Service

動作確認したところ、しっかり動くことが確認できた。
ある画像単体を回転させたいときは、画像を新しいタブで開いてからブックマークレットを作動させればよい。
また、回転方向や回転度合いを変えたい場合は、transform: rotate( 90deg ); の90degを-90degや45degなどに変えればよい。

次回は(次回があるかわからないが)このブックマークレットを、起動するごとに90°、180°、270°、360°と回転していくように改修したいと思う。