JavaScript
ReactとCordovaを使って、ブラウザ向けのWebUI + Androidで動くスマホアプリ を提供するサービスを、一人で作ってみた話です。 サマリー 作ったもの 最大の課題:作業量 一人で作りきるために意識したこと 取り組み1: Cordovaを使って、Web UI/スマホアプリの…
Ace とは? Ace は、Webアプリケーション向けのリッチなコードエディタです。 シンタックスハイライトや正規表現検索に対応した高機能なコードエディタを、Webアプリにさくっと組み込めます。 機能一覧: (Aceのサイトより) Java,Ruby等を含む、110言語のシン…
JavaScriptのDate型では、タイムゾーンを外部から指定できない JavaScriptのDate型は、タイムゾーンの情報を持ってはいますが、APIで外から変更することはできません。 getTimezoneOffset() はあるけど、setTimezoneOffset(timezone) はありません。 getTime…
Cordova のお試しということで、 Cordova + React.js + Material UI で Material Design な Android アプリのサンプルを作ってみました。 HTML+CSS+JavaScript でネイティブアプリが作れるCordova ですが、やはり遅いという話をよく耳にするので、実際どうな…
React.js + Webpack + ContainerJS でTODOリストを作ってみたので、手順をまとめます。 以前書いた、Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記の改訂版。 Knockout + ContainerJS でテスタブルにToDoリストを作る…
ContainerJS をnpmに登録したので、手順をメモしておきます。 npm - container.js ContainerJSは、JavaScript Webアプリケーション用のDependency Injection コンテナ です。機能は以下。 依存関係の解決と注入(DI) 遅延ロードによる、オンデマンドなモジュ…
npmの基本的な使い方のまとめです。忘れたときに見返す用。 npmのインストールから、モジュールを取ってきて使うところまで。 環境は、CentOS7です。 インストール node.jsをインストールすると、一緒に入ります。 ここを参考にソースからインストールしまし…
Knockout + ContainerJS + Require.js で テスタブル にToDoリストを作るチュートリアルです。 ポイント MVVMアーキテクチャでテスタブルに MVVMアーキテクチャを採用し、View(HTML/CSS)とViewModel,Modelを分離。 ViewModel、Modelは HTMLに非依存となるた…
夏休みの宿題ということで、作成してから長らくメンテナンスしていなかった ContaienrJS の新版をリリースしました。変更点は以下です。 新機能 : モジュールの非同期遅延読み込みに対応 require.jsと連携し、コンポーネント(=コンテナ管理下のオブジェクト)…
ECMAScript 5 で追加された、Object.freezeやObject.sealを実行すると何ができなくなるのかについて。 こうなる。 preventExtensions seal freeze プロパティの追加 × × × プロパティの削除 ○ × × プロパティの値変更 ○ ○ × プロパティの属性変更 ○ × × 確認…
Closure Compilerを使用したタイプセーフJavaScriptコーディングについてまとめ。 Closure CompilerはClosure Toolsの一部で、 JavaScriptコードを解析して圧縮と最適化を行うJavaScriptToJavaScriptコンパイラです。 最適化だけでなく、シンタックスや型の…
IE7には、以下の条件を満たす場合メモリリークが発生する問題があります。 DOMエレメントとJSオブジェクトが循環参照している 上記エレメントをスクリプトで削除する IE8では改修されているようでこの問題は発生しません。また、Firefox 3でも発生しません。…
XMLHttpRequestの最大同時接続数を調べたのでメモ。 IE8,Firefox 3 6 IE7 2 (HTTP1.1の場合) MSDN - Internet Explorer 8 における接続性の強化 MDC XMLHttpRequest ふむ。
AJAXサイトの定期観測向け性能計測ツールを作ってみましたよ。 ページの読み込み時間、サーバーAPIの呼び出し時間ならJMeter、JavaScriptの実行時間ならBenchmark.jsで計測できるけど、 これらをひっくるめた読み込みを開始してから画面に情報が表示されるま…
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().use( function(Y) { // ランダムな値を返す関数 var base = function(){ return Math.floor(Math.r…
YUI 3: Cacheを使うと、指定された数だけの要素を保持するオンメモリキャッシュを作成できます。 // キャッシュを使うサンプル YUI().use('cache', function(Y) { // キャッシュ数を4に指定してキャッシュを作成。 var cache = new Y.Cache({max:4}); // キ…
YUI 3: AsyncQueue を使うと、指定した処理を順番に非同期実行するキューを作成できます。setTimeoutでリストに追加された関数を順番に実行する、といったら分かりやすいかな。 以下はYUI 3: AsyncQueue を使って押されたキーを表示するサンプルです。高速で…
YUI 3: DataSchema を使うと、任意の形式のデータを解析してJavaScriptのオブジェクトに変換することができます。以下はDataSchema.Textを使ってCSVをオブジェクトの配列に変換するサンプルです。 // CSV形式の文字列を解析するサンプル YUI().use('datasche…
YUI.guid()で一意なIDを作成できます。 var str = ""; for ( var i=0;i<5;i++ ) { // guid で一意なIDを作成。 str += YUI.guid() + "<br/>"; } document.getElementById("out").innerHTML = str; 実行結果はこちら</br/>
Yahoo! UI Library 3.0がリリースされたのでちょっと使ってみようかな、ということで、まずはsubstitute。これを使うと簡単なテンプレートエンジンを実現できます。サンプルは以下。 // Yahoo! UI Library - substitute を利用して、簡単なテンプレートエン…
表示範囲内に収まりきらない単語がある場合に、単語の途中でも改行させるようにする関数です。 アルファベットの前にゼロ幅スペース("")を挿入して、改行できるようにします。 /** * アルファベットの前にゼロ幅スペース("​")を挿入して、 * 単語中…
今日見つけたイディオムです。値を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 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のgetJSON()ではJSONの解析がwindow.eval()で行なわれてしまいますが、プラグインとして別途提供されているjquery-jsonを使うとJSONを安全に解析できます。 プラグインをインポートすると、「$.evalJSON」と「$.secureEvalJSON」の2つのJSON解析APIが…
jQueryでgetJSON()とかするとレスポンスをJSON形式で返してくれますが、このときに使用されるJSON解析ロジックは「window.eval()」だったりします。(jQuery1.3.2で確認) たとえば、以下のようなjsonデータをgetJSON()すると、JavaScriptとして実行されてしま…
