サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
2024年ランキング
monjudoh.hatenablog.com
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 ()
モジュール別の設定を読み込む 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' } }
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(){ // モジュールとして実際
前置き 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
@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
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
インスタンスに依存してなければこれで済むから簡単ですよねー function A(){} var proto = A.prototype; Object.defineProperty(proto,'key',{ value : 'default', writable : true }); インスタンスに依存している場合はprototype定義時にそのインスタンスが存在しないのでvalueで初期値を定義できません。 単純なコードだと、実際の値を保持する別propertyとget/setを定義して、まだ保持していなかったら設定するとかそうなるでしょう。 function foo(val) { // valの内容によって戻り値が変わると思いねえ return 'default'; } function A(){} var proto = A.prototype; Object.definePro
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
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を使った例でそのような工夫は本来不要ですが
partake.inの12日目は文殊堂がお送りします。 深夜35時などという遅くに申し訳ありません。 今日はSourceTree無料キャンペーンによって存在意義が危うくなった感のあるMacHGも得意な箇所は凄いんだよ、ということで MacHGでrebase ontoをやるお話です。 Mercurialのrebase rebaseというとGitのコマンドという印象が強いですが、 Mercurialでもビルトインのextensionを有効化するだけで使用できます。 話の都合上ついでにいくつか有効化しておきましょう。 [extensions] rebase = mq = graphlog = rebase onto さて、今日お話しするのはgit rebase --onto相当のことです。 まず以下のglogを見てください。 このmami branchから分岐しているmado branchをho
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
内輪ネタはただの+α 最近の話だとRubyKaigi他での魔法少女まどか☆マギカネタとRubyKaigiでのたこ焼き仮面ネタあたりか。 内輪ネタって知ってたら面白い、知らなかったらそれはそれで困りはしないってものであるべきだと思ってて、 つまり、+αであるべきだと思っている。 例えば、スライドだったら内輪ネタが入ってるスライドを除いても、 もしくはスライドの中から内輪ネタの部分を除いても、意味が通るならOKだと思うわけです。 例えば、「GCアニメ・まどか☆マギカによる空前のGCブーム」なんてネタが何のことか分からなくたって、 GCのないRubyっていう本題を理解するには別に何も問題ないわけです。 問題なのは同調圧力 内輪ネタはただの+αなんで別に"知らなくてもいい"んです。 普段、「〜を知っていて当然」みたいな同調圧力をかけられているので、 自分の知らないネタを当たり前のように使われるとそ
remote repository追加 remote repositoryをgit remote addで追加。 GitTowerの場合Refs->Add New Remote Repositoryから追加。 remote branch情報の取得 remote repositoryに対してgit fetchで、remote repositoryのremote branch一覧を取得出来る。 cloneはfetchを含んでいるようなものなので不要なんだと思う GitTowerの場合remote repositoryを右クリックして、Fetch from Remote Repository これでrepositoryName/branchName でremote branchを使える。
新卒準備カレンダー 2011春 : ATND お前だれよ 普段全然気にしてないのですが簡単な引き算が間違っていなければ社会人7年目らしいです。 去年くらいまではWebアプリを作る仕事がメインで、いろいろな言語でサーバサイド書いたり、 たまにクライアントサイド担当としてJavaScriptをモリモリ書いたりしていましたが、 今年に入ってからはiOS仕事がメインでObjective-C書いたりやっぱりJavaScript書いたりしてます。 マイテーマはeventによるUIコンポーネントの作成です。 新社会人もそうでない人も知っておくと上手くやっていける表裏の二つの話をしようと思います。 表-友達を作る 自分が属している組織の内外を問わず友達を作るのはとても大切です。 気を付けないといけないこととしては、愚痴る相手としての友達をたくさん作ってもしょうがないということです。 どこかしらでいいので自
githubというかgitosisはsshの鍵でユーザを判定します。 設定の仕方はhelpでも見てくだしあ。 Redirecting... Redirecting... Redirecting... 自分のgithubユーザとして色んなマシンからgithubを使う場合は簡単です。 上記の説明のとおりに公開鍵を追加していけばいいだけです。 で、同じマシンの同じユーザアカウントで、 複数のgithubユーザとしてgithubを使うのはどうすればいいかというと、 ホストのエイリアスを設定して別の秘密鍵を設定してやれば大丈夫です。 入門OpenSSH / 第4章 OpenSSH を使う ↓の例は複数HostNameへのSSH接続の管理ですが、 ~/.ssh/config で簡単に複数ホストへのSSH接続を管理する - すぱぶろ 同一HostNameで別Hostというふうにも出来るのでそれを使います
お前、誰よ 文殊堂といいます BePROUD社員 お仕事 最近は、JavaScript時々Objective-C 今日のお話 自動テストの話はしません テスターによるテストの話をします タイミングによって発生したりしなかったりする類のバグってありますよね テスターさんがモンキーテストをやってくれてる時に見つけてくれたりします でも報告されるのは… 「何をやっているときに」 「何が起こったか」 つまり、「操作」と「現象」だけです 原因箇所を特定するにはプログラマもその操作をなんども繰り返さないといけません ダルい 何とかしたい 問題の実例 IE(主に6,7)で「操作は中断されました」が出る What Happened to Operation Aborted? – IEBlog HTML解析中にまだ閉じタグまで解析されていない要素(bodyとか)に対して、子要素の追加や削除を行うと「操作は中
前置き IEでのa要素の各属性について - 文殊堂の続き。 IE 6,7 で相対URL -> 絶対 URL の変換 - #生存戦略 、それは - subtechを参考にして、 cloneNodeハックとlink.hrefによるURLの絶対URL化を組み合わせてみました。 http://jsdo.it/monjudoh/o2Mk http://jsdo.it/monjudoh/9aHd link.hrefによるURLの絶対URL化はIE6,7では使えないので割愛。 検証 IE6 なぜかhostnameがiframeではなく外側のものになってしまっている。 少なくとも短いURLについてはouterHTMLハックを使った場合に各属性の値をちゃんと取れていたので、 そっちを使ったほうが良さそう。 a要素の各属性(cloneNodeハック) ---url.length:11 href:[htt
色々あってa要素でURLをパースするというコードを書いていて色々はまったのでまとめます。 IE6-8でのa.hrefの上限 IE6,7:4096bytes IE8:4121bytes でした。 なお、Firefox,Google Chrome,Safariは1MBとか普通に扱えます。 使わないけど。 http://jsdo.it/monjudoh/8Fm6/read 各属性の取得状況 a.hrefにURLを代入して各属性がどうなるか調べてみました。 URLの長さが短い⇔上限超え outerHTMLハックを使わない⇔使う a.hrefにURLを代入後、別の要素のinnerHTMLにa.outerHTMLを代入し、そのfirstChild(a要素)の各属性を見ること の二軸を変えて調べてみました。 http://jsdo.it/monjudoh/sc82 IE6 a.hrefへの代入で更新され
自己紹介 文殊堂といいます BePROUDの見習いiOSプログラマです。 JavaScriptで30byteでFizzBuzzを書けます。 location.href='//is.gd/kzkQhu' iOSの前はUIがリッチな業務システムを作るとかそんな仕事をしてました。 内容 RequireJS実践編 jQuery custom event 応用編 疎結合なUIコンポーネントの作成について
複数画面で使えるAjax formダイアログのコンポーネントを作る 初期状態 Google CalendarのようなWebアプリを想像してください。 1日が1個のセルになっていて、セルをクリックしたらスケジュール登録ダイアログが表示され、 入力して登録ボタンを押すとスケジュールが登録され、セルの中に登録されたスケジュールが表示されます。 イメージ define([ 'schedule-model' ,'schedule-api' ,'schedule-to-selectors' ,'growl' ,'app/schedule-dialog-template' ,'debug' ,'jqueryui/dialog' ],function( ScheduleModel ,ScheduleApi ,scheduleToSelectors ,growl ,scheduleDialogTemplat
前置き custom eventとは何か?(前置きの前置き) ブラウザがサポートしているeventではない独自定義event。 clickとかはブラウザがサポートしているevent ユーザのアクションやブラウザの状態等によって直接発火されることはない click eventは、ユーザがマウスポインタを要素の上に移動後にマウスのボタンを押すと発火される DOMContentLoaded eventは、ページのHTMLがダウンロード完了し、すべてパースされると発火される jQueryではtrigger,triggerHandler methodでeventをユーザのアクション等に関係なく発火することが出来る custom eventも発火出来る 逆に言うとcustom eventはJavaScriptの側からしか発火されない 以前The JUI 2009 Returnsで話をしました。 htt
前説 DjangoでWebアプリを開発していて自分はJavaScript部分を担当しています。 で、サーバ側を動かさないと開発できないのは辛いので、 サーバサイドで生成されたHTMLとJSONをwgetして、js/dummy/とかに配置し、 各種URLの参照を書き換えてローカルでJavaScriptだけもりもり実装できるようにしました。 サーバサイドの実装に先行してJavaScriptの実装を進めていたため、 プロジェクト全体(django-apps)と独立してバージョン管理したかったため、 static配下だけが入ったdjango-staticというリポジトリを作成し、 そちらで開発を進めていきました。 今回の話は、プロジェクト全体(django-apps)とJavaScript&CSSだけ(django-static)の 二つのリポジトリの同期をとって運用していく話です。 準備 hg
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について まず最初に、一般的な言語と同じよう
とりあえずRequireJS0.14.5+jQuery1.4.3,RequireJS0.15.0+jQuery1.4.4で発生。 IEは6~8っぽい。 なんで気づいたかというと IEでjQueryUI等の動作がおかしくなった CSS Box Modelがサポートされている状態なのに$.boxModel(=$.support.boxModel)がtrueでない falseですらなくundefinedだった $.boxModelの検出はjQuery(function(){})内で行われていた。 $(document).ready()と同じ 検証 対象：RequireJS0.15.0+jQuery1.4.4 環境：IE7(+CompanionJS) 今、仕事で作ってるアプリで使っているallplugins-require.jsとjquery-1.4.4.jsに 以下のようにconsole.log
GitHub - monjudoh/debug-assert-RequireJS-module: RequireJS module for debugging and assertion. これは何かと言うとRequireJS moduleについて - 文殊堂で説明したRequireJSのmoduleで、 debug支援用のものです。 debug log出力の基本的な使い方 RequireJSのmoduleなので以下のように読み込んでやります。 callbackにdebug関数が渡されてくるのでこいつで適当にdebug printしましょう。 require(['debug'],function(debug){ debug('hogehoge'); }); define(['debug'],function(debug){ debug('fugafuga'); }); consoleがない
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が読み込まれていることが保
というJavaScriptのライブラリを作りました。 GitHub - monjudoh/ExDate: JavaScript Date class wrapper for using conbination with Date libraly which leads to prototype pollution. 何をするライブラリか ExDateというclassを定義しています。 やっていることは、インスタンスを作成すると同じコンストラクタ引数でDate objectを作成し、 内部に抱えて、Date objectのメソッドを呼ばれると処理を丸投げするだけです。 何が嬉しいのか Datejs(GitHub - datejs/Datejs: A JavaScript Date and Time Library)という大変使い勝手のいいライブラリがあるのですが、 Date,Date.pro
前置き hgsubversion自体の導入については↓をどうぞ hgsubversionの導入 - 文殊堂 ちょっと前までのhgsubversion ちょっと前までhgsubversionではsvnのリポジトリの完全なコピーを作ることしかできませんでした。 例えば10年物のsvnリポジトリをhg cloneすると10年分の履歴全てを取ってきてしまいます。 目的がsvnリポジトリのコンバートであるなら問題ありませんが、 svnリポジトリを正としつつMercurialの分散SCMの機能を活用して開発をいい感じにやりたい という場合には困ります。 git-svnのように特定リビジョン以降だけ持ってくるとかやりたいです。 startrev option で、changeset:827547493112から出来るようになりました。 残念ながら基底のURL(/trunk,/tags/,/branche
CSRF対策のtokenはセッションIDで良い セキュリティ的にワンタイムトークン>セッションIDではない。 という話が、この辺の記事に書かれています。 高木浩光＠自宅の日記 - クロスサイトリクエストフォージェリ（CSRF）の正しい対策方法 高木浩光＠自宅の日記 - CSRF対策に「ワンタイムトークン」方式を推奨しない理由, hiddenパラメタは漏れやすいのか？ 肝はこういう事のようです tokenは外部のサイトから知り難い(実質知り得ない)ものでないといけない セッションIDはcookieに格納される document.cookieは自ドメインのものと親ドメインのものしか見れない→外部サイトで動かすJavaScriptからは参照できない セッションIDは『暗号学的に安全な擬似乱数生成系で生成されているはず』(引用) 推測も事実上できない 補足すると、セッションIDを使用したCSRF対
次のページ
このページを最初にブックマークしてみませんか？
『monjudoh’s diary』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
