JavaScript
わざわざ自作しなくても、Yahoo! UI Library: Profilerなんてのもあります。 オブジェクトや関数をプロファイル対象として登録しておくことで、その後の処理で行われた関数の呼び出しを記録/集計してくれます。 回数、平均呼び出し時間、最大/最小呼び出し時…
コンテナで管理しているコンポーネントのプロファイルを取るユーティリティを書いてみました。グローバルインターセプターを使ってさくっと作れます。 コンテナで管理しているコンポーネントのメソッドを呼び出した回数、所要時間を集計して表示します。 コ…
Selector Utilityを使うと、CSSのセレクタを使ってそれにマッチする要素を探索することができます。 CSS3 Selectorが使えるとのこと。 特定のノードを指定して、その配下を対象に検索できます。 マッチしたノードすべてを配列で返すほか、最初に見つかった要…
Chartを使ってCSVから折れ線グラフを作るサンプルです。 サーバーからCSVファイルをダウンロードして解析し、グラフを作成します。 Chartの基本的な使い方はこちらを参照 YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.4.0/build/charts/assets/…
JSLintというJavaScriptの検証器を発見したので、早速ContainerJSをチェックしてみました。WebUIが用意されているのでソースコードをコピペしてボタンを押すだけ。簡単に使えます。で、以下が見つかった不具合。 行の終わりにセミコロンがない。 なにげに結…
ContainerJS-0.3.0をリリースしました。→ContainerJS 変更点 [機能追加] Typeでのコンポーネント取得 コンポーネントが持つAPIを条件にコンポーネントを探索する機能です。マッチしたコンポーネントは、コンテナから取得したり、アスペクトを適用したりでき…
圧縮版の次はAPIリファレンス、ということでGoogleさんに聞いたらでてきたJsDocを試してみました。が、ContainerJSはうまく変換できず。サンプルで付いてきたtest.jsはちゃんと変換できたのにー。 インストール JsDocはPerlのスクリプトなので、Perlをインス…
ContainerJSのリリース物に、空白やコメントを除いた圧縮版も含めようと思って、JavaScriptの圧縮ツールを3つほど試してみました。 ツール名 評価 圧縮率 コメント 圧縮結果のサンプル(圧縮前のソースはこちら) JavaScriptZIP 1.0.2 ○ 45.2% 不要な空白、コ…
前に検討したTypeでのコンポーネント取得(コンポーネントが持つAPIを条件にコンポーネントを探索し、コンテナから取り出したりインジェクションしたりする機能。)をまったり実装。実装自体はだいたい済んだけどテストは未。簡単なサンプルが動くのは確認。こ…
Extを読み込むと、Dateオブジェクトに「形式を指定してフォーマットするAPI」と「形式を指定して文字列を日付にパーズ」する関数が追加されます。 // 現在時刻を指定の形式にフォーマット var date = new Date(); stdout.innerHTML += date.format("Y-m-d H:…
2ペインのUIを作るには、Viewportを生成してレイアウトを"border"にし、右と左のパネルを設定してやります。 Ext.onReady(function(){ // ビューポート var border = new Ext.Viewport({ title: 'タイトル', layout:'border', items: [{ // 左のパネル conte…
JavaScript1.7からgeneratorとそれを使ったArray comprehensionsが使えるようになっているらしい。ということでとりあえずクイックソートを作ってみた。 // クイックソート! function sort(list) { if ( list.length <= 1 ) { return list; } return sort([i…
今日はまったところ。 JavaScriptのオブジェクトはハッシュマップのように任意のキーと値を関連づけて保持してくれますが、オブジェクトをキーにした場合、それをtoString()した値がキーとして使われます。 比較には==や===は使われません。 同じと見なす条…
JavaScripを多く使ったサイトでページ遷移が必要な場合、1つのHTMLに画面を全部いれて(もしくは動的にロードして)、JavaScripで必要な部分だけ書き換えて遷移を行うのがスマートではないかと思います。(HTMLでのページ遷移を使うと、メモリ上のJavaScriptデ…
任意の文字列をJavaScriptとして評価/実行し結果を返すeval関数ですが、"var x = 3;"とか実行させたらどうなるのか疑問だったので、ちょっと試してみました。 基本ルール 文字列をJavaScriptとして評価/実行し、式が実行されていればその値を返します。 式が…
サーバー側のCGIをさくっと実装して、取得した一覧から対戦相手を選択できるようにしました。 サーバーから取得したプレーヤーの中から、相手を選択して対戦できます。 対戦相手のアルゴリズムはエディタ(CodePressを利用)でカスタマイズできます。 →今日ま…
Extに手を出してみました。インストールからメッセージダイアログを使ったHelloWorldまで。 Extのダウンロードとインストール ExtからExtのアーカイブをダウンロードして展開します。 最新の version 2.0 を使いました。 必要なモジュールをHTMLに取り込みま…
Object.constructorでコンストラクタ関数が取得できます。 var stdout = document.getElementById("stdout"); // Object.constructor でコンストラクタ関数が取得できる。 var Kitten = function () {}; var mii = new Kitten(); stdout.innerHTML += "mii.c…
前に構想した「Type」機能をちょっと実装してみました。Typeの生成とチェックAPIのみ。コンテナにはまだ組み込んでいません。あとテストも途中までしかできてないです。こんな感じで使います。 // テスト用モデル var TestObject = function(){} TestObject.…
JavaのBitSetみたいなのが必要だったので書いてみました。 function BitSet( defaultValue ) { this.value = defaultValue ? defaultValue : 0 ; } BitSet.prototype = { on: function( index ) { if ( index < 0 || index >= 32 ) { throw "out of bounds."…
CodePressはJavaScriptで書かれたリアルタイムシンタックスハイライターです。 サーバーを使わずブラウザのみで、指定されたテキストエリア文字列のシンタックスハイライトを行います。 ハイライトは、テキストの編集に応じてリアルタイムで行われます。 コ…
だいぶ前のエントリ、「RubyクラスをJSONでアクセスできるWebサービス化する」で作ったJSONBrokerのJavaScriptクライアントを書きました。 (前置き)JSONBrokerは任意のRubyクラスのAPIをJSONでアクセスできるWebサービスとして公開するための簡易ユーテイリ…
Yahoo! UI Library 2.4.0 からJSONのパーズとシリアライズをするAPIが使えるようになっています。json.jsでもできますが、あれと違ってグローバル名前空間を汚さないので安心して使えます。(json.jsとprototype.jsを一緒に使うとエラーになる、とかあったし…
Yahoo! UI Library 2.4.0 の新機能「Chart」を使ってみました。 「Chart」を使うとJavaScript APIの呼び出しだけで簡単にチャートを作成できます。 チャートはFlash(CSSやJavaScriptではなく)を使って描画されます。 内部的には、ASTRAが使われているようで…
プレーヤーを入力して対戦できるようにしました。 テキストエリアにプレーヤのコード(石を置く場所をコールバックするJavaScript関数)を入力し、「対戦する」をクリックするとそれと対戦できます。 デフォルトでは、「おける場所に置くプレーヤー」のコード…
バインドメソッドの設定がメンドイ件について、指定したメソッド(セット)を持つコンポーネントを探してくる機能がコンテナにあれば良いんでは、と思った。 機能 コンテナに登録済みのコンポーネントをスキャンして、指定したメソッドを持つコンポーネントを…
Reversiにタイマー機能を実装。自分のターンになった後、一定時間石を置かないと反則負けになります。あと、不具合もいくつか直しました。 処理フローが複雑になってきたので一旦リファクタしたい。 コンテナのバインドメソッドを使ってイベント通知をしてい…
UIを作った。といっても見た目じゃなくて実装の話。 MVCに切り分けて正当派な構成にしてみた。 UIは「ボート」とか「結果表示」といった単位で個別に実装。 エンジンには「次のターン」や「ゲーム終了」などのイベント通知機能を付けた。UIコンポーネントは…
ユーザー入力を受け付けるプレーヤーを用意して、人対人で対戦できるようにしました。 プレーヤーの仕様が「盤の情報を受け取って次に石を置く場所を返す関数」だと処理が永遠にUIスレッドに移らず上手く動かないので、次に置く石の位置はコールバック関数に…
JavaScriptでReversiのエンジン部分を作りました。プレーヤー(次に打つ手を返す関数)を渡すとゲームを開始し結果をコールバックします。ちゃんとテストできてないけど、適当に作ったプレーヤーを使って試した限りでは動いている様子。打つ手が固定なのでそれ…
