JavaScript

ファイル保存時にブラウザを自動的にリロードする JavaScript ライブラリを書きました

HTML や CSS ファイルを保存した時にブラウザを自動的にリロードする JavaScript ライブラリ AutoReloader.js を書きました。mala さんが昔書いていたものの焼き直しですが…。 ダウンロード https://github.com/tanabe/AutoReloader-js 使い方 下記の 1 行を…

Mac に PhantomJS を入れた

MacOS X (Snow Leopard) に PhantomJS を入れました。Build Instructions の通り。 git clone git://github.com/ariya/phantomjs.git && cd phantomjs && git checkout 1.1 Qt を落とす。 qmake -spec macx-g++ && make in/phantomjs.app/Contents/MacOS/pha…

Google の検索結果ページを日本語と英語で切り替えるユーザスクリプトを更新しました

Google の検索結果ページを日本語と英語で切り替えるユーザスクリプト (昔書いたもの) を、現在の Google の仕様に対応させました。 インストール Google の検索結果ページのどこでもよいのでダブルクリックすると切り替わります。 Firefox と Chrome で動作…

キーボードショートカットを定義できるライブラリ Hokke.js を書きました

キーボードショートカット (ホットキー) を簡単に定義できる Hokke.js という JavaScript ライブラリを書きました。名前の由来は、Hotkey → Hokke です。私はホッケの塩焼きが好きです。 Hokke.js デモページ ソースコード 使い方 インタフェースは、3 つあ…

JSDoc 形式のコメントを追記する Vim スクリプトを書きました

JavaScript の関数に JSDoc 形式のコメントを追加する Vim スクリプトを書きました。 tanabe/WriteJSDocComment.vim - GitHub 実行例 JavaScript の function が書かれている行にカーソルがある状態で :call WriteJSDocComment() を実行すると下記スクリーン…

Yahoo!路線情報の「出発地」「目的地」を保持する user script

Yahoo!路線情報で、「出発地」と「目的地」の入力値を保持する user script を書きました (以前書いた物の改修)。 インストール AutoFillYahooTransit.user.js 主な内容 ブラウザの「戻るボタン」で出発地/目的地が消えなくなります。 Firefox/Chrome で動き…

jslint.vim を入れた

CentOS に jslint.vim を入れました。コーディング中にリアルタイムで文法チェックをしてくれます。それほど重くもないですし便利です。 インストール JavaScript のインタプリタ (SpiderMonkey、Rhino、node.js) が必要なのでインストールはそこから。CentO…

スクリプトローダ JohnnyDepp.js を書きました

JohnnyDepp.js という JavaScript のスクリプトローダを書いてみました。依存性 (DEPendency) を解決するところから JohnnyDEPp.js です。名前だけはとてもクールだと思います。 一点注意。世の中には、LABjs をはじめ、ControlJS、Head JS など JavaScript …

非同期処理を逐次処理するための JavaScript ライブラリを書きました

非同期処理を逐次処理するための JavaScript ライブラリを書きました。 デモページ ソースコード Processor インタフェース var processor = new Processor(); processor.add(p1).add(p2, p3); processor.execute(); 上記の例では Processor に p1 〜 p3 の…

prototype ベースの継承方法いろいろ

『JavaScript Patterns』より、prototype ベースの継承方法いろいろ。 1. 最もベーシックな prototype 継承 子クラスの prototype に親クラスのインスタンスを指定します。 function Parent(name) { this.name = name || "Adam"; } Parent.prototype.say = f…

funarg 問題

下記の bar() に渡す無名関数内の value が、どの値 (1 か 1000) にバインドされるかという問題を「funarg 問題 (Function Argument Problem)」というらしい。 function foo(value) { return bar(function() { return value * 2; }); } function bar(func) {…

複数ページの window.onload をまとめて書ける jQuery プラグインを書きました

複数ページ用の window.onload ハンドラのコードを 1 ファイルにまとめる jQuery plugin を書きました。WEB + DB PRESS 60 号に載っていた URL Dispatcher のコードを書き換えたものです。 tanabe/jQuery-Router - GitHub デモページ 使い方 $.route() の引…

ランダム文字列を生成する JavaScript ライブラリを書きました

ランダムな英数字の文字列を生成する JavaScript ライブラリを書きました。テスト用英数字の生成やパスワードが決められない時などにご活用ください。 tanabe/random-string-generator-js - GitHub デモページ 基本的な使い方 引数無しで実行すると、32 文字…

JavaScript Patterns

『JavaScript Patterns』を購入しました。『JavaScript: The Good Parts』や『High Performance JavaScript』に続く、信頼と実績の Oreilly x Yahoo! Press シリーズ。どの本も Oreilly にしては薄くて読みやすく、プロフェッショナル向けの実践的な内容が特…

要素を画面の定位置に表示させる jQuery プラグインを書きました

ある要素を画面下や画面右などに配置する jQuery プラグインを書きました。「ページトップへ戻る」ボタンやウィジェットなどを固定位置に表示させたいときに使います。 tanabe's jStageAligner at master - GitHub デモページ 基本的な使い方 固定位置に表示…

Set-Cookie 時にドメインを指定する/しないで挙動が変わる

Firefox の Cookie の挙動でハマったのでメモしておきます。Set-Cookie 時にドメインを指定する/しないで、保存される Cookie が異なるようです。 ドメインを指定しない場合 レスポンスヘッダの Set-Cookie で、ドメインを省略した場合は、保存された Cookie…

省略可能な else 文について

下記の 2 つのコードはプログラムとして結果は等しくなりますが、文脈が若干異なるような気がします。 コード 1 if (condition) { return A; } return B; コード 2 if (condition) { return A; } else { return B; } 私はコード 2 のスタイルで書きます。コ…

JavaScript ライブラリで処理を委譲する方法

jQuery/Prototype.js で、処理を委譲する方法。AS2 で言うところの Delegate.create です。 やりたいこと 下記のコードで、cat.showName() を実行した際に dog を表示したい。 var dog = { name: "dog", showName: function() { alert(this.name); } }; var …

window.localStorage に関するメモ

HTML5 の Web Storage (window.localStorage) についてのメモ。 対応ブラウザ ブラウザ バージョン Internet Explorer 8+ Firefox 3.5+ Firefox 3.5+ Safari 4.0+ Goole Chrome 4.0+ (3.0+?) Opera 10.5+ Chrome の部分が怪しい。文献によっては「3.0 以上」…

Yahoo!路線情報でブラウザの「戻るボタン」が使えるようになるユーザスクリプト

Yahoo!路線情報で検索結果を表示した後にブラウザの「戻るボタン」で戻ると出発地と目的地が消えてしまいます (Firefox)。そのストレスを解消するユーザスクリプトを書きました。 YahooTransitAutoFill.user.js 仕組み Greasemonkey の GM_setValue と GM_ge…

Amazon の商品 URL を必要最低限の長さにするユーザスクリプト

Amazon の商品ページ URL を必要最低限の長さにするユーザスクリプトを書きました。 ShowAmazonProductShortURL.user.js 使い方 商品ページをダブルクリックするとアラートに短めの URL が表示されます。それをコピーします。 例えば、http://www.amazon.co.…

リンクを解除するユーザスクリプト

HTML のリンクに設定されたテキストの "ある一部だけをマウスで選択してコピーしたい" ことが、一年に一度くらいあります。 それを実現するユーザスクリプトを書きました。任意のリンクを解除するだけですが。 RemoveAnchor.user.js 使い方 リンクのテキスト…

ページトップにスクロールするユーザスクリプト

ページのトップにスクロールするユーザスクリプトを書いた。ページ上部 (100px) 未満をダブルクリックするとページトップにスクロールします。 Home キーを押せば済む話だが、ネットサーフィンはマウスでポチポチすることが多いので…。 ToPageTop.user.js //…

ExternalInterface 経由で HTML 要素を削除すると、Safari が落ちる

以下の条件で Windows 版 Safari 3.2.2 が 100% 落ちる。 ExternalInterface 経由で、SWF 自身が置いてある HTML 要素を削除する。 フレームスクリプトで ExternalInterface を呼び出す。 その SWF の wmode が transparent である。 ActionScript //in cras…

動的に生成した HTML 要素に Flash タグを貼り付けると ExternalInterface が動作しない場合がある

ExternalInterface でハマった。 var hoge = document.createElement("hoge"); hoge.innerHTML = "

文字列の連結を配列で行う

文字列の連結を配列で行うと、タグを書くときにコードが見やすくなる。 document.getElementById("hoge").innerHTML = [ "<p>", "<span>", "Hello World", "</span>", "</p>" ].join("");

配列の要素を負のインデックスで取得する

配列の要素をどんな整数のインデックスでも取得できる関数を書いた。 function getItemAt(target, index) { if (index < 0) { return arguments.callee(target.concat().reverse(), -(index + 1)); } else { return target[index % target.length]; } } usag…

Excite 翻訳のページでテキストエリアにフォーカスを当てる Greasemonkey スクリプト

Excite 翻訳のページでテキストエリアにフォーカスを当てる Greasemonkey スクリプト。 ExciteTranslationFocusTextField.user.js // ==UserScript== // @name Excite Translation Focus TextField // @namespace http://bitmap.dyndns.org/ // @description…

JavaScript: The Good Parts のメモ

JavaScript: The Good Parts より、コード断片のメモ。 p.39 Closure 以下のような HTML において、a ~ b をクリックしたときに、0 ~ 3 を出力したい。 <ol> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ol> 何も考えないで書くとこうなる。nodes には li のコレクションが渡っている。 var addHanld…

Google の検索結果ページに 10 キーのショートカットをつける Greasemonkey スクリプト

Google の検索結果ページに 10 キーのショートカットをつける Greasemonkey スクリプトを書いた。 GoogleResults10KeyShortcut.user.js // ==UserScript== // @name Google Results 10Key Shortcut // @namespace http://bitmap.dyndns.org/ // @description…

IE に表示した Flash でリファラが取れない問題の回避方法

IE 6/7 に表示された Flash で navigateToURL を呼ぶとリファラが取れない (document.referrer === "" //true) 問題の回避方法。 アンカーエレメントをクリックしたことにする アンカーエレメントを作って click イベントを呼べば、リファラを取ることができ…

JavaScript ライブラリのブラウザ判定ロジックを調べてみた

幾つかの JavaScript ライブラリから、ブラウザ判定部分だけを抜き出してみた。判定基準が userAgent だったり、ブラウザの実装だったり、多種多様で面白い。MooTools はレンダリングエンジンを返す所が他と違う。 Prototype (prototype-1.6.0.2.js) Browser…

はてなブックマークのタグを当てるゲームを作った

はてなブックマークのタグを当てるゲームを作った。タグを入力後、エンターを押して正解なら、次の問題に進む。 はてブ - タグ当てゲーム はてなから引っ張って来た ホットエントリの feed には 4、5 個のタグしか無く、正直なところ、難しすぎてゲームにな…

便利なコメントのテクニック

地味に便利な ActionScript/JavaScript で使えるコメントテクニック。 実行するブロックを切り替える (参考) テスト用のコードを切り替えるときに便利。 //* doHoge(); /*/ doFoo(); //*/ この状態では doHoge() が有効で、先頭行のスラッシュを一つ取ると、…

String.replace の第二引数には置換関数を指定できる

String.replace の第二引数には、置換後の文字列を返す、独自の関数を指定できることを知った。目的にもよるが、グルーピングを使うときは RegExp.exec を繰り返すよりも使いやすい。 ただし、置換関数に渡される引数が可変で、いくらか複雑なので注意が必要…

== の代わりに === を使え

JavaScript: The Good Parts を斜め読みしていたら、面白いことが書いてあった。 比較演算子の == や != を、=== と !== の "evil twins" と呼び、"never use the evil twins" という。それはなんでかというと、型が違うときの評価が複雑だから。 以下のコー…

二重否定で Boolean にキャストする

二重否定 (double negation) で簡単に Boolean にキャストできる。 var hoge; !!hoge => false !!0 => false !!null => false !!undefined => false !!"" => false

Date クラスの直感的なインタフェース

Date クラスに直感的な (流れるような) インタフェースを実装してみた (ソースコード)。元ネタはこの一枚。 実行サンプルはこんな感じ。 var d = new Date(); => Wed Apr 30 2008 00:00:00 GMT+0900 (JST) d.tomorrow(); => Thu May 01 2008 00:00:00 GMT+09…

jQuery の $() の戻り値は jQuery オブジェクト

Prototype.js の感覚で jQuery の $() を使ったら詰まった。 SWFObject で貼り付けた SWF のメソッドを ExternalInterface で呼び出そうとして、 $("flashMovie").doSomething(); と書いたら、$("flashMovie") には doSomething が無いと言われる。 それもそ…

文章を皮肉っぽくするブックマークレットを作った

文章を皮肉っぽくするブックマークレットを作った。 javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/([、。])/g,'(笑)$1');})(); このブログを皮肉っぽくする google で検索したら、これよりも高機能なものを見つけた。

フォールトトレラント設計 のための try..catch 節

JavaScript のランタイムエラーは、起こると処理がそこで停止してしまう。たとえば initModuleA();//エラーが起こる可能性のあるモジュール initModuleB(); initModuleC(); alert("done"); このコードで initModuleA でエラーが起こると、以降、initModuleB …

Helma の文字コードを UTF-8 にする

Helma のデフォルト文字コードは ISO-8859-1 なので、UTF-8 にしたい。結論から言うと app.properties に charset = UTF-8 を書くだけでよい。 アドホックだと感じつつも、hac ファイル全てに res.charset = "UTF8" を追加した上で db.properties に hoge.us…

if 文のワンライナー化

とあるコードにこのような行があった。 isHoge() && isFoo() && alert("ok"); やっていることは if (isHoge() && isFoo()) { alert("ok"); } なのだが、なるほどと思った。

jQuery の解説動画を見た

Dmitri Gaskin による jQuery の解説動画を見た。jQuery の API を一通り解説している。英語も聞き取りやすく勉強になった。 ひとつ驚いたのが、この子が 12 歳だということ。 Dmitri Gaskin drinks code with his cereal for breakfast every morning. He's…

Helma を触ってみた

TrimPath Junction を落として NextAction をちょっと触った。が、 NextAction よりも、Junction に付属している Helma に興味がわいたのでそちらを追ってみた。 仕組みもよくわからない状態で、チュートリアル (邦訳) をそのままトレースしてアドレスブック…

文字列と数値の + 演算時による結合

文字列と数値の + 演算時による結合について。 console.log(1 + 1 + "hoge" + 1 + 1); //=>2hoge11 console.log((1 + 1 + "hoge") + 1 + 1); //=>2hoge11 console.log(1 + 1 + "hoge" + (1 + 1)); //=>2hoge2 + 演算子の評価は左から右に行われるので、評価…

Amazon.com へのリンクを追加する Greasemonkey スクリプト

Amazon.co.jp の商品ページに .com の同一商品へのリンクを追加する Greasemonkey スクリプトを書いた。洋書のレビューや価格を調べるときに便利。元ネタは会社の上司。 AddAmazonDotCom.user.js // ==UserScript== // @name Add Amazon.com URL // @namespa…

サーバを経由せずに Flash の内容を画像に変換する

Flash で描画したベクター画像を img タグで表示させるデモを作った。肝はサーバプログラムを経由しないところ。 IE 以外のモダンブラウザなら、下の灰色の領域に線を描くと、その下に PNG 画像が現れるはず。 ペイントツール部分は、func09 さんのソースを…

メタプログラミングで生産性を上げる

メタプログラミングをすると生産性が上がる。 メタプログラミングには様々な定義があるが、ここでは広めに "無駄なコーディングや手作業を減らす手法" としておく。 以下に、実務 (主に Web のフロントエンド開発) に役立つメタプログラミングの例をいくつか…

JavaScript でリフレクションを利用する

JavaScript でリフレクションを利用してみた。肝は arguments.callee.toString(); 以下は、実行されているメソッド名を取得し、引数の数が正しくなければ、メソッド名と正しい引数を出力する例。 function hoge(a, b, c) { var matches = arguments.callee.t…