JavaScript

MathJax + AngularJS で数式の編集と表示

LaTeX の数式表示に JavaScript・HTML・CSS といった Web 技術で数式を表示できる MathJax が便利です。 簡易な数式編集ツールなら簡単に作れそうだったので、AngularJS を試すついでに以下のようなサンプルを作ってみました。 TextArea に入力した数式を動…

IronPython による VirtualBox のインポート・エクスポート - COM API 使用

VirtualBox のインポート・エクスポート処理を IronPython から COM API を使って試してみました。 環境は以下の通りです。 Windows用 VirtualBox-4.2.14-86644 IronPython 2.7.3 ソースは http://github.com/fits/try_samples/tree/master/blog/20130707/ …

Java Scripting API で CoffeeScript を実行

はじめに Java SE 6 から実装されている Java Scripting API を使えば JavaScript を JVM 上で実行できます。そして、CoffeeScript は JavaScript にコンパイルできます。 と言う事で Java Scripting API を使って CoffeeScript を実行する Groovy スクリプ…

フレーム内の activeElement

Web ページでフォーカスのあたっている要素は document.activeElement で取得できます。 textarea 要素にフォーカスがあたっている場合の document.activeElement 結果 >>> document.activeElement <textarea>ただし、フレームやインラインフレーム (IFRAME) 内の要</textarea>…

記号文字の URL エンコード - Java, .NET, JavaScript, Ruby, Python, PHP

下記のような文字をいくつかのプログラム言語の標準的な API で URL (URI) エンコードしてみたらどうなるか試してみました。 ; / ? : @ = & % $ - _ . + ! * ' " ( ) , { } | \ ^ ~ [ ]使用した言語は下記の通りです。 Groovy (Java API) C# (.NET Fram…

RxJS で行単位のファイル処理

前々回(id:fits:20130224)・前回(id:fits:20130310)のファイル処理と同様の処理を RxJS を使い CoffeeScript で実装してみました。今回作成したソースは http://github.com/fits/try_samples/tree/master/blog/20130313/ RxJS インストール RxJS をイン…

JavaScript で List モナド - Monadic

Monadic は JavaScript 用のモナドライブラリです。今回はこの Monadic を使って、以前 (id:fits:20120912, id:fits:20120930) に Scalaz や Functional Java で実装したナイト移動の List モナド処理 *1 を JavaScirpt で実装してみました。 Monadic 0.0.…

Vert.x で WebSocket

Vert.x 1.3.1 Final で単純な WebSocket 処理を実装してみました。単純な JSON データを送受信するチャットサーバーを Vert.x で、動作確認のためのクライアントを HTML5 で実装する事にします。サンプルソースは http://github.com/fits/try_samples/tree/m…

軽量 Web フレームワークで REST API を実装 - Vert.x, Gretty, Play2 Mini, Socko, Restify

個人的に REST API の実装では JAX-RS (Java)*1 や Sinatra (Ruby) あたりを使っていますが、今回は選択肢を増やす目的で下記のようなフレームワークを試してみました。 Vert.x (Java, Groovy, JavaScript, Ruby, Python) Gretty (Java, Groovy, Scal…

Ext JS 4 で Date を JSON 化するとタイムゾーン指定子がつかない

Ext JS 4.1.1 では*1、Date を JSON 化する際に Ext.JSON.encodeDate() メソッドを使用していますが、 このメソッドはタイムゾーン指定子の無い日付文字列を生成してしまうので、サーバーアプリとの連携などで不都合が生じる可能性があります。 Ext.JSON.enc…

非同期処理でWebコンテンツをダウンロードする方法5 - IcedCoffeeScript

IcedCoffeeScript は TameJS の await/defer をサポートした CoffeeScript の拡張版です。 IcedCoffeeScript 1.3.3a 前回(id:fits:20120415)、TameJS + CoffeeScript で実装した Web コンテンツのダウンロード処理を IcedCoffeeScript で実装すると以下の…

Node.js の非同期処理を関数合成で繋げてみる - 連続コールバック対策

Node.js でプログラミングする際の課題は、非同期処理のコールバックが多段になって分かり難くなってしまう点だと思います。(下記は CoffeeScript の例) func1 引数・・・, (err, 処理結果1) -> if err? エラー処理 else ・・・ func2 引数・・・, (err, …

Express 用のテンプレートエンジンを自作する方法

Node.js 用 Web フレームワーク Express のテンプレートエンジンを自作する方法をご紹介します。 Express 3.0.0beta2 といっても自作テンプレートエンジン側で以下のような処理を用意するだけなので、非常に簡単です。 exports.__express = function(path, o…

TameJS による継続と CoffeeScript 上での利用 - 非同期処理でWebコンテンツをダウンロードする方法4

TameJS は JavaScript で継続(Continuation)を実現するためのツールです。TameJS によって Scala の限定継続(id:fits:20111016 参照)のような事ができるので、コールバックを多用する Node.js の処理を比較的シンプルに実装できるようになります。そこで…

Ext JS MVC + RESTEasy - 一対多の関連を持つモデルデータを JSON で送受信する

Ext JS 4 の MVC 機能を使ったクライアントと RESTEasy を使った JAX-RS サーバー間を JSON データで連携するサンプルを作成してみました。 Ext JS 4.0.7 RESTEasy 2.3.1 GA サンプルのソースは http://github.com/fits/try_samples/tree/master/blog/201202…

Maven で CoffeeScript を使用する

Maven を使った Web アプリケーションで CoffeeScript を使うためのプラグイン coffee-maven-plugin をご紹介します。coffee-maven-plugin を利用するには pom.xml ファイルに以下のようなプラグイン設定を追加します。 coffee-maven-plugin の設定例 <plugin> <groupId>com.t</groupid></plugin>…

非同期処理でWebコンテンツをダウンロードする方法3 - node.js, C#

今回は、Node.js と Async CTP を使った C# で実装してみました。 node.js C# : Async CTP サンプルソースは http://github.com/fits/try_samples/tree/master/blog/20111030/ node.js の場合 以前は Windows で node.js を使用するのに Cygwin を使ってビル…

Add-on SDK を使った Firefox 拡張機能の作成 - JavaScriptの有効/無効を切り替える

Firefox 4 の拡張機能を簡単に作成するためのツール Add-on SDK を使って拡張機能を作成してみました。 不要な手間が軽減されるため、個人的にはかなり有用なツールだと思います。使用した環境は以下の通りです。 Add-on SDK 1.0b4 Python 2.7.1 Firefox 4.0…

node.js + express + haml.js + mongoose で MongoDB を使った Web アプリ開発

以前(id:fits:20110306)に Sinatra で作成したサンプルの node.js 版を作成してみました。環境は以下の通りで、Sinatra 版と同等の構成になっています。 node.js 0.4.0 Express 1.0.7 Haml.js 0.5.1 Mongoose 1.1.24 MongoDB 1.8.1 rc1 サンプルのソースは…

Cygwin を使って node.js と npm をインストール

Cygwin で node.js と、node.js のパッケージ管理ツール npm をインストールしてみました。 使用した環境は以下の通りです。 Windows 7 Cygwin 2.738 node.js 0.4.0 npm 0.2.18 node.js のビルドとインストール node.js のビルドとインストールは、http://no…

jQuery Mobile の NestedList で JSON データを動的にリスト表示

以前、jQTouch 等で作成したもの(iUI版 id:fits:20100715, jQTouch版 id:fits:20100731, SenchaTouch版 id:fits:20101005)と同様のサンプルを jQuery Mobile で作成してみました。(サーバー側の処理も同じものを使用) jQuery Mobile 1.0 a1 ただし、今回…

Sencha Touch の NestedList で JSON データを動的にリスト表示

以前、iUI や jQTouch で作成したもの(iUI版は id:fits:20100715, jQTouch版は id:fits:20100731)と同様のサンプルを Sencha Touch で作成してみました。(サーバー側の処理も同じものを使用) Sencha Touch 1.0 Ext.NestedList を使って実装してみました…

jQTouchでswipeイベントを処理する

jQTouch を使って swipe イベント(iPhone のスワイプジェスチャー)を処理するには少し工夫が必要だったので、その方法を記載しておく。環境は以下。 jQTouch 1.0 beta 2 r109 jQTouch では、touch系のイベントを処理する対象は内部変数の touchSelectors …

jQTouchを使ったiPhone用Webサイト作成 - JSONデータを動的にリスト表示

前回id:fits:20100715、iUI を使って作成したiPhone用のWebページと同等のものをjQTouchで作成してみました。(サーバー側の処理は同じものを使用) jQTouch 1.0 beta2 基本的な処理内容に前回のiUI版との違いはなく、動的に生成するHTMLの内容だけが異なる…

iUIを使ったiPhone用Webサイト作成 - JSONデータを動的にリスト表示

id:fits:20100713 で作成した Sinatra のサーバーロジックをそのまま使って、iPhone用のWebページを作成してみました。(ただし、iPhone 上で動作確認してません) 今回使った環境は以下の通り。 iUI 0.31 jQuery 1.4.2 iUI は今のところ、JSON データを取得…

JSONデータとして取得したDBの検索結果をExtJSで表示するWebシステムのサンプル - Sinatra, Grails, CakePHP

DB の検索結果を JSON で返して、JavaScript(ExtJS)で表示するような Web システムのサンプルを Sinatra, Grails, CakePHP の 3種類のフレームワークで作成してみました。処理の概要は以下の通りで、MySQL の information_schema データベース TABLES テー…

Geolocation API を使った現在地の取得 - Google Map API 利用

Geolocation API と Google Map API を使って現在地の位置情報と住所を取得するサンプルを作成してみた。なお、動作確認は Firefox 3.6.3 を使用し、localhost の Web サーバーを使って実施した。Geolocation API を使って現在地を取得するには navigator.ge…

ExtJS EditorGridPanel の TextArea 編集時の高さ

EditorGridPanel で TextArea を使った編集を行う場合、TextArea の高さを編集対象セルに合わせて調整してくれないため、セルの値が空白だったりすると以下のように1行のTextAreaが表示されてしまう。 以下の環境で現象を確認。 ExtJS 3.0.0 ExtJS 2.2.1 こ…

SproutCore で JAX-RS(Jersey) と連携させる方法

SproutCore の ToDo チュートリアルを元に、JAX-RS(Jersey 使用)と連携させてみた。 ちなみに SproutCore は JavaScript 用のフレームワーク。Ruby 上で実行やビルド(HTML や JavaScript を生成)を実施し、Rails と同様の感覚で JavaScript の Web アプ…

GridPanel のセルに画像を表示 - ExtJS

Ext JS の GridPanel のセルに画像ファイルを表示させてみた。 やり方は非常に簡単。GridPanel の列定義で、該当列の renderer に画像表示の HTML 文字列(img タグ)を返す関数を設定してやるだけ。今回、動作確認に使った環境は以下。 Ext JS 3.0 img_grid…