JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
Vagrant で作ったり壊したりできる Windows 環境を手に入れるまでの手順
最近話題の Vagrant さんは「Linux の環境を作ったり壊したりして開発とか試験が楽になるよ」と紹介されることが多いけど、Windows の環境だって作ったり壊したりしたい！ いろいろ調べつつ環境を作ってみたので、その手順を共有しておく。 完成イメージはこんな感じ。コマンドプロンプトから vagrant up をしたら VirtualBox 上に Windows Server 2012 R2 の環境が準備されて、そこにリモート デスクトップで接続している。 いろいろいじったあとに vagrant destroy したら環境は消え去って、vagrant up したら、また、まっさらな状態から使える。 ちょっと注目してほしいのは、ゲスト OS の C:\vagrant にホスト側の Vagrantfile がマウントされているところ。このあたりの処理は Vagrant-Windows
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
コンプガチャの確率マジックを中学生にも分かるように説明するよ - てっく煮ブログ
コンプガチャが話題になっています。コンプガチャにハマりやすい理由として「最初は当たりやすいが、だんだん確率が低くなる」という指摘があります。なぜ「確率が低くなる」という現象おきるのでしょうか。この記事ではコンプガチャの裏側にある確率マジックを分かりやすく解説します。サイコロの面を全部そろえるゲームいちばん身近な確率といえばサイコロです。サイコロを使ったこんなゲームを考えてみます。サイコロ コンプのルール サイコロを 1 回振るには 10 円が必要。 6 つの面をすべてを出せば、ペットボトル飲料をプレゼント。「サイコロの 6 つの面をすべてコンプしよう」というゲームなので、シンプルな「コンプガチャ」といえます。このゲーム、あなたなら参加しますか？6 つの面を全部だせばよいので、運がよければ 6 回（60円）でペットボトルが手に入ります。なんだかお得そうです。ためしにやってみると・・・サイコロ
「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
Perl で文章の特徴抽出した話を Kyoto.pm #01 で発表しました - てっく煮ブログ
perlKyoto.pm TECH TALKS #01 の LT で飛び入り発表してきました。 最近つかった Perl の話発表するのが 2 年ぶりぐらいで、Perl 詳しくなくてアウェイ感があって、だいぶ緊張しました。しかも、他人のふんどしで相撲をとった感じの内容だったので、いろいろ酷いのですが、まあまあうけた気がするのでよかったことにします。Google Docs のプレゼン機能を使ってみた参加と発表を決めたのが当日で、スライドを作る環境も時間もなかったので、Google Docs のプレゼンテーション作成機能を使ってみました。ブラウザー上でプレゼン資料を作成できるのが便利だったのですが、プレゼン モードでの日本語フォントが変ブログに埋め込む手順が分からない（ヘルプには１つ古い UI での手順が書いてある）共有の URL を開いても閲覧用の全画面表示にならない (推測で URL 末尾の
Flash 重いという人たち - てっく煮ブログ
ここ最近、【Web屋限定】Flash・Silverlightお葬式会場 HTML5大勝利ｗｗｗ | 教えて！はかどる速報はてなブックマーク - HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blogあたりボーっと見ていると、「Flash が重い」→「Flash なくなれ」といった話が出てくる。けども、叩くべきはそこじゃないような気がして twitter につぶやいていたのをこちらにも転載しつつ補足しておく。クソ重い Flash サイトについて 「Flash クソ重い、消えろ」と言ってる人、Flash が消えて HTML5 でクソ重い広告サイトが作られるようになったときに何て言うんだろう。 2012-02-23 00:18:13 via web 忌むべきはプラットフォームではなく、重くても良しとする広告主と制作会社。 2012-02-23 00:
文字コードによっては正規表現がエラーになる話 - てっく煮ブログ
Git Extensions のソースコードを取ってきて自前でビルドしたところ、スペルチェック機能の正規表現でエラーが出てしまった。エラーの場所を確認したところ、正規表現の「À-ÿ」が不正な範囲だとなっていた。À-ÿ がエラーになる理由À と ÿ の文字は iso-8859-1（Latin-1) では次の範囲になる。 À (0xC0) ÿ (0xFF)しかし、自分のコードページは 932(Japanese Shift-JIS)なので、 0xC0 → ﾀ 0xFF → となる。C# の内部では文字列を Unicode で扱っているので、それぞれ次のように変換される。 Shift-JIS 0xC0 → U+FF80 (HALFWIDTH KATAKANA LETTER TA) Shift-JIS 0xFF → U+F8F3 (Unassigned)結果として、「À-ÿ」は「U+FF80〜U+F
msysGit（Git for Windows）がいよいよ公式に UTF-8 をサポート！ - てっく煮ブログ
git最近、Git について勉強しています。Windows で Git をやるなら Cygwin と msysGit（Git for Windows） がメジャーなようです。Cygwin Git のいいとこ悪いとこCygwin は UTF-8 な日本語ファイル名にも対応しており、Cygwin の中で閉じて Git を使っている分には何不自由なく使えるのでお勧めです。ただし、次のような悲しいポイントがあります。 Cygwin 版 Git は、Windows 向けの GUI な Git ソフト(TortoiseGit や Git Extensions)との相性が悪い Windows のエディタやマージツールと連携しようとするとパスのポリシーが違うのでうまくいかないnkf を噛ませようとしても、Cygwin 用の nkf バイナリは公式配布されておらず、わざわざ Cygwin 上で make す
IE10 Metro 版では Flash が動かないので、いよいよ Flash 終わった感 - てっく煮ブログ
win8, as3, msWindows 8 の情報がいろいろ出てきています。この中で気になるのが「Windows 8 の IE では Flash が動かない」という話です。ちょっと煽りすぎたかもしれないので、もう少し正確に説明してみます。２つの IE10Windows 8 には２つの Internet Explorer 10 が搭載されます。Metro 版 IE10従来版 IE10利用イメージ: Metro 版 IE10Metro というのは iOS や Android のようにタッチ端末でも使いやすいよう設計されており、Windows 8 の標準 UI に採用されています。Windows 8 を起動すると、タイル上のメニューが Metro で表示されます。タイルメニューの左上にある Internet Explorer を選択すると Metro 版 IE10 が回転しながら起動します。M
HTML5 で書道が楽しめる The Shodo の完成度がすごい - てっく煮ブログ
ちまたでは HTML5 が話題ですね。「HTML5 ではこんなこともできます」といった紹介はいろんなところでみかけますが、「じゃあ、ぶっちゃけ、どんなサイトが作れるのよ」がいまいち見えてない人も多いのではないでしょうか。そんな中、HTML5 の機能を活用した完成度の高いサイトが登場していました。その名も The Shodo。 The Shodo (http://www.theshodo.com/)ブラウザ上で書道体験The Shodo ではこんな感じにブラウザ上で書道を楽しむことができます。書くときにカーソルの位置に手が大きめに表示されるのが本当に書道している気分にさせてくれます。硯をクリックして色の濃さを選んだり、筆をクリックして筆の太さを選んだりもできます。ちょっとした動画や BGM が雰囲気を盛り立てるトップページで [Write] を選ぶと書き始められるのですが、最初に動画で墨を擦
HTML5 雑感 - てっく煮ブログ
twitter にちょぼちょぼ書いてたけど改めてまとめてみた。HTML5 の捕らえ方 HTML5 自体は Flash 対抗というよりも、Ajaxで作ってたようなサイトをより作りやすくするようなものなんだと解釈している。 2010-02-02 21:09:20 via web HTML5 vs Flash の話を見てて気になるのは、人によって Flash を何と捕らえるかが違うところ。videoタグで不要になるFlashは全体の一部だし、Flash使わなくてもできるようなところは既にHTML+JSに置き換わってる物も多い。 2010-02-02 21:09:33 via web JavaScript 使ってるだけで「Ajax だ」「Web2.0 だ」と言われた時代は去り、canvas つかってるだけで「HTML5 だ」と言われる時代がやってきました。 2010-02-11 10:10:53
津波テロップでTBSが１人勝ちしていた件 - てっく煮ブログ
チリで発生したマグニチュード8.8の地震の影響で、17年ぶりに大津波警報が発令されました。その影響もあって、2010年2月28日(日)のテレビ放送は NHK・民放各局で番組を中断して津波速報が流されました。津波警報地図番組の中断以外の時間は、津波警報の範囲を示す地図が常時表示されています。上の図のように、地図のせいで番組のテロップが隠れてしまって読み取れません。中には、飲食店を紹介するコーナーで、お店の場所が津波警報地図に隠れて全く分からない、というケースもあり、店主にとっては宣伝効果ほぼゼロという悲しすぎるものもありました。もちろん、番組を編集したときはこんなところに津波情報が表示されるなんて思ってもいないわけで仕方のないことですが…。また、この津波情報は CM 中も表示されていたので、CM の種類によっては広告が意味をなさなくなってしまうものもありました。ところが TBS は…そんな中
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月末方針海外のデザイン系ブログを少し翻訳して転載しただけの記事を書くことはプライドが許しません。かといって即時性では有名ブログには勝てないので、「個人的には面白いのに世間ではあまり知られていないものを分かりやすく紹介する」という方向で売れ線を狙って書いてみることにしました。記事を書くに当たっては、次のようなことに気をつけてみました。注目を集めるためにタイトルは少し煽り気味にする一番伝えたいことがちゃんと伝わるよう、何度も見直す本題に関係ない
JavaScriptからFlashにフォーカスを与えられるよ - てっく煮ブログ
asこんな記事を見つけたけどそんなことないよ。Flash上でキー操作をするにはFlashにフォーカスが当たっていなければならない。フォーカスが当たっていない時にJavaScriptからフォーカス出来るか実験してみた。http://codefairy.org/etc/focus-swf.html結果。Firefox 3: 一度手でフォーカスを当てる操作をした後だとフォーカス出来るSafari 4: 無理Chrome 2: 無理IE 8: 無理むり！ less - JavaScriptからFlashにフォーカスを与えられるかこの記事ではフォーカスを得られるかどうかを MXML の Application.focusIn イベントで判別してるんだけど、ここに問題がある。簡単にまとめると、Flash を扱う場合にはフォーカスといってもブラウザが管理しているフォーカスFlash が管理しているフォー
Processing の燃えるエフェクトを AS3 に移植した - てっく煮ブログ
asProcessing のサンプル FireCube が興味深かったので ActionScript 3.0 に移植してみました。完成品がこれ。パフォーマンス改善Processing 版のソースコード に比べて、AS3 版ではいくつかのパフォーマンス改善を行っています。オリジナルでは、何かと色んな処理をピクセルごとの演算をしていました。ノイズの作成周りのピクセルとの平均色の変換それぞれ、ActionScript 3.0 では次のように実装しました。ノイズの作成 → BitmapData.noise()周りのピクセルとの平均 → ConvolutionFilter色の変換 → BitmapData.paletteMap()その結果、ピクセルごとではなく、画像に対して一気に計算できたので、パフォーマンスが大幅に向上しました。BitmapData 系のメソッドが充実してるのは ActionScr
郵便番号マップ作成記 (3) - 経度緯度から動的に郵便番号を描画する - てっく煮ブログ
前回 まででデータを表示するためのデータ収集は完了した。いよいよデータを表示する集大成だ。JSON をちょっとだけ修正前回の最後に出力した JSON はこんな感じのデータだった。 [{"lat" : 43.0577485, "lng" : 141.3451574, "name" : "北海道札幌市中央区", "code" : "060"}, {"lat" : 43.1060624, "lng" : 141.3406195, "name" : "北海道札幌市北区", "code" : "001"}, {"lat" : 43.0944552, "lng" : 141.3766337, "name" : "北海道札幌市東区", "code" : "065"}, // (以下略) このままではデータを利用できないので、postal 変数に代入しておく。 postal = [{"lat" : 43.
郵便番号マップ作成記 (2) - ジオコーディングで経度緯度を求める - てっく煮ブログ
第１回 では郵便番号データをデータベースに格納するところまでを作った。今回は住所から緯度経度を求めていこう。ビジュアライズのための下準備は今回で完了だ。ジオコーディング API は何を使おうジオコーディングとは、住所や名所から緯度経度を求めること。世の中にはいくつかジオコーディングの API が存在するが、今回は Google が提供する ジオコーディング API を選択した。理由はGoogle が提供するという安心感と、１日あたり1万5千回まで OK と太っ腹なところ。REST で利用できるのも魅力的だった。いざ実行スクリプトをがーっと書いてひたすら実行する。 require 'EntrySchema' require 'cgi' require 'open-uri' $URL = "http://maps.google.com/maps/geo?" Code.find_all_by_l
郵便番号マップ作成記 (1) - 郵便番号データをデータベースに入れる - てっく煮ブログ
ビジュアライジングのためにはデータ収集が重要だ。今回はデータベースに郵便番号データを入れていくところを説明する。泥臭いけど避けては通れない作業だ。郵便番号データを入手まずは郵便番号のデータを手に入れる。といっても日本郵便が郵便番号データを CSV の形で提供してくれてるので、特に凝ったことはしなくてもよい。以下のサイトから全国一括のファイルをダウンロードするだけ。ありがたや。郵便番号データダウンロード - 日本郵便Shift-JIS なので utf-8 に変換しておいた。 % wget http://www.post.japanpost.jp/zipcode/dl/oogaki/lzh/ken_all.lzh --00:23:50-- http://www.post.japanpost.jp/zipcode/dl/oogaki/lzh/ken_all.lzh => `ken_all.lzh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
