2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
2013-08-19 uupaa's pure JavaScript module pattern pure JavaScript で記述し、Browser, WebWorker, Node.js で使えるモジュール定義パターンのご紹介。 uupaa 2013-08-19 18:05 前の記事
LEAP Motion と Chrome Extension を使い、ブラウザの操作を行うChrome拡張のサンプルを作ってみました。 手のひらで左右にスワイプすると、開いているページの背景色が、青や黄色に変化する機能を実装してあります。 試してみましょう github から BrowserMotionExtension をクローンします git clone git@github.com:uupaa/BrowserMotionExtension.git Chrome で拡張機能を読み込みます Chrome を起動し、 chrome://extensions/ で拡張機能のページを開きます。 右上にある「デベロッパー モード」をチェックし、 「パッケージ化されていない拡張機能を読み込む…」をクリックし、BrowserMotionExtension のディレクトリを指定すると、 拡張機能として
Flow.js Version 1.0.1 をリリースしました。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジトリはこちらです https://github.com/uupaa/flow.js $ npm install flow_js でもインストールできます 既にインストールしている方は、 $ npm update flow_js でupdateできます。 主な改善は、 FlowのargsをJunctionに引き継いでいなかったので引き継ぐようにしました var Flow = require("flow_js").Flow; var junction = new Flow(2, function(err, args) { // この場合の args は = [ [1,4], [2,3] ] です。 // Array
脳内棚卸 Prototype.js と プロトタイプ汚染(昔話) jQuery が登場する以前、Prototype.js という JavaScript ライブラリがありました。 Prototype.js は、JavaScript OOP の普及期(2005~2007年頃)に多くのサイトで活用されました。 Prototype.js は Object.prototype や Array.prototype 以下に、Ruby 由来のメソッドを拡張することで、 JavaScript に Ruby 感をもたらし、ブームを起こしました。 当時の JavaScript(ES3: ECMAScript262-3rd) には、 言語仕様として Object.prototype を安全に拡張する方法が存在せず、 Prototype.js はしばらく後に 汚染(pollution) と呼ばれる問題を起こしてしま
続き書きました: http://uupaa.hatenablog.com/entry/2012/11/02/154337 今朝方ピコーン*1 があったので頑張って1日で実装してみました。 ピコーンの内容は ・今あるソースコードを汚さずに、動的な型チェックのための仕組みを後付で追加する事ってできないかな? ・同時にパフォーマンス・チューニングに必要な情報も取れるのではないか ・宣言と実装を分離する方法があるのではないか ・今まではできなかった、戻り値の動的な型チェックもできるのではないか です。 監視対象の関数のIN/OUTで、呼び出し階層をネストした状態で吐き出すトレース機能 監視対象の関数の呼び出し回数と、実行時間の統計情報 宣言にもとづく引数の動的な型チェックと、戻り値の動的な型チェック などを prof.js として実装してみました。スライドはこちら http://www.slide
TypeScript を知ってる前提で書きますよー (ε・◇・)з TypeScript いいですねー、JavaScriptの上位互換でES6と衝突しない感じでステキですねー。 (ε・◇・)з Interface とかもいいですねー。とりいれたいですねー Interface を mofmof.js に実装してみました // TypeScript Style interface Point { x: number; y: number; } // mofmof.js Style mm.Interface("Point", { x: "number", y: "number" }); (ε・◇・)з モニターから3メートルぐらい離れてみれば、ほぼ同じだね! 実行してみました 以下のコードを実行すると、mm.allow({ x: 1 }, "Point"); の行でアサーションが発生し、ブラウザ
ES5 をサポートしているブラウザでは、予約語を "こうしなくても" Hash のキーに利用可能になりました。 var ES5Ready = { delete: "Ready?" }; 各ブラウザの対応状況です。 OS Browser ES5Ready iOS 5.1 Safari ○ iOS 5.1 Chrome ○ Android 4.0.4 Browser ○ Android 4.0.4 Chrome ○ Android 2.3.4 Browser × Windows 7 IE 9.0 ○ Windows 7 IE 8.0(Emu) × Windows 7 Opera 12 ○ Windows 7 Safari 5.1.7 ○ Windows 7 Firefox ○ Windows 7 Chrome ○
mofmof.js には mm.allow() や mm.deny() といった assertion(アサーション, 前提条件のチェック) のための関数があります。 mm.allow は関数の入り口で多用され、引数の型や内容が正しいか確認し、まずい場合は例外を挙げます。 mm.deny は mm.allow の逆の動作をします。 mm.allow の使用例 mm.has は集合(data)が要素(find)を含んでいると true を返します。 data と find には複数の型を指定できますが data に文字列を指定すると例外が発生します。 // mm.has function mm_has(data, // @arg Hash/Function/Array: find) { // @arg Hash/Function/Array/Primitive: find values, {
(ε・◇・)з いつも JavaScript のローレベルな話題をお届けしています~ (ε・◇・)з このブログは今日も平常運転です~ さて、引数を1つしか持たない単純な関数は不便なのでしょうか? 便利なのでしょうか? このエントリでは、 引数を1つしか持たない単機能な関数は、Array#map などのイテレータと相性が良い イテレータと組み合わせて使える関数に、うかつに引数を追加するとバグを生み出してしまう事がある という例をご紹介します。 引数を1つしか取らない関数にできること 引数を1つしか持たず、与えられた文字列の先頭を大文字化する関数(例: toUpper)は、Array#map などのイテレータと組み合わせる事でスッキリと記述する事ができます。 function toUpper(str) { // @param String: // @return String: return
Internet Explorer の自動アップグレードについて | TechNet 長かった… 本当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after
mofmof.js にはユニットテスト機能があり、同期/非同期テストの混在や遅延評価もシンプルに記述できます。 以下のコードは、http://mofmof-js.googlecode.com/svn/trunk/test/base.js.htm でテストできます。 同期/非同期の混在 String#test は String#stream の機能を流用して実装されており、 同期/非同期のテストを混在する事ができます。 String#stream と異なり、項目が false を返しても最後まで実行します。 テストしたいを目的に応じて、 関数, 配列, 真偽値 の何れかで定義します。 "関数で評価 > 配列の要素2つを比較 > 真偽値評価".test({ args: { msg: "hello" }, "関数で評価": function() { return this.args.msg ==
mofmof.js には、3種類のログ機能を実装しています。 API Subject Function Put for mm.log console.log ブラウザのコンソールに文字列を出力します console.log mm.iog in/out(nested) log コンソールに関数呼び出し状況をネストしたグラフで出力します console.log mm.rog remote log サーバのアクセスログに文字列を出力します (new Image).src 以下のサンプルコードは http://mofmof-js.googlecode.com/svn/trunk/test/base.js.htm でテストできます。 mm.log - console.log mm.log("hogehoge", 123); とすることで、ブラウザのコンソールログに文字
Script Junkie | Creating Responsive Applications Using jQuery Deferred and Promises (日本語訳: jQueryのDeferredとPromiseで応答性の良いアプリをー基本編 | ゆっくりと… ) をみて、 (ε・◇・)з Deferred… Promise… お 覚えられん… (ε・◇・)з 脳みそちっちゃいので、もっと気軽に使えて、簡単に書けるのがいいなぁ~ って思ってました。 なので、自分なりに、 複数の同期/非同期処理を同時に実行し、処理の合流ができたり多少の失敗があっても前に進める Future 複数の同期/非同期処理を順番/同時に実行し、流れを直感的に記述できる Stream という2つの仕組みを考えました。 Stream は一本の流れを制御し Future は同時多発的な流れを制御するため、こ
(ε・◇・)з hasOwnProperty を使った for in ループより 20%~84% 低コストな、うーぱー式 ループのご紹介だよ~ Object.keys を使い、key を列挙することで、hasOwnProperty を使った for in ループよりも速くなります。 var keys = Object.keys(obj), i = 0, iz = keys.length; for (; i < iz; ++i) { var key = keys[i]; var value = obj[key]; ... ベンチマーク http://jsperf.com/perf-for-in-loop-vs-pre-enum-keys-for-loop/8 Browser for_in_hasOwnProperty loop uupaa-looper Chrome 16.0.912.77
(ε・◇・)з 分かりやすいコードは、ステップ実行もしやすいのです! (ε・◇・)з ループの先頭に、滅多に通らない大きな塊を配置するのはダメなのです! (ε・◇・)з ポチポチする毎に画面がスクロールするのは、余計なストレスなのです! (ε・﹏・)з ブラウザのデバッガ(IDE) などは、テキストエディタよりも領域が半分程度しかなかったりと、一度にみれる範囲が少ないのです for (i = 0; i < 10; ++i) { if (i === 5) { // 一度しか通らないルート : : : : : : : : : : : : : : : : : : : : : : : : : : : : } else { // 頻繁に通るルート : : // 短い処理 : } } (ε・◇・)з ループの先頭には、頻繁に通る短いコードを配置するのです (ε・◇・)з 滅多に通らない大きな塊は後ろに
window.requestAnimationFrame と window.webkitCancelRequestAnimationFrame の実装状況のメモです。 // --------------------------------------- // WebKit // Chrome 16 ready // Safari 5.1.2 not ready // iOS 5.0.1 not ready // Chrome for Android Beta ready // var handle = null; function tick() { console.log(handle); handle = webkitRequestAnimationFrame(tick); } handle = webkitRequestAnimationFrame(tick); webkitCance
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
階層付きのトレース出力をこのような感じで実装します。 (function(global) { function console_q() { function begin() { console.log(repeat("|", nest) + "+- " + fname + "(" + slice.call(args).join(",") + ")"); } function q() { console.log(repeat("|", nest) + "| " + fname + "(" + slice.call(arguments).join(",") + ")"); } function end() { console.log(repeat("|", nest) + "`- " + fname); return --console.q.nest; } function repeat(st
UnitePlayer はモバイルとゲームに特化した HTML5 な音楽再生プレイヤー UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。 扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。 フィーチャーフォン用のソーシャルゲームが大流行な昨今ですが、 フィーチャーフォン用のゲームって音が無いですよね? そのゲームをそのままスマートフォン向けにコンバートしても、音がならずに寂しい感じですよね? 2012年は UnitePlayer で BGM も SE も鳴らしちゃいましょう。 そして没入感や色々なものを高めちゃいましょう! PCブラウザでもそのまま動くから、横展開もお手軽に! UnitePlayer なら iPhone でも BGM と SE を擬似的に同時再生できますよ。 Unit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く