ソースを見ればわかる通り、jQuery.getJSON()とほぼ同じで、jQuery.get()のラッパー。将来を見据えてエンドポイントは設定で指定できるようにしようかと少し考えたけど、それは別にQuery YQL v2(またはQuery YQL v1)プラグインとか作ってやれば良さそうだと思ったので実装しなかった。色々オプション設定できるようにして複雑化させたらこのプラグインを書いた意味ないし。

使い方

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.query-yql.js"></script>
<script type="text/javascript">
var statement = "select * from feed where url='http://example.com/rss'";
$.queryYQL(statement, function (data) {
  // do something with "data".
});
</script>

と、script要素で読み込んでおいて、式とコールバック関数を引数にjQuery.queryYQL()を呼ぶ。式は丸投げなので、最近実装されたinsertやupdate、deleteもちゃんと使える。ちなみにjQuery.getJSON()で同じものを書くと、

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
var statement = "select * from feed where url='http://example.com/rss'";
$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
  format: "json",
  q: statement
}, function (data) {
  // do something with "data".
});
</script>

ちょっと読みやすく、エンドポイントのURLを調べ(覚え)なくて済むのでかなり書きやすい。

また、第二引数にxmlを指定すると、最近実装されたJSONP-Xモードになる。

var statement = "select * from html where url='http://example.com/' and xpath='//a'";
$.queryYQL(statement, "xml", function (data) {
  // do something with "data".
});

最初の例のように第二引数がコールバック関数の場合や第二引数でjsonを指定した場合はJSONPを利用する。

YQLのJSONP-Xの返すJSONデータ

Query YQLプラグイン自体とはあまり関係ない話だが、テスト・コードを書いている途中で若干はまったので触れておく。YQLのJSONPとJSONP-Xでは返ってくるJSONデータの構造が微妙に違う。JSONPでは、

{
  "query": {
    "results": {}
  }
}

とresultsがqueryの子になっているが、JSONP-Xでは、

{
  "query": {},
  "results": []
}

と双方がルートにある。単なるYQL側の実装ミスかもしれないので、今後ともこの形かどうかはわからないけど今は注意が必要。10分はまった僕が言うのだから間違いない。

プラグインにしたらしたでプラグイン・ファイルをコピーしてscript要素を書くのが面倒な気がしてくるという……。短いコードのプラグインなのでコピペで使うとかも良いかもしれない。

プロクシCGIはただただしさんのamazon-auth-proxyをPerlでCGIモジュールを使って書き直したものを使っている。このCGIスクリプトに署名認証導入前のリクエストをそのまま投げてやれば良い。AWSAccessKeyIdは僕のアクセスキーIDに変更して署名を作成するので、特に変更する必要はない。

なおXREAのインストールされているPerlが5.6系なサーバーではURIモジュールが1.30と古くuri_escape_utf8()が無かったり、Digest::SHAモジュールがインストールされてなかったりするので、少し手を加えてやる必要がある。uri_escape_utf8()の実装はURIモジュールからコピーして来れば良い。Digest::SHAモジュールの代わりは、Digest::SHA::PurePerlモジュールをライブラリ・パスに置いてやるのが手っ取り早い。Perl 5.6系なXREAサーバーで動作するものも公開しておく。

また、ただただしさんのamazon-auth-proxyもRuby 1.8.7以上が必要(多分)で1.8.5なXREAサーバーではObject#tapとSymbol#to_proc(open( uri, &:read ))のところでエラーになる(Ruby知らないのでググって調べただけ)ので、適当に書き換えてやる必要がある(参考: 今までの人生でRubyのコードを100行くらいしか書いたことがない人が動作するように書き換えたもの)。

署名認証については公式フォーラムでAmazon側が

よって、OSSのユーザ様それぞれにAPIのAccessKeyIDおよび秘密キーを利用開始時に入力いただくという方法を強くお勧めいたします。

と、かなり無理がありそうなことを言っていたりする。オープンソース・ソフトウェアのユーザーならアカウントの取得とかできない奴はいないだろうみたいな感覚なのかな。必ずしもオープンソースというわけではないがソースは公開されてしまうソフトウェアでかつユーザーの敷居がものすごく低いもの、例えばFirefoxの拡張とかではこの方法はかなり厳しい気がする。そもそもAPIレベルの変更でデベロッパーだけではなくエンド・ユーザーにも対処を要求するというのは馬鹿げていると思う。

中継プロクシによる署名認証の実装はユーザーに手間をかけさせずに対応できるのだけど、第三者に利用されまくるという問題がある。署名認証は送信されたリクエストが誰によって送られたものかを確認するためのプロセスであるということなので、第三者に利用されまくると意味をなさなくなってしまうんじゃないかなぁ。

署名認証はなかったことになりましたというアナウンスを心待ちにしている。誰でも使えるプロクシ実装はやっぱダメでしたとかいうアナウンスが出そうで怖い。

pngcrushのWindows向けバイナリはダウンロード・ページの下の方にあるpngcrush-executablesの方からダウンロードできる(2009/07/03時点ではpngcrush-1.6.15-win32.zipが最新)。pngcrush-1.6.19.zipとかはソースのみなので注意。関係ないけどsourceforge.netは見づらくなった気がする…。

あるPNGファイル(input.png)から不必要と思われるメタデータを削除して圧縮したPNGファイル(output.png)を作成するには、

$ "C:\Program Files\pngcrush\pngcrush.exe" -rem alla -l 9 input.png output.png

とコマンド プロンプトで実行してやれば良い。-rem allaと指定すると、削除してもあまり影響のないメタデータを削除してくれる(removes all known ancillary chunks except for tRNS)ので、-rem gAMA -rem sRGB -rem tEXtなどと個別に指定する必要はない。-l 9は-bruteでも構わないが、-l 9の方が速い。

@echo off

move %1 %1.bak
"C:\Program Files\pngcrush\pngcrush.exe" -rem alla -l 9 %1.bak %1

以上のようなバッチ・ファイルを作れば、ドラッグ・アンド・ドロップ(や送る等)から一発で削除して圧縮できるようになる。

メタデータを確認したい場合は、

$ "C:\Program Files\pngcrush\pngcrush.exe" -n -v input.png

とコマンド プロンプトで実行してやれば良いが、かなり読みづらい。閲覧に関してはGUIなTweakPNGで行うのが良さそう。

いちいちバッチファイルに通すのは面倒くさいというのなら、メタデータを出力しないオプションを持つSuperPNGというPhotoshopのPNG書き出しプラグインを使うというのも悪くはない。圧縮率も5段階で調節できるのでそこそこ使える。

Bフレッツでは使えない

フレッツ 光ネクストにコース変更をする必要がある。どうしてなのかはあまり説明してくれなかった。「フレッツ・テレビはネクストにしないとだめなんです！」みたいな。変更には特にお金がかかるとかそういうことはないらしいが、微妙にすっきりしない。

ONU一体型ルーター

新規でフレッツ 光ネクストの回線を引き、同時にフレッツ・テレビを導入する場合はONU一体型ルーター(PR-S300SE/GV-ONU)一台で済む。ONUとルーターを縦に二つ並べたもので、真ん中あたりで短いLANケーブルでつながっている。そのONU一体型ルーターのONU部分からTV等へは同軸ケーブルでつなぎ、ルーター部分にある4つのLANポートからPCや無線LANルーターに接続する。このONU一体型ルーターにはひかり電話向けのモジュラージャックも2個あったりもする。けっこうでかい上に横設置は不可らしいのでかなり設置場所を選ぶと思われる。サイズは幅4cm・高さ24cm・奥行き17.5cm。筐体の色は黒。別にPCカード型の無線LANアクセスポイント(純正以外のものでは動作するらしい)を挿すとa/b/gの無線LANルーターにもなるらしい。

しかし、既にフレッツ 光ネクストやBフレッツの回線を引いている場合は、今使っているONUとこのONU一体型ルーターの両方を使うことになるらしい。どうして取り替えてくれないのかは説明してくれなかった。「ダメなんですよー」と繰り返すのみ。

ひかり電話

同時にひかり電話を導入するのがおすすめらしい。お安くなっていますよとか言われても困る。デメリットをまったく説明されなかったので華麗にスルーした。初っ端に「フレッツ 光ネクストにするとひかり電話も導入することになります」みたいにさりげなく混ぜられたので、同時にひかり電話にしなくちゃならないのかと一瞬勘違いしてしまった(実際はそんなことはないのだけど)。個人的には良い機会かもしれないとは思うけど、IP電話はまだなんとなく敬遠してしまう。

ONU一体型ルーターにモジュラージャックが2つあってそこからつなぐだけなので、その近くに電話機を設置するなら接続は簡単。

工事

基本的に複雑なことは何もやらない方針らしい。NTTでやってくれることは、

• ONU一体型ルーターの設置
• 上記に伴う回線の取り回し

だけ。ONUの位置を2階から1階に変更するとかそういうことなら無料でやってくれるらしい。

TV側及びLANの配線等はオプティキャスト(フレッツ・テレビで利用することになる放送サービス会社)の方で頼むことはできる。公式サイト等で参照できる工事費はあくまで最低の値段で、同軸ケーブルを壁に這わせるとかそういう作業は別料金(想像できると思うけどかなりの値段)。

単に一台のTVに接続するだけなら、ONU一体型ルーターから同軸ケーブルで分配器へつなぎ、分配器からTVの地上波デジタル端子とBSデジタル端子にそれぞれ同軸ケーブルで接続するだけ。ONU一体型ルーターのコネクタは一般的な同軸ケーブルのものなので特に接続は難しそうではない。同軸ケーブル*3と分配器は別途購入する必要がある(使用中のものを流用できると思う)。オプティキャストのテレビ接続工事説明ページにあるBSデジタルアップコンバータは必要なくなっている(ONU一体型ルーターに組み込まれているということらしい)。

複数台のテレビを設置する場合はブースターが必要になる可能性があることや家庭内の分配器がどこにあるかをしらべなくてはならないとかややこしそうなので、素直にオプティキャストに頼んだ方が良さそう。高いけど…。

また不必要になるBSのアンテナ(や地上波のアンテナ)の撤去等はNTTもオプティキャストもやってくれない。「よく頼まれるんですけどね～」とかおっしゃってた。そこはぼったくりでも良いからやればいいのにとか思ったけど言わなかった。別に電気屋に頼む必要がある(ヤマダ電機で聞いたら「3万円くらいは頂くことになりそうですね」って言われた)。

月682.5円？

実際には毎月683円請求されるらしい。年決めで8190円(682.5円*12)払うとかそういうことではない。683円って書けよとか思ったけど言わなかった。

月6720円？

これはプロバイダパックで契約した場合のプロバイダ料金とフレッツ回線使用料の合計金額(プロバイダによって多少違う)。フレッツ・テレビの月額利用料は含まれない。BIGLOBEだとBIGLOBE光 with フレッツとかいう名称で提供されているもの。コース変更で乗り換えた場合も2ヶ月無料とかそういうサービス(プロバイダによって違う)は受けることができるらしい。プロバイダパックを利用しない場合は、5460円+プロバイダの月額利用料(1500-2000円位が多い)。もちろん2ヶ月無料などのサービスもない。

導入する方向で検討しているんだけど、いまいち踏ん切りがつかない。見積もり届いてからまた考えよう。

今までの普通の綿+パイプのまくらとは違うゆっくり沈み込む感じとねっとりとした感触にまだちょっと違和感がある。同じ低反発系のウレタンチップ+パイプのとかも探してみれば良かった。7cmという厚さはあまり気にならないが、幅が44cmと短いのがちょっとアレかも。

同じ無印のまくら用敷くだけひんやりシートもちょっと欲しくなった。店舗で触ってみたら本当にひんやりしてた。どういう仕組みなのかまったくわからない。

ちょっと間が空いたのでどうでもいいエントリを書いてみた。

てか、無印のネットストアはかなりダメな感じが…。

• 在庫ありとなしがものによって(たぶん大型家具など)は不正確であいまい
• 在庫チェックが別ウィンドウ
• 在庫チェックの時に毎回郵便番号を入力させられる(ユーザー情報で郵便番号入力してるのに)
• ログインしてもカートの内容を記憶しない(ログアウトすると空になる)
• 上記の合わせ業で、在庫が微妙なものを在庫ができたかどうか調べながら注文しようとすると同じ作業をひたすら繰り返すことになってとても面倒
• カートのページがhttpだったりhttpsだったりする

衣料品とか在庫が潤沢なものを買う時には気づかなそうだけど、大型家具とかを買おうとするとはまりまくる気がする。

追記

• 検索結果のページから商品のページを新しいタブ等で開けない(リンクがjavascript:スキームなので)
• 検索結果のページから商品のページへジャンプすると戻れない(履歴に残らない移動方法なので)

検索結果のページが酷かったことを思い出したので追記してみる。これはない。新しいタブで開くことができず、かつ検索結果に戻れないので、一回の検索で一つの検索結果しか開くことができないという…。

ユニットシェルフのシミュレーターもFlashなのにFirefoxで動かないようにしてるとか謎なとこが多いなぁ。

このドキュメントは開発者向けではない。かといってデザイナ向けの特別な何かがあるわけでもない。主にターゲットになるのは、

• バージョン管理システムをほとんど触ったことがない人
• ちょっとは使っているけどブランチとか良くわからない人
• 他のを覚えるのがやっとでGitとか言われても困るという人

あたりになると思う。内容はGitの基本的なコマンドの使い方を通して、バージョン管理システムをざっと説明するとかそういう感じ。これを読めばあとはヘルプだけで良いというようなものではないが、Gitを始める時のとっかかりにはなると思う。

deployとかcodebaseとかうまい訳語が思いつかない。

var s = $("<u/>").text(s).html();

これだけでsが文字参照に変換される。どう変換されるかは各ブラウザのinnerHTMLの仕様に依存するのだと思う。

思いついた時はreplace()並べるよりはマシかなと思ったけど、直感的なコードではないので一長一短。各ブラウザがきっと良きに計らってくれるであろう点はなかなか良い気もする。

短いエントリだ。

YQLへのクエリは、

select * from atom where url='http://blogsearch.google.co.jp/blogsearch_feeds?scoring=d&output=atom&q=link:http://example.com/foo/bar.html'

という感じで、エントリのフルパスを指定してやれば良い(http://は削らなくてもOK)。scoringパラメータで日付順にするかどうかは好みで。日本語のブログに限定にするならlr=lang_jaとかを追加すれば良い。

はてブの実装がどうなっているかは知らないんだけど、きっとブックマークされた時にリンクをリストアップしてると思うので、ブックマークされてないページからのリンクは拾えないんじゃないかと思う。Googleブログ検索の方はフィードを配信しているサイトのからのリンクならほぼ全て拾えると思うので、より多くのリンクを拾えるのではないかと思う。逆にスパム・ブログみたいなものも含まれてしまうとも言える。そういう意味でははてブのリストの方が洗練されたものであるかもしれない。どっちもどっち。

使い方は多くのjQueryプラグインと同じで、

$("body").highlightSearchTerms();

と検索語のハイライトを行いたい要素からつなげて使う。プラグイン側でインライン・スタイルを付加したりはしないので、デフォルトのem.highlightに対してスタイル指定をあらかじめしておく必要がある。

highlightSearchTerms()にはオプションとして、

$("body").highlightSearchTerms({
  className: "search-keyword",
  referrerPatterns: [
    "^http://ask\.jp.+[?&]q=([^&]+).*$"
  ],
  unsafeChars: "[!-*,-/:-@[-`{-~]"
});

このように指定することができる。

classNameは強調する時に使用するem要素に指定されるclass属性。デフォルトはhighlight。

referrerPattersはリファラを評価する正規表現のパターン。配列なので複数指定可能。デフォルトでGoogle(comとco.jp)・Yahoo!(comとco.jp)・Bingの計5つが設定されており、オプションで指定されたものとマージされる。オプションで指定したものが先に評価され、マッチした時点で評価のループを抜けるので、デフォルトのパターンよりも優先されることになる(上書きではないが、近い挙動になる)。例えば自分のサイト内検索のリファラを拾うようにするためには、

$("body").highlightSearchTerms({
  referrerPatterns: [
    "^http://hail2u\.net.+[?&]q=([^&]+).*$"
  ]
});

とかしてやれば良い(これはこのサイトの場合の例)。

unsafeCharsは検索語から削除する文字列の正規表現パターン。デフォルトではほとんど全ての半角記号を削除するようになっている。なので、記号が強調されることはない。あまり指定する必要はないと思うが一応。むしろデフォルトの削除パターンをもっと充実させたい。このオプション指定は追加ではなく上書きなので注意が必要。

また、デバッグ用にreferrerというオプションがある。

$("body").highlightSearchTerms({
  referrer: "http://www.google.com/search?q=lorem+ipsum+dolor+sit+amet"
});

とすることによってdocument.referrerの代わりにreferrerで指定されたURL(URLじゃなくても通っちゃうけど)が検索語の取り出し元になる。なので、色々なリファラを想定して試すことができる。

ビルトインのリファラ・パターンはパブリックにしてあるので上書きしてしまうことも可能。だが、オプションで優先して評価させることができるのでそっちを使った方が無難だと思う。コードも汚くなっちゃうし。

中身のコードはあまり変わっていない。変えたところは$("*").not("iframe")というような感じで書いていた部分をfind()と:not()セレクタを使うようにしたことくらい。

this.find(":not(iframe)").contents().each();

という感じになっている。jQueryのここらへんの柔軟性はすごくて、XPathなんか目じゃないね(おおげさ)。

検索サイトのURLパターンとか調べて書くのがちょっと面倒だったので、こういうのはオープンなデータベースがあったら便利かもしれないなと思った。パラメータごとにきちんと分けてデータベース化すれば、こういうリファラから検索語を強調するスクリプト(ユーザー・スクリプトも含め)とかに使う以外にも、アクセスログ解析とかは勿論、逆に検索を投げるためにも使えそう。「言うだけならタダだよね」。ですよねー。てか知らないだけで既にありそうな気もする(検索してない)。

$("#contents > .section *").not("iframe").contents().each(function () {
  if (this.nodeType === 3) {
    var s = this.nodeValue.replace(words, "<em class=\"highlight\">$1</em>");
    $(this).replaceWith(s);
  }
});

だけ。wordsにはリファラから取得した単語の正規表現が入っている。このサイトではメインのコンテンツは必ず#contents > .section以下にあるので最初のセレクタはこうなってるが、$("body *")とかでもOK。そこからテキスト・ノードも含めて拾えるcontents()、each()と繋げて全ノードを走査する。で、テキスト・ノードだったらnodeValueから内容(テキスト・データ)を拾い、replaceWith()でノードの内容を置き換えている。

テキスト・ノードを全部拾うまではすぐに書けたけど、replaceWith()を知らなくて色々変なことやってた。親ノードに戻ってノード作り直して入れ替えとか。

jQueryのcontents()はiframe要素だけ特別扱いしているので、iframe要素だけ除外しておいてやらないと、Internet ExplorerやOperaでjQueryがエラ－を吐く。Firefoxではエラーが出なかったのでちょっとはまったが、Operaの開発者ツールで原因を調査できたので助かった。

ここには既に導入してあるので、「圧縮フォルダ エクスプローラ キビキビ zipfldr - Google 検索」などからこのサイトを開くとハイライトされる。