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
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
Lightroom で Lua を eval するプラグインを作った - てっく煮ブログ
せっかく Lightroom を買った ので、Lightroom に詳しくなろう、と思って Lightroom SDK を触ってみました。Lightroom では Lua でプラグインを書くことができます。Lua は C 言語に組み込んで使うのが簡単なようで、Wireshark やいくつかのオンラインゲームなどに組み込まれているようです。また、Lightroom はプラグインだけでなく、本体の開発も Lua で行われているようです。興味深いですね。例えばAdobeの画像処理ソフトウェア「Lightroom」では、40%に相当する部分がLuaで記述されているという。[Think IT] 第2回：言語開発者が目標にするパフォーマンス「Lua」 (1/3)さっそくプラグインを作ってみたさて、その Lua を使ったらどんなことができるのか調べるために、簡単にコードを eval できるプラグインを作
経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
てっく煮ブログ - ActionScript やるなら入れとけ。rascut 導入と使い方。
asActionScript 3.0 でコマンドライン開発してる人は必携の rascut を導入してみた。Flex 開発や AIR 開発でも使えるよ。rascut は id:secondlife さんによる fcwrap 後継バージョン。ファイル修正から自動的にプレビューまでできたり、trace() の出力をコンソールに出力してくれたり、かなり便利。以前、勝手が分からずにかなり苦労したけど、最近、RubyForge にアップロードされてからは gem 一発で超簡単になったよ。前準備Flex SDK と fcsh を準備しましょう。fcsh にはパスを通しておきましょう。Flex SDK については ActionScript 3.0メモ さんを参照あれ。fcsh については fcsh で Apollo を高速コンパイル あたりを参照あれ。Flex 3.0 SDK には fcsh が付属してる
Google Maps API for Flash に追加された perspective map 機能と日本人テスターの存在 - てっく煮ブログ
GoogleMapsAPIFlash 用の Google Maps API に「perspective map」機能が追加されました。Google Earth のように地図を傾けたり、回転させたりできるようになりました。試してみるにはドキュメントの Google Maps API for Flash - 3D Maps に掲載されているサンプル Map3DSimple.html を見るのが分かりやすいでしょう。左上のアイコンを使って回転させたり、傾けたりできます。わたしも Google Maps API for Flash が出た当初に Google Maps をぐーるぐる - てっく煮ブログ というものを作ったりしましたが、これを公式に実現できるようになったわけです。公式ブログで発表されたサンプルアプリの半分が日本人のもの！今回の新機能、Google 公式ブログで発表された記事 Goog
はてブ受けしそうな記事を書いて、１ヶ月で約３万円を稼いだ顛末 - てっく煮ブログ
このブログでは今年の２月ぐらいから Google AdSense の広告を貼っていました。どれぐらい儲かるんだろうとワクワクしていたのですが、普通に記事を書いていても期待はずれな収入でした。そこで、はてなブックマークでウケそうな記事を集中的に公開して、ページビューを稼いでどれだけ広告収入が増えるか試してみることにしました。調査期間2009日5月10日〜5月末方針海外のデザイン系ブログを少し翻訳して転載しただけの記事を書くことはプライドが許しません。かといって即時性では有名ブログには勝てないので、「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」という方向で売れ線を狙って書いてみることにしました。記事を書くに当たっては、次のようなことに気をつけてみました。注目を集めるためにタイトルは少し煽り気味にする一番伝えたいことがちゃんと伝わるよう、何度も見直す本題に関係ない
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた - てっく煮ブログ
集合知プログラミング を読んでいたら、K-means 法（K平均法）の説明が出てきました。K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。クリックすると１ステップずつ動かすことができます。クラスタの数や点の数を変更して、RESET を押すと好きなパラメータで試すことができます。こうやって１ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。K-means 法とはK平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージになります。各点にランダムにクラスタを割り当てるクラスタの重心を計算する。点のクラスタを、一番近い重心のクラスタに変更する変化がなければ終了。変化がある限りは 2. に戻る。これ
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 宣言する前
最近 wonderfl に投稿したもの - てっく煮ブログ
asここのところは他人のソースをいじって遊んでます。ニコニコテレビちゃんシリーズid:uniq さんの ニコニコテレビちゃんを描いてみた を発見。気に入ったのでアニメーションさせてみた ニコニコテレビちゃんを動かしてみた chabudaiさん が doraを動かしてみた に改造。かわいいーid:flashrod さんの Tetris のブロックをニコニコちゃんにしてみた niconico Tetris ついでにカーソルキーでも操作できるようにしてみたid:nemu90kWw さんが BGM をつけてくれた！ ニコ割ゲームっぽくしてみた forked from: niconico Tetris | Wonderfl Build Flash Onlineぱーてぃくるシリーズmunegon さん の ぱーてぃくる を発見。飛び散るものを asahi.com の新着タイトルに変更。 asahi.c
はてなブックマークの細かすぎて伝わりにくい新機能を勝手に紹介 - てっく煮ブログ
はてなブックマークがリニューアルして毎日楽しく使っているわけですが、そんな中で気付きにくいけど知ってると便利な機能を勝手にまとめてみました。人気エントリの要約を非表示にみんな大好き人気エントリーに、リニューアル後から要約が表示されるようになりました。クリックする前に概要が分かって便利なのですが、古いインターフェースのほうがよかった…という人もいることでしょう。でも大丈夫。そんな人は「人気エントリー」の右端にある▲のボタンを押してみましょう！要約が消えます。すっきり読みたい人にお勧め。あ、もう一回クリックすると要約は復活します。タグとお気に入りを旧バージョンで右側のボタンつながりで、タグとお気に入りを戻す方法を紹介します。タグが一覧になってしまって悲しい人は、右側のボタンを押しましょう。おー、一昔前のタグクラウドと切り替えられるわけですね。お気に入りも見た目が変わりましたが、これも右側のボタ
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
text-hatena.js 公開 [tech.nitoyon.com]
本家 Text::Hatena で HTML::Parser を用いている部分は実装できていません。 URL の自動リンクや HTML のエスケープなどは実装できていません。 Cookie を利用するようなサイトに text-hatena.js を利用するのはお勧めできません。 ライセンスは Text::Hatena と同等とします。 技術的なアレコレ Perl と JavaScript って意外と似てるよね、というところから出発しました。特に、Text::Hatena のソースコードはそのまま JavaScript に置き換えられるぐらいに洗練されたコードです。例えば、Hatena.pm の一部に次のようなソースがあるのですが sub parse { my $self = shift; my $text = shift or return; $self->{context} = Text
Google Tech Talk＠Kyoto に行ってきた - てっく煮ブログ
2008年7月6日＠ハイアットリージェンシー京都技術的な話というよりも、Google のサービス紹介が多かった。内容については、はこべにっき#さんとか、まめ畑さんのところによくまとまっている。今回の Tech Talk はリクルーティング目的ではなく、「次に日本で拠点を作るなら京都だよね」という雰囲気が Google 社内にあるようで、その偵察の第一歩のような感じらしい。関西での Google 主催イベントは初めてで、参加者の期待度も高かった。350人ぐらいの人が集まって、ドタキャン率もかなり少なかったとか。この盛況ぶりを元にいよいよ Google が京都に…と簡単にはいかないんだろうけど、秋に京都で(関西で?)中途採用の面接会をやる計画もあるらしい。そこに関西の技術力のある人が沢山やってきて、家族がいるんで関西で働けたら嬉しいのに！という声が多くて…、と妄想は広がります…。閉会の時間にな
Perl 2008年のファイルオープン - てっく煮ブログ
perl第1回 Perlの文法の基本：ITpro という記事の はてブコメントを見ていたら、Perl なすごい人達が文句言ってた。 otsune 2006年のhyuki Catalyst記事を載せるのもアレなのに2003年の記事を載せるのは無しだろ……open IN, ...のあたりは有害情報なので全力で見逃せ TAKESAKO ちょｗ→出典：日経Linux 2003年7月号 125ページより miyagawa 2008年にこの記事はねーよ、と思ったら2003年の記事をいまさら再掲か。なんでわざわざ古い記事を新しいものかのように出して混乱させる？問題があるというソースコードはこんなの。 open IN, '; えー！ どこが問題あるのかさっぱり分からん！！！！！！調べてみた2008年流の Perl な書き方を調べるなら perl-users.jp。早速見つけた。oldtype と mode
Yahoo! Pipes の Page Fetch モジュールでスクレイピングし放題 - てっく煮ブログ
pipesこのブログでも何度か Yahoo! Pipes の話題は取り上げてきましたが、先日実装された「Page Fetch」モジュールは素敵すぎます。ほんとに。今まで、Yahoo! Pipes といえば、XML・CSV か Yahoo が提供してるサービスのデータを加工することしかできませんでした。それが、「Page Fetch」モジュールの登場により、任意の Web ページを加工できるようになったのです。Yahoo! Pipes の使い道といえば、次の２つだと思います。1. RSSリーダーで読むための XML 作り複数の RSS を結合したり、見た目を整えたりして、自分専用の RSS を作る。 （例）サイトの最新被ブックマークを livedoor Reader で読むための Pipes2. Web サービスとの連携JSONP に対応してるので、JavaScript と組み合わせてサーバ
The Future of JavaScript メモ - てっく煮ブログ
The Future of JavaScript -presented by Mozilla & Shibuya.JS- のメモ。発表資料： John Resig: Tamarin and ECMAScript 4 (PDF)ES4 の概要は ECMAScript 4 の Draft をざっくり読んでみた - てっく煮ブログ で Overview を読んで勉強したので、だいたい知ってることだった。ここでは概要と細かなところを、まとめておく。（間違いがあったらツッコミください）概要3つのプロジェクトActionMonkey Tamarin を Spidermonkey に統合これを JavaScript2 として Firefox 4 に搭載ScreamingMonkey IE に Tamarin を統合するものMS が ES4 を実装することは期待できないIronMonkey Python
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
