まず、TwitMgr に引き続き、OAuth 対応を果たしました。何とか、BASIC 認証の期限に間に合って良かったです。
また、要望の多かった逆順投稿について対応しました。

逆順投稿については、投稿者自身のプロフィールページで見たり、普通のフォロワーの TL 上では、上から順に読めるので読みやすくなる一方、TL の流量が多い人から見ると、途中で分断されてかえって読みにくくなる事がある諸刃の剣かとは思います。
まあ、Splitwit の連続投稿に割り込まれるレベルで TL の流量が多いユーザは、そんなに多くないとは思うので、実用上問題になるケースは稀少でしょう。

それと、ヒントの表示の仕方を今風の味付けにしました。
今後、機能追加をしていくと、ヒントの行数がかさんでくるかも？という考えがあって、事前にスペースを確保したというところです。

他にも追加機能の要望を頂いているので、実装方法について検討してみようと思います。
まずは、OAuth 対応を間に合わせることが重要だったので、いったんリリースします。

BASIC 認証から、OAuth 認証へ変更するにあたっては、どうしても使い勝手が低下してしまうのは避けようがないところで、そこが残念ではあります。
どうせ OAuth 認証にするならいっそ、サーバサイドをしっかり作り込めばユーザビリティの低下を最小限に抑えられるはずなのですが、元々 JavaScript だけで作られていたものを移植するとなると、ほぼ作り直しになってしまうので、現状で出来る唯一の手段としてはこんなところです。

というのは前置きでして、JavaScript による OAuth 認証について突っ込んで考えたので、以下本論。

TwitterAPI2.js (というか実質は、TwitAPI.js) を使った OAuth 認証では、js ファイルを読み込むたびに、毎回必ず OAuth 認証の確認画面を表示する仕様としています。
プロキシサーバで OAuth 認証を行う構成なので、やろうと思えば、初回アクセス時のみ確認を取る、という事も可能なのですが、そのようにしていないのにはセキュリティ上の理由があります。

TwitAPI.js では、同ライブラリで公式のプロキシサーバを用意していて、公式プロキシサーバに対して許可した OAuth 認証については、その情報がプロキシサーバ側に残ります。
なので、毎回、認証画面を表示するようにしないと、あるアプリ A に対して許可したつもりの OAuth 認証が、他のアプリ B からも簡単に流用できてしまうのです。
毎回許可を得る形であれば、他のアプリ B から無言でいきなり OAuth 認証が悪用されることは避けられます。

クッキーに保存した情報を組み合わせて認証することで、あるアプリ A (ドメイン a) に対して許可した認証を別のアプリ B (ドメイン b) から利用させないようにする実装も検討しましたが、TwitAPI.js の立場から、任意のアプリ A が信用できない以上、アプリ A に XSS があれば同じ事になってしまうので、クッキーを使った実装も見送りました。

Twitter API を JavaScript から利用可能にするための実装は、TwitAPI.js 以外にも見かけますが、そういったセキュリティ上の対応はどうなっているんでしょうかね？調べたことはないですが興味はあります。

JavaScript の場合、そのソースが、設定情報も含めて全て公開されてしまうので、OAuth 認証において本来であれば秘匿すべき情報 (Consumer secret とか最たるもの) を隠すのは困難です。というか、原理的に不可能です。

TwitAPI.js では、プロキシサーバを経由することで、TwitAPI.js 専用のハッシュを発行して Consumer secret を秘匿していますが、専用ハッシュが漏れた場合に備え、前述の「毎回認証画面」でセキュリティを保っているという形です。(専用ハッシュが漏れなくても、TwitAPI.js では共通プロキシを使用している時点で必須です。)
JavaScript で簡単に OAuth を利用したいという要求と、セキュリティを担保するという要求は相反する点が多く、現状で考え得る落としどころはそこであろうという判断です。

JavaScript による OAuth 認証で、初回のみ認証画面が表示されるような実装のアプリがあった場合、原理的にその OAuth 認証は、他のアプリから悪用されうるのではないかと考えています。
この点、もっとスマートに解決するやり方があれば、是非、識者の意見を伺いたいです。

ぶっちゃけていうと、TwitterAPI2.js にいろいろとバグがあって使い物にならないケースがあったので慌ててアップしたという形です。
バグ以外にも、既存の TwitterAPI.js でサポートしていながら、TwitAPI.js でサポートできていなかった機能も追加して、結果的に互換性が向上しています。

これでようやく、TwitMgr の OAuth 対応が完了しそうな感じです。
こちらも近日公開予定。

初回認証時に、サーバからのレスポンスが遅いと無反応になってしまう問題に対応するため、レスポンスが返るまでの間、waiting の表示を入れるようにしました。
ローディング画像風の動くテキスト表示なんかも入れたので、ユーザビリティは向上したんじゃないかと思います。

そろそろ Twitter API の BASIC 認証も期限切れなので、このバージョンと TwitterAPI2.js を使って TwitMgr と Splitwit の OAuth 対応もちゃちゃっと済ませたいところですね。

そこで、TwitAPI.js を従来と同じインターフェースで利用可能にするラッパを TwitterAPI2.js として公開しました。

元々 TwitterAPI.js を使っているアプリケーションであれば、読み込むライブラリを差し替えるだけで、従来と同じように使う事が出来ます。
TwitMgr や Splitwit もこちらのライブラリに置き換え予定ですが、出来れば置き換え前に、TwitAPI.js に残った TODO を片づけたいですねー。

特に、認証用のポップアップの起動が遅いのはなんとかしたいです。

まだまだ荒削りなバージョンですが、とりあえず基本的な動作は可能になったので Ver 0.1.0 として公開です。
当面は完成度の向上を行って、いずれは TwitMgr と Splitwit を OAuth 化させていきたいですね。

TwitAPI.js はインターフェースを一から設計し直したので、旧版にあたる、TwitterAPI.js と互換がありません。
そのあたりは専用のラッパを書く予定なので、そこがすんなりと実装できれば、TwitMgr と Splitwit もあっさりと対応完了するはずなんですけどね。

中身のテキストが変えられないのでとりあえず暫定公開。

Select Art – 選択反転すると画像が出てくるジェネレータ

【2010-06-03 追記】

• デザインを整えた
• 中身のテキストを変えられるようにした
• タイトルも付けられるようにした
• 変換結果を保存出来るようにしてパーマリンクも作った

というわけで完成！

【2010-06-04 追記】

• フォントサイズを可変にした (ver 1.0.1)
• 「人気のアート」欄付けた (ver 1.1.0)

とりあえずこんなもんです。実装のアイディアは出し切りました。

やはり最初に何かを学ぶ時は、書籍を使うのが一番早いと思います。
そこで、後述の理由もあって、これまでに読んだ技術書の書評を作りました。
だいぶ古い本も含まれているので、その後改版されていないかも調べた上で、一覧にしてあります。

改版「あり」となっている本は、古い内容を元にしたレビューですので、その点割り引いて読んで欲しいです。書籍タイトルのリンク先は amazon の最新版です。
とはいえ今回、書評を書くにあたって、パラパラとめくってみましたが、普遍的な内容は今もまだ色褪せないですね。

レビュー

そもそも何でこんなエントリを書いたかというと…

いま、自宅の机の周りをかなり根本的に片づけていて、もう読まなくなった技術書がたくさん出てきました。
「片づけること＝捨てること」なので、どっさり捨ててしまおうかとも思ったのですが、全部買ったら結構な額になるのでそれももったいない。
それで色々考えた挙げ句、お世話になった大学のサークル (神楽坂一丁目通信局) に寄付してみるのはどうかと思い立ちました。

とはいえ、正直に言ってだいぶ古い本も含まれます。
自分が後輩の立場なら、「ゴミ捨てにくんなよ！」って思うような本も混ざってそうです。
なので、このリストの中から必要なものだけ選んでもらえればいいかなと思います。
残念ながら選ばれなかった本には、古本としての価値もなさそうですし、天寿を全うしてもらいましょう。

jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。

下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。

HTML

<table id="tablefix">
    <thead>
    <tr>
        <th rowspan="2">ヘッダA</th>
        <th rowspan="2">ヘッダB</th>
        <th colspan="2">ヘッダC</th>
        <th rowspan="2">ヘッダD</th>
        <th rowspan="2">ヘッダE</th>
    </tr>
    <tr>
        <th>ヘッダ C-1</th>
        <th>ヘッダ C-2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    <tr>
        <td>データ</td>
        <td>データ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
        <td>データデータデータデータデータデータデータデータデータデータデータデータ</td>
    </tr>
    </tbody>
</table>

JavaScript

$(function() {
    $('#tablefix').tablefix({width: 500, height: 200, fixRows: 2, fixCols: 2});
});

実行結果

その種明かしはちょっと後に回しておいて、とりあえずどんなことが出来るモジュールなのかを紹介します。

こうやって実行すると…

use SSSCoding;

print SSSCoding::expand('div') . "\n";
print SSSCoding::expand('a') . "\n";
print SSSCoding::expand('a:mail') . "\n";
print SSSCoding::expand('div#id.class1.class2') . "\n";
print SSSCoding::expand('#head+#body+#foot') . "\n";
print SSSCoding::expand('div#id>ul>li') . "\n";
print SSSCoding::expand('ul>li#id$*5') . "\n";

こう出力されます！

<div></div>
<a href=""></a>
<a href="mailto:"></a>
<div id="id" class="class1 class2"></div>
<div id="head"></div><div id="body"></div><div id="foot"></div>
<div id="id"><ul><li></li></ul></div>
<ul><li id="id1"></li><li id="id2"></li><li id="id3"></li><li id="id4"></li><li id="id5"></li></ul>

本来の Zen Coding には色々な機能がありますが、とりあえず CSS っぽい記述を HTML に展開する機能のみ実装しています。
というか、自分が使いたいのがそこだけなので。

サポートしている識別子は、id を指定する “#”、class を指定する “.”、繰り返しを指定する “*”、繰り返し回数を出力する “$”、子エレメントを指定する “>”、兄弟エレメントを指定する “+” です。
評価順を指定する “()” については実装が面倒だったので未サポートです。書くと変な感じになります。
後述の目的のため、改行などを入れて整形する機能もないので、”()” を使うほど大袈裟な利用はしないだろう、という目論見でもあります。
今後使ってみて、必要を感じたら実装するかも知れません。

また、文法エラーのチェックはしていないため、誤った文法を渡すとメチャクチャな結果になりますが、そこは了承の上で使って下さい。

任意のエディタで Zen Coding を使う

さあ、ここが本来の目的です。
種明かしをすると、この Perl モジュールを使って、ATOK のプラグインを作ればいいのです。
そうすれば、任意のエディタで Zen Coding が利用可能になりますね。

br とか a とか頻繁に使うタグを、辞書登録したことがある人は多いんじゃないでしょうか？
それを動的に行う、超強力版といったイメージです。

もちろんエディタのみならず、ブラウザのテキストエリアでも使えるので、ブログを書く時とか便利かも知れません。
その気になれば、Word でだって Excel でだって利用可能です。

そんなわけで、最終目的は ATOK プラグイン化なのですが、実はまだ出来ていません。
とりあえず Perl 単体で動く状態になったので公開しようと思った次第です。
プラグイン化が完了したらまたアップしたいと思います。

まだ ATOK 16 を使っていてプラグインが使えないので、まずは ATOK のバージョンを上げないと…。

ダウンロード

SSSCoding.pm

ライセンス

ライセンスは MIT License (日本版 wikipedia の項) で公開します。

その他

Perl で実装しているので CGI にもしやすいかと思います。ウェブサービスを作ってみてもいいですね。
あるいは PHP とか、他の言語への移植も簡単では無いでしょうか。ニーズはさておき。

SSSCoding.pm の中で、閉じタグを使わないエレメントは、%SSSCoding::SINGLES で、各エレメントに追加する属性については、%SSSCoding::ATTRS で定義されています。
必要に応じて修正して使って下さい。

モジュール名について

Zen Coding を名乗るには実装が中途半端ですし、名前がぶつかって何らか問題になるのも嫌だったので、モジュール名自体は全く別の名前にしました。
“Style Sheet” Style Coding の略で、SSSCoding としています。