ブックマークレットの最近のブログ記事

ニコニコ動画の訪問済み動画を強調するブックマークレットです。こちらのリンクをブックマークに追加してご利用下さい。

javascript:(function(w,a){var d=w.document,v=function(e,c){c=(e.currentStyle||d.defaultView.getComputedStyle(e,null))["color"];return c=="#113355"||c=="#135"||c=="rgb(17, 51, 85)"},f=function(e,n){while(e&&(e.tagName.toLowerCase()!="tr"&&e.className!="cmn_thumb_frm"))e=e.parentNode;if(e)for(e=e.tagName.toLowerCase()=="tr"?e.firstChild:e;e;e=e.nextSibling)e.style&&(e.style.opacity="0.2",e.style.filter="alpha(opacity=20)")},l=d.getElementsByClassName("video");while(a=l.pop())v(a)&&f(a)})(window);

例えば最近コメントされたひこにゃん動画の中から、まだ見ぬ衝撃映像を探すときに…

figure1-1.jpg

ポチっ

figure1-2.jpg

使用できる場面はキーワード検索結果とランキング、およびトップレベルです。

figure2.jpg

対応ブラウザは IE 6、Firefox 2、Opera 9、Safari 3 以降です(Safari は CSS の問題によりキーワード検索結果で機能しません)。

難解な文章にぶち当たった時、一緒に読み解いてくれる人がいたらどれだけ心強いことか。そんな(9)の手でも借りたい方へのブックマークレットです(使い方)。動作対象は IE 5.5↑(6を除く)、Firefox 2↑、Opera 9↑、Safari 3↑。

javascript:(function(d,p,m,u){var c=d.createElement("img");c.setAttribute("src",u);(function(s){for(var i=s.childNodes.length-1;i>=0;i--){var h=s.childNodes[i];if(h.nodeType==3){switch(h.localName){case"SCRIPT":case"STYLE":break;default:var o=h.parentNode,n=h.nextSibling,r,x=0,y=h.nodeValue;o.removeChild(h);while(r=p.exec(y)){o.insertBefore(d.createTextNode(y.substring(x,p.lastIndex)),n);o.insertBefore(c.cloneNode(1),n);k=d.createElement("span");k.setAttribute("style","font-size:small;color:blue;position:relative;top:-.6em;");k.appendChild(d.createTextNode("\"+m[Math.floor(m.length*Math.random())]+"/ "));o.insertBefore(k,n);x=p.lastIndex;}if(x<y.length)o.insertBefore(d.createTextNode(y.substring(x)),n)}}else{arguments.callee(h)}}})(d.documentElement||d.body)})(document,/。|\.(\s|$)/g,["すげえ","まじで","うん","あつい"],(function(){var r=/MSIE (\d)+/.exec(navigator.appVersion);return r!==null&&8>r[1]?"http://zenith.sakura.ne.jp/blog/2008/03/07/cir1.png":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAD1BMVEUAAABAQP/wYP+Q0P/////WYf5uAAAAA3RSTlP//wDXyg1BAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAAl2cEFnAAAAEAAAABAAXMatwwAAAIFJREFUCB0FwbEKwjAUBdB7E1dp0t3wrKuFIs6Cf667UOsHtEEdhTbJnMZzSKMEIwJpGmD1gawhwBgoVgF+FynJKe9KJGs4s2CgFXzal5vIzuiMZaBYozPmSG3YocdM4BrX6qZ47i9PnO5HYtN6HB6KOlugpEL5bgH9a9is+5SrN/7S8i0NaJw+vAAAAABJRU5ErkJggg=="})());

かわいらしいチルノのドット絵はニコニコ動画で公開された画像をお借りしました。ステキ

使った感じです。

cirno.jpg

猫バトン

| | コメント(8)

にゃーんだと?

語尾にニャとかふざけてるのか!そんなバカなこと出来な…な…

猫化ブックマークレット

ブックマークレットと呼ばれてるやり方で実装しました。利用方法は簡単。

  1. 変換したいページを呼び出します。
    how-step-1.png
  2. ブラウザのアドレス欄に javascript:(function(){var u="http://zenith.sakura.ne.jp/bookmarklet/arisyu.js" ;var d=document;var s=d.createElement('script');s.charset="UTF-8";s.src=u;d.body.appendChild(s);})() をコピーして貼り付け、 Enter キーを押します。するとあら、こんなところにニャンコが…!
    how-step-2.png

もっと簡単な方法は、ブックマークに登録するやり方です。

  1. こちらのブックマークレットのページを表示して、猫化を右クリックしてコンテクスト メニューを出し、ブックマークに登録します。セキュリティうんぬんと出ますが無視します。
    bookmark-step-1.png
  2. 変換したいページを表示させ、先ほど登録したブックマークをクリックすると変換されます。
    bookmark-step-2.png

使用しているソースコード

/**
 * 猫化ブックマークレット
 *
 * 使用方法は、変換を適用させたいページをブラウザに表示させてから
 * アドレス欄に
 * javascript:(function(){var u="http://ブックマークレット設置箇所";var d=document;var s=d.createElement('script');s.charset="UTF-8";s.src=u;d.body.appendChild(s);})()
 * と入力します。
 */

// 名前空間用のオブジェクト window.Zenith が存在しなければ定義
if (!("Zenith" in window))
{
  Zenith = {};
}

// 名前空間用のオブジェクト window.Zenith.Bookmarklet が存在しなければ定義
if (!("Bookmarklet" in window.Zenith))
{
  Zenith.Bookmarklet = {};
}

/**
 * HTML 文章を猫化するブックマークレットの新しいインスタンスを初期化します。
 */
window.Zenith.Bookmarklet.Arisyu = function ()
{
  this.filters = [];
}

/**
 * 指定した要素に変換フィルタを適用します。
 *
 * @param HTMLElement element 対象の要素。
 * @param bool recursive 子要素にも再帰的に適用するなら TRUE、しないなら FALSE。
 */
window.Zenith.Bookmarklet.Arisyu.prototype.filter = function (element, recursive)
{
  for (var i = 0, iLast = this.filters.length; i < iLast; i++)
  {
    var f = this.filters[i];
    
    f.apply(element);
    
    if (recursive)
    {
      for (var j = 0, jLast = element.childNodes.length; j < jLast; j++)
      {
        var child = element.childNodes[j];
        this.filter(child, recursive);
      }
    }
  }
}

/**
 * 指定した要素が持つ全ての子要素のうち、変換対象の要素のテキストを猫化します。
 * 子要素は再帰的に列挙されます。
 *
 * @param HTMLElement element 対象の要素。
 */
window.Zenith.Bookmarklet.Arisyu.prototype.apply = function (container)
{
  this.filter(container, true);
}


/**
 * 正規表現により文章を置換するフィルタの新しいインスタンスを初期化します。
 */
window.Zenith.Bookmarklet.Arisyu.RegExpFilter = function ()
{
  /**
   * 置換候補の正規表現と結果の辞書
   */
  this.dictionaries = [
      {
        "pattern": "な",
        "option": "gm",
        "replace": "にゃ"
      },
      {
        "pattern": "ぬ",
        "option": "gm",
        "replace": "にゅ"
      },
      {
        "pattern": "わたし|ワタシ|わたくし|ワタクシ|私|ぼく|ボク|ぼかぁ|僕|おれ|オレ|俺|じぶん|ジブン|自分|拙者|麻呂",
        "option": "gm",
        "replace": "我輩"
      },
      {
        "pattern": "([!!]+)",
        "option": "gm",
        "replace": "にゃ$1"
      },
      {
        "pattern": "([…+|・+])",
        "option": "gm",
        "replace": "にゃ$1"
      },
      {
        "pattern": "、",
        "option": "gm",
        "replace": "にゃー、"
      },
      {
        "pattern": "(ね?)。",
        "option": "gm",
        "replace": "にゃん。"
      }
    ];
  
  /**
   * 正規表現オブジェクトのキャッシュ
   */
  this.regexpCache = [];
}
  
/**
 * 指定された要素がフィルタの適用対象かどうかを取得します。
 *
 * @param HTMLElement 調べる対象の要素。
 * @return bool 適用対象なら TRUE、対象外なら FALSE。
 */
window.Zenith.Bookmarklet.Arisyu.RegExpFilter.prototype.isAcceptElement = function (element)
{
  var isAccept;
  
  switch (element.nodeName.toLowerCase())
  {
    case 'style':
    case 'script':
    case 'frame':
    case 'code':
      isAccept = false;
      break;
    
    default:
      isAccept = true;
  }
  
  return isAccept;
}

/**
 * 指定された要素へフィルタを適用します。
 *
 * @param HTMLElement 適用対象の要素。
 */
window.Zenith.Bookmarklet.Arisyu.RegExpFilter.prototype.apply = function (element)
{
  if ("parentNode" in element && element.parentNode != null)
  {
    if (!this.isAcceptElement(element.parentNode))
    {
      return;
    }
  }
  
  if (element.nodeName.toLowerCase() != "#text")
  {
    return;
  }
  
  var nodeValue = element.nodeValue;
  
  for (var i = 0, iLast = this.dictionaries.length; i < iLast; i++)
  {
    var dictionary =  this.dictionaries[i];
    
    if (!(i in this.regexpCache))
    {
      this.regexpCache[i] = new RegExp(dictionary.pattern, dictionary.option);
    }
    
    var regexp = this.regexpCache[i];
    nodeValue = nodeValue.replace(regexp, dictionary.replace);
  }
  
  element.nodeValue = nodeValue;
}


////////////////////////////////////////////////////////////////////////////
// ここから実行
////////////////////////////////////////////////////////////////////////////

var arisyu = new Zenith.Bookmarklet.Arisyu();

// フィルタ設定
arisyu.filters = [
    new Zenith.Bookmarklet.Arisyu.RegExpFilter()
  ];

// トップ レベルの文章に適用
arisyu.apply(window.document);

// フレームがあればそちらも適用
if ("frames" in window)
{
  for (var i = 0, iLast = window.frames.length; i < iLast; i++)
  {
    arisyu.apply(window.frames[i].document);
  }
}

このアーカイブについて

このページには、過去に書かれたブログ記事のうちブックマークレットカテゴリに属しているものが含まれています。

前のカテゴリはWeb アプリケーションです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ブックマークレット: 月別アーカイブ

Powered by Movable Type 4.12