JsonML を使う高速テンプレートエンジン「JsonML.Template」 - IT戦記
というのを作ってみた JsonML とは JSON を使ったマークアップ言語です。 http://jsonml.org/ 使いかた // テンプレートの作成 // <div class="section"><h2>タイトル</h2><p>本文本文本文</p></div> var t = $T(['div', {class: 'section'}, ['h2', 'タイトル'], ['p', '本文本文本文本文'] ]); // 要素の生成 document.body.appendChild(t()); // 呼び出すだけ // テンプレートの作成 var t = $T(['div', {class: 'section'}, ['h3', function(c){return c.getVar('title')}], // タイトルを動的に生成 ['p', function(c){retur
SCRAPBLOG » [userChrome.js] 軽量マウスジェスチャで利用可能なスクリプト集
[userChrome.js] 軽量マウスジェスチャで利用可能なスクリプト 「○○をジェスチャにしたいんだけど、userChrome.jsには何て書けばいいの」といった話題はこちらでコメントお願いします。 ナビゲーション // 戻る document.getElementById("Browser:Back").doCommand(); // 進む document.getElementById("Browser:Forward").doCommand(); // 更新 document.getElementById("Browser:Reload").doCommand(); // 更新（キャッシュを無視） document.getElementById("Browser:ReloadSkipCache").doCommand(); // ホーム document.getElementB
JavaScript のスコープに変数を動的に追加する - IT戦記
JavaScript の変数はすべて関数オブジェクトの開始時に生成される function f() { // この時点で変数 a は生成されている a = 1; var a; alert(a); // 1 }; たとえ、関数中にブロックがあろうとも function f() { // この時点で変数 a は生成されている { a = 1 } { var a } alert(a); // 1 } たとえ、with スコープがあろうとも function f() { // この時点で変数 a は生成されている a = 1; var b = {}; with(b) { var a; // この var は直近の with スコープではなく、 // 関数スコープに対する var となる a = 2; } alert(a); // 2 } with スコープでは、変数を動的に追加することができる f
クロスドメインでのデータ読み込みを防止するJavaScript ? - snippets from shinichitomita’s journal
GMailのコンタクトリスト漏洩のエントリのついでに。 JSONデータをscriptタグにのせて配信するサービス（JSONPなど）で、限られたサイトのみにしかそのデータを配信しないようにするためには、クライアントが送出してくるリファラ情報を使ってサービスコンシューマとなっているサイトを特定してアクセス制御する方法がある。 この方法はおそらく大部分のクライアント（ブラウザ）に対しては有効で、例えば実際にGoogle MapsなどもそれとAppKeyを組み合わせてサイトを判別しているっぽいのだけど、意図的にリファラ送出を切っているブラウザであったり、あるいはプロキシプログラムなどが自動的にリファラヘッダを除去してしまうようなクライアント環境に対しては無効になってしまう。 ということで、そんなクライアントでもなんとかならないだろうかと考えていたときにちょっと思いついた、もしかしたらこの方法なら許
Kazuho@Cybozu Labs: 安全な JSON, 危険な JSON (Cross-site Including?)
« クロスサイトのセキュリティモデル | メイン | E4X-XSS 脆弱性について » 2007年01月06日 安全な JSON, 危険な JSON (Cross-site Including?) 先のエントリで、 JSON については、JavaScript として副作用をもたない (もたせようがない) ゆえに文法違反であるがゆえに、秘密情報を含むデータフォーマットとして使用することができるのです。 (Kazuho@Cybozu Labs: クロスサイトのセキュリティモデル) と書いたのですが、認識が甘かったようです。Jeremiah Grossman: Advanced Web Attack Techniques using GMail によると、配列の初期化演算子 [] の動作を外部から変更することができる注1とのこと。 実際に手元の Firefox 1.5 で試してみたところ、JS
超軽量JavaScriptフレームワーク「SimpleJS」:phpspot開発日誌
SimpleJS SimpleJS is a javascript library simple and light proposing functions ready with the use to facilitate the exploitation of ajax. 超軽量JavaScriptフレームワーク「SimpleJS」。サイズはなんと14KB. 機能は次のような感じ。
infogami、他のページに書かれたコードをロードする - FAX
infogami、他のページに書かれたコードをロードする JavaScript 2007/1/4 追記 swdyhの日記 - 「infogami、他のページに書かれたコードをロードする」を試してみた Markdown解釈の際に、infogamiが>とか<をエスケープしちゃうとのこと! そうでした、infogamiがスルーしてくれる要素というのがあるんですよね。 すんません、適当で。 こんなコードも残ってて、各ページで個別にCSSを書こうとしてたみたいです。 style要素、書けなかったのかなぁ。 function addRules(css){ document.body.appendChild( document.createElement('span') ).innerHTML = '<span style="display:none">DUMMY</span><style tyoe=
Kazuho@Cybozu Labs: クロスサイトのセキュリティモデル
« Japanize - IE 系の User JavaScript エンジンに対応しました | メイン | 安全な JSON, 危険な JSON (Cross-site Including?) » 2007年01月04日 クロスサイトのセキュリティモデル あけましておめでとうございます。 昨年、社内で「XMLHttpRequest は何故クロスサイトで使えないのか。画像や SCRIPT タグは使えるのに」という疑問 (というより試問) を耳にしました。おもしろい話なのでブログネタにしようと思っていたのですが、新年早々 GMAIL の事例がスラッシュドットされていたので、自分の現時点での理解をまとめてみることにしました。文書を確認して書いているわけではないので、間違いがあれば指摘してください。また、よい参考文献をご存知の方がいらっしゃいましたら、教えていただければ幸いです。 ウェブブラウザ
JavaScript でトップページへのリンクを追加する - bkブログ
JavaScript でトップページへのリンクを追加する 最近のサイトの多くは、ページの左上にあるリンク画像から、どのページからもトップページに戻れるようになっています。一方、私のブログ以外のページではそうなっていなかったので、 JavaScript を使ってトップページへのリンクを追加してみました。 私のブログ以外のページは歴史的事情によりすべてただの HTMLファイルで構成されています。これらをすべて書き換えてトップページへのリンクを追加するのは大変です。perl -i -pe などの方法で一括置換してリンク画像を挿入する方法もありますが、今後のメンテナンスを考えると考えものです。 そこでもっと楽な方法はないかと考えたところ、都合のいいことに、これらのページでは、右側のサイドバー (サイト共通のリンクなどが並んでいる領域) 用に共通の JavaScript ファイルを読み込んでいること
livedoor Clipからdel.icio.usとはてなブックマークに同時投稿するGreasemonkeyスクリプト | Blog.37to.net
home blog labs about contact プログラミング・開発 > livedoor Clipからdel.icio.usとはてなブックマークに同時投稿するGreasemonkeyスクリプト del.icio.us Greasemonkey JavaScript LDC はてな 作成： 2007-01-03T12:26:03+09:00 更新： 2009-04-29T00:09:18+09:00 誰か作るだろうと思って、他力本願メソッドで待っていましたが、 まだ誰も作らないので、作りますた。 デザインリニューアルに伴い、スクリプトとかを置いていくコンテンツ「labs.37to.net」 を作ったので、インストールとかは下記からどうぞ。 livedoor Clipからdel.icio.usとはてなブックマークに同時投稿するGreasemonkeyスクリプト - labs.37t
JavaScriptのソースに重要なデータを埋め込むなんて….
GmailでJavaScriptのソースとしてコンタクトリストデータを埋め込んでいたため、第三者がコンタクトリストを盗めてしまう、という問題が話題になっています。 まだ詳しく調べていませんがsrc属性に指定されたソースは誰でも（どのサイトからでも）取得できるブラウザの仕様を利用したものだと思います。 比較的早くからsrc属性で他のサイトのJavaScritpが指定できる仕様のリスクは指摘されていました。Gmailでさえ重要なデータをJavaScriptのソースに埋め込んでいるのですからAjaxアプリケーションの多くに同じ脆弱性があるような気がします… 手っ取り早く不完全な方法で修正するにはリファラチェック、きちんと修正するならJavaScriptのリクエストに鍵を付けてチェックする、といった方法で対策可能です。 http://example.com/javascript_contains_
Collection & Copy - 相対パスを絶対パスに変換する
JavaScriptIE 6、IE 7、Firefox 2.0、Opera 9で確認。 function absolutePath(path){ var e = document.createElement('span'); e.innerHTML = ''; return e.firstChild.href; } alert(absolutePath('/')); 関連リンクJavaScriptな日々 | 相対パスを絶対パスに変換する方法Imageを使っています。 getAttribute href bugBug Report: getAttribute(”HREF”) is always absolutegetAttribute("href",2)とか。既存のa要素のhrefは上記の方法で絶対パスになるけど、document.createElement('a').href='/'では、
userChrome.js 用スクリプト: Days on the Moon
userChrome.js にずいぶんお世話になっていると書いたので、現時点で私が使っている userChrome.js 用スクリプトを公開。必要最低限の機能に絞り込める、細かいところに手が届くのがいいところ。 UCJS Loader Sub-Script Loader の改良版。UTF-8 マルチバイト文字、JavaScript 1.7 の機能が使用可能に。Build ID 20070109 以降の Trunk では Bug 364692 修正の影響で (?) 動作しなくなっているようです。Sub-Script Loader なら問題はありませんが、日本語文字をそのまま使いたいといった場合にはバグ対応版をどうぞ。(少々トリッキーな手段でバグを回避しているので、最新の Trunk を使っている人以外は通常版を使ってください。) 原因となっていた (?) バグはすでに修正されており、バグ対応
SCRAPBLOG » Blog Archive » [userChrome.js] 軽量マウスジェスチャ
マウスジェスチャ機能は欲しいけど、All-in-One Gestures や Optimoz Mouse Gestures は余計な機能が多すぎる。AiOGから不要な機能を取っ払ってスリム化させようと試みたが、ソースコードが複雑すぎてやる気が失せた。そこで自分で一から考えて作ってみた結果、200行にも満たない userChrome.js 用スクリプトとして実装することができた。 xuldev.org :: userChrome.js scripts » Mouse Gestures 特徴 マウストレイル（軌跡の描画）は重くなる原因なのであきらめた。とはいえ AiOG から trails.js を借りてきて一工夫すれば実装可能です。 ジェスチャによって実行される処理は、極力ブラウザ本体に実装されたコマンドを呼び出すようにしている。 設定用GUIは無いが、スクリプトを直接編集することで無駄なく
メディアタイプ別に CSS を簡単切り替え | WWW WATCH
あけましておめでとうございます。新年最初のエントリーはプルダウンメニューで画面表示用、プリント用など、出力メディアタイプ別に CSS を簡単に切り替えられるスクリプトの紹介。元ネタは 「A List Apart」 から。 Articles: Invasion of the Body Switchers ： A List Apart まずは、どんな感じになるのかというサンプルから。A List Apart サイト内にサンプルページが用意されていますが、今回はこの記事の解説用にサンプルページを用意してみました。 CSS Switching Sample ： WWW WATCH サンプルページ上部のメニューから、モニター表示時のスタイル、プリント時のスタイル、さらにプロジェクター使用時のスタイルをそれぞれ選択できます。もちろん、選んだ設定は Cookie で保存されるので、次回訪れた際も同じスタ
2006-12-29
画像拡大後も処理を繰り返してしまう問題があったので修正しました。 http://yagi.xrea.jp/2006/12/miximix.user.js Greasemonkeyスクリプトなどを書いてると、対象HTML中にJavaScriptを埋め込みたくなることがあります。 ベタに書くと大変うざいことにりますが、 script.innerHTML = "add = function(a, b){" + " var ans = a + b;" + " return ans;" + "}"; こう書くとすっきり。 script.innerHTML = "add = " + (function(a, b){ var ans = a + b; return ans; }); 関数を普通に記述した上で、それを文字列に変換。
Collection & Copy - Deferred、遅延リソースのインターフェース、パターン
JavaScript setTimeoutで実行される関数の中で発生するエラーは、セットした部分のtry/catchで補足することはできません。 function throwError(){ throw new Error('ERROR'); } try{ setTimeout(throwError, 3000); } catch(e){ // ここには到達しない alert(e); } MochiKit.Async.Deferredを使うと、エラーバックでエラーを補足できます。 callLater(3, throwError).addErrback(function(e){ alert(e); }); エラーの補足以外にも、Deferredのインターフェースから以下が行えます。 キャンセル(cancel)状態(fired)コールバックの追加(addCallback)エラーバックの追加
JSON feed を利用してエントリーに関連する del.icio.us ブックマークを表示 - 2xup.org
2006-12-25T21:18:10+09:00 面白いものを見つけたのだけれど、ブログに書いてもただの紹介記事に終わってしまいそうなものをタグ付けしてブックマークし、ブログ内の関連する記事のページに表示することにしました。ブログ記事につけたタグと同じタグのついたブックマークを表示できれば記事に関連するリンク集ができるし、自分自身へのフィードバックにもなって良いかも。ソーシャルブックマークサービス del.icio.us では JSON feed も提供されているので、それを利用することに。 JavaScript Object Notation - Wikipedia JSON Feed(川o・-・）＜2nd life) JSON Feedとか何とか(hail2u.net) JSONフィードとか何とか #2(hail2u.net) del.icio.us の JSON feed del.
手抜きぷろぐらまのメモ帳 - ASP.NET & JavaScriptでコード汚染をしないで2度押し防止
以前、attachEventでは複数イベントを登録して前のイベントの戻り値を見るというのができなくて悶絶していたが、結局やりたいことはイベント（メソッド）に対してアスペクトを適用すればよいということに気がつき、いろいろ調べた結果、すばらしいサイトをいくつか見つけ、早速コピペの雨あられで目的のものを完成 下のスクリプトを別ファイルにでもして、対象のHTMLにてインクルードすれば、全リンクとボタンにて2度押し防止機能が搭載できる うひょぉぉ アスペクトすげぇぇ // window の Load イベントを取得する。 window.onload = window_Load; function window_Load() { var i; // 全リンクのクリックイベントを submittableObject_Click で取得する。 for (i = 0; i < document.links.
DHTMLで超クールなリッチWebアプリケーションを作成する「DHTML Suite」:phpspot開発日誌
DHTML Suite DHTMLで超クールなリッチWebアプリケーションを作成する「DHTML Suite」。 次のようなデスクトップアプリ風インタフェースをWebアプリに実装したいときになかなか便利です。 他にも、エクスプローラ風のテーブルウィジェット 次のようなリッチなタブＵＩ実装ライブラリ など、リッチなWEBアプリを作るのに便利なライブラリが一式になってダウンロードできます。 他にもフォルダツリーやツールチップなどの機能も盛り込まれているようです。 おなじみ、dhtmlgoodiesの配布ライブラリなのでなかなか注目ですね。 関連エントリ JavaScriptでMacOS XのDock機能を実現する Yahoo UI Libraryを拡張した超リッチなコンポーネント集 Javascriptを使ったブラウザ上で動作するExcelシートライブラリ Ajaxな有用コンポーネント集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
