Web scratch

Archive for 6月, 2011

ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログの内容を更新した。

• Hebikuzure’s Tech Memo
• Internet Explorer デベロッパーセンター
• Mozilla Flux
• Google Chrome OS & Chromebook Review Tips Themes How to Use Install and Learn

などを追加して更新しました。

後、alice0775さんのブログの内容(というかスクリプト群)がalice0775′s Profile – GitHubに移行していました。

• Titanium StudioとTitanium Mobile 1.7をリリースしました « Appcelerator Developer Center
• InfoQ: Appcelerator の Titanium Studio がデビュー

ちょっと触っただけの雑感です。本質としてとらえてはいけません。
Titanium (Mobile|Desktop)については全く触れていないため、そういうものについては参考にはならないと思います。
というか、Titanium (Mobile|Desktop)向けのものを書かないのに、Titamium Studioを選ぶ理由はない気がするので、タイトルのような事が目的ならばベースが同じAptana Studio 3を使った方が良いでしょう。

gistに置いたファイルの最新版を常に参照するraw masterなURLが最近変更されたり、昔使えた方法が使えなくなっています。

詳細は以下を参考に

以前はURLに.txtとつければよかったので、特に何もしなくても不便はしなかったのですが、2011年6月15日現在はraw masterなURLへのURLにするにはちょっと書き換える量が多いのでGreasemonkeyを書きました。

gistのページのファイル名の横にraw master URLへのリンクを追加するGreasemonkeyです。
Scriptishの場合は、リンクをクリックするだけでクリップボードにURLをコピーします。

この仕様変更により、Greasemonkeyで.txtでrequireしてたりするスクリプトは新しくインストールすると死んでいると思うので確認が必要になるかもしれません。

Software is hard | Page load analysis using Firebug の記事を元に書いています。
January 18th, 2010に書かれた時点での例を使用しているため、現在のブラウザでは若干挙動が違うかもしれません。
また、著者のJan Odvarkoさんに翻訳許可は頂いていますが、翻訳というより意訳や自分の理解のために書いていたので、いろいろ書き加えたりしています。
Net panel(ネットパネル)について理解したいと思って書いたので、Net Panel自体の解説記事Software is hard | Introduction to Firebug: Net Panelも一緒に読むといいかもしれません。

翻訳許可のメールをわずか15分で返してくれた著者のJan Odvarkoさんに感謝を。
Thnak you, Jan Odvarko.

前提知識として以下が必要です。

• リンクのようなボタンを作る: Days on the Moon
• javascript scheme でボタンを作るのは ? | ヨモツネット

clickイベントに使うためだけに<a href=”#”>text</a>とか(下の例の1,2番目)やるのが嫌いで、どうやるのがスマートorシンプルなんだろと思って書き出したもの。input、button 要素がでてこないのはスタイルシート考えるのが面倒で何となくです。button要素をCSSでリンクのようなデザインにできるならそれでもいいじゃないでしょうか。

• クリッカブルなボタンとRoleのデモ

1番目は今時ない気がするし、1,2番目は状態が遷移しないのにhref指定してると、ミドルクリックなどで別のページとして開けたりしちゃうのでそれを抑制するコードも必要になるのが何か嫌で、3番目当たりが個人的には好きだった。(4番目は何か気持ちわるい)

<div><a href="javascript:void 0;">javscript:ボタン</a></div>
<div><a href="#">#なボタン</a></div>
<div><a role="button">hrefがないroleボタン</a></div>
<div><span role="button">リンクじゃないspanボタン</span></div>

Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0

そして、A要素のroleはnativeでlinkですが3.2.5 Content models — HTML Standardを見ると、 link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, treeitem のいずれかのroleであれば上書きすることができると書いてあります。(そう読み取れたんだけどあってるのかね)

<a role="button">hrefがないroleボタン</a>

• 4.2. Conflicts between native markup semantics and WAI-ARIA
• 3.2. ネイティブなマークアップセマンティクスとARIAとの衝突

  翻訳版をみるとnativeなroleがlinkであっても、roleでbuttonと指定すれば上書きできるべきであるみたいな内容。

何で、上書きできるかが気になったかというとjavascript scheme でボタンを作るのは ? | ヨモツネットのコメント欄で、できないかのように読み取れる内容があったため。多分多分、strong native semanticsというのはa要素が本来持っているのはlinkというroleの事で、<a role=”button” />のようにそれぞれのa要素におけるroleは上書きできるけど、a要素本来のlink(strong native semantics)というroleは上書きできないよって話なのかなーとか思った。(仕様読んでないので自信ない)

ちなみに、jQuery UIの$.button()は<button role=”button”>という感じでbutton要素を使用している。

• jQuery UI – Button Demos & Documentation
• jQuery UI に見る WAI-ARIA の実装：dialog 編 – アークウェブアクセシビリティWiki(結構前)

• WAI-ARIA Implementation in JavaScript UI Libraries – updated | The Paciello Group Blog

というわけで、ここに書かれている内容はあまり自信がありません。以上

• Accessible Rich Internet Applications (WAI-ARIA) 1.0

JSReferenceというFIrefoxアドオンであるKeySnail上で動くプラグインの紹介

このプラグインはChemr-jsのように先にリファレンスサイトのインデックスのキャッシュを作っておいて、複数のリファレンスからまとめて検索をすることができるプラグインです。

動画だと対応サイトが少ないですが、現在は以下のサイトに対応しています。
(最新の対応サイトリストはJSReference at master from azu/KeySnail-Plugins – GitHubを参照してください)

• developer.mozilla.org
• jp.developer.mozilla.org
• www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/
• api.jquery.com
• es5.github.com
• msdn.microsoft.com

ECMAScriptの仕様書、MDCのドキュメント、jQueryのAPIドキュメント、IEのJavaScriptリファレンスなどを同時に引けるので結構便利です。

対応サイトもSITEINFO的なものを書けば増やせるので、JSReference at master from azu/KeySnail-Plugins – GitHubを参考に見てみるといいです。

プラグインをインストールするとプラグインマネージャーにドキュメントが表示されるので、そこに使い方が書いてありますが簡単に説明すると二つのコマンドが追加されます。

このコマンドをKeySnailの設定メニューや_keysnail.jsファイルに直接書き込むなどでショートカットに割り当てて使います。

設定画面の場合

key.setGlobalKey(['C-b', 'j'], function (ev, arg) {
    ext.exec("JsReferrence-open-prompt", arg, ev);
}, 'JsReferrenceのプロンプトを開く', true);
key.setGlobalKey(['C-b', 'r'], function (ev, arg) {
    ext.exec("JsReferrence-reIndex", arg, ev);
}, 'JsReferrenceののインデックスを作り直す', true);

// 二つのサイトを候補にする - JavaScript
key.setGlobalKey(['C-b', 'l'], function (ev, arg) {
    ext.exec("JsReferrence-open-prompt", ["developer.mozilla.org", "www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/"], ev);
}, 'JsReferrenceのプロンプトを開く', true);
// msdn.microsoft.comのインデックスだけを再構築する
key.setGlobalKey(['C-b', 'r'], function (ev, arg) {
    ext.exec("JsReferrence-reIndex", ["msdn.microsoft.com"], ev);
}, 'JsReferrenceのプロンプトを開く', true);

• KeySnail
• JSReference at master from azu/KeySnail-Plugins – GitHub
• KeySnailプラグイン開発の方法とデバッグ | Web scratch

一つの方法はinput要素から取得する方法

document.getElementById("ASIN").value

Amazonはページ中のhiddenなinput要素にASINを持たせてるのでこういう手が取れる。

<input id="ASIN" type="hidden" value="4253196519" name="ASIN">

ページの構造が変わったらダメだけど、結構昔からこの部分は変わってないので意外と安定しているかもしれない。
amazon.comだと構造が違うものがあって、Amazon.com: Buried Prey eBook: John Sandford: Kindle StoreのようにKindle Storeだとページ構造が違ってID=ASINがない代わりに次のようなものがある。

<input type="hidden" value="B004LRPGPC" name="ASIN.0">

var ASIN = document.getElementById("ASIN") || document.getElementsByName("ASIN.0")[0];

もう一つの方法はwindowオブジェクトのプロパティから取得する方法

(2011年6月5日現在だと)

window.sitbAsin;

• Amazonの商品個別ページでASINを抜き出す – おれ ここ めも かきなぐる おまえ ここ よむ なぐる – subtech

最後はURLからASIN部分を切り出す方法

URLにはASINが入ってるはずなので、ページに構造の変化には強いけど、少しパースが面倒なところがある。
どのようなURLがあるかを把握する必要があるので、条件分けなども必要になる。
まあASINのフォーマットは\w{10}と決まっているので、ある程度安定するのかもしれない。

ついでに、replaceStateを使ってリロードなしでAmazonのURLを/dp/ASINだけの短いURLにするGreasemonkey書いた。

• Amazon URL Cleaner for Greasemonkey

簡単に言えばLingoesやキングソフト辞書のようなソフトウェアで、文字列を選択した状態でショートカットか文字列をコピーすると翻訳を行えるNILScriptで書かれたソフトウェアです。

元々は英語が読めない人向け、英語技術書の読み方 | Web scratchで書いてたようにLingoesを使っていたましたが、自分向けにもっとあった感じのものがほしかったので作成しました。
機能はハイライト翻訳に絞ってるので、単語帳のようなものなどは特にないですが、シンプルで動作も軽いと思います。
翻訳には単語翻訳(辞書機能)と翻訳サービスを利用した長文の翻訳機能の二つがあります(単語数で自動的にどちらの方法をとるかを決めています)

• NILtranslator at master from azu/NILScript – GitHub

動作のスクリーンショット

NILtranslatorの導入

NILScriptで実行するソフトウェアなので、NILScriptが必要です。(Autohotkeyみたいな形式だと思ってもらえば)
Githubに置いてあるので、Secure source code hosting and collaborative development – GitHubからzipファイルでレポジトリごとダウンロードするのが単純です。
もちろんgithubなのでgit cloneしてダウンロードするのもありです。(なにかあったらプルリクエストしてもいいですし)

$ git clone git://github.com/azu/NILScript.git

ダウンロードして展開したフォルダにNILtranslatorがあり、NILtranslatorに関係するファイルは全部そこに入っています。(他のものは自分が書いたNILScriptがいろいろと入っています)

NILScriptの使い方と書き方 | Web scratchやNILScriptのreadmeを読んでNILtranslator.ngをNILScriptで実行すれば、ソフトウェアが起動できます。

使い方と設定

翻訳は翻訳したい文字列を選択した状態で、クリップボードへのコピーか任意のショートカットで行う事ができます。

NILtranslatorが起動するとタスクバーにアイコンが出るので、右クリックから設定を行う事ができます。

動作設定

動作設定では、選択した文字列を翻訳するのにどのショートカットキーを使うかや、翻訳するサービスなどを選択できます。

*テキストコピーで翻訳 はそのままの意味でクリップボードにコピーした場合に翻訳する化を決定できます。
*ショートカットキー はNILScriptのHotstrokesユニットで使えるショートカットを指定できます。

デフォルトはShift*2でShiftを二回連続で押すことで翻訳を行えます。

詳細はNILScriptの方に入ってる nil\doc\Hotstrokes.txt やnil\sample\Hotstrokes.ngなどを見るのがいいと思います。

簡単にショートカットの例を挙げてみると

"Win" : Winキーを押した時(タップ) 
"Shift+A": Shiftを押しながらAを押す 
"Shift*2": Shiftを二回押す 
"Ctrl+[1] [2]": Ctrl+1 Ctrl+2と順番に押す 
"RButton+WheelDown": 右クリックを押しながらホイールダウン

このようにキーボードだけでなく、マウスも使ったいろいろなショートカットの指定が可能です。
(設定ファイルを書き換えて、mapに指定するオブジェクトを作ればもっと自由にもできたりする予定)

指定するキーの名前を知りたい場合はnil\sample\keyboard_hook.ngを実行して見るといいでしょう。

*がついてるものはソフトウェアを再起動後に反映されることに注意

辞書について

辞書はそれぞれ設定できますが、英辞郎はローカルに英辞郎のデータベースファイルを用意する必要があります。
辞書は以下から選択できます。

対応辞書サービス

• KingSoft辞書
• 英辞郎辞書ローカル検索(ご自分で英辞郎辞書を用意する必要があります)

英辞郎辞書は同梱していませんのでご自分で購入する必要があります。 http://www.eijiro.jp/

対応翻訳サービス

• Google翻訳
• Excite翻訳

英辞郎辞書の導入

ローカルの英辞郎辞書を使うためには、英辞郎辞書をデータベース形式に変換する必要があります。
辞書の変換形式はEijiroXと全く同じものを使用しています。そのためEijiroXの利用方法をよく読み、databaseというファイル名のデータベースファイルを生成してください。

手順を簡単にEijiroXの利用方法からまとめると

1. makedatabase.zip(Windows 用と書かれてるやつ)
2. zipを展開してできたフォルダに英辞郎から取り出した英辞郎 (EIJI-***.TXT)、和英辞郎 (WAEI-***.TXT)、例辞郎 (REIJI-***.TXT)、略語郎 (RYAKU-***.TXT) の4つのtxtを入れる。
3. makedatabase.exeを実行(一時間以上かかる)
4. databaseとdatabase.sqlができる。
5. database.sqlは削除しても問題ない。databaseをdatabase.dbなど拡張子がdbとなるようにリネームする

データベースファイルはできれば database → database.db(eijiro.dbなど)の拡張子を.dbにリネームした方がよいです(内部処理的に)

設定画面からdatabase.dbを設定し、辞書サービスとして英辞郎を選択すれば利用できるようになります。

ポップアップの消滅時間はミリ秒で指定し、翻訳パネルの非表示になるまでの時間を決定できます。

パネルの設定

翻訳パネルの配置やサイズなどは、アイコンの右メニュー→パネルの設定から行えます。
数値でも指定できますが、パネルの設定自体がパネルサイズになるようにしています。(動画を参照)

パネルの透明度はアルファ値で指定できます。

一時的に無効にする

アイコンの右クリックから→無効を選択すると一時的にショートカットやクリップボードへのコピーで翻訳パネルを出さないようにします。

翻訳パネルの表示を変更

パネルはIEエンジン(triden)で動いていて、divにサイトごとのIDが入るのでCSSで調整することができます。
CSSファイルとSassファイルも同梱されているので、CSSを変更すれば、背景色や文字サイズなども変更できます。

パネルの内部HTMLは以下のようになっています。

<html>
    <head>
        <style type="text/css">
        %style%
        </style>
    </head>
    <body>
        <div id="%siteID%" calss="main">
        %text% この部分に翻訳内容が入る
        </div>
    </body>
</html>

/* kingsoft */
#kingsoft {

}
/* 英辞郎 */
#eijiro{

}
/* Excite */
#Excite{

}
/* Google翻訳*/
#googleTranslator{

}

これで説明は終わりです。

おわりに

このソフトウェアはNILScriptで書かれていますが、UI部分でコードが少し増えましたが1000行程度でこのぐらいのものが作れてしまいます。

内部から外部APIを読んで翻訳を行ったりしていますが、調子がいいときはローカルで動いてるのと区別がつかないぐらい早く結果が返ってきます。

このようにNILScriptやTitanium DesktopやWebOSやWindows 8などWeb技術(HTML+CSS+JavaScriptなど)といったものでデスクトップアプリケーションが作れるようになるのはとてもおもしろいです。またWebとデスクトップの距離は短くなっていると思います。

謝辞

JavaScriptベースのすばらしいスクリプト実行環境であるNILScriptがないと動きません。

• NILScript

ローカル英辞郎の検索部分はEijiroX を元に作成しました。
@edvakfさんに感謝を

• ブラウザで英辞郎を検索する EijiroX – by edvakf in hatena
• edvakf/EijiroX – GitHub

最近、Gihubのレポジトリでlink rel="canonical"が、treeのその時一番新しいものを示すようになっていて、そのためブックマークが分散したり、気持ち悪いURLを知らない間に登録していたりします。

なので、link rel="canonical"のタグを削除するGreasemonkeyを書いてみました。

• GitHub: remove canonical for Greasemonkey

何でこんな仕様なのか意味不明なので、いずれは元に戻って欲しいです。(このGreasemonkeyは一応、仕様が変わったかどうかかもチェックしてます)

Githubはhisotyオブジェクトを使って動的にURLを書き換えてるのは知ってる人多いと思いますが、link rel="canonicalもそれにあわせて動的に書き換えています。
$.attrで書き換えてるだけなので、link要素を削除してもエラーは特にでないようになっています。

link rel="canonicalはあった方がうれしいと思ってたけど、あると困るケースに遭遇したのは初めて。