タグ

ブックマーク / tech.nitoyon.com (14)

  • JavaScript フレームワークがデータバインディングを実現する4通りの手法

    最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という

    JavaScript フレームワークがデータバインディングを実現する4通りの手法
  • 英語ブログを新調した話と移転計画 - てっく煮ブログ

    放置していた英語ブログをこのブログと同じデザインに統一した。英語ブログ、以前は MovableType を使ってたんだけど、いろいろ面倒になったので Jekyll で作り直した。Jekyll は Github Pages に使われている静的コンテンツ ジェネレータ。Ruby で作られていて、コードはシンプル、プラグイン機構もあるので、カスタマイズしやすい。Jekyll については次のページが分かりやすかった。Big Sky :: Jekyllで始める簡単ブログソースコードは https://github.com/nitoyon/tech.nitoyon.com で公開している。このブログも移動させようと準備中せっかく英語ブログも新調したので、このブログも http://tech.nitoyon.com/ja/blog/ あたりに移動させようと準備している。理由としては色々あるんだけど、ざっ

  • コンプガチャの確率マジックを中学生にも分かるように説明するよ - てっく煮ブログ

    コンプガチャが話題になっています。コンプガチャにハマりやすい理由として「最初は当たりやすいが、だんだん確率が低くなる」という指摘があります。なぜ「確率が低くなる」という現象おきるのでしょうか。この記事ではコンプガチャの裏側にある確率マジックを分かりやすく解説します。サイコロの面を全部そろえるゲームいちばん身近な確率といえばサイコロです。サイコロを使ったこんなゲームを考えてみます。サイコロ コンプのルール サイコロを 1 回振るには 10 円が必要。 6 つの面をすべてを出せば、ペットボトル飲料をプレゼント。「サイコロの 6 つの面をすべてコンプしよう」というゲームなので、シンプルな「コンプガチャ」といえます。このゲーム、あなたなら参加しますか?6 つの面を全部だせばよいので、運がよければ 6 回(60円)でペットボトルが手に入ります。なんだかお得そうです。ためしにやってみると・・・サイコロ

  • Google がまだ Flash を使っているサービスでみる脱 Flash の難しさ - てっく煮ブログ

    Flash, HTML5スマートフォンの普及が進む中、iPhone には Flash が搭載されず、Android 版 Flash は開発停止になるなど、遅かれ早かれ Web 上から Flash が消えていき、リッチな表現は HTML5 に置き換わっていくことは確実となりました。「これからは HTML5 だ」という印象を世間に強く与えたのが、2009 年の Google I/O でした。Google I/O 2009 レポート グーグルが賭けるHTML 5の未来 − @ITGoogle はそれ以降、多くのサービスに HTML5 を取り入れてきました。しかし、いまだに Flash を利用しているサービスがいくつかあります。この記事では HTML5 化していない、または、できていない 5 つの Google のサービスを通してどのこで Flash が使われているのかなぜ Flash が使われて

  • Ajaxian で紹介してもらったよ - てっく煮ブログ

    1週間ほど前に、Ajaxian でブログの記事を取り上げてもらいました。Ajaxian というのは JavaScript を中心とした Web 技術を紹介する英語のブログです。Ajax ブームも一段落した感はありますが、Ajax の新ネタを仕入れるなら Ajaxian と言われていたぐらいに有名なサイトです。このエントリでは、取り上げてもらうまでの経緯と、その後の反響をみていきます。取り上げてもらう方法昨年11月の Shibuya.js のとき、id:kstn さんとお話する機会がありました。id:kstn さんは Selenium IDE の作者としても有名ですが、以前、JS Commander が Ajaxian に 取り上げられていたのです。そこで、思い切って 「どうやって Ajaxian に紹介してもらったんですか?」 と聞いてみたところ、 「紹介してよ、ってメールを書いた」 と教

  • てっく煮ブログ - Apollo でニコニコメソッド プレゼン

    プレゼンしているその画面の上に、聞いている人達のコメントがニコニコ動画風に流れるのが楽しそう。ということで、それ、AIR でできるよ、と作ってみました。ドキュメントフォルダの niconico.txt を監視し続け、新たな行が登場したら、行の中身をニコニコ動画風に表示します。Flash を使ってるので家と似た表示になるのがポイントです。ダウンロード:niconico.air (要 AIR ランタイム β版)ソースコード:niconico.as (176行)このアプリケーション単体の機能はテキストの中身を出力するだけですが、次のような活用法を想定しています。ローカルに Web サーバーを立てて、CGI 経由でコメントを niconico.txt に出力する → ニコニコメソッドプレゼンが可能に!Plagger で取得した内容を niconico.txt に吐き出す → ニコニコメソッド R

  • jsoncpp を試す - てっく煮ブログ

    C++ で JSON を扱う必要があったので、jsoncpp というライブラリを試した。VC++ 2003/2005 で警告なしでビルドできた。すばらしい。パース簡単。 std::string str = "{\"key1\":\"value\", \"key2\":true}"; Json::Reader reader; Json::Value root; bool b = reader.parse(str, root); オブジェクトの参照も簡単。厳密にやったらこうなる。 if(root.type() == Json::objectValue){ if(root.isMember("key1")){ Json::Value key1 = root["key1"]; if(key1.type() == Json::stringValue){ printf(key1.asCString()

  • Google Gears の使い道 - てっく煮ブログ

    Google Gears (BETA) が発表されました。Google Gears はウェブサービスにオフライン機能を付け加えやすくするためのフレームワークです。フレームワークが提供するのは次の3つの機能です。LocalServerオフラインになったときにも HTMLJavaScriptCSS にアクセスできるようにする。ブラウザのキャッシュ(一時ファイル)を強化したイメージ。Databaseオフライン時に行った動作を記録しておく。SQLite ベース。ブラウザの Cookie を大容量化したイメージ。WorkerPoolCPU を消費する機能をバックグラウンドで実施する機能。setTimeout で無理やり細切れに実行していた部分を任せることができる。スレッド機能とも考えられる。開発者は、これら3つの機能を駆使して、オフライン機能を実装することになります。ありがちな実装パターンは

  • ActionScript版 Apollo アプリを作ってみる

    第2回は ActionScript で Apollo アプリを作ってみます。 ActionScript を触ったことがない人にも分かりやすく書いたつもりですので、ActionScript が初めての人も恐れずに読んでみてください。 第1回 の HTMLJavaScript で作るときは HTML+JavaScript の作成 ADF の作成 実行 パッケージ化 (.air の作成) という手順でしたが、今回は ActionScript の作成 コンパイル (.as→.swf の生成) ADF の作成 実行 パッケージ化 (.air の作成) とコンパイルの手順が増えます。 では、さっそく具体的に説明していきましょう。 ActionScript の作成 単に丸を描くだけの ActionScript です。Test.as として保存します。 package{ import flash.dis

    ActionScript版 Apollo アプリを作ってみる
  • てっく煮ブログ - あまり語られていない Apollo のセキュリティについてまとめてみた

    (2007年10月追記) この記事は、Adobe AIR と呼ばれている技術のα版時点でのセキュリティについて述べています。2007年10月現在での最新版についての情報は、以下のページを参照してください。akihiro kamijo: Adobe AIR ベータ 2 セキュリティ関連の変更点akihiro kamijo: Adobe AIR のデジタル署名機能について(追記ここまで) void element blog: いろんな意味でしゃれにならないApollo にて Apolloセキュリティ的に危ないよ、という話が出ていたので、ちょっと調べてみました。Web 技術を使っているとはいえ、ローカル環境で動くので、ある程度の覚悟をもってインストールする必要があります。今回は、その心構え(?)のようなものをまとめてみました。セキュリティは専門ではないので、つっこみは大歓迎です。Apollo

  • HTML JS版 Apollo アプリを作ってみる [てっく煮]

    Apollo 開発の方法を丁寧に説明していく予定です。第1回目は HTML+JavaScriptApollo アプリを作ってみます。 そこそこ実用的な例、ということでシンプルな RSS リーダーを作ることにします。Apollo での通信にはドメインの制約がない、という利点を体感することもできます。動作イメージはこんな感じです。 開発環境のインストールがまだの方は、Adobe Apolloメモ や はじめてのApolloプログラミング を参考にして準備しておいてください(手抜き)。 HTMLJavaScript の作成 まずは HTML を準備します。rss-simple.html として保存します。味気ないですが、あえてシンプルにしてます。 <html> <head> <title>Simple RSS</title> <script src="rss-simple.js"><

    HTML JS版 Apollo アプリを作ってみる [てっく煮]
  • てっく煮ブログ - Apollo 触ってみた。すごすぎ。

    Apollo のα版がリリースされたので、さっそく触ってみました。初日はランタイムをインストールしてサンプルを動かしてみました。コンパイルは時間がなくてまだ試せてません。2007.2.24追記:HTML+JS版 Apollo アプリを作ってみる で解説文章を書きはじめていますApollo を知らない人のために、おおざっぱにざっくり説明しておくと、Apollo は Web アプリを作るようにローカルアプリケーションを作れるようになるステキなライブラリです。Flash だけに縛られているわけではなく、Flash, Flex, HTML, Ajax などを統合して利用することができます。イメージはこんな感じ(Adobe の apollo_docs_alpha1_031907.zip からの引用)。図からもわかるように、HTML/JavaScript だけで Apollo API を利用してローカ

  • Apollo コンパイルではまった... - てっく煮ブログ

    無駄につまづきました。メモ代わりに。Flex SDK 2.0.1 が必須。2.0.0 ではダメ。2.0.0 が既に入っている場合は、上書きインストールではなく、新規インストールのほうが無難。 Flex SDK 2.0.1 を入れた上に、Apollo SDK を上書きコピーする。apollo_docs_alpha1_031907.zip にあるサンプル「Create your first Flex-based Apollo application using the Apollo」がそのままだと動かない。XML で visible="false" となっているが、これを visible="true" にしなければならない。 appId が同じアプリケーションは2重起動できない。visible="false" で表示されないアプリを作ってしまうと、何度コンパイルして実行しても表示できない状態に

  • JavaScript 用デバッグコンソール "IEerBug" [tech.nitoyon.com]

    IEerBug は Internet Explorer 6.0 と FireFox 1.5 で動く JavaScript 用のデバッグ コンソールです。 FireBug と同じ console.log()、console.debug() などの関数が使えるようになるため、FireFox と IE の両方でデバッグする場合に便利です。コンソールに出力したオブジェクトを、DOM インスペクタを利用して解析することも可能です。 使い方 ieerbug.zip をダウンロードし、中身をアプリケーションのディレクトリに配置します。IEerBug 用のディレクトリを作成して、その中に配置しても問題ありません。 HTML の中で次のようにして ieerbug.js を読み込みます。

    JavaScript 用デバッグコンソール "IEerBug" [tech.nitoyon.com]
  • 1