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

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

ReactとCordovaで、Web/モバイルのハイブリットアプリを作った話

ReactとCordovaを使って、ブラウザ向けのWebUI + Androidで動くスマホアプリ を提供するサービスを、一人で作ってみた話です。 サマリー 作ったもの 最大の課題:作業量 一人で作りきるために意識したこと 取り組み1: Cordovaを使って、Web UI/スマホアプリの…

Webアプリ向け高機能コードエディタ「Ace」をReactに組み込んで使ってみる

Ace とは? Ace は、Webアプリケーション向けのリッチなコードエディタです。 シンタックスハイライトや正規表現検索に対応した高機能なコードエディタを、Webアプリにさくっと組み込めます。 機能一覧: (Aceのサイトより) Java,Ruby等を含む、110言語のシン…

JavaScript Dateのタイムゾーン指定できない問題とその対策

JavaScriptのDate型では、タイムゾーンを外部から指定できない JavaScriptのDate型は、タイムゾーンの情報を持ってはいますが、APIで外から変更することはできません。 getTimezoneOffset() はあるけど、setTimezoneOffset(timezone) はありません。 getTime…

Cordova + React.js + Material UI で、 Material Design な Android アプリのプロトタイプを作ってみた

Cordova のお試しということで、 Cordova + React.js + Material UI で Material Design な Android アプリのサンプルを作ってみました。 HTML+CSS+JavaScript でネイティブアプリが作れるCordova ですが、やはり遅いという話をよく耳にするので、実際どうな…

React.js + Webpack + ContainerJSでTODOリストを作ってみた

React.js + Webpack + ContainerJS でTODOリストを作ってみたので、手順をまとめます。 以前書いた、Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記の改訂版。 Knockout + ContainerJS でテスタブルにToDoリストを作る…

ContainerJSをnpmに登録したメモ

ContainerJS をnpmに登録したので、手順をメモしておきます。 npm - container.js ContainerJSは、JavaScript Webアプリケーション用のDependency Injection コンテナ です。機能は以下。 依存関係の解決と注入(DI) 遅延ロードによる、オンデマンドなモジュ…

npmの基本的な使い方まとめ

npmの基本的な使い方のまとめです。忘れたときに見返す用。 npmのインストールから、モジュールを取ってきて使うところまで。 環境は、CentOS7です。 インストール node.jsをインストールすると、一緒に入ります。 ここを参考にソースからインストールしまし…

Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル

Knockout + ContainerJS + Require.js で テスタブル にToDoリストを作るチュートリアルです。 ポイント MVVMアーキテクチャでテスタブルに MVVMアーキテクチャを採用し、View(HTML/CSS)とViewModel,Modelを分離。 ViewModel、Modelは HTMLに非依存となるた…

JavaScriptアプリケーション用のDependency Injection コンテナ「ContaienrJS」の新版をリリース

夏休みの宿題ということで、作成してから長らくメンテナンスしていなかった ContaienrJS の新版をリリースしました。変更点は以下です。 新機能 : モジュールの非同期遅延読み込みに対応 require.jsと連携し、コンポーネント(=コンテナ管理下のオブジェクト)…

freeze/seal/preventExtensions の違いまとめ

ECMAScript 5 で追加された、Object.freezeやObject.sealを実行すると何ができなくなるのかについて。 こうなる。 preventExtensions seal freeze プロパティの追加 × × × プロパティの削除 ○ × × プロパティの値変更 ○ ○ × プロパティの属性変更 ○ × × 確認…

Closure CompilerでタイプセーフJavaScriptコーディング

Closure Compilerを使用したタイプセーフJavaScriptコーディングについてまとめ。 Closure CompilerはClosure Toolsの一部で、 JavaScriptコードを解析して圧縮と最適化を行うJavaScriptToJavaScriptコンパイラです。 最適化だけでなく、シンタックスや型の…

IE7のメモリリーク問題

IE7には、以下の条件を満たす場合メモリリークが発生する問題があります。 DOMエレメントとJSオブジェクトが循環参照している 上記エレメントをスクリプトで削除する IE8では改修されているようでこの問題は発生しません。また、Firefox 3でも発生しません。…

XMLHttpRequestの最大同時接続数

XMLHttpRequestの最大同時接続数を調べたのでメモ。 IE8,Firefox 3 6 IE7 2 (HTTP1.1の場合) MSDN - Internet Explorer 8 における接続性の強化 MDC XMLHttpRequest ふむ。

AJAXサイトの定期観測向け性能計測ツールを作ってみた

AJAXサイトの定期観測向け性能計測ツールを作ってみましたよ。 ページの読み込み時間、サーバーAPIの呼び出し時間ならJMeter、JavaScriptの実行時間ならBenchmark.jsで計測できるけど、 これらをひっくるめた読み込みを開始してから画面に情報が表示されるま…

JavaScriptでシングルトン

JavaScriptでのシングルトンの書き方をいくつか。思いついた範囲で。 1.クラス変数的な感じでインスタンスを保持。 example.ClassX.instance = new example.ClassX(); example.ClassX.instance.call(); 2.関数のインスタンス変数に仕込む。 example.ClassX.g…

今日の罠

最近はdojoを使っているわけですが、FireFoxでモジュールのロードがうまくいかず迷走。 現象 IEでは動作するのにFireFoxだとモジュールのロードがうまくいかない。 FireFoxでもWebサーバーに上げると動作する。ローカルに置いたHTMLをドラッグドロップでFire…

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 を利用して、簡単なテンプレートエン…

単語内での改行を許可する関数

表示範囲内に収まりきらない単語がある場合に、単語の途中でも改行させるようにする関数です。 アルファベットの前にゼロ幅スペース("​")を挿入して、改行できるようにします。 /** * アルファベットの前にゼロ幅スペース("&#x200B;")を挿入して、 * 単語中…

値をbooleanに変換する

今日見つけたイディオムです。値をbooleanに変換します。 !!<値> 出典はJSSpec。実行結果は以下を参照ください。 value_of( !!undefined ).should_be( false ); value_of( !!null ).should_be( false ); value_of( !!0 ).should_be( false ); value_of( !!""…

今日の豆知識

value_of( parseInt("017") ).should_be(15); value_of( Number("017") ).should_be(17); になります。微妙に動作が違う(parseIntは"0"で始る文字列が指定された場合、8進数として解析する)ので注意。このため、以下はIEだとエラー、FireFox3では0になります…

Google Street View を表示するサンプル

Google Map API を利用してGoogle Street Viewを表示するサンプルです。必要な作業は以下のとおり。 Google Map のJavaScriptライブラリをインポート Google MapのAPIキーを取得して、keyの値に設定する必要があります。 Street Viewを表示するコンテナ要素…

今日のはまり道

ラジオボタンの選択状態に応じてSelectの項目を変えようと以下のように書いたのだけど、IEだと期待通り動作しない。 $("#radio1").change( function() { $("#select").empty() .append( "<option>テスト</option>" ) ... 略 ... }); $("#radio2").change( function() { $("#se…

ラジオボタンの選択状態を変更する

「$("ラジオボタンを示すセレクタ>").val([ラジオボタンのvalue値>])」で変更できます。引数のvalue値は配列で指定しないと効果がないみたいなので注意。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ // リンク…</meta></head></html>

jquery-jsonでJSONを安全にパーズする。

jQueryのgetJSON()ではJSONの解析がwindow.eval()で行なわれてしまいますが、プラグインとして別途提供されているjquery-jsonを使うとJSONを安全に解析できます。 プラグインをインポートすると、「$.evalJSON」と「$.secureEvalJSON」の2つのJSON解析APIが…

JSONの解析はwindow.eval()なのか

jQueryでgetJSON()とかするとレスポンスをJSON形式で返してくれますが、このときに使用されるJSON解析ロジックは「window.eval()」だったりします。(jQuery1.3.2で確認) たとえば、以下のようなjsonデータをgetJSON()すると、JavaScriptとして実行されてしま…

画像を分割して保存するサンプル

画像編集は何気にAdobe Fireworks派だったりするわけです。比較的リーズナブルな上、Web向けの画像編集に必要な機能が一通りそろっていてUIも使いやすい。さらに、なんといってもJavaScriptでマクロを書けたりするのが便利だよね!(いやPhotoshopとかでも使え…

今日のはまり道

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

JavaScriptでは「||=」は使えないのか・・・。

いまさらだけど、JavaScriptでは「||=」は使えないのか・・・。「+=」は使えるのに・・・。 // fooがnullとかundefinedなら"foo"を代入 foo ||= "foo"; // エラー! ↑はこう書くしかないか。ぬー。 foo = foo || "foo";

クリックの種類を判定するユーティリティ

普通のクリックとダブルクリック、および名前変更のときに使う遅めのダブルクリック?(「かち、かち」っていうやつね)を判定するユーティリティを書いてみました。利用例は以下の通り。ちょい汎用的な形にしておいたので、ダブルクリック以外に三三七拍子とか…

依存関係の循環エラー抑制

ContainerJSでは、コンポーネントの依存関係が循環している場合でも単純な循環であればエラーとせずに依存関係を解決できたりします。たとえば以下のようなパターンであれば問題なく解決可能です。 function main() { // 循環参照するコンポーネントも以下の…

Ajax.Response.responseJSON

prototype.jsのAJAX機能には、レスポンスボティがJSONの場合、自動で解析を行う機能があります。 AJAXリクエストのオプションで特に禁止されておらず(デフォルトは「実行する」)、レスポンスのContent-Typeが「application/json」の場合に自動解析が行われ、…

今日の罠

prototype.jsを使うとrubyライクな便利メソッドが追加されるのはいいんだけど、ついつい↓こんな感じで書いて満足してしまうのが問題だな。 var array = [1,2,3,4,5]; // 偶数を探したい。 var odds = array.findAll( function(i){ i%2 == 0 }); // ↑しかし、…

今日の「これは読めん」

jQueryのif文は↓こんな感じで書かれていて、個人的にかなり読みづらい。 if ( value ) <処理>; // ... // コメント // ... else { <処理>; <処理>; } 上から読んだときに、脳内では最初の2行目でif文が終わっているので、次のelseでなんだこれ?となって手戻…

Hashが空か判定したい

JavaScriptのオブジェクトはHashのように使えますが、素のままだと空かどうかを判定するのも一苦労なんだよなー。一行で書くとちょい長いので、関数が必要な感じ。 /** * ハッシュが空かどうか判定する。 */ function isEmpty(hash) { for ( var i in hash )…

get,post

jQueryでは、post()やget()などのHTTP通信を行うためのAPIも提供されています。 対象を指定してどうこうする機能ではないので、jQueryの関数として定義されています。 「$.post(...)」のような形で利用できます。 簡単にGETやPOSTリクエストを発行できるpost…

Effectsの簡単なサンプル

Effectsとして、表示/非表示の切り替えや移動などのアニメーションをさくっと実装するための機能が提供されています。様々なエフェクトがAPIとして用意されていますが、基本的に以下の引数を指定できるようになっています。 第一引数 .. アニメーションする…

end()

end()を使うと、直前の操作対象変更操作( add,filterなどTraversingのAPI呼び出し )をキャンセルできます。利用例は以下。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-1.3.2.js"></script> <script type="text/javascript"> $(function(){ $("li") // li要素を全て選択 .css({ listS…</meta></head></html>

Traversingを使う簡単なサンプル

TraversingのAPIを使うと、 セレクタで選択した要素の一覧をさらに絞り込む セレクタで選択した要素の一覧を統合する といった操作が可能です。機能的にはセレクタの指定を工夫することで実現できそうなものが多いですが、セレクタでがんばりすぎると後で読…

html()とtext()

jQueryで特定の要素の中身を編集するにはhtml(val) または text(val) を使用します。 html(val) は指定された文字列を、サニタイズなしでそのままコンテンツとします。 text(val) の方は、文字列をサニタイズして設定します。 また、要素の中身を参照するメ…

イベントをハンドリングする

jQuery - EventsのAPIを使って、エレメントにイベントハンドラを登録することができます。 「click」とか「mouseenter」みたいなイベント名に対応するメソッドがあるので、引数としてイベントハンドラとする関数を指定してそれを呼び出せばOK。 すでに使って…

セレクタ

jQueryでは、操作対象となる要素を指定するためのパラメータをセレクタと呼びます。以下のような呼び出しの $(selector).method()「selector」部分がそれです。値としては以下が指定可能です。 CSS形式のセレクタ 「#id」とか「.class」のようなもの。 指定…

jQueryを触ってみる

いまさらながらjQueryを触ってみようかと。ちょっと気にはなっていたしねー。ということで、とりあえずjQueryのサイトからリンクされているこことここを流し読みして以下を理解。 jQueryは、エレメントを選択して、内容やスタイルを変更する操作をさくっと行…

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>

Webベースのソースコードエディタ「EditArea」を使ってみた

EditAreaはJavaScriptで書かれたWebベースのソースコードエディタライブラリです。これを使うと、以下に示す機能(EditArea - Aboutより抜粋)を持つリッチなコードエディタを、Webサイトにさくっと追加できます。 リアルタイム シンタックスハイライト PHP, C…