なんちゃってスモールスクリーンレンダリング.user.js

この間のスクリーンショット事件で頭にきたので作ってみた。一応 greasemonkey でメニューから実行できるようになってる。

/**
 * Pseudo Small Screen Rendering
 *
 * @constructor
 */
function PseudoSSR() {
  /**
   * base css
   * @type    string
   */
  this.base_css = "* { margin: 0; padding: 0; line-height: 1.2em }";
  /**
   * body style
   * @type    Object
   */
  this.body = {
    'background':  'white',
    'font':        'normal 100%/1.2 monospace',
    'color':       'black',
  };
  /**
   * container, for making body overflowed
   * @type    Object
   */
  this.container = {
    'width':       '11.5em',
    'height':      '11.6em',
    'overflow':    'auto',
    'border':      '3px inset black',
  };
  /**
   * list block css
   * @type    Object
   */
  this.list = {
    'padding': '0 0 0 1.5em',
  };
  /**
   * list item css
   * @type    Object
   */
  this.list_item = {
    'margin':  '0 0 0 0em',
    'list-style-position': 'inside',
  };
  /**
   * force `a color' blue
   * @type   Object
   * @since  2006-10-30
   */
  this.a = {
    'color': 'blue',
  };
};

PseudoSSR.prototype = {
  /**
   * change html and apply css
   */
  run: function() {
    this.append_base_css();
    this.insert_container();

    var body = document.getElementsByTagName( 'body' );
    this.apply_style( body[0], this.body );
    var container = document.getElementById( 'container' );
    this.apply_style( container, this.container );

    this.apply_style4elements( 'ul', this.list );
    this.apply_style4elements( 'ol', this.list );
    this.apply_style4elements( 'li', this.list_item );
    this.apply_style4elements( 'a', this.a );
  },

  /**
   * append basic css in <style> element
   */
  append_base_css: function() {
    var head = document.getElementsByTagName( 'head' );
    head = head[0];
    var style = document.createElement( 'style' );
    head.appendChild( style );
    var style = head.getElementsByTagName( 'style' );
    style = style[0];
    style.innerHTML= this.base_css;
  },

  /**
   * insert container <div> element
   */
  insert_container: function() {
    var body = document.getElementsByTagName( 'body' );
    body = body[0];
    var doc = new String( body.innerHTML );
    body.innerHTML = '<div id="container">' + doc + '</div>';
  },

  /**
   * apply JSON-style CSS to element collection
   *
   * @since  2006-10-30
   * @param  String ele
   * @param  Object style
   */
  apply_style4elements: function( ele, style ) {
    var node = document.getElementsByTagName( ele );
    var len = node.length;
    for ( var i = 0; i < len; i++ ) {
      this.apply_style( node[i], style );
    }
  },

  /**
   * apply JSON-style CSS to element
   *
   * @since  2006-10-26
   * @param  DomNode ele
   * @param  Object  style
   */
  apply_style: function( ele, style ) {
    var ele_style = ele.style;
    for ( var prop in style ) {
      ele_style[prop] = style[prop];
    }
  }
};

/**
 * launcher
 */
GM_registerMenuCommand( 'PseudoSSR', function() {
                         var ssr = new PseudoSSR();
                         ssr.run();
                       } );

やってることは単に CSS で見た目を変えてるだけ（それも margin とかサイズをいじってるだけ）なので、user css だけでできるんだけど、user javascript になっていれば Gecko ブラウザで適用のタイミングを自分で選べるのでわざわざ JavaScript にしてみました。

ポイントは

  • 自家製なので中身いじりたい放題
  • Opera とか webdeveloper の small screen rendering よりも「ケータイっぽい」

くらいしかないです。

GM_registerMenuCommand() の中身をそのまま素で書いてやれば GeekMonkey を使ってブックマークレットにして Camino で動かせることを確認。CreamMonkey で動かすのには失敗しました。どうやんのか分かりません。

CSS を冒頭で定義しているのでこの辺をいじれば自分の好きなデザインのスモールスクリーンレンダリングもどきが作れます。あと、いきなり body 直下に div#container という要素を挿入するので、すでに container という id を持つ要素があるとまずいです。

margin-* とか font-* とかは DOM バインディングで定義されていないので反映されません。Firefox で試した限りでは fontSize などで定義されているようです。あるいは簡略記法で定義するのが純粋な CSS 上の表記と一貫性があっていいかも。

というわけでもろもろ踏まえてご自由にご利用ください。

More