Posts Tagged ‘javascript’
Mozilla Vision 2012 Conference Day アウトラインメモ
Mozilla Vision 2012 – Conference Day
Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

今まで書いたJavaScript情報の読み方をまとめてみた
もう既に見た人もいるかもしれませんが、オフライン勉強会でJSer.info一周年について発表してきた | JSer.infoで
今まで書いてた記事のまとめ的な発表をしてきました。
- 海外のJavaScript情報を見つけよう
- 世界のJavaScript情報を読もう
- 今からRSS購読すべきタグと検索結果
- ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ
- HOW TO LEARN (これだけ記事じゃないですが)
世界のJavaScriptを読もう @ 2012を発表していた時、RSS購読フローの部分がなぜか受けが良かったようなので、簡単な補足を書いておきます。

自分はRSSリーダを多用しているので、何でもRSSにしてとりあえずRSSリーダーに流れてくるような状況を作っています。
Webサイトを見ていて、Read It Latorなどで後で読むことにしても結局読むのを忘れてしまうことがあるため、Read It Latorに登録したリストがRSSとしてRSSリーダーに流れてくるといった感じです。
Pinboardやはてなブックマークやソーシャルニュースサイト等もRSSで購読していると、同じ記事を扱ったものが何度もRSSに出てきます。
これは今からRSS購読すべきタグと検索結果でLDRの読み方にでも書いていましたが、SBMなどは量が多くなってしまうので、全て目を通そうとすると気疲れします。
そのため、SBMや検索結果等のRSSは高めのレートにして心理的に飛ばしやすい(LDRでいうSキーを押す)状態にしています。
なんで検索結果のRSSは★4にしてるかというと、検索結果RSSで出てくるサイトは★3のサイトと被ったりすることがあるので、
今からRSS購読すべきタグと検索結果 | Web scratch
★4で飛ばしても★3で出てくるからまあいいっかと適当な感じで読める安心感が生まれます。
ここから、発表してたときにウケてた部分ですが、RSSリーダで読んでいるときに少しでも気になった記事は
とりあえずTwitterへ投稿しています。(Post Now browsing to TwitterがLDRから直接投稿できるようにしているのもその辺の関係)
一応軽くは目を通してからTwitterへ投稿していますが、専門的な記事や英語の記事など一度みるだけじゃ理解が出来なかったり、判断が難しい記事も多いと思います。
そういう時にTwitterのフォロワーから反応があると理解しやすかったりします。
またFavやRTがあったものが流れてくるようにRSSを購読しておけば、重要な記事 (少なくてもフォロワーが興味を持った記事)が再度RSSとして流れてくるようになります。
ありのまま今起こった事を話すぜ!『おれは奴が情報を選別してくれてると思ったらいつのまにか選別させられていた』 何を(ry という素晴らしいフィードバックを見た
— koichikさん (@koichik) 1月 15, 2012こういう感じで、重要な記事は何度もRSSとして流れるようにして、読み忘れを減らしたり & 心理的に軽い気持ちでフィードを読み飛ばしても大丈夫なように意識しています。
他の人の力も借りて手を抜きつつ、人があまり見ないようなところもチェックするようにして、いろいろな情報を共有できればいいかなと思います。
どういう所などをみているかについてはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoのスライドの方にもまとめたのでそちらを見てください。
第七回ありえるえりあ勉強会 アウトラインメモ
第七回ありえるえりあ勉強会 〜JSで大規模・エンタープライズ開発〜に参加してきたので、その時のメモ。
「JavaScriptで大規模ゲーム開発」渋川
ソーシャルゲームの定義
- ユーザー間で非同期のやり取りが発生する
ngCore
- マルチプラットフォーム
- 同一ソースでAndroidとiOSに対応
- テスト環境はFlashにも対応
ゲームの構成
- ngCore上にゲームロジック/JavaScript
- サーバ/APach+FCGI上に認証とか結果の書き込みをMobageサーバに
役割分担
- ngCoreのクライアント
- アクションシーン
- サーバ側で作ったデータの再生
- ゲームサーバ
- パラメーター保持、変化
- アイテム管理
- ミッションのスロットの目の決定など
- ずる防止をするためサーバ側でロジックがある
ngCoreの開発サイクル
- node.jsで書かれたビルドサーバでビルドを行う。
- ファイルの結合とか
コード
- CJSライクなモジュール
- クラスを作るsubclass関数
- ゲームはmain関数から始まる
- Core.UpdateEmitter でゲームループを回す
ゲームの基本構成
- シンプルなクラス群
- Sceneクラスを継承してシームを作っていく
- Sceneを遷移してゲームの遷移が行われる
- サーバ側からjsonのジョブスタックを受け取る
- ミッション結果なども配列で返ってくる
- 知らないジョブが来たら無視が基本方針
- クライアントは順番に再生していくだけ
- 新しいミッションも簡単に追加できる
- サーバエラーがおきたらホーム画面に強制的に戻る
DnLig/ngGo
- DnLib
- ゲーム開発の共通ライブラリ
- ngGo
開発拠点
- サンフランシスコ
- 日本
パキスタン
SKypeチャットが主なインフラ
- git
- git flow
- ドキュメントSphinx
ngGo/ngBuilder
- – データ駆動で行えるように
- - パラメーターチューニングのしやすさ
デバッグとテスト
- デバッグメニュー
- サーバにデバッグ用画面がある
- Jasmineを使ってる
今後のngCore
- 3D対応、HTML5対応
まとめ
JavaScriptベースで
オフラインWebアプリケーションの作り方 (白石)
Google Gearsを使ってオフラインアプリケーションを作ったことがある。
オフラインWebアプリケーション
Google Gears
- Google Gears終了 –> HTML5へ以降を推奨
- HTML5を中心にするようになった
オフラインでも読めるアプリの作り方
- それほど実装は難しくない
- アプリケーションキャッシュを利用すればいい
アプリケーションキャッシュとは
- 静的なリソースをキャッシュすることができる機能
- ローカルキャッシュの利点
- IE以外のブラウザでは実装されてる
キャッシュマニフェスト
- リソースのリストを作成する
- Titanium Mobileのリファレンスはローカルキャッシュされてる
アプリケーションキャッシュのJavaScript API
- window.applicationCacheにJavaScriptから操作できるアプリケーションキャッシュAPIがある。
アプリケーションキャッシュを利用する上での注意点
- キャッシュマニフェストを更新しないとリロードで反映しない
- キャッシュ容量が限られている
- モバイルとかだと10MBぐらい
オフラインでも書けるアプリの作り方
- 割りと面倒なもの
- デスクトップアプリとやりたい事はあんまり変わらない
オフラインWebアプリを作るポイント
- 基本はリッチクライアント+同期機能
利用できるローカルストレージ
- Web Storage
- Web SQL Database
- Indexed Database API
- File API
- ドメインごとに仮想的な空間
- セキュリティ的なものがあるため
双方向同期
かなり難しく面倒くさい – フェールセーフ – 更新の衝突 – 同期のタイミング – ネットワーク状態、データの状態管理 – ローカルDBのスキーマ管理/サーバのスキーマと2つできてしまう – ローカルDBのクオータ(5MBぐらい)
- 容量の限界がきたときにどうするか
まとめ
- オフラインアプリケーションといっても読む/書くの2つがある
- 書く/同期的なアプリケーションはかなり面倒臭い
- 割り切ったほうがいい
スケールするUIについて – @monjudoh
Objective-Cで非同期処理のチェーンライブラリとか
要素数
ループの中でbind/unbindしてたので大量に追加されたときに重たかったのでliveメソッドに変更 bindはここの要素に付けるから、要素が多いと死ぬ。delegateとかliveはその枠の方にイベント一個張るだけだから軽くてすむ。
D&D
- ユーザが触れる範囲だけにイベントを付ける
- D&Dは複数のイベントから成り立つので複雑(down->move-up)
要素の生成
- UITableView
- 表示範囲+ぐらいのみを描画してる
- 再利用してる
JavaScriptのテスト事情 – @os0x
- JavaScriptのテスト
- まだまだ未成熟
- 二種類
- JavaScriptのテスト
- JavaScriptだけなので比較的わかりやすい
- JavaScriptを含めたテスト
- UIとかも含むインテグレーションテスト
- JavaScriptのテスト
インテグレーションテスト
- インテグレーションテストは書くのが大変
- 動いてあることが保証できるので重要
- 後から追加修正とかも
インテグレーションテストの定番 – Selenium
- インテグレーションテストは遅い
テスト実行環境
- カピバラさん + Webkit
QUnit,Jasmine
- Jasmineの方がアプリケーションテストは向いてる
jasmine-headless-webkit
- jasmine のspecをCUI環境で実行できる
Titanium Mobile – Masui Yuichiro
- ココログ
- liblis
- AKB
- サイボウズLiveの
- MobSnap
Titanium Mobile
- JavaScriptだけでアプリを作成できる
- Titanium Mobile のモジュール売買できる
- mobile market place
モバイルのUX
- それぞれのプラットフォームに合わせた形に変換する
- それぞれに合わせたUIはUXに
- タブバーの位置がAndroid/iPhoneで逆になったり
飯食う
- 追加モジュールとサポートのみが有料
- 認定トレーニング
感想
- ちょっと落ち着きがなかった気がするの
- あまり掘り下げた感じにはならなかったのは少しもったいない気がした。
メモ環境
無料で読めて定期更新されているIT系の電子雑誌
PDF形式などで配布されていて、定期的に更新があるサイトの紹介
今だとブログがいっぱいありますが、まとまった形態,書式である良さというのもあるので、ブログとはひと味違う感じの所を中心に。
デジタルプラクティス
発行は季刊で1月(創刊号のみ2月),4月,7月,10月に発行されるのをPDFで読める。
内容も多岐にわたっていて、論文というほど堅くはないものもあり読みやすい。
デジタルプラクティスでは,実務の現場におけるIT 実践例・経験・ノウハウのレベルの成果でも社会的に有用なものならば歓迎し,IT実践における新たな発展を先導するような論文を積極的に採録します
創刊に当たって
また、著名な人も結構寄稿されているので、読みたいものが何かしらあると思います。
- プログラミング言語Rubyの世界普及戦略
まつもとゆきひろ - ウェブブラウザLunascapeの起業戦略と技術戦略
近藤秀和 - クラウド時代のユーザインタフェースの方向性
~サービスサイエンスでUI の方向性を検証する~
鹿島泰介
などなど
情報処理推進機構:ニューヨークだより
IPAにより月一でPDF形式で発行される。
アメリカのIT関係についての最新事情を扱っていて、ものすごく詳しく書かれている。
ITやスマートフォンなどのデジタル機器(OSについても)やITと政治についてなど、かなり詳細な情報を掲載している。
無料とは思えない質だったり、情報元のソースを脚注で入れてくれるので、情報元自体も見られてとても良い感じになっている。おすすめです。
Wizard Bible
Wizard Bibleとは、基本的に毎月リリースしているWebマガジンです
Wizard Bible
発行は月一でtxt形式で発行されている(最近不定期だった気がする)
内容はどういったテーマで書けばいいのか?を見ると分かると思いますが、セキュリティ関係のものが中心となっています。それに関係するプログラミングや数学などの内容も扱われています。
IS Report System
本サイトは 「同志社大学生命医科学部医情報学科 医療情報システム研究室」 及び 「同志社大学工学部インテリジェント工学科 知的システムデザイン研究室」 の所有する研究報告である ISレポートの管理システム
IS Report System
医療やソーシャルメディア、インターネットや携帯電話などの電子機器について書かれたレポートが公開されています。
HTMLとepub形式(一部PDFも)で配布されていて、図などが入ったものも多く内容も結構読みやすいです。
結構書かれているジャンルが幅広い気がします。
The Pragmatic Bookshelf | Read Our Magazines
Pragmatic Bookshelfにより毎月発行されるプログラミング関係の電子雑誌。
HTML PDF epub mobiが用意されている。
番外編
タイトルから外れて有料の雑誌。
といっても海外だと電子版の雑誌は珍しくないので、気になったものだけ。
JsMag – the magazine for JavaScript developers
JavaScriptについて扱う月刊誌。
一号毎に購入($4.99)か一年分まとめて購入($53.88 )ができる。
日本にもこういうの欲しいですね。。
Hacker Monthly – Print Magazine of Hacker News
Hacker Newsで話題になったものを厳選して扱う月刊誌。
おわり
電子雑誌というタイトルにしたけど、別に雑誌じゃないものが多い気がする。
今はブログやソーシャルメディア経由でだいたいの情報はカバーできるだろうけど、論文や雑誌、スライドなどある程度労力を伴って書かれたものにはブログとは異なるものがあると思ってるので、こういうものも読んでいきたいですね。
JavaScriptの論文かき集める仕組み欲しい。日本でも小さなもの含めて年間二桁は書かれてる感じする。
Twitter / @azu_re: JavaScriptの論文かき集める仕組み欲しい。日 …
とか思ったりするのはそういう理由です。
他にもおすすめがありましたらよろしくお願いします。
第3回ブラウザー勉強会 アウトラインメモ
2011年8月20日開催された第3回ブラウザー勉強会に参加してきたので、その時のメモです。
TwittterのログはTogetter – 「第3回 ブラウザー勉強会(#BrowserWS)のまとめ」にまとまっています。
サイボウズラボユース中間結果発表会アウトラインメモ
サイボウズ・ラボユース 「中間成果報告会」に参加してきたのでそのときのメモです。
かなり乱雑なメモで正確性など存在していないので、そのまま読まない方がいいです。
(特に手元でスライドがあるわけじゃないので、ちゃんとメモれてすらないです…)
環境記録
メモソフトウェア: bodhi/MarkdownEditor – GitHub
サイボウズラボユース中間結果発表会
NDAは結ばずに、成果をオープンすることを条件に支援を行う。
「ロボット制作を支援するログ解析プログラムの開発」 by @sn_monochr
マイコンカー
赤外線センサーを使ってリアルタイムで制御するカー。 C言語で開発を行う。
マイコンカーの走行ログ
走行ログ
- 制御プログラムの動作状態
- 赤外線などのセンサー状態
メモリが限られているので、データはシフト演算などを使って一つにまとめて保存、送信を行う。 これらのデータを可視化していくため、解析ソフトウェアを開発する。(Windows)
走行ログの可視化
- データに基づいたマシン調整が可能になる
- 1つのソフトウェアに統合
夏の合宿
目標設定をして合宿を行った
- 走行ログの可視化
ラインの中でモードの変更をライン色の変更してる。
- 無線通信でログのやり取りをするのが今後目標
走るコースに、車線変更や直角カーブなどのマークが書かれていて、それを読み取ってモードを変えることで動きを変える。
「世界最速の正規表現JITエンジンの実装」by @sinya8282
- 正規表現エンジンの作成
- 正規表現の歴史は古い 1960~
- 実装はたくさんある
- いろいろやられている
「正規表現エンジンの開発」には意義があるのですか? -> 車輪は車輪でも「最速の車輪」を開発する
正規表現エンジンRegen(れーげん)の開発
Regen
動的コード生成
- Xbyak でJIT regex
- 正規表現に合わせて、プログラムがプログラムを生成する
- 正規表現コンパイルに最適化レベル導入(O0 – O4)
- 最適化しにくいパターンもある
マッチング並列化
- 並列化のための特殊なモデルを実装
ベンチマーク
Google RE2との比較。
JITしても3-5倍の高速化 -> 今はメニーコアの時代 -> 正規表現の並列化
- 6コアでガクって落ちるのはアーキテクチャの問題
まとめ
高速化の二台手法は実装した、成果もでた
- JIT
- 並列化
これからの課題
- 実システムへの応用、ツールの作成
- 正規表現エンジンじゃないと処理できない問題
- なければ作る
- ライブラリとして今夏中に整えたい
質問
- 正規表現 <-> インデクシング
- フィルターなどの分野では、流れるデータに対して正規表現の活用などもある。
- 禁止ワードのORつなぎみたいなものは正規表現より向いてる方法があるとか
「JavaScriptによる型推論器の実装と可視化」by takuto_h
型推論
- 型を書かなくて楽
- 型があるんで安全
引数の型
function foo(bar){ return bar + 1; }どのような演算子を呼んでいるかを見て、型を推論する
型推論は方程式
- 値が広志位なら型が等しい
- 方の上での方程式を集めて解くのが型推論
コンピューターでは解くのか
a = b, b = c, c = d, d= int
<a>, <b>, <c>, <d>というオブジェクトとintという物体を用意する。
- a = b で
<a : <b>>, <b>, <c>, <d> - b = c で ….
どんどん置き換えて行って型推論を行う。
Ibisという型推論機
IbisはJavaScriptで書かれている。
- まずはパースして構文木にする
- ここからステップごとに型推論の計算(推論)を表示
- 最終的に、関数の入力と出力の型推論結果が表示される
型推論はパズル
質問
型推論にとってオブジェクトは鬼門
Q . 循環参照の時はどうするの?
2つの考え方
- 禁止する方針
- 再帰的なものも許す方針
OCamlは不健全な循環参照は禁止されている。 再帰的なものはチェックを付けて型推論を続ける。
演算子のオーバーロードがあると型推論はむずい
「世界で一番仕様に忠実なJavaScript処理系の作成」 by Constellation
iv/lv5
- ESのパーサーiv
- エンジンlv5
sputniktestというECMA262への正確性を測るテスト
- 以前はASTはインタープリンタ
- VMに変えたのでECMAエンジンといえますね。
- インタープリタと共存している(オプションで切り替えが可能)
JITをモジュールとして取り込めるのではないかと。
高速化
いろいろ。11倍近く高速
まだJITはしていない。
今後
- RegisterVmについての検討
- GCの自作
az: ECMAScript Analyzer
JavaScriptの補完候補を出す
型の推論 Doctorjs
- 抽象的なAbstractインタプリターを使って型情報を集めている
- これを元にC++にした
JavaScriptは後ろに関数宣言置けるし、補完するときにシンタックスは壊れてるからどうするの?
方針: シンタックスが不正なASTに対して解析を行う
- シンタックスが不正なスクリプトでも常にASTを得る
target.
こういう時はに解析を行うと、式がエラーになるので、ここでステートメントにマークを付ける。
改行があったらそのへんは大丈夫なんじゃないかと、してぶっちぎる。 JavaScriptにはセミコロン自動挿入があるので、改行を判定に使う必要性が出てくる。
問題点
- Abstractインタープリタは状態が有限でないと終わらない
- なので状態を有限して、行う
- jQueryとのfor inとかむず
WebStromの場合
- JSDocで型情報を読んでこれを基準に解析
- 元に情報を用意して何とかする方向
おわり
仕様忠実は第一
「現役高校生の考えるクラウドOSの設計と実装」by liva_s
クラスドOSって何だろう?
Googleの場合
- ブラウザ上でWebアプリを走らせている
- 確かにクラウドを利用している
僕の考えるクラウド化
カーネルのクラウド化
- カーネルがやるべきことをクラウドサーバー上で一括処理するのはどうだろか?
- サーバー側に処理を置くことで、クライアント側の負荷が減る
カーネルを分割して、クラウド上でカーネルが動いてるいうという状態
- 当然ローカルでやるべきことも残る(ハードウェア制御)
- ローカルとくらうどの線引きが大事になる
どの境界線はどう測るべきものかがわからない(ベンチマークで?)
マイクロカーネル開発
カーネルには最小限なものにして、Serverというアプリケーションにわけてやるもの。 この時のServerをクラウドに乗っければ、クラウドOSになる。
=> マイクロカーネルの開発がいいのではないかと
Serverを単位にして、ローカルとクラウドでベンチマークを取れば、境界線がわかりやくなる。
モジュール開発とマイクロカーネル
モジュールはプロセス管理を作る前に、モジュールを開発できる。 (後で動かせばいい)
まとめ
クラウドOSはWebアプリベースのOSではない
Q. カーネルでどの辺がボトルネックになってるのか?
A. モジュール化していけばベンチは測りやすいから、これからは。
カーネルのモジュール化はダイナミックに構成を変更できるということが結構面白い事になる
Q.マルチキャストの逆みたいな話。同じような処理をしてるコンピューターはいっぱいあるから、そのへんの処理を効率ができるのではないかと
JavaScriptエディタとしてのTitanium Studio
- Titanium StudioとTitanium Mobile 1.7をリリースしました « Appcelerator Developer Center
- InfoQ: Appcelerator の Titanium Studio がデビュー
ちょっと触っただけの雑感です。本質としてとらえてはいけません。
Titanium (Mobile|Desktop)については全く触れていないため、そういうものについては参考にはならないと思います。
というか、Titanium (Mobile|Desktop)向けのものを書かないのに、Titamium Studioを選ぶ理由はない気がするので、タイトルのような事が目的ならばベースが同じAptana Studio 3を使った方が良いでしょう。
クリッカブルなボタンとWAI-ARIAのrole="button"について
前提知識として以下が必要です。
clickイベントに使うためだけに<a href=”#”>text</a>とか(下の例の1,2番目)やるのが嫌いで、どうやるのがスマートorシンプルなんだろと思って書き出したもの。input、button 要素がでてこないのはスタイルシート考えるのが面倒で何となくです。button要素をCSSでリンクのようなデザインにできるならそれでもいいじゃないでしょうか。
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(結構前)
UIライブラリはスタイルとかとセットなので、roleも意味がはっきりしたものとって後はスタイルやった方が良さそうだしね
WAI-ARIA対応のライブラリはこの辺を見た
というわけで、ここに書かれている内容はあまり自信がありません。以上
JavaScriptリファレンスを高速検索するKeySnailプラグイン
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を参考に見てみるといいです。
プラグインをインストールするとプラグインマネージャーにドキュメントが表示されるので、そこに使い方が書いてありますが簡単に説明すると二つのコマンドが追加されます。
| JsReferrence-open-prompt | JsReferrenceで検索を開始する |
| JsReferrence-reIndex | JsReferrenceのインデックスを作り直す |
このコマンドを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);
JavaScriptでAmazonからASINを取得する方法など
一つの方法はinput要素から取得する方法
document.getElementById("ASIN").valueAmazonはページ中の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側のJavaScriptが生やしているので、ページのちょっとした構造の変化では変わらないと思うけど使うライブラリを変えたりJavaScriptが大きく変わると変更されることがある。
以前はwindow.productTagsに入っていた。
最後はURLからASIN部分を切り出す方法
URLにはASINが入ってるはずなので、ページに構造の変化には強いけど、少しパースが面倒なところがある。
どのようなURLがあるかを把握する必要があるので、条件分けなども必要になる。
まあASINのフォーマットは\w{10}と決まっているので、ある程度安定するのかもしれない。
ついでに、replaceStateを使ってリロードなしでAmazonのURLを/dp/ASINだけの短いURLにするGreasemonkey書いた。

