JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
Vue.js が data に渡した値を激しく書き換える件について
最近、JavaScript の MV* フレームワークの中で Vue.js が少しずつ注目を浴びてきているようであります。 5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 | 株式会社インフィニットループ技術ブログ Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog そんなわけで、自分も Vue.js (v0.10.5) を触ってみたのですが、data で渡した値を激しく書き換えるところに面食らったので記事にしておきます。 自作クラスのオブジェクトを Vue.js に渡すと壊される 何らかのビジネスロジックを持ったモデルを作って、それを Vue.js のデータバインディングで HTML に反映しようすると破綻します。 簡単な例として、よくあ
grunt-contrib-watch が重いので grunt-este-watch を試したら幸せになった
最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日本語訳は私によるもの) Another reason i
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
GitHub で clone するときは SSH じゃなく HTTP を使ったほうが高速
GitHub には clone するための URL として [HTTP]、[SSH]、[Git Read-Only] の 3 つが用意されている。 いままで、SSH に慣れているという理由だけで [SSH] を利用していたのだけど、「SSH は転送速度が遅い」という問題がある。 SSH だとこんなに遅い… さっき、[SSH] で clone してみたら 20～60 KiB/s 程度の速度しか出なかった。 $ git clone git@github.com:nitoyon/tech.nitoyon.com.git Cloning into 'tech.nitoyon.com'... remote: Counting objects: 8856, done. remote: Compressing objects: 100% (2125/2125), done. remote: Total
意外と多い!? Web フォントに対応していない環境 〜2012 年の Web フォント事情〜 - てっく煮ブログ
html5Web フォントは「Web サイトにオリジナルのフォントを埋め込む」ための技術です。現行のブラウザーは全て Web フォントに対応している状況です。そんな状況であるため、絶対にコピペできない文章を作ったったwwww は Web フォントに依存したコンテンツでしたが、特別な配慮はせずに公開しました。しかし、公開後、Web フォントが適用されなかった複数の方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。４種類のフォーマット一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた - てっく煮ブログ
集合知プログラミング を読んでいたら、K-means 法（K平均法）の説明が出てきました。K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。クリックすると１ステップずつ動かすことができます。クラスタの数や点の数を変更して、RESET を押すと好きなパラメータで試すことができます。こうやって１ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。K-means 法とはK平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージになります。各点にランダムにクラスタを割り当てるクラスタの重心を計算する。点のクラスタを、一番近い重心のクラスタに変更する変化がなければ終了。変化がある限りは 2. に戻る。これ
なぜ iPhone に Flash が搭載されないのか（Appleの弁） - てっく煮ブログ
Apple のスティーブジョブズ CEO が公開した Thoughts on Flash を和訳してみた。この文章では、「なぜ iPhone、iPod、iPad に Flash が搭載されないのか」について Apple の立場から６つの理由を説明している。細切れにジョブズの口から理由が語られたことはあったが、まとまって文章化されたことはなかった。目次Flash はオープンじゃない全ての Web を見るために本当に Flash は必要か？セキュリティとパフォーマンスを犠牲にしたくないFlash を使うとバッテリーが持たないFlash はタッチを前提としていない一番重要な理由Apple は Adobe と長い期間、関わり合ってきた。実際、我々が Adobe の設立者に会ったのは、彼らがガレージで起業したばかりのころだった。Apple はレーザープリンタに Adobe の Postscript
AS3 でヒアドキュメントもどき - てっく煮ブログ
asE4X＋CDATA 使えばいいんじゃないだろか。 var s:String = <>[CDATA[bar foo class="test">なんでも書けるよ！ あははは ]]>; trace(s); /* 出力はこうなる bar foo なんでも書けるよ！ あははは */ " とか \ をエスケープするのが面倒な場合に便利かも。(関連) ヒアドキュメント、E4X - 実用
てっく煮ブログ - Flex の Bindable 入門
GUI アプリを書くときの今までの流れはこう：監視したいデータに対して「値が変わったら教えてね」とハンドラを登録しておく。addEventListener みたいなイメージ。ハンドラ内部では、状態変更に応じて表示内容を変更するコーディングを行う。これが基本的な Model-View もしくは MVC の作り方。でも、これってめんどくさい。それを解決するために Flex SDK が提供しているのがデータバインディングという仕組み。監視したいデータに [Bindable] をつける。 値が変わったときに自動的にイベントが発行されるようになる。データが変わったら変更を反映させたい場所に {mySlider.value} のように中括弧で値を設定する。 コンポーネントがイベントをハンドリングして、自動的に表示内容が書き換わるこれで煩雑なコーディングから開放されて幸せ。もちろん、凝ったことをするには
経路探索アルゴリズムの「ダイクストラ法」と「A*」をビジュアライズしてみた - てっく煮ブログ
as詳解 ActionScript 3.0アニメーション ―衝突判定・AI・3DからピクセルシェーダまでFlash上級テクニック を読んでいて、経路探索のアルゴリズムで A* が取り上げられていました。A* については、いろいろ検索して調べたりもしたのですが、やっぱり本に書いてあると理解しやすいですね。せっかくなので自分流に実装してビジュアライズしてみました。ダイクストラ法まずは A* の特別なケースでもあるダイクストラ法から見ていきます。クリックすると探索のシミュレーションが開始します。スタート地点(S)からゴール(G)への探索が始まります。色がついたところが「最短経路が決定した場所」です。スタート地点から少しずつ探索が完了していきます。半分ぐらい完了しました。まだまだ進みます。最後まで終わりました。最短経路を黒色矢印で表示しています。ダイクストラ法は、スタート地点から近いノード(=マス
AS3.0 で光るテキスト効果を作ってみた - てっく煮ブログ
asTVCM とか映画予告編などでよく見かける「文字が左から右に光るエフェクト」を ActionScript 3.0 で作ってみた。完成品はこんな具合。文字を編集することもできる。編集後の文字ですぐに光り始める！やってることTextField を表示TextField を BitmapData に表示して、GlowFitler で光らせる (bmpGlow)円形のマスク Sprite を用意 (msk)。周りに行くに従って透明になるようにしておく。2. で作った bmpGlow に 3. のマスク msk を適用する。マスクを徐々に右に移動していけば、光ってるところが移動しているように見える。苦労したのはグラデーションのマスクを適用させる。マスクとマスクされる DisplayObject の両方の cacheAsBitmap プロパティを true に設定しておく必要がある。当初、それに気
はてブ受けしそうな記事を書いて、１ヶ月で約３万円を稼いだ顛末 - てっく煮ブログ
このブログでは今年の２月ぐらいから Google AdSense の広告を貼っていました。どれぐらい儲かるんだろうとワクワクしていたのですが、普通に記事を書いていても期待はずれな収入でした。そこで、はてなブックマークでウケそうな記事を集中的に公開して、ページビューを稼いでどれだけ広告収入が増えるか試してみることにしました。調査期間2009日5月10日〜5月末方針海外のデザイン系ブログを少し翻訳して転載しただけの記事を書くことはプライドが許しません。かといって即時性では有名ブログには勝てないので、「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」という方向で売れ線を狙って書いてみることにしました。記事を書くに当たっては、次のようなことに気をつけてみました。注目を集めるためにタイトルは少し煽り気味にする一番伝えたいことがちゃんと伝わるよう、何度も見直す本題に関係ない
新型インフルに対する京都大学の対応がかっこよすぎる - てっく煮ブログ
新型インフルエンザ（豚インフルエンザH1N1）の感染が広がっています。京都市内でも新型インフルエンザ感染者が見つかり、小中高校だけでなく、大学でも休校が相次いでいます。 新型インフルエンザの感染拡大を防ぐため、府内の私立の小中高校、幼稚園、専修・各種学校計１６１校・園が２２日夕までに休校を決めた。期間は一部を除き２７日まで。私立小中高など１６１校が休校 京都府内、新型インフルで：京都新聞大学でも京都大学以外は休校・登校停止といった対応をしているようです。 大学、短期大学は国公立を含む府内全４７校のうち、京都大を除く４６校が休校・登校停止の措置をとった。 私立小中高など１６１校が休校 京都府内、新型インフルで：京都新聞京都大学はなぜ休校しないのか？京都大学のホームページを見てみましょう。 京都市内において新型インフルエンザの感染が確認されたところです。また、京都市、京都府から休校も要請されて
履歴消去じゃ消えないエロサイトの隠れた痕跡に要注意 - てっく煮ブログ
色んなホームページを見ていると閲覧履歴が自動で保存されます。恥ずかしいページを見たあとには、他の人にばれてしまわないように、こっそり履歴を消している人もいることでしょう。通常、ブラウザには「履歴を削除する機能」が備わっていて、ブラウザの履歴を削除すればあなたの悪行の数々は消え去ってくれるように思えます。しかし、ブラウザからは消せない履歴が残っているのです…ブラウザからは消せない履歴それが Flash の Local Shared Object です。Local Shared Object は Flash 版の Cookie みたいなもので、Flash で一時的なデータを保存するときにはよく用いられるものです。Local Shared Object は次の場所に保存されています。OS場所Windows XPC:\Documents and Settings\ユーザ名\Application
全自動ブックマーク棚卸しが想像以上に有意義な件 - てっく煮ブログ
みんな、自分が過去にブックマークした記事って気になるよね。はてなブックマークを使ってると、勢いでブックマークしてしまうけど、なかなか振り返る機会はないもの…。少し前に「ブックマーク棚卸しがイイヨ」という記事があったんだけどブックマークの棚卸し(?)をしてます。今年一年かけてブックマークしたものを順番に見て行ってます。見るといっても、全部の記事を開いて見るわけではなく、流し読みで、「ああ、これはもう一回読んでおきたい」と思ったものを開いてはインプットしているという感じです。 はてなブックマーク棚卸し - naoyaのはてなダイアリー１年分の棚卸しとなると楽しくないし…。わたしもみんなと同じ、その一員でした。でも、もう平気。「全自動ブックマーク棚卸し」があれば！全自動ブックマーク棚卸し があればもう大丈夫。全自動で １年前のブックマークを RSS 配信 してくれちゃいます。試しにやってみましょ
ブラウザ上で Ruby を試せる「IRBWEB」を作ってみた - てっく煮ブログ
ruby, silverlightRuby を試してみたいけどインストールするのは面倒…。そんな人のためにブラウザ上で Ruby を試せる IRBWEB というサービスを作ってみました。irb のように、Ruby の構文を実験できてとてもお手軽です。 IRBWEB完全にブラウザ上で動作するため、動作もさくさく。ちょっとしたコードを書いて動作確認も楽しめますね。なお、変数を定義するには $a のようにグローバル変数として定義しないと、次の入力で参照できません。動作環境Silverlight 2.0 のランタイムが必要です。Silverlight 2.0 は Windows の IE だけでなく、Firefox や Mac の Safari、さらには主要な Linux ディストリビューションでも動作するので、この機会にインストールしてみるとよいですね。仕組みSilverlight 2.0 には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
北海道を落とすとどう跳ねるのか？ - てっく煮ブログ