r.jsでビルドする際に設定として使うbuild.jsを動的にする。さらに部品化する。 - monjudoh’s diary
r.js RequireJS用のmoduleをビルドする際にはr.jsを使います。 build.js この時にビルド設定の記述に使用するのがbuild.jsでこんな感じで書きます。 簡単な例だとこんなの ({ baseUrl:'./src', dir : './build', paths:{ jquery:"../lib/jquery-1.8.2", text:'../lib/plugins/text', underscore:'../lib/underscore-1.3.3' } }) 動的なbuild.js build.jsはJSONではなくてJSです。 JSなので処理を書くことが出来ます。 例えば関数その場実行を含む下記のbuild.jsは、上記のものと同じ設定を表します。 ({ baseUrl:'./src', dir : './build', paths:(function ()
CommonJS AMDとDeferred - monjudoh’s diary
Writing Modular JavaScript With AMD, CommonJS & ES HarmonyのModules With Deferred Dependenciesが便利なので活用してる。 初期化処理が非同期処理でrequireしてきても即使えるとは限らない場合に使う。 モジュール側ではモジュールそのものではなくてpromiseを返しておいて、モジュールの実体が完成したらresolveで渡す。 使う側はrequireしてきたpromiseのthenメソッドのcallbackでモジュールの実体を受け取って使う。 // 何らかの非同期処理を経て初期化されるモジュール define('someModule',['jquery'],function($){ var dfd = $.Deferred(); setTimeout(function(){ // モジュールとして実際
Require JSで設定をmodule外に出して、それをビルド時に同梱する - monjudoh’s diary
モジュール別の設定を読み込む RequireJSではモジュールの名前として"module"が予約されていて、モジュール内でmoduleモジュールを取得するとそのモジュールの情報を参照することが出来ます。 define('foo',['module'], function (module) { }); RequireJS API config methodで設定できる項目の中のconfigにモジュール名をkey何らかのオブジェクトをvalueという辞書を設定しておくと、 moduleモジュールのconfig methodでそのオブジェクトを取得することが出来ます。 今回はmodule moduleとかconfig configとか見てて混乱するのが多いですね。 こんな設定をすると requirejs.config({ config: { 'baz': { color: 'blue' } }
JavaScriptでコマンドを作って実行する - monjudoh’s diary
前置き Firebug1.10にhelpコマンドなるものが入ってました。 consoleでhelpって入力して実行するとFirebugで使える関数等が表示されます。 help();じゃないんですよ。 関数じゃなくてコマンド。 どうやって実現しているんだろうかって気になったのでエスパーして似たようなのを作ってみました。 Firebugのソースは読んでないけど多分おんなじようなことをしているはず。 コード 以下、with文の中でcommandって書いて実行するとcommand is executed.って出力されます。 var obj={}; Object.defineProperty(obj,'command',{ get : function() { console.log('command is executed.'); } }); with (obj) { command // com
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - monjudoh’s diary
@rosylillyが気にしていた のでまとめた。 built-in/DOM objectのprototype拡張による弊害 追加したプロパティ/メソッドがfor inで列挙される var obj = {a:1}; for (var i in obj) { console.log(i); } こうするとaだけ出るはずが、 Object.prototype.b=function(){}; こうした後だとa,bが出てしまうって奴ですね。 そのまま代入しないでObject.defineProperty/definePropertiesでenumerable:falseのプロパティとして定義すれば列挙されなくなるので特に問題ありません。 今回挙げるprototype拡張の弊害の内唯一これだけはECMAScript5時代になって解消されました。唯一これだけは。 built-in/DOM object
BPStudy#60 ECMAScript5時代のJavaScriptライブラリ - monjudoh’s diary
JavaScript: 世界で最も誤解されたプログラミング言語(2001年) JavaScript: The World's Most Misunderstood Programming Language http://d.hatena.ne.jp/brazil/20050829/1125321936 2012年未だ誤解されているプログラミング言語JavaScript 嫌われている"JavaScript"とは何か? ECMAScript3 13年前・前世紀(1999年)の言語仕様 IE6 11年前(2001年)のランタイム 嫌われている"JavaScript"と同世代の各言語のバージョンは? Python2.1 Ruby1.6 Perl5.6 J2SE1.3 現在のJavaScriptはECMAScript5 どの環境で使える? http://kangax.github.com/es5-c
JavaScriptでの非同期関数合成 - monjudoh’s diary
Unserscore.jsや互換ライブラリのLo-Dashを使うと関数合成が出来ます。 複数個の関数があって、関数を呼び出した結果を使って関数を呼び出して…っていうのを1個の関数にします。 ドキュメントの例を見れば分かるかと。 簡略化のために関数合成の対象になる関数を1引数・戻り値ありの関数とします。 これを非同期処理をする関数に当てはめるとcallbackを含む2引数・戻り値なしの関数が当てはまるでしょう。 この場合のcallbackは1引数の関数とします。 まず、logを出力するcallback関数を定義しましょう。 function log(result){ console.log(result); } 次にcallbackを含む2引数・戻り値なしの関数を定義します。別に非同期処理はやっていないです。 // 1を足す function add1(callback,arg){ call
packerで圧縮されたJavaScriptのdebug方法 - monjudoh’s diary
minifyされたJavaScriptは各種開発者ツールのdeminifierを使えば整形された状態でdebug出来ますが、packerで圧縮されたJavaScript(以下packed JS)はどうかという話。 Google Chromeの開発者ツール前提で話をするので他のブラウザについては誰か調べてみてください。 packed JSをdebugする際の壁はそれがevalで実行されることですが、Google Chromeの開発者ツールではevalで実行されたJSもdebug実行出来ます。 問題はどうやってdebug実行に持っていくかですが、globalから辿れる何らかのAPIがあるなら呼び出し元でブレークポイントを貼ってstep intoすれば良いです。 その場実行されるようなJSの場合はそれもできないので工夫が必要です。 以下は古いjQueryを使った例でそのような工夫は本来不要ですが
LT概要「GitとMercurialのリポジトリ構造の違いと歴史改変について」SCMBootCamp in Tokyo - monjudoh’s diary
SCMBootCamp in Tokyo 開催しました。KPT公開。 - うさぎ組にて手ぶらLTをしたので資料はないが、内容を軽くまとめておく。 GitとMercurialの比較 Git Mercurial リポジトリ commit objectのグラフと、branchのHEAD,tagなどの参照で出来ている。 commit objectのグラフだけで出来ている。 歴史改変サポート デフォルトであり。 デフォルトではなし。extensionが必要。 歴史改変 新しいcommit objectグラフを作成し、参照を古いHEADから新しいHEADに移す。表面上要らない歴史の削除として使われるresetはHEADの移動のみを行う。 新しいcommit objectグラフを作成し、古いcommit objectグラフをリポジトリから除去する。要らない歴史の削除として使われるstrip(MQExte
Shibuya.js - Test.js LT テスターを支援する仕組みの話 - monjudoh’s diary
お前、誰よ 文殊堂といいます BePROUD社員 お仕事 最近は、JavaScript時々Objective-C 今日のお話 自動テストの話はしません テスターによるテストの話をします タイミングによって発生したりしなかったりする類のバグってありますよね テスターさんがモンキーテストをやってくれてる時に見つけてくれたりします でも報告されるのは… 「何をやっているときに」 「何が起こったか」 つまり、「操作」と「現象」だけです 原因箇所を特定するにはプログラマもその操作をなんども繰り返さないといけません ダルい 何とかしたい 問題の実例 IE(主に6,7)で「操作は中断されました」が出る What Happened to Operation Aborted? – IEBlog HTML解析中にまだ閉じタグまで解析されていない要素(bodyとか)に対して、子要素の追加や削除を行うと「操作は中
java-ja.js #2 RequireJS実践編 - monjudoh’s diary
java-ja.js #2 : ATND 自己紹介 文殊堂といいます。 BePROUDという会社のリーダーです ↑はロケタッチの話です(ロケタッチ知らない人は4SQでMayorになったみたいな話だと思っといてください)。 弊社では今(2010年12月現在)人材募集中らしいですよ。 今の仕事はUIがリッチな業務システムを作るとかそんな感じで、 そこでRequireJSを使っています。 RequireJSって何? 公式サイト RequireJS スライド jQueryRequireJS.pdf 日本語記事だとこの辺? http://zudolab.net/blog/?p=451 要はJavaScriptの依存性解決をしてくれるライブラリです。 以前RequireJS moduleについてって記事書きました。 あらためてRequireJS moduleについて まず最初に、一般的な言語と同じよう
RequireJS moduleについて - monjudoh’s diary
RequireJSって何? 公式サイト RequireJS スライド jQueryRequireJS.pdf 日本語記事だとこの辺? http://zudolab.net/blog/?p=451 要はJavaScriptの依存性解決をしてくれるライブラリで、こんな感じで使えます。 require( [ 'lib/a' ,'lib/b' ,'lib/c' ], function(){ // lib/a.js,lib/b.js,lib/c.jsが読み込まれていることが保証されているcallback require( [ 'lib/d' // lib/a.jsに依存しているライブラリ ,'lib/f'// lib/b.jsに依存しているライブラリ ], function(){ // lib/a.js,lib/b.js,lib/c.js,lib/d.js,lib/e.jsが読み込まれていることが保
CSRF脆弱性対策 - monjudoh’s diary
CSRF対策のtokenはセッションIDで良い セキュリティ的にワンタイムトークン>セッションIDではない。 という話が、この辺の記事に書かれています。 高木浩光＠自宅の日記 - クロスサイトリクエストフォージェリ（CSRF）の正しい対策方法 高木浩光＠自宅の日記 - CSRF対策に「ワンタイムトークン」方式を推奨しない理由, hiddenパラメタは漏れやすいのか？ 肝はこういう事のようです tokenは外部のサイトから知り難い(実質知り得ない)ものでないといけない セッションIDはcookieに格納される document.cookieは自ドメインのものと親ドメインのものしか見れない→外部サイトで動かすJavaScriptからは参照できない セッションIDは『暗号学的に安全な擬似乱数生成系で生成されているはず』(引用) 推測も事実上できない 補足すると、セッションIDを使用したCSRF対
昨日騒ぎになったTwitterのXSS脆弱性によって実際に受けそうな被害とその対策 - monjudoh’s diary
何が出来るのか どんな脆弱性かの詳細はこちらを参照2010 年 9 月 21 日現在のツイッターのバグ(脆弱性)について 外部JavaScriptを読み込むコードを仕込めたので、 どんなJavaScriptでも実行できる状態でした。 以下、JavaScriptの実行によってTwitter上で出来る事。 セッションハイジャック JavaScriptからcookieを参照できるのでログイン状態のセッションIDも参照できます。 また、任意のJavaScriptが実行できる以上、参照したセッションIDを攻撃者のサーバ等に送信することも出来ます。 攻撃者は奪ったセッションIDをcookieに設定すれば、被害者のアカウントでtweet,direct messageの閲覧・送信が出来ます。 確認してみたところ、ログイン状態のセッションIDはログアウトしても無効にはなりません。 設定→パスワードからパスワ
Firebugで元のJavaScriptのコードに手を入れずにdebug用のconsole出力を入れる方法 - monjudoh’s diary
Firebugでは条件付きブレークポイントが使えるので、 scriptタブにて該当行にブレークポイントを貼り、 条件としてconsoleへの出力を||区切りで、最後に&& falseを入れる。 console.debug('this.lastPosition') || console.dir(this.lastPosition) && false こうするとブレークポイントを通る度にconsoleへの出力は評価され、 consoleに出力され、最後の&& falseのため式全体は必ずfalseとして評価されるため ブレークすることはない。 追記 console出力系関数の戻り値はundefinedなんだから&& falseは不要か 追記 nanto_vi @monjudoh JSでは||より&&の方が優先順位が高いので、a || b && c はaが真ならbもcも評価されずに全体が真として
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
