JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
Node.js 0.12 では yield が使えるのでコールバック地獄にサヨナラできる話
Node.js の次のメジャーバージョン 0.12 で yield が使えるようになります。 そのおかげで、JavaScript のコールバック地獄に光が差し込むのです。ああ、さようなら、コールバック地獄。 7 年ごしで実現した yield 2006 年、Firefox 2 のリリースと同時に yield は JavaScript 界に登場しました。随分と前の話ですね。 登場した当時は JavaScript 界隈でけっこう話題になっていました。 JavaScript 1.7 の yield が凄すぎる件について - IT戦記 Latest topics > JavaScript 1.7のyield文ってなんじゃらほ - outsider reflex JavaScript 1.7 の新機能: Days on the Moon 登場したときにはインパクト大きかったものの、結局 Firefox
ドーナッツ状パノラマ画像のコンバーターを作った - てっく煮ブログ
as前回、静止画のパノラマ変形を変換したので、いよいよ動画に取り掛かりたかったのだけど、解像度の違いや中心位置のずれに悩まされたくなかったので事前準備としてコンバーターを作ってみた。機能説明：Center X と CenterY で中心点を微調整するR1 と R2 で内側の円、外側の円のサイズを調整するPREVIEW でドーナッツを展開するSAVE で保存するLOAD で画像をロードするとても簡単だけど、bloggie だけでなく、他のカメラやレンズを使ったドーナッツ状のパノラマ画像にも対応できてるのではないかと思います。ソースは http://wonderfl.net/code/8a357833b658d18cc0988fa241585079bbe3d97f でご確認を。■ソニー【☆bloggie】モバイルHDスナップカメラ MHS-PM5K-L（ブルー）★送料無料【MHSPM5K】ジャ
AS3.0 で TextField をマスクに使う簡単な方法 - てっく煮ブログ
as以前、BitmapData を使って文字列でマスク という記事を書いたけど、BitmapData を使わなくても文字列でマスクを作れることに気がついた。キモは cacheAsBitmap プロパティ。こいつを利用すれば内部的に BitmapData を作成してくれるので、TextField をマスクとしても利用できちゃう。完成品はこんなの。文字を編集することもできる。編集後の文字でもマスクされる！やってることTextField を表示マスクされる Sprite を作成Sprite のマスクを TextField に設定するTextField と Sprite の両方の cacheAsBitmap を true にするソースコードは以下に（39行）。 // Easy Dynamic Text Mask package{ import flash.display.*; import fla
クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた - てっく煮ブログ
集合知プログラミング を読んでいたら、K-means 法（K平均法）の説明が出てきました。K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。クリックすると１ステップずつ動かすことができます。クラスタの数や点の数を変更して、RESET を押すと好きなパラメータで試すことができます。こうやって１ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。K-means 法とはK平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージになります。各点にランダムにクラスタを割り当てるクラスタの重心を計算する。点のクラスタを、一番近い重心のクラスタに変更する変化がなければ終了。変化がある限りは 2. に戻る。これ
Processing をちょっと触ってみた - てっく煮ブログ
前回、前々回 でも触れたとおり、Processing を少し触ってみました。その雑感をエントリにしておきます。まず感じたのは Java の知識がなくても、ソースをいじっていけるのが素敵だということ。クラスすら定義しなくていいので変数やループが分かれば一通りのことができるのが魅力的です。しかも、標準関数では、3D 使えたり、HSV が使えたり、ちょっとした便利関数（rectMode() や constrain()）が用意されてたり、お手軽感満載でした。ヘルプも関数ごとに小さなサンプルとスクリーンキャプチャがあってイメージが沸きやすいし、標準付属のサンプルも非常に充実していて、順番に見ていくだけでも楽しかったです。対して、ActionScript ではフィルタが充実していたり、BitmapData のメソッドでマニアックな最適化ができたりと、噛みごたえもあるのですが、ヘルプもサンプルも微妙だし
アルゴリズムイントロダクション輪講 動的計画法の発表資料 - てっく煮ブログ
2009年3月2日に、はてな京都オフィスで開催された アルゴリズムイントロダクション輪講 の第12回で「動的計画法」について発表しました。資料をここにおいておきます。View more presentations from nitoyon.分かりやすくしようと気合を入れてまとめたら165ページの大作になっちゃいました。無駄に長くてすいません。アルゴリズムの設計と解析手法 (アルゴリズムイントロダクション)作者: T.コルメン, R.リベスト, C.シュタイン, C.ライザーソン, Thomas H. Cormen, Clifford Stein, Ronald L. Rivest, Charles E. Leiserson, 浅野哲夫, 岩野和生, 梅尾博司, 山下雅史, 和田幸一出版社/メーカー: 近代科学社発売日: 2007/03メディア: 単行本
ActionScript3 ブロックスコープの ABC - てっく煮ブログ
as3, tamarin※ AS3 にはブロックスコープがないよ、という内容です一時変数の効率化｜_level0.KAYAC という記事に怪しいことが書いてあったので突っ込んでおきます。この記事によると、for の中で変数を宣言するよりも // 中バージョン function foo1():void{ for(var i:int = 0; i { var a:Object = new Object(); } } 外で宣言をしたほうが // 外バージョン function foo2():void{ var a:Object; for(var i:int = 0; i { a = new Object(); } } a が宣言される回数が少ないので効率的だとしています。けれども、これは間違いです。for の中で宣言しても、ブロックのあとでも生き残ります。もっと言ってしまえば、var 宣言する前
【YQL 速攻レビュー】米 Yahoo! が SQL っぽく色んなデータを取ってこれるAPIを出した - てっく煮ブログ
米 Yahoo! が Yahoo! Pipes みたいに自由度が高くて、またちょっと毛色が違うサービスが出てきた。題して、Yahoo! Query Language。YQL と呼ぶようだ。SQL 風の言語を REST で投げて、結果を XML や JSON で受け取ることができる。具体的にやってみないと分かりにくいので、とりあえず試してみた。RSS からデータ取得YQL を使って RSS から最新のタイトル10個を取ってきてみる。こんな YQL になるらしい。 select title from rss where url='http://d.hatena.ne.jp/nitoyon/rss' rss テーブルに対して select を発行している。実際にこの YQL を試すには YQL 用の console を利用するとよい。（※要ログイン）console の左上に YQL を入力して
"XRay" - ActionScript3 版の Firebug みたいなデバッグツール - てっく煮ブログ
asActionScript 2 用のデバッグツールとして有名だった XRay が ActionScript 3 に対応したようです。DisplayObject の階層を表示してくれたり、オブジェクトのプロパティを修正したり、ログ用のコンソールになったりと機能豊富です。しかも、Flash CS3 だけでなく、Flex や AIR でも使えるようです。ということで、早速、試してみました。ダウンロードしてソースコードに２行追加するだけXRay のソースコードを拾ってきます。Google Code にあるので、SVN で拾ってきましょう。http://osflash-xray.googlecode.com/svn/trunk/as3/trunk/では、自分の Flash に仕込んでみましょう。ActionScript のソースコードに import 文を追加します。 import com.bli
Flash を１ページに100個ぐらい埋め込むとブラウザごと落ちる話 - てっく煮ブログ
Flash を１ページに100個ぐらい埋め込むとブラウザごと落ちる話 素材的に Flash を使おうと思っていくつも埋め込んでたらブラウザごと落ちた。 テストページ(※扱い注意)：http://tech.nitoyon.com/misc/swf/crashtest1.html 9.0.115r debug 版で試してる。IE も Firefox も Opera も落ちた。たぶん Player の問題。通常版とか最新版だと大丈夫なのかも。情報求む。 （追記）コメント欄で色々情報いただいたところによると、環境によって差はあるものの、落ちる人が多いようですね。Mac の人の情報がないけど、Mac だと大丈夫なんだろうか。 （さらに追記）Macでも落ちるようですね。情報ありがとうございました。 Permalink | コメント(7) | トラックバック(0)
具体例で説明するデザインパターン - てっく煮ブログ
JavaScriptデザインパターンってなんだかたいそうなものに考えられがちだけど、実は、そこかしこのライブラリや仕様に取り込まれていることが多い。「デザインパターン分からん」とか「で、どうやって使うのよ」と悶々としている人には、「どういうところで使わているのか」を知っておけばイメージも沸きやすいし、意外にたいしたことないんだな、ということが分かるんじゃないだろうか。そこで、JavaScript やその周辺の技術で、デザインパターンがどのように使われているかを紹介してみることにする。ここでは、GoF本の順番に沿って、以下の11個のパターンを取り上げる。生成に関するパターン Factory MethodAbstract FactoryBuilderPrototypeSingleton構造に関するパターン AdapterComposite振る舞いに関するパターン Chain Of Respon
ActionScript 3.0 でラベリング (改) - てっく煮ブログ
asid:flashrod さんのところで、AS3 でラベリングする方法が紹介されています（→AS3で画像処理入門(その3) ）。BitmapData について調べているとき 第1回と第2回 を読んで、すごく参考にさせていただきました。今回、そのお礼も兼ねて(?)、第3回にツッコミをいれてみます。flashrod さんはラベリングを自力で実装されてますが、floodFill を使えば一発です。ペイントツールでいうところの「バケツ」に相当するメソッドです。斜め方向に飛び地になったピクセルが塗られないことも確認しました。 /** ラベリング * @param src ラベリング対象ビットマップデータ(モノクロ2値ビットマップ) * @return ラベリングデータ(整数の2次元配列) */ public static function labeling2(src:BitmapData):Bit
てっく煮ブログ - Flex の Bindable 入門
GUI アプリを書くときの今までの流れはこう：監視したいデータに対して「値が変わったら教えてね」とハンドラを登録しておく。addEventListener みたいなイメージ。ハンドラ内部では、状態変更に応じて表示内容を変更するコーディングを行う。これが基本的な Model-View もしくは MVC の作り方。でも、これってめんどくさい。それを解決するために Flex SDK が提供しているのがデータバインディングという仕組み。監視したいデータに [Bindable] をつける。 値が変わったときに自動的にイベントが発行されるようになる。データが変わったら変更を反映させたい場所に {mySlider.value} のように中括弧で値を設定する。 コンポーネントがイベントをハンドリングして、自動的に表示内容が書き換わるこれで煩雑なコーディングから開放されて幸せ。もちろん、凝ったことをするには
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IRBWEB - Execute Ruby on Your Browser