JavaScript

Chrome Extension の createHTMLNotification メソッドでデータを渡してフレキシブルに内容を構成するには

Chrome拡張でデスクトップ通知の実装時に、HTMLを使うときデータを簡単に渡す方法について。 Desktop Notifications chrome.notifications - Google Chrome を見ると、通常のタイトル、イメージ、テキストの三つを渡して表示する通知と、HTMLで自由に組める…

node の Array で forEach したときに break するには

jQuery.each メソッドだと、return true で continue, return false で break できます。 しかし、node で普通に array.forEach で同じようにやろうとしたらできない。 node の実装つまり ECMAScript 5 においては、array.forEach に break 処理はない。代わ…

Mongoose で MongoDB の Embedded Documents の扱いで嵌まったこと

node(.js)と相性が良いということで、MongoDB とそのJavaScript O/R マッパーライクなモデリングライブラリの Mongoose を使い始めました。 MongoDBと言えばドキュメント指向モデルでそれを特徴づける Embedded Documents が有名ですが、この機能を Mongoose…

Flex のテンプレート HTML ラッパーに細工をしてクエリ引数を flashVars へ引き継ぐには

この話は要 JavaScript です。index.template.html に細工します。 index.template.html 49行目付近 ブラウザの現在のURL引数を取得して params にセットする処理を挿入します。 // Get Parameters var params = ""; var pos = window.location.href.indexOf…

Opera 対象 JavaScript でASCIIコード以外の値を書く場合は必ず charset を定義する

何故か Opera だけでエラーになっていた Ajax アプリがある調べてみると、ASCII コード以外の値が存在する JavaScript ファイルを化けて読み込んでいたようだ。 読み込み元のHTMLも js ファイルも全て UTF-8 にして Content-Type でも UTF-8 としていたのだ…

Adobe AIR の SQL 機能を試してみるためにデモアプリを作ってみた

AIR には Flex(MXML/ActionScript) と Ajax(HTML/JavaScript) の二つの作成方法があるが、今回は後者を選んだ。 http://help.adobe.com/ja_JP/AIR/1.5/devappshtml/ http://www.adobe.com/jp/devnet/air/ajax/ 開発環境は Aptana Studio を使った。 デモアプ…

jQuery 1.3.1 リリース

ちょうどタイムリーな話題がわかったので、書いておきます。 jQuery 1.3.1 Released | Official jQuery Blog 23個のバグフィックスリスト Error: Invalid Report Number – jQuery Core - Bug Tracker 1.3 系最初のリビジョンアップとあって、既に使っている…

jQuery を用いて大きな画像などを Google Map ライクにスクロール表示する UI

下記のサンプルは jQuery プラグインとして公開しています。(2009/05/20 追記)jquery-scrollview - This jQuery plugin applies grab-and-drag scroll view to block elements. - Google Project Hosting壁紙などの大きなサイズの画像を表示するのに Googl…

JavaScript エンジン V8 を使ってライブラリの開発にユニットテストを利用したい

大きなプログラムになると JavaScript といえどもブラウザから操作してテストする以外にも、単体でコマンドラインからテストしたくなりますね。 JsUnit はどうなのか JavaScript のユニットテストフレームワークというと、xUnit の JsUnit が思い浮かびます…

はてなダイアリーのカテゴリーを管理ツールでソートするブックマークレットを書いてみた

http://d.hatena.ne.jp/claddvd/20090112/1231767107をみて、「そうそう、増えるとその度に手動並び替えをしていてどうにかしたかった」ことを思い出しました。 どうせならその場で直したい、ということでブックマークレットを書いてみました。(もう既に誰…

JavaScript でオブジェクトのメンバであるメソッドをイベントハンドラにしたときに非 DOM の this を取りたい

ちょっとエントリのタイトルが微妙だが、まず次の HTML + JavaScript コードをご覧いただきたい。(前後の HTML コードをカットしている) <script type="text/javascript"> function SampleA(name){ this.name = name; } SampleA.prototype.button_click = function(){ alert("This is " + …

jQuery の Manipulation(DOM 操作)で優先的に使うべきメソッドのまとめ

jQuery 1.2.6 のソースコードを見ると、appendTo, prependTo, insertBefore, insertAfter, replaceAll の定義は下記のように、内部で append, prepend, before, after, replaceWith を呼び出し元、引数の対象を逆にして呼び出すようになっていることがわかる…

jQuery の ID で対象ノードを取得する処理を高速にしたい

てっく煮ブログさんのエントリーjQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログをみてて、jQuery の $("#xxxx") を速くしたいと考えていたことを思いだした。それについて書く。 jQuery の $("#xxxx") について セレクタをどう処理しているのか…

JavaScript でプレーンデータを JSON 文字列に変換するサンプル

Ajax でクライアント/サーバ間を JSON でやり取りしたかったので、プレーンデータを JSON 文字列に変換する関数を書いてみた。 ちなみに prototype.js には Object の拡張として toJSON() が定義されている。jQuery はプラグインとして存在する。 今回は単…

Eclipse(Ganymede) に Dynamic Languages Toolkit をインストールする

Eclipse Foundation に Dynamic Languages Toolkit というスクリプト言語の IDE 環境のプロジェクトがある。 まとめて手に入れられるので便利そうなのでインストールしてみた。 Eclipse Dynamic Languages Toolkit (DLTK) Downloads - for Committers and Ea…

jQuery の $(selector, context) な書き方は context.find(selector) を使うべきだった件について

先日、404 Not Found に参加しました。 #1 は未参加だったので、jQuery.fn.init() について後から読んでいたのですが、あまり Travesing API を見ていなかったので、あるノード以下から選択するときは、$(".classname", context) みたいに書いてました。 jqu…

jQuery UI の Dialog を使って確認用モーダルダイアログを実装するには

jQuery UI (http://ui.jquery.com/) には便利なコンポーネントがある。このダイアログを使ってユーザーへの確認に使うモーダルダイアログを作りたい。 設定仕様に幅がある分、わかりずらいところがある。ということで下記のように手軽に使える用に関数を作っ…

jQuery の hover() について調べたことのまとめ

hover() は mouseenter と mouseleave を同時にセットする http://docs.jquery.com/Events/hover の引数の名前付けを見て、hover は mouseover と mouseout を同時に指定するものだと思っていたが違うらしい。 jquery-1.2.6.js の 2278 行付近 hover: functi…

Ajax アプリケーションのステータス変更をタイトルをロールさせて目立たせたい

おそらく常に起動している(開いている)ような Ajax アプリケーションを使う場合、タブブラウザを使っていることがほとんどだろう。そのアプリが例えば『新着メッセージがある』といった状態が変わったことを通知したいときに、ユーザーに目立たせるにはど…

JavaScript の JIT 導入やバイトコード化

JavaScript 高速化へ Safari3より4倍高速、WebKit新JavaScriptエンジン"SquirrelFish" | マイナビニュース Adobe高速JavaScript実装、バイトコードにForthを採用 | マイナビニュース

Google AJAX Libraries API の使い方まとめ

Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers Google が下記の主要 JavaScript ライブラリのホスティングを開始したので、以前作ったガジェットのソースを変更することにした。 jQuery prototype script_aculo_u…

XMLHttpRequest でのステータスコード 304 (Not Modified) について

IE の Ajax (XMLHTTP) で、通信が行われたかキャッシュが使われたかを判定する方法 - IT戦記 を読んで、レスポンスのステータスコード見るのが本来のやり方なのではと思い、試してみたら意外な結果になった。 テスト content.txt を採りに行って表示するだけ…

JSONP ならぬ HTMLP を Amazon XSLT で試してみた

Amazon Web Services では Style 引数に XSL ファイルの URL を指定することでレスポンスの XML を Amazon のサーバ側でパースできる。これを使って、JSONP 形式に返すサンプルが色々あった。でも単純に表示するだけなら innerHTML に HTML を流し込むだけの…

style が white-space:pre なブロック要素内で折り返すように JavaScript でハックするには

かなり限定的な話です。 スタイルシートの white-space 属性が pre 指定だと任意に改行が行われなくなるので、長い行が存在するとスクロールが入って見づらくなるのは、よく知られていると思います。 そんなときに JavaScript を適用して直して表示させる方…

常にブラウザのクライアント領域一杯にブロック要素を配置するには

通常のリッチクライアントのように常にクライアント領域一杯に展開させたい。縦に 3ペイン header, content, footer の領域があり、header と footer の高さが固定で content の高さはクライアント領域の高さにあわせて伸び縮みする場合を考える。 Internet …

「Suica 利用履歴から運賃を算出」ガジェットの UI をタブ仕様に変更

先日作った、Suica(スイカ)のガジェットだが、ユーザーインターフェイスが微妙だ。入出力のエリアを並べているので領域を広い。入力と出力が同時に見えている必要もないと思ったのでタブ化して分けてみた。それにタブ名をナビゲーションメッセージになった…

Google AJAX Feed API と jQuery でフィードをスライドショー表示するガジェットを作る

先日、オライリーの Amazon ベストセラートップ 10 のフィードを生成をした。それを今度はスライドショーっぽく表示するガジェットを作ってみる。 フィードの取得には、Google Feed API — Google Developers を使う。これで RSS/ATOM の規格に左右されないし…

Suica 履歴の残額表示が使えないので、各運賃を算出するガジェットを作ってみた。

お勤めの人は会社で交通費の精算をやると思うんですね。モバイル Suica を利用してるとネットでも JR東日本:モバイルSuica>会員メニュー 履歴を見られて便利なんですが、各乗車の運賃が出ないでその降車時の残額しか出ないのがいただけない。 ということで…

IFRAME を使わずページをロードする(3)

IFRAME を使わずページをロードする(2) - Tosshi Noteの続き、今回は SWF 内からリンクをたたくとき。ExternalInterface を使って Flash 内から JavaScript を呼び出してみる。 試してみると問題が…、SWF があるページ自体を切り替えると Safari で固まった…

IFRAME を使わずページをロードする(2)

今回は、jQuery を使ってみる。そしてロードしたコンテンツ内のリンクターゲットも自身にするサンプル。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> </head></html>