圧縮電子精神音楽浮遊構造体

JavaScriptコードをトークンに分解する正規表現

2012-02-25T21:27:00.003+09:00

/(\/\*[\s\S]*?\*\/|\/{2,}[^\r\n]*(?:\r\n|\r|\n|)|"(?:\\[\s\S]|[^"\r\n\\])*"|'(?:\\[\s\S]|[^'\r\n\\])*'|(?:(?:\/(?!\*)(?:\\.|[^\/\r\n\\])+\/)(?:[gimy]{0,4}|\b)(?=\s*(?:(?!\s*[\/\\<>*+%`^"'\w$-])[^\/\\<>*+%`^'"@({[\w$-]|===?|!==?|\|\||[&][&]|\/[*\/]|[,.;:!?)}\]\r\n]|$)))|<([^\s>]*)[^>]*>[\s\S]*?<\/\2>|>>>=?|<<=|===|!==|>>=|\+\+(?=\+)|\-\-(?=\-)|[=!<>*+\/&|^-]=|[&][&]|\|\||\+\+|\-\-|<<|>>|0(?:[xX][0-9a-fA-F]+|[0-7]+)|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|[1-9]\d*|[-+\/%*=&|^~<>!?:,;@()\\[\].{}]|(?![\r\n])\s+|(?:\r\n|\r|\n)|[^\s+\/%*=&|^~<>!?:,;@()\\[\].{}'"-]+)/g

これがパターンです。

例えば、

/* comment */
var regex = /[\/\\"']*/g;
var str = "hoge\"fuga'\
piyo";
// 'comment'
var arr = [
  0x0FFF, 1e8, 0, 12345,
  3.524603890386048e+24,
  0.0006215, 0666
];
var i = 0;
var e4x = <>{{///*E4X*///}}</>;
var xml = <root><hoge fuga="piyo" /></root>;
var ほげ = '/*"ほ//げ"*/';
var $var = re.test(str) && arr[2] || (i+++i) === 1;

このコードを文字列として code.match(pattern) すると、以下の要素を持った配列が得られます。

0: /* comment */
1: 

2: var
3:  
4: regex
5:  
6: =
7:  
8: /[\/\\"']*/g
9: ;
10: 

11: var
12:  
13: str
14:  
15: =
16:  
17: "hoge\"fuga'\
piyo"
18: ;
19: 

20: // 'comment'

21: var
22:  
23: arr
24:  
25: =
26:  
27: [
28: 

29:   
30: 0x0FFF
31: ,
32:  
33: 1e8
34: ,
35:  
36: 0
37: ,
38:  
39: 12345
40: ,
41: 

42:   
43: 3.524603890386048e+24
44: ,
45: 

46:   
47: 0.0006215
48: ,
49:  
50: 0666
51: 

52: ]
53: ;
54: 

55: var
56:  
57: i
58:  
59: =
60:  
61: 0
62: ;
63: 

64: var
65:  
66: e4x
67:  
68: =
69:  
70: <>{{///*E4X*///}}</>
71: ;
72: 

73: var
74:  
75: xml
76:  
77: =
78:  
79: <root><hoge fuga="piyo" /></root>
80: ;
81: 

82: var
83:  
84: ほげ
85:  
86: =
87:  
88: '/*"ほ//げ"*/'
89: ;
90: 

91: var
92:  
93: $var
94:  
95: =
96:  
97: re
98: .
99: test
100: (
101: str
102: )
103:  
104: &&
105:  
106: arr
107: [
108: 2
109: ]
110:  
111: ||
112:  
113: (
114: i
115: ++
116: +
117: i
118: )
119:  
120: ===
121:  
122: 1
123: ;

そもそもシンタックスハイライトのほうが崩れてる…。

jsFiddle でテストできます。

JavaScriptコードをトークンに分解する正規表現 - jsFiddle

文字列は、改行の前にバックスラッシュ (\) がある場合も対応してみました。
セミコロン挿入もあって、スペースと改行は区別されます。

E4X はシンプルなのだけ対応してます。

var x = <root><div id={(function() {
    return '</root>' ? 'hoge' : 'fuga';
}())}></root>

こういうのは無理っぽい。あとネストとか。

match() に g つけて match(/(...)/g) がこんな便利だなんて…。

同期処理を非同期に変換-JavaScriptライブラリPot.js+PotLite.jsリリースノート

2012-02-24T22:11:00.001+09:00

Pot.js 1.14 と PotLite.js 1.31 リリースしました。

その前に Pot.js + PotLite.js リファレンスが完成しました (ということにしたい) ので、
お時間あるときにでも覗いてみてください。

結局 /test-for-new-design/ に置いてあるのはファイル消すのも嫌だし
全部リダイレクトさせるようにしました。

Pot.js 1.14 と PotLite.js 1.31 では、Pot.deferreed() ていう関数つくりました。

deferreed は、関数の中の for, for-in, for-of, do, while 等の同期ループを
Pot.Deferred.forEach() などの非同期イテレータに置き換えて関数を再定義します。

前の記事「JavaScript whileループとPot.Deferred.forEverイテレータでCPU使用率を比較」でも書いてますが、
Pot.js ライブラリのイテレータは CPU の負荷なく実行できます。

ループを置き換えることで、巨大な文字列を扱ったり、ループ回数が未知な処理をする際に
重さについて考えなくて済むようにと、作ってみまみた。

もともとは deferrize() という関数から派生しています。

関数内のコードをトークン単位に分解して、
単純にトークンの数が多いループブロックをメインループとして解析して、
その文に見合った Pot.Deferred イテレータを割り当ててるんですが
ぜんぜん思ったよりたいへんでまだ複雑なものは対応できてないです。
とくに三項演算子 (?:) と function のコンボとか、E4X とかまでは今後の課題。。にしたいけど、
そこまでしてたらライブラリの方向性違うんじゃないのって思ってしかたないです。

deferreed の 1 コールで zip.deflate 圧縮とかファイル規模への md5 とか非同期化できたら楽そう。

例えば以下のような関数が

// 文字列を charCode からなる配列にして返す関数
var toCharCode = function(string) {
    var result = [];
    for (var i = 0; i < string.length; i++) {
        result.push(string.charCodeAt(i));
    }
    return result;
};

// deferreed により for 文を非同期イテレータにした関数を生成
var toCharCodeDefer = Pot.deferreed(toCharCode);

// 例えば toCharCodeDefer は内部で以下のような感じに変換される
//
//  function(string) {
//      var result = [];
//      return Pot.Deferred.repeat(string.length, function(i) {
//          result.push(string.charCodeAt(i));
//      }).then(function() {
//          return result;
//      });
//  };
//

// Pot.Deferred インスタンスが返るため then() などで繋げられる
toCharCodeDefer('abc').then(function(res) {
    Pot.debug(res); // [97, 98, 99]
});

// この変化により、巨大な文字列でも負荷を分散させ実行できる
var largeString = new Array(100000).join('abcdef');

// 'slow' などの指定が可能
toCharCodeDefer.slow(largeString).then(function(res) {
    Pot.debug(res.length); // 599994
});

あと、プラグインみたいなことしたくて
Pot.Plugin ての作ったんですが、なにか違うような気がしてならないです。

プラグイン = ただのオブジェクト

になってしまった。

Pot.addPlugin() という関数で任意の関数とかオブジェクトを登録。
Pot.removePlugin() で削除。 Pot.hasPlugin() で確認、Pot.listPlugin() で列挙。

addPlugin した関数は Pot.xxx でアクセスできる。

・・・それって Pot.myFunc = function() {}; でいいじゃん!
てなったので、以下のようにしてみました。

var string = '\t abc\n \t ';

// オリジナルの Pot.trim()
debug(Pot.trim(string)); // 'abc'

// プラグイン関数の登録により Pot.trim() を上書き
Pot.addPlugin('trim', function(s) {
    return s.replace(/^ +| +$/g, ''); // スペース (U+0020) だけ削除するようにする
});

// 登録した Pot.trim()
debug(Pot.trim(string)); // '\t abc\n \t'

// プラグインの trim を削除
Pot.removePlugin('trim');

// 元に戻る
debug(Pot.trim(string)); // 'abc'

元に戻せる (むしろ消えない) ので、一時的に挙動を変えたい時とか便利かもしれないです。
あと、Pot.globalize() したときにプラグイン関数もグローバル化します。
Pot.globalize() しなくても with (Pot) {...} でもいい気がしてきました。

プラグインの詳細は Pot.Plugin リファレンスあたりから参照ください。

マニュアルは英語版も含めてちょっとずつ進めています。

以下はレポジトリとかのリンクなど。

Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。

PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

Pot.js / PotLite.js 最新

マニュアル

Pot.js + PotLite.js - Document and Reference - JavaScript Async Utility Library

その他の情報についてはマニュアル/マニュアルからのリンクから参照ください。

レポジトリ

polygonplanet/Pot.js - GitHub

その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。

Tumblrのリブログ/ポストのリミット残数が確認できるTomblooパッチ

2012-02-18T05:40:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

Tumblr でリブログ/ポストできる残りリミット数を表示する Tombloo パッチです。

前々から作ろうとしてて、でも正確に計算できないと思って困ってましたが
べつにちょっとくらい違ってもいいやって作りました。

リセットされる正確な時間がずっとわからずに
16:00 なのか 14:00 なのか 14:15 なのか
いろんな違う情報があって曖昧です。
先日、このパッチのテストのためリミットまでリブログして
次の日の 14:00 過ぎにポストしたらリセットされてました。
タンブリストが 14:00 だよ! て言ってくれたので間違いないと思います。

それと、タイムゾーンで考えると 14 が自然な数値だともわかります。
Tumblr, Inc. はニューヨークにあります。
ニューヨークのタイムゾーンは EST (Eastern Standard Time) で、
GMT -5 時間になり、日本との時差は -14 時間です。
人間が考えそうなリセット時間はおそらく 0:00 ですので、
日本ではちょうど 14:00 にリセットされることになります。

そんなわけでパッチでは 14:00 にリセットされる設定になってます。

このパッチはテストに日数がかかるので、まだ完全な状態じゃないかもしれません。
そもそも Tombloo 以外からリブログしたら、その数だけ狂っていきます。
とは言っても、http://www.tumblr.com/new/photo を見ているので
ある程度リミットに近くなったら整合性はとれるはずです。

機能:

Tumblr のリブログ/ポストのリミット残数が確認できる
「アカウント切り替え」に対応
「ポスト完了時に通知メッセージを表示するパッチ」と連携

「ポスト完了時に通知メッセージを表示するパッチ」と連携は、
Tumblr にリブログ/ポストすると、以下のような Post と Reblog の表示が付くようになります。

上のメッセージを表示させるパッチは、
「ポスト完了時に通知メッセージを表示するパッチ」からインストールできます。

修正や改善策などあれば地味にアップデートしていきます。

問題等あればパッチ削除してください。

パッチの削除がわからなかったら、
パッチ一括アップデートぱっちで削除もできます。

パッチ (Download or Update):

tombloo.model.tumblr.postlimit.message.js

インストール/アップデート:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール/アップデート。

※直接右クリックからインストールできない場合:

できない場合は

「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

レポジトリ

polygonplanet/tombloo - GitHub

JavaScript whileループとPot.Deferred.forEverイテレータでCPU使用率を比較-Pot.js+PotLite.jsリリースノート

2012-02-11T22:15:00.000+09:00

Pot.js 1.13 と PotLite.js 1.30 リリースしました。

Pot.js 1.13 と PotLite.js 1.30 では、主に内部ループ処理を大幅に高速化しました。
(そろそろ ChangeLog 作らないとまずいかも…)

あとは、変数宣言とか例の (function(){}()) とか (結局直してる)
細かい修正などです。

先日、Hacker News や Echo JS で Pot.js が紹介されました (ありがとうございます)。
でもアクセスが今までの 1000 倍くらいになって、すごいことになってちょっとビビった。
(API サーバのほうは適当に調節しておいたので大丈夫だった。よかった。。)

それで Pot.js の本来の存在意義ですが、

実行環境の CPU に負荷をかけることなく JavaScript が実行できる。

といったことが本来の目的であり、常に追求している目標でもあります。
Deferred が重点にとらわれがちですが、Pot.Deferred はそれの足がかりであり、
Pot.Deferred だけがライブラリの中核ではないので、いろいろ使ってみてください。

新しいデザインのリファレンス

現在、新しいデザインでリファレンスを書き直しています。

Pot.js + PotLite.js - Document and Reference - JavaScript Async + String Utility Library

前は全部で 1 ファイルになっちゃってて、どんどん重くなるし更新もやり難くて
どうしようもなかったのですが、今回は各ページを非同期読み込みにして
英語版と日本語版で見れるようにして、戻るボタンとかも再現したり、がんばってます。

でもまだ作成途中です (2012-02-11 現在)。

ある程度完成したら本来の /index.html に移動させようと思ってるんですが、
先ほどの Echo JS などが /test-for-new-design/ にリンクしちゃってるもんだから
どうしようかと考え中。(たぶんリダイレクトか、もうこのままでいいか…)。

CPU 比較を実行

jsFiddle のほうで
JavaScript の while ループと、Pot.js の非同期イテレータとで CPU 使用率の比較を書いてみました。
前に書いた Pot.js イテレータと jQuery.each と for ループの CPU 使用率をグラフで比較
と同じ事ですが、実際に実行できます (ただし負荷テストなのでブラウザクラッシュに気をつけてください)。
もっとも最近のブラウザはループでクラッシュしないと思いますが。。

CPU 使用率は、Web ブラウザからの JavaScript では取得できないと思うので、
CPU モニタリングするアプリとか、
なければ Win ならタスクマネージャから「パフォーマンス」→ 「CPU 使用率」
を見ながら実行してみるとわかりやすいと思います。

JavaScript while ループと Pot.Deferred.forEver イテレータの CPU 使用率を比較 - jsFiddle

今回は while 文と Pot.Deferred.forEver の比較ですが、
Pot.js 非同期イテレータは CPU 負荷が一定量に抑えられたループが可能になっていると思います。
ただし、この例のような処理だと実行時間はある程度伸びてしまいます。

実行時間に関しては速度調整が可能なので、処理に応じたスピードを選ぶこともできます。
(このへんは今後改善したいです)。

サンプルのソースコード

jsFiddle でも確認できますが、今回使用したサンプルのソースコードです。
ループ処理の部分だけ抽出しています。

JavaScript while ループを使ったソースコード:

// while で同期ループして圧縮
compressSync : function(s) {
  var a = 53300, b, c, d, e, f, g = -1,
      h, i, r = [], x = String.fromCharCode;

  s = new Array(a--).join(' ') + s;
  while ((b = s.substr(a, 256))) {
    for (c = 2, i = b.length; c <= i; ++c) {
      d = s.substring(
          a - 52275,
          a + c - 1
      ).lastIndexOf(b.substring(0, c));
      if (!~d) {
        break;
      }
      e = d;
    }
    if (c === 2 || c === 3 && f === g) {
      f = g;
      h = s.charCodeAt(a++);
      r.push(
          x(h >> 8 & 255),
          x(h & 255)
      );
    } else {
      r.push(
          x((e >> 8 & 255) | 65280),
          x(e & 255),
          x(c - 3)
      );
      a += c - 1;
    }
  }
  return r.join('');
}

Pot.js 非同期イテレータ (今回は Pot.Deferred.forEver) を使ったソースコード:

// Pot.js 非同期イテレータで圧縮
compressAsync : function(s) {
  var a = 53300, b, c, d, e, f, g = -1,
      h, i, r = [], x = String.fromCharCode;

  var deferred = new Pot.Deferred();

  s = new Array(a--).join(' ') + s;

  // whileループを forEver に置き換え
  Pot.Deferred.forEver[SPEED](function() {
    
    b = s.substr(a, 256);
    if (!b) {
      throw Pot.StopIteration;
    }
   
    for (c = 2, i = b.length; c <= i; ++c) {
      d = s.substring(
          a - 52275,
          a + c - 1
      ).lastIndexOf(b.substring(0, c));
      if (!~d) {
        break;
      }
      e = d;
    }
    if (c === 2 || c === 3 && f === g) {
      f = g;
      h = s.charCodeAt(a++);
      r.push(
          x(h >> 8 & 255),
          x(h & 255)
      );
    } else {
      r.push(
          x((e >> 8 & 255) | 65280),
          x(e & 255),
          x(c - 3)
      );
      a += c - 1;
    }
  }).then(function() {
    deferred.begin(r.join(''));
  }, function(err) {
    deferred.raise(err);
  });
  return deferred;
}

同期か非同期かの違いがありますが、
単に、メインの while 文を Pot.Deferred.forEver に変えてるだけです。
forEver は、StopIteration が throw されるまで、永久にループする関数です。

あと、この関数は LZ77アルゴリズムによる圧縮関数をJavaScript最短コードで | 圧縮電子精神音楽浮遊構造体
で作ったソースコードをちょっとだけ手直ししたものです。
文字列を圧縮解凍します。

Pot.js / PotLite.js

Pot.js / PotLite.js 最新

マニュアル

マニュアルは上に書いたように 2012-02-11 現在、まだすべてのオブジェクトの解説ができてません。。

その他の情報についてはマニュアル/マニュアルからのリンクから参照ください。

レポジトリ

polygonplanet/Pot.js - GitHub

その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。

TomblooでTwitpicが動かないのでとりあえずFixのパッチ

2012-01-22T05:35:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

Tombloo から Twitpic にポストできなくなってたので
とりあえず動くようにして、あとアイコンが https のほうじゃないと 403 だったからそれも修正したパッチ。

あまり確認してないので、あとで本体がアプデで修正したらパッチ削除したほうがいいです。

パッチの削除がわからなかったら、
パッチ一括アップデートぱっちで削除もできます。

パッチ (Download or Update):

tombloo.model.twitpic.fixicon.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

HTML5 File APIでドラッグ＆ドロップのサンプル-Pot.js+PotLite.jsリリースノート

2012-01-11T21:50:00.003+09:00

Pot.js 1.11 と PotLite.js 1.28 リリースしました。

主な新機能として、HTML5 の File API を使った
ファイルのドラッグ＆ドロップを扱う Pot.DropFile を実装しました。

Pot.DropFile は FileReader でドロップされたファイルをアップロードしたり
内容やサイズを取得してその場で処理することが可能です。

HTML5 とドラッグ＆ドロップイベントをサポートしてるブラウザ (Firefox, GoogleChrome, Safari) で
このブログ内に、デスクトップなどから画像やテキストなどの適当なファイルをドロップしてみてください。

ここにドロップされたファイル内容が表示されます。

ソースコード

このサンプルのソースコードです。
DOM ノードを作成するのにあたって jQuery を使用しています。

HTML のソース:

<div id="dropfile-container" style="margin: 10px; border-color: #ccc; border-style: dashed; border-width: 1px 0 1px 0;">
ここにドロップされたファイル内容が表示されます。
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://api.polygonpla.net/js/pot/1.11/pot.min.js"></script>

JavaScript のソース:

$(function () {

    // ドロップされた結果を表示する div
    var targetId = '#dropfile-container';

    // ドロップ用のパネルを作成
    var panel = $('<div/>').css({
        position        : 'fixed',
        left            : '10%',
        top             : '10%',
        width           : '80%',
        height          : '80%',
        minHeight       : 200,
        background      : '#ff8cd3',
        zIndex          : 9999999,
        display         : 'table',
        textAlign       : 'center',
        WebkitBoxShadow : '1px 1px 10px #333',
        MozBoxShadow    : '1px 1px 10px #333',
        boxShadow       : '1px 1px 10px #333'
    })
    .append(
        $('<div/>')
            .css({
                display       : 'table-cell',
                color         : '#fff',
                fontWeight    : 'bold',
                verticalAlign : 'middle',
                fontSize      : '160%'
            })
            .text('ここにファイルをドロップします')
        )
    .hide()
    .appendTo('body');

    // ファイルの情報を表示する関数
    var showFileInfo = function(name, size, type) {
        $('<div/>')
            .text(name + ' (' + type + ' ' + size + 'bytes)')
            .appendTo(targetId);
    };

    // ----- ここから処理の中心 -----
    // 設定と共にインスタンスを生成
    var dropFile = new Pot.DropFile(panel, {
        // メッセージを表示すべき時
        onShow : function() { panel.show() },
        // メッセージを非表示にすべき時
        onHide : function() { panel.hide() },
        // ドロップ時の処理
        onDrop : function(files) {},
        // 画像がドロップされた時
        onLoadImage : function(data, name, size, type) {
            showFileInfo(name, size, type);
            $('<img/>')
                .attr({src : data})
                .css({maxWidth : 500, maxHeight : 500})
                .appendTo(targetId);
        },
        // テキストがドロップされた時
        onLoadText : function(data, name, size, type) {
            showFileInfo(name, size, type);
            $('<textarea/>')
                .val(data)
                .css({width : '90%', height : 300})
                .appendTo(targetId);
        },
        // 不明なファイルがドロップされた時
        onLoadUnknown : function(data, name, size, type) {
            showFileInfo(name, size, type);
            $('<textarea/>')
                .val(data)
                .css({width : '90%', height : 300})
                .appendTo(targetId);
        },
        // ドロップされたファイルが読み込めた時 (このときアップロードも可能)
        onLoadEnd : function(files) {
            // 今回は未使用
            /*
            this.upload('http://www.example.com/').then(function(res) {
                alert('finish upload.\nresponse:\n\n' + res.responseText);
            });
            */
        }
    });
});

Pot.js / PotLite.js

Pot.js は非同期イテレータと文字列処理を中心とした JavaScript ライブラリです。

Web ブラウザ上や Node.js 上、 UserScript や XUL 上で動作します。
この例のような DOM や HTML5 File API が含む処理は Node.js などの環境では意味がありませんが
テキスト処理やイテレータなどを利用するメリットがあります。
とくに非同期処理を扱う Deferred オブジェクトにより作業効率が向上すると思います。

PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

Pot.js / PotLite.js 最新

マニュアル

Pot.js + PotLite.js ドキュメントリファレンス

マニュアルは 2012-01-11 現在、まだすべてのオブジェクトの解説ができてません。。

その他の情報についてはマニュアルから参照ください。

レポジトリ

polygonplanet/Pot.js - GitHub

Tomblooの「アカウントの切り替え」にSoundCloudを追加するパッチ

2012-01-11T14:29:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

Tombloo の「アカウントの切り替え」ダイアログに SoundCloud を追加します。

注意点

https じゃないとアカウント情報が取得できない環境があります。
その場合、 https://soundcloud.com/login?ref=top から
入力を記憶してログインすると有効になります。

あと、「アカウントの切り替え」ダイアログを内容サイズに合わせてリサイズするTomblooパッチのほうも
アップデートしました。
アップデートというか、サービス切替時に
別 window オブジェクトの非同期処理がうまく拾えてなかったので
ソート機能を一時的に停止してます。

パッチ (Download or Update):

tombloo.service.soundcloud.changeaccount.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

こう言い換えろ→論文に死んでも書いてはいけない言葉→こう言い換えるマシーン(β)作りました

2012-01-05T21:36:00.000+09:00

久しぶりにツールっぽいものを。

こう言い換えろ→論文に死んでも書いてはいけない言葉３０読書猿Classic: between / beyond readers を発端に
論文やブログなどの文章校正マシーンを作ってみました。

かなりやっつけです。

これ → こう言い換えるマシーン(β)

独自に校正パターンを組んで、文章を変換し
どの部分が構成されたか確認できます。

自分のブログ文章とか、どこか適当なところから文章をコピペしてみると
どんなものかわかると思います。

デフォルトのパターンは上リンクの「こう言い換えろ→論文に死んでも書いてはいけない言葉３０」
の変換マップが元となってます。

ほとんどは JavaScript で処理してますが、
ちょっとだけセッションしてて変換回数の多いプリセットを共有できるようになってます。
あまり大量に保持してないので変動するかと思います。

不明な点、要望やバグや感想などありましたら
@polygon_planet や、またはメールでなんでも伝えてください。

他の開発物は以下の GitHub レポジトリに集め中。

GitHub レポジトリ

polygonplanet/Pot.js - GitHub

JavaScriptの無名関数の実行 (function(){})() と (function(){}()) の違い

2011-12-17T21:45:00.166+09:00

JavaScript Advent Calendar 2011 (オレ標準コース) 17 日目、polygon_planet です。

ずっと Advent Calendar 参加してみたいなぁと思ってたんですが
ネタが思いつかない日々で半分諦めてたんですが、考え過ぎな気がしてきたので
別におもしろい記事でもないし、技術的にも参考になるのか不明ですがとりあえず書きます。

もしかしたら同じようなこと解説してる記事がすでにあるかも…(うまく検索できてない)

JavaScript で無名関数をその場で実行するとき、

(function() {
  // 処理
})();

という書き方が主流っぽいですが、

(function() {
  // 処理
}());

こう書いたらどう違うのか。

ちなみに、

function() {

}(); // エラー

これは式ではなく文として扱われるためエラーです。
ただし、以下のように実行する場合はエラーではありません。

var arr = [function(){}()];        // [undefined]
var obj = {foo: function(){}()};   // {foo: undefined}

(function(){})() vs (function(){}())

どちらも同じように実行され、結果的には同じなので
とりあえず、無名関数が生成され実行するまでの JavaScript コードの過程を追ってみます。

今回は手元に SpiderMonkey に付いてる JavaScript shell しかなかったので、それを使います。
わりと前にコンパイルしたやつですが JavaScript バージョンは 1.8 なので現行と大差ないと思います。
中間コードは js shell の dis で逆アセンブルして確認します。

まず (function(){})() から。

$ js
js> dis(function() { (function(){})() });
flags: LAMBDA INTERPRETED
main:
00000:  anonfunobj (function () {})
00003:  group
00004:  pushobj
00005:  call 0
00008:  pop
00009:  stop

Source notes:
  0:     5 [   5] pcbase   offset 5

anonfunobj というは、無名関数を定義していると思われますが、
確認のため Mozilla のソースコードを見てます。

今回は js shell のバージョンに合わせるため
/mozilla-central/ ではなく /mozilla/ を参照します。

jsopcode.tbl

305 /* Auto-clone (if needed due to re-parenting) and push an anonymous function. */
306 OPDEF(JSOP_ANONFUNOBJ,  128, "anonfunobj",  NULL,     3,  0,  1, 19,  JOF_OBJECT)

このあたりの JSOP_* から参照できます。
JSOP は jsopcode.c あたりで確認できます。

3777               case JSOP_ANONFUNOBJ:
3778 #if JS_HAS_GENERATOR_EXPRS
3779                 sn = js_GetSrcNote(jp->script, pc);
3780                 if (sn && SN_TYPE(sn) == SRC_GENEXP) {
3781                     JSScript *inner, *outer;
3782                     void *mark;
3783                     SprintStack ss2;
3784 
3785                     LOAD_FUNCTION(0);
3786                     inner = fun->u.i.script;
// ... (長いので省略) ...

ここでは LOAD_FUNCTION が使われています。

JavaScript バイトコードインタプリタの jsinterp.c を参照して無名関数の生成から追ってみます。

5744           BEGIN_CASE(JSOP_ANONFUNOBJ)
5745             /* Load the specified function object literal. */
5746             LOAD_FUNCTION(0);
5747 
5748             /* If re-parenting, push a clone of the function object. */
5749             parent = js_GetScopeChain(cx, fp);
5750             if (!parent)
5751                 goto error;
5752             obj = FUN_OBJECT(fun);
5753             if (OBJ_GET_PARENT(cx, obj) != parent) {
5754                 obj = js_CloneFunctionObject(cx, fun, parent);
5755                 if (!obj)
5756                     goto error;
5757             }
5758             PUSH_OPND(OBJECT_TO_JSVAL(obj));
5759           END_CASE(JSOP_ANONFUNOBJ)

ここでも LOAD_FUNCTION が使われているので定義を追ってみます。
jsinterp.c

2604 #define LOAD_FUNCTION(PCOFF)                                                  \
2605     JS_GET_SCRIPT_FUNCTION(script, GET_FULL_INDEX(PCOFF), fun)

JS_GET_SCRIPT_FUNCTION を実行するマクロになっています。

じゃあ JS_GET_SCRIPT_FUNCTION はどうなってるの
jsscript.h

143 #define JS_GET_SCRIPT_FUNCTION(script, index, fun)                            \
144     JS_BEGIN_MACRO                                                            \
145         JSObject *funobj_;                                                    \
146                                                                               \
147         JS_GET_SCRIPT_OBJECT(script, index, funobj_);                         \
148         JS_ASSERT(HAS_FUNCTION_CLASS(funobj_));                               \
149         JS_ASSERT(funobj_ == (JSObject *) STOBJ_GET_PRIVATE(funobj_));        \
150         (fun) = (JSFunction *) funobj_;                                       \
151         JS_ASSERT(FUN_INTERPRETED(fun));                                      \
152     JS_END_MACRO

JSFunction にキャストして JavaScript 関数オブジェクトになることが確認できました。
(これは現行の JavaScript だともっとてっとり早くなってる)

こんな感じで追ってみると、anonfunobj は無名関数の生成ということがわかります。

次の group は、
jsopcode.tbl で同じく定義されています。

317 /* Parenthesization opcode to help the decompiler. */
318 OPDEF(JSOP_GROUP,       131, "group",       NULL,     1,  0,  0, 19,  JOF_BYTE)

jsopcode.c では以下のあたり。

2066               case JSOP_GROUP:
2067                 cs = &js_CodeSpec[lastop];
2068                 if ((cs->prec != 0 &&
2069                      cs->prec <= js_CodeSpec[NEXT_OP(pc)].prec) ||
2070                     pc[JSOP_GROUP_LENGTH] == JSOP_NULL ||
2071                     pc[JSOP_GROUP_LENGTH] == JSOP_DUP ||
2072                     pc[JSOP_GROUP_LENGTH] == JSOP_IFEQ ||
2073                     pc[JSOP_GROUP_LENGTH] == JSOP_IFNE) {
//                       ...(中略)...
2100                 }

無名関数オブジェクトを生成し、それを括弧 () によって式とし、
そしてそれを call というような流れになっています。

続いて (function(){}()) のほうも同じように。

$ js
js> dis(function() { (function(){}()) });
flags: LAMBDA INTERPRETED
main:
00000:  anonfunobj (function () {})
00003:  pushobj
00004:  call 0
00007:  pop
00008:  stop

Source notes:
  0:     4 [   4] pcbase   offset 4

なんと、(function(){})() と比べると
group がないだけで、ほかは同じになってしまいました。

無名関数に対する Parenthesization が発生しないので、
ちょうど、上で書いた [function(){}()] のように実行されています。

この結果から、

(function(){})() よりも、 (function(){}()) のほうが
コストが減るとわかりました。

とは言っても、どちらを使用しても実行時間が変化するとしてもマイクロ秒単位などで
JavaScript でそこまでクリティカルな処理が存在するのかも微妙なところで
あまり気にしないでいい気がします。

でも一応ベンチマークをとってみます。

js> for (var t = +new Date, i = 0, f; i < 10000000; i++) f = (function(){}());
    print(+new Date - t);
10437
js> for (var t = +new Date, i = 0, f; i < 10000000; i++) f = (function(){})();
    print(+new Date - t);
10485

結果:

(function(){}()) : 10437 ms.
(function(){})() : 10485 ms.

たしかに (function(){}()) のほうが速かったんですが、
10,000,000 回ループしてわずか 48 ミリ秒の違い。
これを懸念してる人って…(いるのでしょうか)

そういえばこの違いについてはちょっと前に Twitter で話題(?) になって気がします。
もしかしてもうまとめられてたのかな…。だとしたら……考えたくない。

とりあえずモヤモヤした感じがなくなったのでよかった。
たまにソースコード確認してみると新鮮デスネ！

JavaScript非同期ライブラリ PotLite.js 1.23 リリース

2011-12-06T19:11:00.000+09:00

JavaScript 非同期処理ライブラリ PotLite.js 1.23 リリースしました。

Version 1.23 は、ほとんどバグフィックスです。

AOP ぽいことができる Pot.Signal がひどくて、
シグナル解除して再度登録すると重複してコールバック関数が呼ばれちゃったりしてたので
がんばって可能な限り実行テスト増やしてフィックスして
やっと想定の動きになりました。

前バージョン (1.22) を使ってる方いたら申し訳ないです。。

PotLite.js

PotLite.js は、めんどうになりがちな非同期処理をとにかく楽にコーディングできるよう
直感的に記述できる Deferred オブジェクトを中核として実装しています。
そして、ユーザー (UI) への配慮を目的として
CPU など負荷のかからないループ処理やイテレータが利用できる JavaScript ライブラリです。

経緯などについては、以前の記事や、 CPU 使用率のベンチマーク結果の記事など
シグナル (イベント) については PotLite.js 1.22 リリース - アスペクト指向っぽく書けるSignal実装
などの記事を参照ください。

ダウンロード

PotLite.js 1.23

HEAD (常に最新)

レポジトリ

$ git clone git://github.com/polygonplanet/Pot.js

polygonplanet/Pot.js - GitHub

以下は PotLite.js について情報です。
レポジトリにも同じようなこと書いてあるので
インストールや概要など、不要な場合は読み飛ばしてください。
マニュアルのリンクは下にあります。

動作環境

以下の Web ブラウザで動作確認済みです。

Mozilla Firefox *
Internet Explorer 6+
Safari *
Opera *
Google Chrome *

また、以下の環境でも動作するよう設計されています。

Greasemonkey (UserScript)
Mozilla Firefox Add-On (on XUL)
Node.js
Other non-browser environment

インストール

一般的な方法で動作します。

例:

<script type="text/javascript" src="potlite.min.js"></script>

<script type="text/javascript" src="http://api.polygonpla.net/js/pot/potlite/1.23/potlite.min.js"></script>

Node.js の場合。

// Example to define Pot object on Node.js.
var Pot = require('./potlite.min.js');
Pot.debug(Pot.VERSION);

Pot.Deferred.begin(function() {
    Pot.debug('Hello Deferred!');
}).then(function() {...})
// ...

Greasemonkey (userscript) の例。

// ==UserScript==
// ...
// @require  https://github.com/polygonplanet/Pot.js/raw/master/potlite.min.js
// ...
// ==/UserScript==
Pot.Deferred.begin(function() {
    return Pot.request('http://www.example.com/data.json').then(function(res) {
        return Pot.parseFromJSON(res.responseText);
    });
}).then(function(res) {
    Pot.debug(res);
    // do something...
});
//...

PotLite.js をバージョンを限定して Web から直接読み込みたい場合、
上の GitHub リンクでは常に最新になってしまうため
実装の差異による不具合が発生するかもしれません。
そのため、ホスティング用 API サーバを用意しています。

v1.23 : http://api.polygonpla.net/js/pot/potlite/1.23/potlite.min.js

これは、1.23 の部分をリリース済みのバージョンに合わせて変更できます。
レポジトリに (例えば 1.xx と) バージョンをタグ付けした時に、
あわせて API サーバに置くようにしています。

例えば Greasemonkey で 1.23 を使いたい場合、

// ==UserScript==
// ...
// @require  http://api.polygonpla.net/js/pot/potlite/1.23/potlite.min.js
// ...
// ==/UserScript==

と記述できます。

Greasemonkey に限らず script タグからでもなんでも自由に使ってください。

jQuery プラグインとしての例:

// jQuery を読み込んだ後に実行。
Pot.deferrizejQueryAjax();

// Ajax 系の関数が Pot.Deferred を返すようになる
$.getJSON('/hoge.json').then(function(data) {
    alert(data.results[0].text);
}).rescue(function(err) {
    alert('Error! ' + err);
}).ensure(function() {
    return someNextProcess();
});

// エフェクトなどを Deferred 化する 'deferred' が追加される
$('div#hoge').deferred('hide', 'slow').then(function() {
    // .hide() が終了したあとの処理
});

Pot.deferrizejQueryAjax() は v1.23 現在、ライブラリ側からは自動で実行しません。
なので、プラグインとして利用する場合はコードの最初などで一度コールしてください。

リファレンス・マニュアル

より詳しい情報はすべてリファレンスに載っています。
基本的な導入や、各メソッド・関数についても扱っています。

Pot.js + PotLite.js - ドキュメントリファレンス - JavaScript非同期処理ライブラリ

動作テスト

以下のページで動作テストができます。
ページを開くと実装されている主な関数・メソッドを全てテストします。

Pot.js + PotLite.js - Test Run - JavaScript Async Library

自動生成されたドキュメント

JSDoc ドキュメント (PotLite.js)

Closure Compiler によりソースコードから自動生成されたドキュメントです。

殆どの関数ごとにサンプルコードを載せているので、ある程度は参考になると思います。
生成物をすべて確認しているわけではないので、誤認識してる箇所もあるかもしれません。
より詳細な実装などは直接ソースコードを参照ください。

不明な点、要望やバグや感想などありましたら
@polygon_planet や下のレポジトリから、またはメールでなんでも伝えてください。

レポジトリ

polygonplanet/Pot.js - GitHub

マウス下の画像をGoogle画像検索するTomblooパッチ

2011-12-05T21:59:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

マウス下の画像を Google 画像検索 (Google Image Search) で検索できるようになります。
Taberareloo には既に付いていて、せっかくなので作りました。
あと、二次画像詳細検索も選べます。

コンテキストメニューの「Tombloo」から操作できます。

今のところメニューは 2 つだけですが、
なにか思いついたら追加して随時アップデートする予定です。

パッチ (Download or Update):

tombloo.service.actions.search.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

JavaScript非同期ライブラリ PotLite.js 1.22 リリース。アスペクト指向っぽく書けるSignal実装

2011-11-23T09:01:00.001+09:00

追記

PotLite.js 1.22 はバギーなため記事内のリンクを 1.23 に変更しました。

PotLite.js 1.22 リリースしました。

PotLite.js は、非同期処理や負荷のかからないループ処理やイテレータを重視した JavaScript ライブラリです。
経緯などについては、以前の記事や、 CPU 使用率のベンチマーク結果の記事を参照ください。

ダウンロード

PotLite.js 最新

レポジトリ

polygonplanet/Pot.js - GitHub

PotLite.js バージョン 1.22 では Pot.Signal オブジェクトを実装しました。

Pot.Signal は、任意のハンドラを登録しシグナルを送信して実行に移すことが可能です。
言い方を変えると、自らイベントを作成し、任意のタイミングで呼び出せるようなものです。

「イベント」という概念で実装したわけではありませんが、ここでは便宜上イベントという言い方をします。

Pot.Signal には大まかに以下の関数があります。

attach : イベントを登録
detach : イベントを解除
signal : イベントを実行

Pot.Signal の使用例

Pot.Signal はいろいろな使い方があります。
例えば、

// イベントを登録
//  (第一引数に文字列を渡すと document.getElementById を使用する)
var handler = attach('#foo', 'click', function(ev) {...});

// イベント解除
detach(handler);

上のように addEventListener/removeEventListener の代わりに使用したり、

var MyObj = {};

// 独自のシグナルを登録
var handler = attach(MyObj, 'clear-data', function() {
  // プロパティの初期化など
  MyObj.data = null;
  MyObj.time = null;
});

attach(window, 'load', function() {
  // 初期化するシグナルを送信
  signal(MyObj, 'clear-data');

  // リセットボタンを押した時にもクリアするよう設定
  attach('#reset', 'click', function() {
    signal(MyObj, 'clear-data');
  });

  // 既存の処理など
  myLoadProcess();
  //...
});

上のように attach, signal を独自のシグナルとして使用したりできます。

そして、attachBefore と attachAfter を使うと処理の前後に何らかの動作を追加できます。

// 保存ボタンを押した時のイベントを設定
attach('#saveData', 'click', function() {
  // 保存する関数
  saveData(document.getElementById('inputText').value);
  // ユーザーに保存を伝える関数
  showSaveData('Saved!');
});

// これにフォーカス移動するよう後付けする
attachAfter('#saveData', 'click', function() {
  document.getElementById('inputText').focus();
});

// その前にログを取るよう設定する
attachBefore('#saveData', 'click', function() {
  MyLogger.log('Save inputText');
});

attachBefore, attachAfter はいくつでも登録できます。
登録した順に実行されます。

また、attachPropBefore, attachPropAfter という関数もあります。
これは、attachBefore, attachAfter と違い、
オブジェクトの関数にダイレクトに作用します。
オブジェクトの持つ関数が呼ばれると、自動的に Before, After のハンドラ関数が実行されます。

例えば何らかのアプリケーションを実行する時に、ログをとりたくなった場合。

var MyApp = {
  execute : function() {
    // 何らかの処理を開始する
    myAppDoit();
  }
};

attach('#execute', 'click', function() {
  // アプリケーションを実行
  MyApp.execute();
});

// 実行する前にログを取る
attachPropBefore(MyApp, 'execute', function() {
  MyLogger.log('Begin execute');
});

// 実行した後のログを取る
attachPropAfter(MyApp, 'execute', function() {
  MyLogger.log('End execute');
});

このように設定することで、上の例の場合では
MyApp.execute が実行される前後に任意の処理を追加できます。

解除したくなったら、

var handler = attach(...);

// シグナルを解除
detach(handler);

attach*() 関数の戻り値のハンドラオブジェクトを使い、
detach (Pot.Signal.detach) で解除できます。

他にも detachAll() を使い一括で解除することもできます。

Pot.attach(), Pot.signal() などは Pot.Signal.attach() として実装されていますが、
Pot オブジェクトからも参照できます。
Pot.globalize() を実行しておくと、単に attach(obj, ...) と書けます。
今回の例では attach と表現しています。

これらの関数、とくに Before, After を使うことで、
アスペクト指向 (AOP) っぽいプログラミングが可能となります。

Pot.Signal は Node.js などのサーバでの利用も可能ですが、
Web ブラウザ上、HTML5 での Web Storage (localStorage や sessionStorage) を使う時などに便利と思います。

また、attach 系の関数 (attach*) の後に .once を付けると、一度だけ実行されます。

// 一度クリックしたら解除される
attach.once('#hoge', 'click', function() {...});

Pot.Signal の関数

Pot.Signal.attach(object, signalName, callback[, useCapture]): スロットにシグナルを登録します。
Pot.Signal が保持しているハンドラリストに任意のオブジェクトとコールバック関数を登録します。
引数 object が DOM エレメントだった場合、addEventListener と同じように働きます。
戻り値は、Pot.Signal.Handler のインスタンスです。
Pot.Signal.attachBefore(object, signalName, callback[, useCapture]): スロットに存在するハンドラが呼ばれる前に実行されるシグナルを登録します。
Pot.Signal.attach() で登録したものと同じシグナル signalName で登録した場合、
attach() のハンドラが呼ばれる前に実行されます。
同じシグナルが存在しない場合 signal() によって実行しても何も起きません。
DOM エレメントに対して attach() した場合も同様です。
戻り値は、Pot.Signal.Handler のインスタンスです。
Pot.Signal.attachAfter(object, signalName, callback[, useCapture]): スロットに存在するハンドラが呼ばれた後に実行されるシグナルを登録します。
Pot.Signal.attach() で登録したものと同じシグナル signalName で登録した場合、
attach() のハンドラが呼ばれた後に実行されます。
同じシグナルが存在しない場合 signal() によって実行しても何も起きません。
DOM エレメントに対して attach() した場合も同様です。
戻り値は、Pot.Signal.Handler のインスタンスです。
Pot.Signal.attachPropBefore(object, propName, callback): object が持つ関数 propName が呼ばれる前に実行されるシグナル callback を登録します。
attachBefore() と違い、Pot.Signal.signal() を呼ばなくても
object[propName] が呼ばれた時に自動的に実行されます。
attachPropBefore は、DOM オブジェクトに対しての動作は保証されません。
戻り値は、Pot.Signal.Handler のインスタンスです。
Pot.Signal.attachPropAfter(object, propName, callback): object が持つ関数 propName が呼ばれた後に実行されるシグナル callback を登録します。
attachAfter() と違い、Pot.Signal.signal() を呼ばなくても
object[propName] が呼ばれた時に自動的に実行されます。
attachPropAfter は、DOM オブジェクトに対しての動作は保証されません。
戻り値は、Pot.Signal.Handler のインスタンスです。
Pot.Signal.detach(object[, signalName[, callback[, useCapture]]]): Pot.Signal.attach*() によって登録したシグナルを 1 つ解除します。
attachBefore, attachAfter, attachPropBefore, attachPropAfter で登録したものも同様に解除可能です。
引数に object だけを渡した場合、関連するシグナルが 1 つ解除されます。
引数 signalName, callback を渡すと明確に解除できます。
また、attach() などの戻り値のハンドラを object として渡して解除もできます。
登録と解除の関係は、setTimeout と clearTimeout の関係と同様に扱えます。
DOM エレメントに対しては、 removeEventListener と同様に扱うことができます。
解除成功時に true、失敗時に false が返ります。
Pot.Signal.detachAll([object[, ...signals]]): Pot.Signal.attach*() によって登録したシグナルをすべて解除します。
attachBefore, attachAfter, attachPropBefore, attachPropAfter で登録したものも同様に解除可能です。
引数に object だけを渡した場合、関連するシグナルがすべて解除されます。
引数 signals を渡すと一致するシグナルがすべて解除できます。
シグナル名となる signals は文字列または配列で複数指定できます。
Pot.Signal.signal(object, signalName[, ...args]): Pot.Signal.attach() によって登録したシグナルを実行します。
引数 object と signalName に一致するシグナルがすべて実行されます。
実行される関数には第三引数～以降に任意の引数が渡せます。

PotLite.js

以下は PotLite.js について情報です。
インストールや概要など、不要な場合は読み飛ばしてください。

PotLite.js ダウンロード

レポジトリ

$ git clone git://github.com/polygonplanet/Pot.js

GitHub : polygonplanet/Pot.js

動作環境

以下の Web ブラウザで動作確認済みです。

Mozilla Firefox *
Internet Explorer 6+
Safari *
Opera *
Google Chrome *

また、以下の環境でも動作するよう設計されています。

Greasemonkey (userscript)
Mozilla Firefox Add-On (on XUL)
Node.js
Other non-browser environment

インストール

一般的な方法で動作します。

例:

<script type="text/javascript" src="potlite.min.js"></script>

<script type="text/javascript" src="http://api.polygonpla.net/js/pot/potlite/1.23/potlite.min.js"></script>

Node.js の場合。

// Example to define Pot object on Node.js.
var Pot = require('./potlite.min.js');
Pot.debug(Pot.VERSION);

Pot.Deferred.begin(function() {
    Pot.debug('Hello Deferred!');
}).then(function() {...})
// ...

Greasemonkey (userscript) の例。

// ==UserScript==
// ...
// @require  https://github.com/polygonplanet/Pot.js/raw/master/potlite.min.js
// ...
// ==/UserScript==
Pot.Deferred.begin(function() {
    return Pot.request('http://www.example.com/data.json').then(function(res) {
        return Pot.parseFromJSON(res.responseText);
    });
}).then(function(res) {
    Pot.debug(res);
    // do something...
});
//...

PotLite.js をバージョンを限定して Web から直接読み込みたい場合、
上の GitHub リンクでは常に最新になってしまうため
実装の差異による不具合が発生するかもしれません。
そのため、API サーバを用意しました。

v1.23 : http://api.polygonpla.net/js/pot/potlite/1.23/potlite.min.js

// ==UserScript==
// ...
// @require  http://api.polygonpla.net/js/pot/potlite/1.23/potlite.min.js
// ...
// ==/UserScript==

と記述できます。

Greasemonkey に限らず script タグからでもなんでも自由に使ってください。

jQuery プラグインとしての例:

// jQuery を読み込んだ後に実行。
Pot.deferrizejQueryAjax();

// Ajax 系の関数が Pot.Deferred を返すようになる
$.getJSON('/hoge.json').then(function(data) {
    alert(data.results[0].text);
}).rescue(function(err) {
    alert('Error! ' + err);
}).ensure(function() {
    return someNextProcess();
});

// エフェクトなどを Deferred 化する 'deferred' が追加される
$('div#hoge').deferred('hide', 'slow').then(function() {
    // ( hide() が終了したあとの処理)
});

Pot.deferrizejQueryAjax() は現状、
ライブラリ側で実行しません。
なので、プラグインを使用する場合は
コードの最初などで実行する必要があります。

リファレンス・マニュアル

より詳しい情報はすべてリファレンスに載っています。
基本的な導入や、各メソッド・関数についても扱っています。

Pot.js + PotLite.js - ドキュメントリファレンス - JavaScript非同期処理ライブラリ

動作テスト

以下のページで動作テストができます。
ページを開くと実装されている主な関数・メソッドを全てテストします。

Pot.js + PotLite.js - Test Run - JavaScript Async Library

自動生成されたドキュメント

JSDoc ドキュメント (PotLite.js)

Closure Compiler によりソースコードから自動生成されたドキュメントです。

不明な点、要望やバグや感想などありましたら
@polygon_planet や下のレポジトリから、またはメールでなんでもどぞです。

レポジトリ

polygonplanet/Pot.js - GitHub

フリーズやカクカクしない安定した動作のアプリやアドオン、ゲームなどが作れるJavaScriptライブラリ

2011-11-05T13:02:00.007+09:00

Web を閲覧していると、突然 CPU 100% になったり
定期的に負荷がかかったりします。

flash などを除くと、それ以外のほとんどは JavaScript による重いループ処理が原因です。
少しずつ改善されてるような気はしますが
おそらくもう何年も前から、この問題がついてまわっていたのではないでしょうか。

そしてこのような負荷は、高スペックなマシンでは気付かないと思います。
開発者やテスターが高スペックな PC で動作確認を行ったことにより、
瞬間的な負荷を見過ごされたまま公開、リリースされてしまうこともあると思います。
それを、低スペックなマシンや iPhone などスマホを使っているユーザーが実行し
負荷に耐え切れずカクカクな描画になってしまったり、
最悪フリーズしてしまう場合もあります。

マシンの性能に限らず、例え高スペックマシンでも
いくつものアプリケーションを常時起動していて
タスクがいっぱいになっているユーザーもこのような事例に該当します。

何らかのアプリケーションを開発する場合、
処理の高速化は常に求められます。
より高速に動作したほうが軽快なのは確かです。

ですがクライアントアプリケーションを作る場合、
CPU 100% 使う処理を 10 秒も 20 秒も続けられてしまったら
それはもう不快でしかありません。
さらにそれが非ブロックでなく実行されてたら
マシンはもうフリーズのような動かない状態になりっぱなしです。

単純に高速を目指すのではなく、UI のことを考え制御を返すことが重要です。
UI を無視してひたすら高速に実行して 5 秒かかる処理だったら、
定期的に UI に制御を返し
例え数秒遅くなってもバックグラウンドで行い CPU 負荷を抑えることが
ユーザーへのストレス軽減として重要と考えています。

さらに非同期で実行することで並列化も可能になり、
逆に本来より速く実行できる可能性もあります。

PotLite.js は、そのような負荷軽減を可能とする JavaScript ライブラリです。
非同期処理をチェインで扱う Deferred オブジェクトを中心に
いろいろなループ処理を非同期で実行できるイテレータを実装しています。

イテレータは PotLite.js バージョン 1.21 現在、

forEach
repeat
forEver
iterate
items
zip
map
filter
reduce
every
some

が実装されています。
非同期での実行、同期での実行、そして Deferred チェイン上での実行が可能です。

そして、速度指定できるのが特徴の一つです。

Deferred.forEach(obj, function(value, key) {...})

上のコードが forEach (jQuery での jQuery.each のようなもの) の非同期での通常実行になり、

Deferred.forEach.slow(obj, function(value, key) {...})

上のように .slow と速度を明示することができます。
すると各ループをゆっくり目で実行します。

他にも .fast などの指定ができます。
関数内で return wait(1); 等と Pot.Deferred オブジェクトを返すことで
各ループ間でより細かな wait などの調整ができます。
逆に、非同期イテレートをより速く実行したい場合は
Pot.Defered.forEach.ninja(...) と、
最も速く実行するよう定義されている .ninja を指定すると
通常の for 文を単に関数で包んだのと同じくらいの速度で実行できます。

より詳しくはリファレンスを参照してください。

どれくらい変化があるかベンチマークをとってみました。

イテレータ

JSON ファイルサイズ

CPU 最大使用率

CPU 平均使用率

実行時間 (ms)

for 文

1MB

14.52%

10.61%

1211ms.

jQuery.each

1MB

16.28%

13.53%

1362ms.

Pot.Deferred.forEach

1MB

11.65%

5.53%

1647ms.

for 文

5MB

24.85%

21.71%

4717ms.

jQuery.each

5MB

27.78%

24.29%

5570ms.

Pot.Deferred.forEach

5MB

13.74%

8.61%

8925ms.

for 文

10MB

28.14%

25.92%

10699ms.

jQuery.each

10MB

31.09%

30.77%

15844ms.

Pot.Deferred.forEach

10MB

18.62%

9.77%

38909ms.

この結果は、下記のネストループを Core i3 で 5 回実行した平均結果です。
JSON ファイルは、はてなキーワード一覧から取得した CSV をキーワードだけの JSON に変換したものです。
10MB はキーワードすべて、5MB は半分で切った JSON ファイル、 1MB はそのまた半分です。

Pot.Deferred.forEach によるイテレータは、処理時間が他と比べ長くなっていますが
CPU 最大使用率、CPU 平均使用率共に安定しているのがわかります。

CPU グラフも比較してみました。
すべてのキーワードを対象に、Pot.Deferred.forEach (上) と、jQuery.each (下) をそれぞれ実行した結果です。

jQuery.each は、途中で「警告：応答しないファイル」のダイアログがでてしまいました。
そのため、本来なら Pot.Deferred.forEach のほうが時間がかかると予想してください。

それでも、Pot.Deferred.forEach では jQuery.each に比べ
瞬間的 (もしくは断続的) な負荷を抑えることができています。
これは、対象のデータがどれほど巨大でも
負荷のかからないイテレートが可能なことを示しています。

なお、上記のベンチマークは
ある程度負荷のかかるループ処理 を対象としています。
PotLite.js のイテレータは、各ループがある程度重いと判断すると CPU 負荷を抑えるよう働きます。
つまり、逆に言うと
瞬時に終わるような小中規模のループでは、他のループと変わらない速度で実行されるということです。

以下に、小規模のループ結果を記します。

イテレータ

CPU 最大使用率

CPU 平均使用率

実行時間 (ms)

for 文

4.10%

3.87%

9ms.

jQuery.each

5.54%

4.72%

18ms.

Pot.Deferred.forEach

4.71%

4.15%

19ms.

この結果は、1MB の JSON ファイルを対象にユニーク処理をなくした実行結果です。
上と同じく 5 回実行した結果の平均になります。

PotLite.js は、jQuery.each とほぼ同じ実行速度で、
ちょうど for 文を関数で包んだものを実行したのと同じくらいの速度で実行できています。

このような毎回の処理が小さなループでは、 for 文などが最も適していますが
適度に各関数を使うことでコストも減少させることができます。

以下は、テストの使用したソースコードです。

// jQuery.each
function benchmark_jQuery() {
    $.getJSON('hatena.keywords.json?callback=?', {
        size : '10mb'
    }, function(data) {
        var results = [];
        var start = +new Date;
        $.each(data.keywords, function(k, word) {
            if (!/[^a-zA-Z0-9_.-]/.test(word)) {
                var uniq = true;
                for (var i = 0; i < results.length; i++) {
                    if (word === results[i]) {
                        uniq = false;
                        break;
                    }
                }
                if (uniq) {
                    results.push(word);
                }
            }
        });
        $('#result').text((+new Date) - start);
    });
}

巨大なファイルの転送と負荷のテストのため、ソースのみ記します。

// Pot.Deferred.forEach
function benchmark_potlite() {
    begin(function() {
        return jsonp('hatena.keywords.json?callback=?', {
            queryString : {
                size : '10mb'
            }
        }).then(function(res) {
            var results = [];
            var start = now();
            return Deferred.forEach(res.keywords, function(word) {
                if (!/[^a-zA-Z0-9_.-]/.test(word)) {
                    var uniq = true;
                    for (var i = 0; i < results.length; i++) {
                        if (word === results[i]) {
                            uniq = false;
                            break;
                        }
                    }
                    if (uniq) {
                        results.push(word);
                    }
                }
            }).then(function() {
                return now() - start;
            });
        }).then(function(time) {
            $('#result').text(time);
        });
    });
}

以下は、小規模のループとしてテストしたソースコードです。

// jQuery.each
function benchmark_jQuery_lite() {
    $.getJSON('hatena.keywords.json?callback=?', {
        size : '1mb'
    }, function(data) {
        var results = [];
        var start = +new Date;
        $.each(data.keywords, function(k, word) {
            if (!/[^a-zA-Z0-9_.-]/.test(word)) {
                results.push(word);
            }
        });
        $('#result').text((+new Date) - start);
    });
}

// Pot.Deferred.forEach
function benchmark_potlite_lite() {
    begin(function() {
        return jsonp('hatena.keywords.json?callback=?', {
            queryString : {
                size : '1mb'
            }
        }).then(function(res) {
            var results = [];
            var start = now();
            return Deferred.forEach(res.keywords, function(word) {
                if (!/[^a-zA-Z0-9_.-]/.test(word)) {
                    results.push(word);
                }
            }).then(function() {
                return now() - start;
            });
        }).then(function(time) {
            $('#result').text(time);
        });
    });
}

PotLite.js

PotLite.js は、Pot.js の軽量バージョンです。
非同期処理のオブジェクト/関数だけに絞ったライブラリです。
経緯などは Pot.js に関する以前の記事を参照ください。

概要

PotLite.js は、非ブロックでの非同期処理を直列的に書けるようにし、
UI や CPU への負担を軽減するループ処理を中心に実装された JavaScript ライブラリです。
MochiKit ライクな Deferred オブジェクトにより
様々なイテレート (forEach, filter, map, repeat, some など) を可能とします。

※ここでいう MochiKit ライクとは、JSDeferred とは違い 1 つのチェインが 1 つのインスタンスということです。
※Deferred チェインは JSDeferred や MochiKit.Async.Deferred と同じ感覚で扱えます。

ダウンロード

レポジトリ

$ git clone git://github.com/polygonplanet/Pot.js

GitHub : polygonplanet/Pot.js

動作環境

以下の Web ブラウザで動作確認済みです。

Mozilla Firefox *
Internet Explorer 6+
Safari *
Opera *
Google Chrome *

また、以下の環境でも動作するよう設計されています。

Greasemonkey (userscript)
Mozilla Firefox Add-On (on XUL)
Node.js
Other non-browser environment

インストール

一般的な方法で動作します。

例:

<script type="text/javascript" src="potlite.min.js"></script>

Node.js の場合。

// Example to define Pot object on Node.js.
var Pot = require('./potlite.min.js');
Pot.debug(Pot.VERSION);

Pot.Deferred.begin(function() {
    Pot.debug('Hello Deferred!');
}).then(function() {...})
// ...

Greasemonkey (userscript) の例。

// ==UserScript==
// ...
// @require  https://github.com/polygonplanet/Pot.js/raw/master/potlite.min.js
// ...
// ==/UserScript==
Pot.Deferred.begin(function() {
    return Pot.request('http://www.example.com/data.json').then(function(res) {
        return Pot.parseFromJSON(res.responseText);
    });
}).then(function(res) {
    Pot.debug(res);
    // do something...
});
//...

v1.21 : http://api.polygonpla.net/js/pot/potlite/1.21/potlite.min.js

これは、1.21 の部分をリリース済みのバージョンに合わせて変更できます。
レポジトリに (例えば 1.22 と) バージョンをタグ付けした時に、
あわせて API サーバに置くようにしています。

例えば Greasemonkey で 1.21 を使いたい場合、

// ==UserScript==
// ...
// @require  http://api.polygonpla.net/js/pot/potlite/1.21/potlite.min.js
// ...
// ==/UserScript==

と記述できます。

Greasemonkey に限らず script タグからでもなんでも自由に使ってください。

----

jQuery プラグインとしての例:

// jQuery を読み込んだ後に実行。
Pot.deferrizejQueryAjax();

// Ajax 系の関数が Pot.Deferred を返すようになる
$.getJSON('/hoge.json').then(function(data) {
    alert(data.results[0].text);
}).rescue(function(err) {
    alert('Error! ' + err);
}).ensure(function() {
    return someNextProcess();
});

// エフェクトなどを Deferred 化する 'deferred' が追加される
$('div#hoge').deferred('hide', 'slow').then(function() {
    // ( hide() が終了したあとの処理)
});

Pot.deferrizejQueryAjax() は現状、
ライブラリ側で実行しません。
なので、プラグインを使用する場合は
コードの最初などで実行する必要があります。

リファレンス・マニュアル

より詳しい情報はすべてリファレンスに載っています。
基本的な導入や、各メソッド・関数についても扱っています。

Pot.js + PotLite.js - ドキュメントリファレンス - JavaScript非同期処理ライブラリ

動作テスト

以下のページで動作テストができます。
ページを開くと実装されている主な関数・メソッドを全てテストします。

Pot.js + PotLite.js - Test Run - JavaScript Async Library

自動生成されたドキュメント

JSDoc ドキュメント (PotLite.js)

Closure Compiler によりソースコードから自動生成されたドキュメントです。

久しぶりにちょっとがんばって重点をまとめてみました。
これを機に、Pot.js (PotLite.js) で遊んでくれると嬉しいです。

不明な点、要望やバグや感想などありましたら
@polygon_planet や下のレポジトリから、またはメールでなんでもどぞです。

レポジトリ

polygonplanet/Pot.js - GitHub

ページ内のDOM要素を削除したり操作できるTomblooパッチ

2011-11-03T23:46:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

ページ内の DOM 要素を削除したりします。
主にウザい要素を消し去るのに便利かも。
マウス下の HTML エレメントや、選択範囲の要素を削除できます。
Ctrl+A (全選択) して選択範囲を消すと何もなくなり寂しい気分が味わえます。

こんなことは Firebug で事足りるのですが、
パネルを出したり戻したりするのすらめんどくさいので作りました。

Adblock など常時使ってる方にはあまり意味ないかもしれません。

コンテキストメニューの「Tombloo」から操作できます。

今のところメニューは 2 つだけですが、
なにか思いついたら追加して随時アップデートする予定です。

パッチ (Download or Update):

tombloo.service.actions.element.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

新GoogleReaderで左サイドバー非表示ボタンをつけるGreasemonkey

2011-11-02T09:44:00.001+09:00

このスクリプトはゴミです (コメント参照)。
それでも使う人だけどうぞ。

恥ずかしーーーー！！
記事消そうか真剣に悩んだ……
(教えてくれてありがとう)

こないだから新しいインターフェイスになった Google リーダーにまだ慣れない。
f 押すとフルスクリーンになることを知ったのはいいのですが
マウス操作に慣れてたのでどうしようかと。
そのためにジェスチャー拡張したりマウスボタン拡張したりとかしたくなかったから、
とりあえず Greasemonkey で書きました。
左サイドバーをトグル表示 (表示/非表示) するボタンがつくだけのシンプルなスクリプトです。

Download

Google Reader Layout Expander for Greasemonkey から Install ボタンでインストールできます。

ページのタイトルや(非圧縮の)URLをクリップボードにコピーするだけのTomblooパッチ

2011-10-20T23:13:00.001+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

開いてるページのタイトルや非圧縮の URL をクリップボードにコピーします。
コンテキストメニューの「Tombloo」からコピーできます。
ただそれだけのパッチです。

ちょっとした HTML などを書いてる時や
ブログとかのテンプレートいじってる時、
リンク (<a href="...">...</a>) を作って別タブで開いて
ソース開いてタイトルを <title/> からコピペという原始的なことをやっていたので
思わず恥ずかしくなって作った次第でございます。

Web ページ上でコンテキストメニューを開くと
Tombloo メニューに「クリップボードにコピー」が出現します。

パッチ (Download or Update):

tombloo.service.actions.copytitle.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

JavaScriptでDeferredとイテレータの非同期処理用ライブラリ作ってみた

2011-10-11T18:35:00.001+09:00

Pot.js という JavaScript ライブラリを作りました。

1ヶ月半くらい前からこつこつ書いてたんですが
実は先日、HDD トラブルでソースコードまるごと紛失してしまったんです。
作業ディレクトリごとなくなっちゃってもう涙目でした。
システム復元とかキャッシュとかいろいろ探したりがんばって
HDD の断片から数週間前のデータの一部がいちおう見つかって
そのコードの切れ端みたいのと記憶を頼りに元に戻してるところです。

その作業があまりにめんどくさいので、
とりあえず動くところまで元に戻った
非同期処理のオブジェクトのみライブラリにしようと
PotLite.js としてコミットしました。

あまり巨大なライブラリより結局のところよかったのかもしれないです。
それでも、一部の関数など足りてない気がしてならない。
ぜんぜん思い出せないけど。。

PotLite.js

PotLite.js は、
非ブロックでの非同期処理を直列的に書けるようにし、
UI や CPU への負担を軽減するループ処理を中心に実装された JavaScript ライブラリです。
MochiKit ライクな Deferred オブジェクトにより
様々なイテレート (forEach, filter, map, filter, repeat, some など) を可能とします。

※ここで言う MochiKit ライクとは、1 つのチェインが 1 つのインスタンスということです

Download

最新はレポジトリにあります:

polygonplanet/Pot.js - GitHub

ドキュメント/リファレンス

PotLite.js のドキュメントとリファレンス

特徴

クロスブラウザ + Greasemonkey, Firefox アドオン (XUL), Node.js などで動く
まるで jQuery のように繋げやすい Deferred チェイン
Deferred チェイン上で forEach などのイテレートが可能
チェインのコールバック引数を利用した分割代入 (Destructuring-Assignment) ぽいことが可能
イテレータは各ループ処理の負荷を計算し自動で負荷軽減する
各チェイン間やイテレータで実行速度の指定ができる
重たい処理やループを分散させ軽減することが可能

なんだかあまり思いつかなかった。。

重たい処理の軽減というのは、
前に作った Tombloo の Bookmark パッチで既に近いことを実装してるんです。

というのも、私はブックマークのタグ名をキーワードとして扱ってるせいか
タグ数が 10000 とか超えてどんどん処理が重くなっちゃうんです。

マシンスペックにもよりますが、
そういった大きな配列やオブジェクトをループするたび重くて
落ちないか心配になってるようじゃどうしようもないなと思って
瞬間的な (もしくは数秒～数十秒間続く持続的な) 負荷をどうにか抑えられないかと
いろいろやってますが、ほとんどは分散させるように実行することと
UI に制御を返すことで、だいぶ安定した動作になったのです。

それを Web ブラウザ上でもできないかと
今回実装したライブラリ Pot.js (PotLite.js) の主な目的がそれです。

あとはやはり、JSDeferred の影響が大きいかもしれないです。
MochiKit や dojo (dojo.Deferred) もそうですが、

「JavaScript の高速化とは、単純に速度だけを目指すのではなく
UI スレッドの最短ブロック時間のほうが重要。」

つまり、無理と高速にしたせいでその処理間、
たとえ一瞬でもカクカクとなるようではイカんでしょという感じでしょうか。

PotLite.js の非同期イテレータは、
適度に使い分けることで UI スレッドを独占するような処理の
負荷分散的なツールとして使えると思います。

まだまだ改善の余地はあるのですが、
とりあえず安定して動くかたちになったので
ここで記事も書いておこうと思ったしだいです。
(というか最近ぜんぜんブログ書いてなかった…)

サンプルコード

サンプル的なコードを書いてみます。
ぜんっぜんいい感じの例が思いつかなくて苦しんでるのですが、
サンプルコード書く専用のプログラマがいてもいいんじゃないかしら。。

Pot.Deferred を使って非同期処理を直列化する例です。

まず、Deferred を使わないで書いた場合、

var elem = document.getElementById('output');

// 5 秒後に foo を出力
setTimeout(function() {
    elem.value = 'foo';
    // さらに 4 秒後に bar を付け足す
    setTimeout(function() {
        elem.value += 'bar';
        // そしてさらに 3 秒後に baz を付ける
        setTimeout(function() {
            elem.value += 'baz';
        }, 3000);
    }, 4000);
}, 5000);

上の例は、ネストがどんどん深くなってしまっています。
これを Deferred (Pot.Deferred) を使って書くと、

var elem = document.getElementById('output');

wait(5).then(function() {
    elem.value = 'foo';
}).wait(4).then(function() {
    elem.value += 'bar';
}).wait(3).then(function() {
    elem.value += 'baz';
});

このように書くことができます。
非同期処理を直列的に書けます。

本当はもっと複雑なことに向いてる気もするのですが、
例が思いつかない。。困りました。

というわけで、 PotLite.js でした!

続き!

PotLite.js で実装されてるイテレータについて、
CPU 使用率などを for 文と jQuery.each とで比較した結果を書きました。

レポジトリ

polygonplanet/Pot.js - GitHub

Tumblrでリブログ時にタグの継承を可能にするTomblooパッチ

2011-08-10T07:40:00.000+09:00

Firefox アドオン Tombloo のパッチです。

概要

Tumblr でリブログ時に、付けられたタグも一緒にポストできるようになっています。
いつの間にかはわかりませんが、
とりあえず Tombloo でも同じになるようパッチ作りました。

機能

Tumblr でリブログ時にタグも継承する

パッチ (Download or Update):

tombloo.extractor.tumblr.reblog.tags.js

インストール/アップデート:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール/アップデート。

※直接右クリックからインストールできない場合:
できない場合は
「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

レポジトリ

polygonplanet/tombloo - GitHub

「アカウントの切り替え」ダイアログを内容サイズに合わせてリサイズするTomblooパッチ

2011-08-06T05:11:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

Tombloo のメニュー「アカウントの切り替え」ダイアログのサイズを調節します。

デフォルトの状態ではダイアログのサイズが小さくスクロールがめんどいので大きくするだけです。
ついでにリストボックスに表示されるユーザー名をソートします。

パッチ (Download or Update):

tombloo.service.actions.changeacount.resize.js

インストール/アップデート:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール/アップデート。

※直接右クリックからインストールできない場合:
できない場合は
「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

レポジトリ

polygonplanet/tombloo - GitHub

Google+ストリーム上の画像を原寸大でポストできるTomblooパッチ

2011-08-06T04:58:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能概要

Google+ 用の extractor です。
Google+ のストリーム上の画像を原寸大でポスト (extract) 可能にします。

画像の上でコンテキストメニューを開くと Share に「Photo - Google+」が出現します。
いまのところ画像のみ扱えます。

あらゆる画像が扱えるとは限りません。
リンク画像の場合、リンク先がアクセス制限してる場合など失敗します。

利用については Google+ のポリシー通りです。

パッチ (Download or Update):

tombloo.extractor.googleplus.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

ページやリンクの短縮URLをクリップボードにコピーできるTomblooパッチ

2011-08-05T01:49:00.000+09:00

Firefox アドオン Tombloo のパッチです。

概要

現在のページ URL やリンクの短縮 URL をクリップボードにコピーします。

bit.ly や j.mp など対象のサービスが選べます。
また、シンプルなダイアログ上で短縮 URL を展開する機能もあります。

このパッチは、azu さんの「今見てるサイトの短縮URLをクリップボードにコピーするTomblooパッチ | Web scratch」
を元に作られています。

機能

現在のページの短縮 URL をクリップボードにコピーする
フォーカスリンクの短縮 URL をクリップボードにコピーする
bit.ly や j.mp など使用する URL 短縮サービスが選べる
ダイアログ上で任意の短縮 URL を展開する機能
goo.gl モデルを実装

上の画像はリンクの上でコンテキストメニューを表示した状態です。

パッチ (Download or Update):

tombloo.service.actions.urlshortener.js

インストール/アップデート:

レポジトリ

polygonplanet/tombloo - GitHub

Tombloo.Google+サークル指定可パッチのアップデートについて解説

2011-08-04T23:00:00.000+09:00

こないだの Firefox アドオン Tombloo のパッチ、
「Google+で指定のサークルにポストできるようにするTomblooパッチ」のアップデートについてです。

UI を拡張したら分かり難くなってしまったのでここで解説します。

なお、このパッチをインストールしてない場合は上の元の記事を参照ください。
使用するにあたって、YungSang さん製の Google+ モデルのインストールが必要です。

パッチ (Download or Update):

tombloo.model.googleplus.circle.js

インストール/アップデート:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール/アップデート。

※直接右クリックからインストールできない場合:

できない場合は

「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

最新のバージョン 1.10 (2011-08-04 現在) では、
画像のポストを「引用」か「アップロード」で切り替えることができます。

「引用」は Web から「リンクを追加」で画像を含む場合を模しています。
GooglePhotos (Picasa) にアップロードしないで文章も含めて引用ポストできます。
Tombloo での「Quote」とは違います。 Quote は通常、画像を含めません。
引用の画像サイズは若干小さめで表示されます。

「アップロード」は GooglePhotos (Picasa) にアップロードします。
Web からの「写真を追加」と同じ動作になります。
画像は大きめの表示になります。
そのかわり引用文は含めることができません、コメントのみ追加できます。

引用:

Photo で引用したい画像を Share から選択しクイックポストフォームを開きます。

任意の Google+ サークル/一般アイコンを ON にすると、
「画像を GooglePhotos(Picasa) にアップロード」というチェックボックスが現れます。

このままポストすると「アップロード」になります。
チェックを外すと、

空の状態に表示されるテキストが「Quote Text (Google+)」という入力フィールドがでてきます。
この入力フィールドが「引用」するための文章を扱うフィールドです。

ページ内でテキストを選択すると、

Description ボックス、Google+ 用の Quote テキストボックスの両方に
同じ引用文が挿入されます (同じ動作をさせています)。
Description ボックスの入力内容は Google+ ではコメントとして扱われます。

この状態で POST すると、

上のように通常の「リンクの追加」と同じような結果となり表示されます。

Description ボックスにもテキストがあったのに消えてる訳は、

Description ボックスと Quote テキストボックスが同じ内容だった場合、
Description ボックスのテキストは同一の引用文とみなし無視するようになっています。

違う内容の場合は通常通りポストされます。

アップロード

チェックをした状態で POST すると GooglePhotos (Picasa) にアップロードします。

ポストすると、上のように少し大きめの画像になり「写真の追加」と同じ結果になります。

コメントを入れる例です。
Description ボックスに任意のテキストを入力します。

Web から入力した場合と同じく、コメントが付加されます。

ちなみに私は BAN されているので (2011-08-04 現在)
なかなかデバッグなどが進まず涙目です……。
ポストも +1 もできなかったのですが、先日突然自由になったのでコード書いてたら
途中でまた全部禁止されて…ひどいよ…あんまりだよ……。

レポジトリ

polygonplanet/tombloo - GitHub

TINAMIの画像をオリジナルサイズでサムネイルからでもポストできるTomblooパッチ

2011-07-30T22:58:00.000+09:00

Firefox アドオン Tombloo のパッチです。

概要とか機能

例の pixiv の件があって早速 TINAMI でも同じようなことできたらいいんじゃないかしらと思って
とりあえずパッチは一通り動くようになって、
TINAMI リニューアルのほうも落ち着いてきたようなので記事にしてみた次第です。

TINAMI の画像 (イラスト/漫画/モデル/コスプレ) をオリジナルサイズでポストできるパッチです。
検索ページなどのサムネイルからもポストできます。

ポストと同時に「クリエイターをお気に入りに追加」する model、
「作品をコレクションに追加」する model も入ってます。
model は「Tomblooの設定」ダイアログメニューから有効にできます。

また、作品に付けられたタグを抽出してポスト時のタグ入力欄に自動で加えます。

pixiv のパッチと同じようなものだと思ってください。
それより機能は若干少ないです。

まだサーバーのほうが時間帯によって不安定ぽくて 403 や 500 になることがあります。
そういう時は殆ど取得に成功しないので負荷軽減のためにも時間をおいてみてください。

パッチ (Download):

tombloo.service.tinami.js

インストール:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。

※直接右クリックからインストールできない場合:

できない場合は

「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

レポジトリ

polygonplanet/tombloo - GitHub

インストールされてる全てのパッチを一括でアップデートできるTomblooパッチ

2011-07-29T10:26:00.000+09:00

Firefox アドオン Tombloo のパッチです。

概要

Tombloo にインストールされている数々のパッチの
アップデート状況を調べて更新という作業がめんどくさいので、
ボタン一発でできないかと作ってみたパッチです。

更新するために最初は raw リンクの URL を登録する必要がありますが、
それが済めば、ボタン押すだけですべてのパッチのアップデートを一括で済ませられます。

パッチ (Download):

tombloo.extension.update.patches.js

インストール:

機能

インストールされているすべてのパッチを一括でアップデートできる

インストールすると、上のようにコンテキストメニュー内に
「パッチの一括アップデート」というメニューが出現します。

メニューを実行すると上のようなダイアログが表示されます。

インストールされているパッチがリストボックス内に収められます。
一括アップデートするために、
各パッチの「インストールした URL (raw)」を設定します。
入力ボックスは、ダブルクリックもしくは F2、Enter などでトグル表示されます。
ほとんどは GitHub の raw リンクになると思います。

「更新を確認」ボタンを押すと、
各パッチがアップデートできるかどうかチェックされます。

このパッチはコメントのメタ情報を最優先に見ています。
@ (アットマーク) に続いたキーワード、
「@updateURL」をスペースで区切った URL が使われます。

/**
 * なにかするパッチ
 *
 * @version    1.0.0
 * @updateURL  http://www.example.com/hoge.js
 */

上のようなコメントが記述されていると、
@updateURL が取得でき、
さらに @version でバージョン情報も得られるため、アップデート処理はより確実になります。

この情報が得られない場合、サイズや文字列の diff により判断されますが
間違いなく新しいバージョンとは限らないので確認しながらアップデートすることを推奨します。

※ @updateURL は Fiefox アドオン Scriptish (Greasemonkey) に準拠

アップデートが成功すると通知メッセージが表示されます。

存在するすべての Tombloo パッチを網羅してるわけではないので、
どのような処理がされてるか、パッチ内で何かコンフリクトが起こるべき特殊な処理をしてる場合、
成功しない可能性があります。
そのようなパッチの場合は (今のところ) 手動でアップデートすることになります。
そうそうないと思いますが…。

レポジトリ

polygonplanet/tombloo - GitHub

Google+で指定のサークルにポストできるようにするTomblooパッチ

2011-07-17T15:00:00.001+09:00

Firefox アドオン Tombloo のパッチです。

概要

YungSang さん製の Google+ モデルを使って
Google+ で指定のサークルにポストできるようにするパッチです。

※ このパッチは YungSang さんの Google+ モデルが必要です。
あらかじめインストールしてご利用ください

パッチ (Download or Update):

tombloo.model.googleplus.circle.js

インストール/アップデート:

機能

Google+ で指定のサークルにポストできるようにする

続き(追記):

↓アップデートに関する記事です。
Tombloo.Google+サークル指定可パッチのアップデートについて解説

レポジトリ

polygonplanet/tombloo - GitHub

Googleリーダーにポストしたサイトのフィードを登録するTomblooパッチ

2011-07-14T16:21:00.000+09:00

Firefox アドオン Tombloo のパッチです。

概要

ポスト時にサイトの Feed があれば Google リーダーに登録します。

Firefox からフィードを取得することもできるのですが、
(window.content.getBrowser().mCurrentBrowser.feeds に配列で入ってる)
Google リーダーの QuickAdd に閲覧してるページの URL (例えば拡張子 .html のページ)
を渡すと、解析して適切なフィードを選択、登録してくれるので
その方法にしました。

パッチ (Download):

tombloo.model.googlereader.quickadd.js

インストール:

機能

ポスト時にサイトの Feed があれば Google リーダーに登録する

リブログ時には注意してください。
Quote, Photo などを常に ON にしておくと大変なことになります (私がなりました)。

なので今は Bookmark のみ ON にして使い分けています。

レポジトリ

polygonplanet/tombloo - GitHub

「Audio」と「Bookmark」を追加するTomblooパッチのアップデートについて

2011-07-05T12:44:00.000+09:00

こないだの Firefox アドオン Tombloo のパッチ
『「Audio」と「Bookmark」をポスト一覧に追加するTomblooパッチ』の続きです。

「最新のアップデート確認」というメニューがありながら、
これまでのバージョンは殆ど壊れててアップデートできません。
たぶん、メニュークリックしても何もでない、もしくは
プログレスバーだけでて「アップデートしますか？」というダイアログは出ないで消える。
そんな状態だと思います。
もしかしたらブラウザ起動時にダイアログが出て成功してるかもしれませんが…。

自動アップデート機能が動いてないので、
バージョンアップされないまま使ってる場合は再度インストールしてアップデートをお願いします。
単にリンクを右クリックから「パッチのインストール」で上書きすれば完了します。

注意:

はじめてインストールする場合は、
元の記事『「Audio」と「Bookmark」をポスト一覧に追加するTomblooパッチ』
を参照ください。重要な注意点が記述してあります。
どちらのインストールリンクも同じものです。

パッチ (Download):

tombloo.poster.bookmark.pot.assort.js

インストール:

追加された主な機能

各ブックマークサービスのエントリー数(被ブックマーク数)の表示機能
アップデート機能の修正
コンテキストメニューのアイコンをブックマーク済みならカラーに彩色
スクリプト全体のループ処理を大幅に最適化(CPU使用率など)
「ローマ字入力変換キー設定」を追加
置換したファイルなどが把握できるよう「Bookmarkパッチについて」メニューを追加
livedoorクリップを少しだけBookmarkに合わせて実装
クロスポスト用に Twitter, FriendFeed, はてなダイアリー, Clipp 等を統合

大まかにこんな感じです。

各ブックマークサービスのエントリー数(被ブックマーク数)の表示機能

上の画像のダイアログ上部にある 166 users などのユーザー数のことです。
今のところ、
「はてなブックマーク」「Twitter」「Delicious」「livedoorクリップ」「Yahoo!ブックマーク」
が表示されます。
クリックすると、そのエントリーページ (コメントが閲覧できるページ) を新しいタブで開きます。
ユーザー数が 0 の場合は表示されないものもあります (「0 users」と表示されるサービスもあります)。

コンテキストメニューのアイコンをブックマーク済みならカラーに彩色

これは過去のバージョンでもアイコンが一応変化してたのですが、
メニューの表示速度とブックマークしてるかどうかを取得する通信/処理速度が間に合わず
ゴチャゴチャなことになっていたので、
メニュー表示中に非同期でブックマーク済みかどうかを取得し、
動的にメニューのアイコンを切り替えるよう変更しました。
ラグの大きいサービスでもおそらく違和感なく利用できると思います。

現在表示してるページで、カラーの時がブックマーク済み。

グレーの時は、まだブックマークしてない。という表現です。

でもたぶん、クイックポストフォームのほうに ★ マークでるから活用されないと思う。

「ローマ字入力変換キー設定」を追加

これはタグ入力補完時の漢字のローマ字変換キーを定義します。
例えば、デフォルトは「じ」の変換が「zi」になっているのを、「ji」に置き換えるなど
使い慣れたキーボードマップに置き換えることができます。

メニューから「ローマ字入力変換キー設定」ダイアログを開くと
デフォルトのキーが入力されているので、それを必要に応じて置換してください。

その他

あとは内部的な処理の改善やバグ修正などが殆どです。
ループ処理に関しては、速度が必要なロジック以外は
CPU を喰わないようゆっくり実行しています (体感では気づかない程度のゆっくりです)。

ほか、なにかバグや要望などありましたらコメントやメール、または @polygon_planet に伝えていただけると嬉しいです。

レポジトリ

polygonplanet/tombloo - GitHub

Evernoteのログイン切れてたら自動で再ログインするTomblooパッチ

2011-07-02T17:32:00.000+09:00

Firefox アドオン Tombloo のパッチです。

概要

Evernote は 1 週間ほどでログインセッションがきれてしまい、
その度ログインしなおし、というめんどうな作業を自動化し
セッション切れを感知して勝手に再ログインするパッチです。

機能

ログインセッションきれてたら再ログインする

パッチ (Download):

tombloo.model.evernote.relogin.js

インストール:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。

※直接右クリックからインストールできない場合:

できない場合は
「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

レポジトリ

polygonplanet/tombloo - GitHub

「Audio」と「Bookmark」をポスト一覧に追加するTomblooパッチ

2011-06-19T17:52:00.002+09:00

Firefox アドオン Tombloo のパッチです。

パッチといっても今回のはすごく…大きいです…。機能が多すぎて列挙しきれませんので
簡単に言うと、Photo とか Link, Quote の他に「Bookmark」と「Audio」を追加するパッチです。
Bookmark は、省略しがちなタグやコメントを入力しやすくしたもので、Audio はオマケです。

概要

もともとは、Google ブックマークアドオンの GMarks を使うのやめて
Tombloo で全部統一しようと思ったのがきっかけだったと思いますが、
細かい修正パッチを重ねてくうちに折角だからと他のサービスも手を出して
はてブ、GoogleBookmarks、Delicious、Yahoo!Bookmark、Firefoxのブックマークなど、
主なソーシャルブックマークサービスで殆ど同じに使えるように
おすすめタグの出ないものはキーワード解析し表示するようにし、
タグ名やコメントの最大文字数によるエラーが発生しないよう機能を追加したり
結局のところ細かいところまで機能実装してるパッチの集合体みたいになってます。
Audio は、Constellation さんが作ってる Taberareloo がすでに実装してるので、
それを元にさせていただいて Tombloo でもリブログなど可能になっています。

上の画像の設定ダイアログのように、「Audio」と「Bookmark」が追加されます。

機能

Posters に「Bookmark」と「Audio」を追加実装
設定ダイアログ内にチェック可能な「Bookmark」と「Audio」を追加
Audio のリブログと mp3, wav, ogg, mid, midi リンクからのポストを実装
Audio のローカル保存を実装
ブックマーク用の POST ダイアログを追加実装
はてなブックマーク、GoogleBookmarks など主なサービス対応
主なブックマークエラーを修正および改善
POST ダイアログのコンテキストメニューを拡張
Quote したテキストの「HTML」と「PlainText」を切り替え表示できる項目追加
POST ダイアログが表示されたとき画像が小さいままになる状態を修正
POST ダイアログが半分消えてる状態になって現れた場合のフィックス
タグ補完時に左右キー(←→)で補完窓を閉じられるようイベントを追加
POST 時にタグ名をユニークにして重複防止
タグ名の大文字小文字をユーザー側優先で扱うよう改善(おすすめタグなど)
ブックマーク時に文字数オーバーでエラーになるのを自動で調整カット
ブックマーク済みかどうかを明確にわかるよう改善
タグ付け補助用のキーワード抽出などをメニューに追加
パッチのバージョン確認と自動アップデート機能を実装
メニューからクリックするだけでパッチのアンインストールが可能
FirefoxBookmark などおすすめタグが無いサービスでもキーワードを表示する機能
タグ名補完で読みが想定外なものを本来の読みに一部修正

ほかにも機能や修正などありますが、内部的なことも含むので省きます。

POST フォームはこんな感じです。
タグ入力欄の下に表示されるおすすめタグは、
Firefoxブックマークや GoogleBookmarks でも利用できます。

コンテキストメニューを拡張しています。
上の画像では HTML タグ補助ですが、他にもたくさんあります。
あまりに多いのでここでは説明を省きます。たぶん使ってみるとわかります。

トップメニューの 2 つだけ説明すると、
「キーワード抽出」は、そのページ内の文章からキーワードを抽出し、
テキスト入力欄に結果をだします。

どのメニューも、その時入力されているテキストが対象の場合
テキスト全体を置換する動きをします。
つまりその時のテキストは失われますのでご注意ください。
でも「元に戻す」が有効であれば戻ります。

「マルコフ連鎖で要約」は、入力欄のテキストもしくは「キーワード抽出」と同じく、
そのページ内から文章を取得し、マルコフ連鎖というアルゴリズムで文章を要約し
テキスト入力欄に結果を出します。
あまり賢くはないです。

この 2 つのメニューアイテムは、
タグの他にコメントも検索対象としてるブックマークサービスがあるため、
その目的を楽に済ますために付けました。
でも、過度な期待はしないでください。

設定ダイアログのポスト関連です。

「ショートカット - Bookmarkクイックポスト」
: これはインストール時に「CTRL + D」に設定されます。
通常のブラウザのブックマークの代わりに Tombloo Bookmark のダイアログが出ます。
任意に変更してください (リセットする場合エスケープキー「Esc」です)。
「自動挿入するタグ」: ここに入力したタグは、最優先で常に送信するタグに付きます。
「非公開でブックマークする」: そのままですが、プライベートモードがサポートされてるサービス限定です。
Delicious や YahooBookmarks は利用できます。
チェックをつけておくと、それらのサービスでは常に非公開になります。

あと、いま画像見て気付きましたが…、
「Faves」と「LivedoorClip」は実装してません (Tombloo 既存の機能のみ使える)。
需要あるようでしたら、コメントください。

次のタブの設定ダイアログです。

「メディア(Photo等)をフォルダ分けして保存」: これにチェックを入れると、ローカル (Local) に保存する際、
Photo (画像) を、ホスト名別でフォルダを作り保存するようになります。
例えばこのブログの画像をローカルにポストした場合、
「photo」フォルダの中に「polygon-planet.blogspot.com」というフォルダが作られ
その中に画像が保存されます。
この機能によって、一つのフォルダに大量に保存され開けなくなったなど解消されますが、
デメリットとして、同じ画像が複数のホストにあった場合、重複画像が増えます。
なお、「audio」も、このチェックで作用します。

Quote で選択したテキスト入力欄でコンテキストメニューを開くと、
「テキストと HTML を切り替え」 というメニューが現れます。
この機能は、プレーンテキストと HTML を切り替えて表示します。

アイコンが カラー の時は「HTML 表示中」の状態。

アイコンが グレー の時は「プレーンテキスト表示中」の状態です。

最終的に送信されるのは、1 文字でも編集した場合は表示中のテキストになり、
まったく編集してない場合は、HTML が送信されます。
たとえ HTML 表示中にして、入力欄を空にしても
結局は Tombloo 内部で元の HTML を保持しているので
HTML 表示にして編集した後、
送信するときには未編集のプレーンテキストに切り替えてた場合、
HTML が送信されることになります。

分かり難い…。

このパッチの機能「HTML ⇔ プレーンテキスト切り替え」は、
2 つのテキストボックスがあってそれを交互に表示切り替えしてるわけではなく
単にテキスト入力欄の文字列を 2 つのデータで入れ替えてるだけです。

Tombloo の Quote テキストは、
テキストを選択してクイックポストフォームを開いたときに
HTML とプレーンテキストの両方が保持されます。
そして、送信時 (POST ボタン押下時) に入力欄のテキストが
保持していたプレーンテキストと違えば入力欄のテキストを使い、
同じだった場合は保持していたデータのうち、HTML が優先して使われます。

たんにプレーンテキストで送信したい場合は、
プレーンテキスト表示で改行やスペースなど 1 文字でも変えればいいわけです。

今まで通りの使い方をしたい場合は、そのままポストでいいと思います。

注意というかプレーンテキストの改行は自動で <br /> タグなどは付かないです。

このパッチは自動でアンインストールとアップデートができます。

なぜかというと、/tombloo/chrome/content フォルダの中のスクリプトを置換しているからです。
そのため、インストール時にバックアップを作り、アンインストール時に元に戻しています。
その影響で、既にユーザーの手でソースコードが編集されてる場合や
ファイル名が変わっていたりパスが違ったりするとインストール/アンインストール共に失敗します。

置換/バックアップするファイル:

tombloo/chrome/content/quickPostForm.xul
tombloo/chrome/content/prefs.xul
tombloo/chrome/content/completion.xml
tombloo/chrome/locale/ja-JP/tombloo.dtd
tombloo/chrome/locale/en-US/tombloo.dtd

インストール/アンインストール/アップデートのチェックはしましたが、
編集済みの環境の場合、インストールする前にバックアップをとってください。
編集済みでなくても、できるだけバックアップしたほうがいいです。

とくに Mac 環境でテスト出来ていないので、Mac で動いた場合は報告いただけると嬉しいです。
他にもバグや要望があればコメントまたはメールか @polygon_planet で伝えてくれるとうれしいです。

そしてめずらしく長々(?)と書きましたが、そういう理由で
あえて下のほうにインストール/ダウンロードリンクを置きました。
このパッチは理解なしでインストールして途中で失敗すると戻せなくなる可能性があるのです。
ここまでやるならフォークしたほうがよかったんじゃ…とか思ったけどそれにはまだまだ…。
他にも書くことあった気がするけど忘れました…。

追記
思い出しました。
「HTML ⇔ PlainText 切り替え」は、HTML のテキストを可視化することで
巧妙な方法で スクリプトが埋め込まれてる場合に確認 できるようにと付けた理由もあります。
Tombloo は、ある程度のサニタイジングを行いますが 100% ではないのです。
とは言っても滅多にないと思います。
Quote したら確認程度に一度、切り替えてみるといいかもしれません。

パッチ (Download):

tombloo.poster.bookmark.pot.assort.js

インストール:

続き

アップデートされた機能に関する記事です。↓
「「Audio」と「Bookmark」を追加するTomblooパッチのアップデートについて」

レポジトリ

polygonplanet/tombloo - GitHub

TwitterにPOSTするとき先頭に“見てる”を付けてタイトルを括弧で囲うTomblooパッチ

2011-06-02T01:18:00.000+09:00

Firefox アドオン Tombloo のパッチです。

このパッチは、
azu さんの「TomblooからTwitterにポストするときに、頭に”見てる:”と付けるパッチ | Web scratch」や、
toby さんの　「Firefox拡張のTomblooからTwitterにポストするときに、タイトルにカギ括弧を付け見やすくするパッチ - 技術文化遺産復興日記」
が元になっています。

概要

Tombloo からダイアログを通して (または直接) Link 等で Twitter にポストする時、
ダイアログ内の Description に何も入力しなかったとき、
自動で先頭に “見てる” などの代替テキストを付けてくれるパッチ。
また、“見てる” などのプレフィックスを違うテキストに変更したい時のために、
Tombloo コンテキストメニュー内に「代替テキスト設定用ダイアログ」が追加される。

機能

Twitter ポスト時にタイトルを括弧 (「」) 等で囲う
タイトルに括弧が使われてる場合、違う括弧に自動で切り替える
Twitter ポスト時に先頭に “見てる” 等の代替テキストを自動で付加できる
コンテキストメニューから代替テキストの編集用ダイアログが利用できる

「OK」ボタンで保存されます。キャンセルする場合は「×」ボタンを押してください。

パッチ (Download):

tombloo.extension.twitter.enclose.js

インストール:

レポジトリ

tombloo.extension.twitter.enclose.js at master from polygonplanet/tombloo - GitHub

Peggyキーワード定義CRECのECMAScript5版「ac_javascript185.kwd」作成

2011-05-24T15:04:00.000+09:00

なんかいまさら感がすごいですが、
Peggy/PeggyPad のキーワード/カラー定義 CREC の
「JavaScript 1.8.5 / ECMAScript 5」用定義ファイルを公式うｐしました。

アンカーシステムズのメニュー「ライブラリ」→
「CREC ユーザ定義ファイル、言語サポート DLL」に「ac_javascript185.kwd」があるのでそれです。

Peggy インストールフォルダの「share」に突っ込むと認識されます。
そのへんは公式を参照ください。

カラー定義は適当に選んだので環境によっては変な色になるかもです。
わかる範囲はデフォルトの JavaScript の色と同じにしましたがもしかしたら違うかもです。

E4X は完全に定義できませんでした。単純なものだけ色分けされます。
(これがやりたくてはじめたのに…)

たぶん、CREC では無理なんだろうと思い込むことにしています。

DOM、E4X (XML)、CSS (CSSStyleDeclaration)、XMLHttpRequest、JSON 等を定義してるので、
プロパティ名などがかぶってるものがあります。

そういうものは優先度順で色分けされます。
問題あれば標準の JavaScript に戻すといいです。

POST完了時に通知メッセージを表示するTomblooパッチ

2011-05-19T10:12:00.000+09:00

Firefox アドオン Tombloo のパッチです。

機能

ポスト完了時に画面右下に通知メッセージが表示されるようになる
Tumblr にポストした時のいくつかのエラーを解消する *1

最初 (特にダッシュボードでのリブログ時) はウザいと思われます…、
でも慣れるとけっこう便利かも。

パッチ (Download):

tombloo.service.post.notify.js

インストール:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。

※直接右クリックからインストールできない場合:

できない場合は

「Tomblooパッチのインストールに失敗しなくなるパッチ」のパッチ/記事をインストールもしくは参照ください。

ブラウザ再起動してもポスト時に通知メッセージが表示されない場合は
不具合と思われるのでコメントください。

レポジトリ

tombloo.service.post.notify.js at master from polygonplanet/tombloo - GitHub

*1:

エラーの解消といってもエラーを修正したわけではなく、
特定のエラーは「再度 POST ボタンを押すことで重複なく成功する」ので
そういったエラーの場合は自動で再度同じ内容を 1 ～ 3 回程度ポスト試行するだけです。
その際の通知メッセージのラベルには [RETRY] と書かれます。

Tomblooパッチのインストールに失敗しなくなるパッチ

2011-05-04T04:06:00.000+09:00

Firefox アドオン Tombloo のパッチです。
Firefox 4 になってからコンポーネントの動作が変わったところがあって、
特に「パッチのインストール」に失敗するようになっています。

具体的には、github に対して HEAD メソッドで Tombloo ライブラリの request 関数を使うと
Content-Type が text/html で返ってきてしまう、という点です。

処理の中で Content-Type が text/javascript もしくは text/plain じゃないと失敗扱いなので、
このパッチではそのへんの条件をゆるくしています。
あと HEAD の戻り値に期待しないよう変更しています。

かなり条件がゆるいので、関係ないところで「パッチのインストール」が選択可能になるかもしれません。
そういう場合は無視してください。
間違えて JavaScript じゃないファイルをインストールして Tombloo が動かなくなった時などは、
下で説明するパッチのフォルダ内で不正なファイルを削除または移動、リネーム等してください。

パッチ (Download):

tombloo.service.actions.installpatch.fix.js

インストール:

※なんか毎回説明してますが不要な人はとばしてください

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。

※直接右クリックからインストールできない場合:

できない場合は {ProfD}/tombloo/script ディレクトリ (設定依存) に
「tombloo.service.actions.installpatch.fix.js」と名前を付けて保存し、

最後に、
メニューの「ツール」→「Tombloo」→「Tomblooのリロード」(もしくは Firefox 再起動) でインストール完了です。

{ProfD} は、

WinXPの場合:

C:\Documents and Settings\{ユーザー}\Application Data\Mozilla\Firefox\Profiles\{ハッシュ値}.default\extensions\tombloo\script

Mac (たぶん) :

~Library/Application Support/Firefox/Profiles/{ハッシュ値}.default/tombloo/script

上記のようなパスがデフォルトで、
Tombloo の設定で「データ/スクリプトディレクトリ」を変更してる場合はその場所になります。

レポジトリ

tombloo.service.actions.installpatch.fix.js at master from polygonplanet/tombloo - GitHub

Tombloo.pixivパッチにサムネイル画像のズーム表示機能付けたよ

2011-05-02T14:15:00.002+09:00

こないだの Firefox アドオン Tombloo のパッチ
「pixiv からブックマークと同時に POST できる Tombloo パッチがサムネイル対応」をアップデートしました。

前バージョンでサムネイル対応したものの、
もう少し画像を大きく表示できないものかと思うことが多々あり
小さいサムネイルイラスト画像をズームできる機能を付けました。

画像をクリックするとズームして拡大表示できます。
ズームした状態でも pixiv ポストが可能です。

本来の作品 (イラスト) ページに行くには、

イラスト画像の下または横にあるテキスト、
作品のタイトルがリンクになっているのでそこから移動できます。

今回追加/改善された機能

pixiv のサムネイル画像をクリックすると拡大表示される
ズーム機能の ON/OFF 切り替え可
今までポストしてから数秒待たないとエラー出てたのが改善して連続ポストできるようになった

ON/OFF の切り替えは、

コンテキストメニューの Tombloo に、
「Expand pixiv thumbnail image」というメニューが追加されます。

メニューの pixiv アイコンの色が、 カラー の時は ON の状態、

グレー の時は OFF の状態です。

変更点

作品の「ブックマーク」と、ユーザーに対する「お気に入り追加」を別々の models に分けた

今まで直接スクリプトを編集してくださいとか言ってましたがその必要はなくなりました。

User がついてるほうがユーザーに対する「お気に入り追加」です。

パッチ (Download):

tombloo.service.pixiv.js

パッチの URL とインストール方法は変わってませんがいちおう。
説明不要な人はとばしてください。

インストール:

上のパッチリンクを
右クリック→「Tombloo」→「Tomblooパッチのインストール」でインストール。

※直接右クリックからインストールできない環境があるっぽいです。

できない場合は {ProfD}/tombloo/script ディレクトリ (設定依存) に
「tombloo.service.pixiv.js」と名前を付けて保存し、

最後に、
メニューの「ツール」→「Tombloo」→「Tomblooのリロード」でインストール完了です。

{ProfD} は、

WinXPの場合:

C:\Documents and Settings\{ユーザー}\Application Data\Mozilla\Firefox\Profiles\{ハッシュ値}.default\extensions\tombloo\script

Mac (たぶん) :

~Library/Application Support/Firefox/Profiles/{ハッシュ値}.default/tombloo/script

上記のようなパスがデフォルトで、
Tombloo の設定で「データ/スクリプトディレクトリ」を変更してる場合はその場所になります。

インストールすると「Tomblooの設定」ダイアログ内に pixiv アイコンが現れます。

レポジトリ

tombloo.service.pixiv.js at master from polygonplanet/tombloo - GitHub

そういえば機能的に Greasemonkey のほうがいいなと思ったけど、なんでおパッチにしたのかもう忘れた…。

しばらく Tombloo 関連の記事が続きそう。

Tumblrサブ垢からリブログをボタン押すだけで自動化するGreasemonkeyスクリプト

2011-04-21T05:26:00.002+09:00

もともと自分用に使ってたんですが、せっかくなので公開することにしました。
とは言ってもサブアカウントを使ってて
メインへまとめる作業を自動でできないかなーと思ってるような人限定になりますが。。

AutoSubReblogize という Greasemonkey スクリプトです。

インストール:

AutoSubReblogize for Greasemonkey

↑のリンクから「Install」ボタンを押すとインストールが開始されます。

(最近 userscripts.org にアクセスすると 502 が多いですがリロードで大抵いけます)

使い方:

インストールすると、

アドオンバー/ステータスバー/ツールバーにある、Greasemonkey アイコンから
「ユーザスクリプトコマンド(C)」に「AutoSubReblogize - Settings」というメニューが追加されます。
まずここから設定します。

メニューをクリックすると、

↑のようなダイアログが表示されるので、各項目にそれぞれ入力します。

一番上のテキストボックス:: サブアカウントの URL を入力します。
複数ある場合は改行区切りで入力します。
トップページの URL を入力してください。
リブログから除外するアカウント名:: 入力したアカウント名が既にリブログしてる場合スキップするようになります。
通常、メインのアカウント名を入れます。
メインアカウントのメールアドレス:: そのままですが、Tumblr API を使ってる都合上必要になります。
メインアカウントのパスワード:: これも Tumblr API を使ってる都合上必要になります。

メールアドレスとパスワードは、
SSL や WEP などで広く使われているストリーム暗号 ARCFOUR によって暗号化されます。
Greasemonkey 内に保存されるだけですがいちおう。

設定が完了して OK ボタンを押すと保存されます。
そしてサブアカウントのページを開くと

ページの左上に ↑ のようなパネルが表示されるようになります。
これをクリックすると自動リブログが開始されます。

実行中は↑の画像のように、
画像などを表示するコンテンツパネル、ステータスが流れてくテキストボックスが中央に表示されます。

左上の「Click to Stop」と書いてあるパネルをクリックすると途中で中止できます。

約 3 ～ 6 秒おきにリブログが続きます。

その他:

Tumblr の調子がわるい時などはエラーが頻発しますが、そういう時はほとんど失敗するし
Tumblr サーバーに負担をかけないためにも中止して別の時にしましょう。

リブログの重複防止については、notes を見て判断してますが
POST された時からある程度の期間が経つと、どうもうまく取得できないようです (未確認)。
API が返す notes が稀に抜けがあるのは確認。
そういう時は再度取得というわけにもいかないので仕方がないです。

あと、Tumblr のデフォルトのテーマ (なんか最初は青っぽいやつ) にしておくと、
notes の自動取得や Permalink の Fix など通常のリブログを楽にできるようにしてくれます。

ちょっとした懸念点ですが、サブアカウントの URL のみ実行するとはいっても
他のページでもある程度スクリプトを読み込まれるわけです。
メモリ使用量などが気になる方は、直接ユーザースクリプトを編集して、

// ==UserScript==
// @name           AutoSubReblogize
...
// @include        http://polygonplanet*.tumblr.com/  ←ここにサブのURLを書く
// @exclude        http://polygonplanet.tumblr.com/   ←ここにメインのURLを書く
// @exclude        http://www.tumblr.com/
...
// ==/UserScript==

こんな感じで設定しておくと、他の URL は完全に除外されるのでメモリコストも減ります。
そのかわり、サブの URL が変則的な場合は毎回設定しないとなのでめんどうかもしれません。