読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

YUI.cached

YUI.cachedで、任意の関数に評価結果のキャッシュ機能を付与します。キャッシュ機能が追加された関数は、初回評価時の結果を常に返すようになります。 YUI().use( function(Y) { // ランダムな値を返す関数 var base = function(){ return Math.floor(Math.r…

Cacheを使う

YUI 3: Cacheを使うと、指定された数だけの要素を保持するオンメモリキャッシュを作成できます。 // キャッシュを使うサンプル YUI().use('cache', function(Y) { // キャッシュ数を4に指定してキャッシュを作成。 var cache = new Y.Cache({max:4}); // キ…

AsyncQueue

YUI 3: AsyncQueue を使うと、指定した処理を順番に非同期実行するキューを作成できます。setTimeoutでリストに追加された関数を順番に実行する、といったら分かりやすいかな。 以下はYUI 3: AsyncQueue を使って押されたキーを表示するサンプルです。高速で…

DataSchemaを使ってCSVテキストを解析するサンプル

YUI 3: DataSchema を使うと、任意の形式のデータを解析してJavaScriptのオブジェクトに変換することができます。以下はDataSchema.Textを使ってCSVをオブジェクトの配列に変換するサンプルです。 // CSV形式の文字列を解析するサンプル YUI().use('datasche…

guid

YUI.guid()で一意なIDを作成できます。 var str = ""; for ( var i=0;i<5;i++ ) { // guid で一意なIDを作成。 str += YUI.guid() + "<br/>"; } document.getElementById("out").innerHTML = str; 実行結果はこちら</br/>

substitute

Yahoo! UI Library 3.0がリリースされたのでちょっと使ってみようかな、ということで、まずはsubstitute。これを使うと簡単なテンプレートエンジンを実現できます。サンプルは以下。 // Yahoo! UI Library - substitute を利用して、簡単なテンプレートエン…

今日のはまり道

Yahoo! UI Library のTreeViewで以下の条件を満たす場合、クリックイベントの引数で渡されてくるeventの「ctrlKey」プロパティが参照できなくなります。 クリックイベントとダブルクリックイベントの両方にリスナが登録されている。 ブラウザがIE IE7+Yahoo!…

StyleSheet Utilityを使ってCSS値を文字列に変換する

YAHOO.util.StyleSheet.toCssTextでCSSを示すハッシュをCSSの文字列に変換できます。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script> </meta></head></html>

StyleSheet Utilityを使ってCSSを動的に作成/更新するサンプル

Yahoo! UI Library の StyleSheet Utilityを使うと、JavaScriptで動的にCSSを作成したり更新したりできます。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script> </meta></head></html>

非表示の要素にテーブルを構築すると、カラムがリサイズできなくなる

Yahoo! UI Library - Datatableを使ったテーブルで、同じように初期化しているのにカラムのリサイズができるものとできないものがあるという不具合に遭遇。FireFox3で確認。IE7では再現しません。 原因 非表示のエレメントにテーブルを作成→後から表示、とす…

Calandarコントロールを使うサンプル

Yahoo! UI Library : calendarを使ってカレンダーの表示と選択された日を取得するサンプルです。 必要なソースを取り込んで、 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/calendar/assets/skins/sam/calendar.css"> </link>

YUIでプロファイリング

わざわざ自作しなくても、Yahoo! UI Library: Profilerなんてのもあります。 オブジェクトや関数をプロファイル対象として登録しておくことで、その後の処理で行われた関数の呼び出しを記録/集計してくれます。 回数、平均呼び出し時間、最大/最小呼び出し時…

CSSのセレクタで要素を選択する

Selector Utilityを使うと、CSSのセレクタを使ってそれにマッチする要素を探索することができます。 CSS3 Selectorが使えるとのこと。 特定のノードを指定して、その配下を対象に検索できます。 マッチしたノードすべてを配列で返すほか、最初に見つかった要…

CSVから折れ線グラフを作成する

Chartを使ってCSVから折れ線グラフを作るサンプルです。 サーバーからCSVファイルをダウンロードして解析し、グラフを作成します。 Chartの基本的な使い方はこちらを参照 YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.4.0/build/charts/assets/…

JSON Utility

Yahoo! UI Library 2.4.0 からJSONのパーズとシリアライズをするAPIが使えるようになっています。json.jsでもできますが、あれと違ってグローバル名前空間を汚さないので安心して使えます。(json.jsとprototype.jsを一緒に使うとエラーになる、とかあったし…

Chartを使ってみた。

Yahoo! UI Library 2.4.0 の新機能「Chart」を使ってみました。 「Chart」を使うとJavaScript APIの呼び出しだけで簡単にチャートを作成できます。 チャートはFlash(CSSやJavaScriptではなく)を使って描画されます。 内部的には、ASTRAが使われているようで…

ドラッグドロップで項目の移動と並びかえができるリストのサンプル

ドラッグドロップで項目の移動と並びかえができるリストの実装サンプルです。「Bookmarks」の「タグセット編集」機能で使ったもの。99%くらいはYUIのサンプルのコピーだったりしますが、まぁ、あのサンプルの実装メモということで。 戦略 アイテム(リストの…

XHRで非同期ファイルアップロード

Yahoo! UI LibraryのConnection Managerを使うとXHRで非同期ファイルアップロードが可能です。 アップロードするファイルを選択するフォームを用意し、Connection Managerに関連付けます。 フォームは必須です。また、アップロードするファイルはユーザーが…

CSS Grid

CSS Gridを使うと、単純な横方向分割レイアウトが簡単に実現できます。 実行準備 次のCSSをインポートします。 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/grids/grids-min.css"> レイアウト 基本的な使い方は次の通りです。 親要素のdivに「yui-g*」を設定。 分割の方式はここで設定するクラスで決まります。 利用可能な値</link>…

YUI Test

YUI TestはxUnit風のテスティングフレームワークです。xUnitを使ったことがあれば、簡単に使えます。サンプル: // YUILoaderでYUI Testをロード var loader = new YAHOO.util.YUILoader(); loader.require("yuitest"); loader.insert(function() { // テスト…

自作のスクリプトファイルをYUILoaderでロードする

YUILoaderを使うとYUIのモジュールは簡単にロードできます。YUIを読み込んだスクリプト内で使う分にはこれで問題ありませんが、別のスクリプトファイル中で利用している場合、注意が必要です。 YUI ←依存← 自作のスクリプト ←依存← index.html (ここでYUILod…

YUILoader Utilityで依存モジュールをロード

YUILoader Utilityを使うとYahoo! UI Libraryのモジュールを簡単にインポートできます。 依存関係もサポート。必要な依存モジュールを芋づる式にインポートしてくれます。 Yahoo! UI Library2.3.0から追加されました。 Loggerモジュールのロード サンプルと…

アニメーション

Yahoo! UI LibraryのAnimationを使うと、要素のリサイズや移動といったアニメーションが簡単に実行できます。 利用準備 以下のファイルをインポートします。 ... <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> </meta></head>

YUIのLoggerでログ出力

Yahoo! UI LibraryのLoggerでログ出力をしてみます。 利用準備 以下のファイルをインポートします。 ... <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css"/> </link></meta></head>

ドラッグできる要素内にテキストフィールドを置く。

YAHOO.util.DDProxyで要素をドラッグできるようにすると、内部にあるテキストフィールドが編集できなくなります。(マウスイベントがきていない感じ)。回避するには、YAHOO.util.DragDrop#addInvalidHandleIdなどを使用して、input要素をドラッグを開始する要…

要素のコピーをドラッグしたい。

YAHOO.util.DDProxyを使うと、要素そのものでなく、要素のコピー(エイリアス?)をドラッグできるようになります。Windowsでファイルをドラッグした時のような感じです。 ドラッグできるようにするだけであれば 「new YAHOO.util.DDProxy()」でOK ドラッグする…

要素をドラッグできるようにする。

Yahoo! UI Libraryのドラッグ&ドロップユーティリティを使って、要素をドラッグできるようにしてみます。 手順は次の通り。簡単です。 dragdrop-min.jsなどのライブラリファイルHTMLに追加。 引数としてドラッグできるようにする要素を指定し、YAHOO.util.DD…

ツリーコントロールを使ってみる。

Yahoo! UI Libraryのツリーコントロールを使ってみます。 インストール Yahoo! UI Libraryからライブラリをダウンロードします。(ver 2.2.2を使用しました。) zipアーカイブを展開し、build/以下にある必要なファイルをコピーして使用します。ツリーで必要な…