http://www.otchy.net Otchy の技術ネタ。JavaScript 率と Twitter 率がやや高く、他にも PHP/Java/Perl などなど。共通点は Web。 Sun, 07 Mar 2010 21:52:31 +0000 http://backend.userland.com/rss092 ja Excel のウィンドウ枠の固定のように、テーブルのヘッダや左側を固定して、残りの部分をスクロールさせるための jQuery プラグインを書きました。 マークアップはシンプルで、普通にテーブルを書いたら、jQuery の作法でプラグインを呼び出すだけです。 jQuery のおれおれプラグインはいくつか書いた事がありましたが、こうやって公開するのは初めてです。ごてごての機能が欲しいんじゃなくて、単に既存のテーブルを固定スクロール化したいだけの時に、いいのが見つからなくて書いたので、けっこうニーズがあるんじゃないかと思ってます。 下記は簡単なサンプルです。詳細は専用ページを見てみて下さい。 HTML <table id="tablefix"> <thead> <tr> <th rowspan="2">ヘッダA</th> <th rowspan="2">ヘッダB</th> <th colspan="2">ヘッダC</th> <th ... http://www.otchy.net/20100308/jquery-tablefix-js-had-released/ 今、最高にアツい Zen Coding (ソースは自分) の Perl 実装を書きました。 これがあれば、(今すぐではありませんが) 手に馴染んだ任意のエディタ全てで、Zen Coding を使用することが出来るようになります。 何故かって…？ その種明かしはちょっと後に回しておいて、とりあえずどんなことが出来るモジュールなのかを紹介します。 こうやって実行すると… 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 ... http://www.otchy.net/20100225/zen-coding-for-perl/ 知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ で紹介されていた、Zen-Coding が激しく気になって、常用している Eclipse で使いたいと思ったのですが、どうも Aptana で無いとすんなりとは動いてくれない様子。 調べていくと、Zen-Coding は、Aptana 自体の機能ではなく、Eclipse Monkey なる Eclipse プラグインの機能を用いて実現しているようだったので、普通の Eclipse でもちゃんと設定すれば動作するのではないかと踏んで、試してみました。 以下、普通の Eclipse で Zen-Coding を有効にする方法です。 Eclipse Monkey のインストール ヘルプ → ソフトウェア更新 → 検索およびインストール サイトの追加 → http://download.eclipse.org/technology/dash/update/ 「Eclipse Monkey」「Mozilla Rhino」をインストール しばし待つ → ... http://www.otchy.net/20100224/zen-coding-for-general-eclipse/ Splitwit Ver 1.0.0 をリリースしました。 TwitMgr のデザインをそのまま踏襲したので、思いつきからリリースまで約半日でのスピードリリースになりました。 さてこの Splitwit、何をするためのツールかというと、140 文字の制限がある Twitter の中で、その制限を超えて投稿するためのツールです。 もちろん、既存でも同様の目的を達するためのツールはあるのですが、別サービス上に長い文章を書いて、Twitter への投稿はその冒頭部分だけで、残りはリンクで別サービスに飛んで下さい。というのが普通だったりします。 そもそも、そこまでの長文を書くつもりは無いんだけど、ちょっと長すぎて 140 文字に収まらないような時、わざわざ他の場所に書くのって面倒じゃないですか？ Twitter クライアントで TL を見ている時に、わざわざ外部の URL を開いて投稿の内容を確認しないといけないのって、嫌じゃないですか？ そんなわけで、140文字を超える内容を適宜分割して、連続投稿出来るツールを作りました。 分割といっても、140 文字ぴったりにはこだわらず、なるべく読みやすい位置で分割をするようにしたり、連続投稿といっても、一定のバッファを設けることで、スパム判定されにくくしたり、といった工夫を凝らしています。 また、各投稿にはヘッダとフッタを指定出来るので、連続投稿の関連性を分かりやすくすることも出来ます。 そんなこんなです。ご意見ご感想など、是非お寄せ下さい。 http://www.otchy.net/20100223/splitwit-100-had-released/ Google Chrome v4 で正式対応したエクステンションの自分向けまとめです。 完全に自分向けですが、エクステンションごとにコメントを付けておいたので、誰かの参考になればいいかなぁと思います。 実質的には今使っているエクステンションのリストなので、内容に変化があったら随時更新する予定です。 ブラウズ Handy Google Shortcuts 単に Google の各サービスへリンクするだけですが、Google に依存しまくっている人は便利。同種のエクステンションだと、Google Apps Shortcuts の方がメジャーなようですが、対応しているサービスがこちらの方が多く、プルダウンから直接新規メールとか作りたいのでなければこちらがお勧め。自分がよく使うサービスだけ表示するように設定変更して使います。 SimpleGoogleBookmarks ソーシャルブックマークとしてはてブを使う一方、「よく参照するサイト」という本来の意味のブックマークとして Google Bookmarks を使っているので入れてます。タグによる絞り込みの他、日本語対応のインクリメンタルサーチが秀逸。 ツール Chromed Bird シンプルに使える Twitter クライアントです。他にも API を使うツールがある場合、初期設定だと API を使い切る事が多いので、設定変更推奨。Firefox の Echofon 代替。 Google Wave Notifier Google Wave の Notifier (まんますぎる) です。wave は Gmail ... http://www.otchy.net/20100205/my-chrome-extensions-list/ 最近公開された、Google Chrome の Ver 4 では、正式に Greasemonkey がサポートされ、以前のように特別なオプションを指定することなく、ワンクリックでユーザスクリプトがインストール出来るようになりました。 それ自体は非常に嬉しい事だったんですが、バージョンアップに伴い、はてブ with Twitter が動かなくなってしまっていました。(現在は修正済み) 以前、JavaScript だけでクロスドメインで POST メソッドを送る方法で紹介したやり方が、Chrome のバージョンアップによって無効になってしまったためです。 無効になったとはいえ、通常の JavaScript として使用する分には問題なく、Greasemonkey だけに問題が発生していました。 動的に生成した iframe の contentWidow オブジェクトが取得出来なくなっており、セキュリティの制限が強化されたものと思われます。 最終的にはその制限を回避する方法を見つけたので、以下に解説します。 通常 JavaScript の記述 まず、Greasemonkey ではなく普通の JavaScript としてJavaScript だけでクロスドメインで POST メソッドを送る方法等を参考に、本来やりたい処理を記述します。 この時は普通に script タグでスクリプトを読み込んで、正常動作を確認しておきます。 そして、正常に動作するスクリプトが作成出来たら、それを任意のサーバにアップします。 Greasemonkey の記述 以下のようなスクリプトを書きます。 (function() { var d = document; var s = d.createElement('script'); ... http://www.otchy.net/20100129/chrome-greasemonkey-cross-domain-post/ 自前のサーバに短縮 URL を設置したい場合の超シンプルな実装、Simple Shorten URL を作りました。DB を使わずに実装したので、レンタルサーバとかでも気軽に動かせるかと思います。 限定された URL 以下の URL のみ短縮可能で、特定用途にしぼった使い方を想定しています。もちろん短縮対象の URL と生成される短縮 URL のドメインは異なっていても構いません。 詳細については、Simple Shorten URL を見て下さい。 OTCHY.NET 専用短縮 URL は http://otchy.net で動作しています。 簡易実装と侮る事なかれ。 ひたすらシンプルな実装にしたのでかなり高速に動作する上、自分専用という事で、ハッシュの長さを 3 にしているので、otchy.net で使うと、http://otchy.net/XXX となり、実は bit.ly の http://bit.ly/XXXXXX と同じ長さだったりします。 興味があればお試しを！ http://www.otchy.net/20100129/simple-shorten-url/ TwitterAPI.js のバージョンアップにあわせて、TwitMgr の Ver 1.5.1 をリリースしました。 TwitterAPI.js のバージョンアップによって、Firefox 3.6 に対応したり、地味なところでは API の多重アクセスがあってもエラーにならなくなったりしています。 TwitterAPI.js に Ver 0.9.3 で実装した再ログイン機能についても、TwitMgr に取り込んだので、複数アカウントを管理したい人は便利になったんじゃないかと思います。 フレンズとフォロワを取得する API の仕様が変わったために上手く動作していなかった部分についても修正しました。 従来の API はページを指定する事で、100 件を超えるユーザを取得していたのが、カーソルを指定する事で取得するように API が変わっていたのですね。 フォロワがせいぜい 1,000 くらいまでのうちは別にページ式でもいいですが、100,000 件とか言うユーザも英語圏ではザラにいるので、そういうケースに対応しやすくするためでしょう。 従って、何件中の何番目、という遷移はできなくなり、「次へ」「前へ」式の遷移になりました。 また、フレンズとフォロワの管理についてはカーソル式に対応したのですが、そこで力尽きたので「分析」機能についてはいったんオミットしています。 この辺はまたいずれ復活させたいところですね。 http://www.otchy.net/20100127/twitmgr-151-hadreleased/ TwitterAPI.js の Ver 0.9.4 をリリースしました。 一部、不具合の修正もありますが、メインは Firefox 3.6 に対する対応です。 元々 Firefox のブラウザ判定にワンライナー (/a/[-1]=='a') を使っていたのですが、それが 3.6 から無効になり、Fx 3.6 で正常動作していませんでした。 こういうイレギュラーなのはあんまり使うもんじゃ無いですね…。 一方、UTF-8 以外の文字コードで使用した場合に、Chrome で文字化けする問題の解決も試みましたがダメでした。 document.createElement('iframe') した iframe は、元のページのエンコードにかかわらず UTF-8 で生成されるのが Chrome 以外のブラウザの実装なのですが、Chrome だけは律儀に元のページのエンコードを引き継ぐため、文字化けが発生してしまっています。 meta タグで Content-Type を指定してみたり、document.open で、Content-Type を指定してみたりしたのですが上手くいかず挫折です。 誰か Chrome 上で元のページのエンコードにかかわらず、UTF-8 の iframe を生成するいい方法を知っていたら教えて下さい。 http://www.otchy.net/20100126/twitterapijs-ver-09-had-released/ OTCHY.NET を開設して、このブログに最初の記事を投稿したのは、2008 年 12 月 23 日の事で、それから約 1 年経ちました。 今回は、2010 年までブログが続いたら是非やりたいと思っていた企画、自ブログのアクセス数ランキングを発表したいと思います！ おかげさまで昨年の1年間で、ブログのアクセス数自体は順調に伸び続けました。(年末の落ち込みは、Web 全体のアクティブ率が落ち込んでいるせい…と信じています。) 途中、目立った山が 2 カ所ありますがその部分については、ランキングの解説の中に書いていきます。 果たして、最もアクセス数を稼いだブログ記事は何だったのでしょうか？ はてブを付けて頂いた数のランキングについては、メニューの中にブログパーツを貼り付けてあって常に表示された状態なので、ここではアクセス数を元にしたランキングを発表します。 トップ 3 [1]Twitter ボットの作り方 Perl 編 (1) 2009 年の栄えある第 1 位は 「Twitter ボットの作り方 Perl 編 (1)」でした！ 期間を空けて連載した記事の第 1 回になります。連載が完結する前から結構アクセスが多く、興味を持ってもらった方が多かったのだと思います。 連載完結後に目次を追加してからは、目次のアクセスもかなり伸びたのですが、その時点ではすでに Google 的にも第 1 回の評価が高く、注目度では常に第 1 回の記事がトップでした。 記事を書く立場としては、まとめとしての目次を最初に読んでもらえた方が全体の見通しが良くてお勧めなので、今度また連載記事を書く事があれば、その辺を気にしたいと思います。 最初に目次を公開して、目次の内容については順次更新するなどでしょうか。 「Twitter＋ボット＋作り方」検索 では、ずっと上位にいるので Google からの流入が多いですね。 今もってアクセス数の稼ぎ頭といえます。 [2]とほほさん騒動まとめ(結論はとほほ(杜甫々)さん≠平志朗氏) そして、とほほさんの騒動のまとめが次点でランクインしました。 詳細は記事内容を読んでもらうとして、Twitter 世界の情報伝達の早さに驚いた事件です。 まとめ記事としてもスピードが重要と考え、情報の裏が取れた直後からすぐに書き始め、1時間足らずでまとめ上げましたが、まだ混乱が収まらない時期に公開してしまったので、一時期はアクセス集中によりサーバダウンの憂き目を見ました。 サーバが落ちている間、OTCHY.COM に同内容のプレーンテキストをおいて、アクセスをそちらに誘導するなどしたので、そこのアクセスまでカウントに入れれば 1 位はこちらの記事だったかもしれません。 それほど Twitter 爆発の破壊力はすさまじかったです。はてブのホッテントリに "かする" 程度はそれまでも何度かあったり、いわゆるアルファブロガーの方に紹介されたりした事もあったのですが、それらからのアクセスを軽く凌駕するアクセスがほんの数時間のうちに集中しました。 最初に出したグラフの右側の山は、この記事に対するアクセスが殆どになります。 [3]ちんゃと よゃちめう？ジェネレータ。 冒頭のグラフの左側の山が、この記事へのアクセスになります。 読めることが間違い？ : ... http://www.otchy.net/20100103/blog-entry-ranking-2009/