JavaScript

D3.js で HAR ファイルから散布図を作成

前回、HAR (HTTP ARchive) ファイルから Python で作成した散布図を D3.js を使って SVG として作ってみました。 D3.js 4.8.0 ソースは http://github.com/fits/try_samples/tree/master/blog/20170515/ はじめに Node.js で D3.js を使用するために d3 と…

node-ffi で OpenCL を使う2 - 演算の実行

「node-ffi で OpenCL を使う」 に続き、Node.js を使って OpenCL の演算を実施してみます。 node-ffi サンプルソースは http://github.com/fits/try_samples/tree/master/blog/20160725/ はじめに 演算の実行には ref-array モジュールを使った方が便利なた…

node-ffi で OpenCL を使う

Windows 環境で node-ffi (Node.js Foreign Function Interface) を使って OpenCL の API を呼び出してみました。 Node.js v6.2.2 (64bit Windows版) node-ffi サンプルソースは http://github.com/fits/try_samples/tree/master/blog/20160627/ なお、OpenC…

ConvNetJS で MNIST を分類2 - 畳み込みニューラルネット

前回 の続きです。 今回は畳み込みニューラルネットを使って MNIST の手書き数字を分類してみます。 Node.js 5.8.0 ConvNetJS 0.3.0 ソースは http://github.com/fits/try_samples/tree/master/blog/20160328/ 準備 誤差・正解率のグラフ化と畳み込みフィル…

ConvNetJS で MNIST を分類1 - 階層型ニューラルネット

Node.js で ConvNetJS を使って MNIST の手書き数字を分類してみます。 今回は階層型ニューラルネット、次回は畳み込みニューラルネットを試す予定です。 Node.js 5.8.0 ConvNetJS 0.3.0 ソースは http://github.com/fits/try_samples/tree/master/blog/2016…

MNIST データセットをパースする

MNIST データセットは、THE MNIST DATABASE of handwritten digits からダウンロード可能な手書き数字のデータです。 機械学習ライブラリ等に標準で用意されてたりしますが、 今回は Node.js と Java でパースしてみました。 ソースは http://github.com/fit…

D3.js による折れ線グラフ SVG の作成と PNG 変換 - Node.js

前回、(ConvNetJS による処理結果を)折れ線グラフ化した方法に関して書いておきます。 D3.js ソースは http://github.com/fits/try_samples/tree/master/blog/20160222/ 準備 Node.js で D3.js を使うには、下記モジュールを npm でインストールします。 d…

ConvNetJS で iris を分類

ニューラルネット用の JavaScript ライブラリ ConvNetJS を使って iris の分類を行ってみました。 ConvNetJS 0.3.0 ConvNetJS は Web ブラウザ上でも実行できますが、今回は Node.js で実行します。 ソースは http://github.com/fits/try_samples/tree/maste…

PureScript で DOM を操作

PureScript の下記ライブラリを使って簡単な DOM 操作を試してみました。 purescript-dom purescript-simple-dom ソースは http://github.com/fits/try_samples/tree/master/blog/20160125/ はじめに PureScript を使って実装するものと同等の処理を JavaScr…

virtual-dom のイベント処理

仮想 DOM を扱うための JavaScript 用ライブラリ virtual-dom では ev-xxx (例. ev-click) でイベント処理を扱えるようになっていますが、実際に機能させるには dom-delegator が必要なようです。 virtual-dom 2.1.1 dom-delegator 13.1.0 virtual-dom は …

pulp を使った PureScript の開発

PureScript 用のビルドツールに pulp があります。 pulp を使えば PureScript v0.7 から多少面倒になったビルドや実行が比較的容易になります。 pulp インストール Node.js の npm で purescript (コンパイラ) と pulp をインストールします。 pulp インス…

Webブラウザ上で Excel ファイルを作成してダウンロード - Excel Builder (.js)

Excel Builder (.js) を使って、Web ブラウザ上で動的に Excel ファイル (.xlsx) を作成し、ダウンロードする方法をご紹介します。 ソースは http://github.com/fits/try_samples/tree/master/blog/20150822/ サンプル作成 まずは、HTML を用意します。 今…

Bacon.js で skip・take 処理

リアクティブプログラミング用ライブラリの Bacon.js を Node.js 上で使用し、「RxJS で行単位のファイル処理」 で試したような skip・take 処理のサンプルを実装してみました。 Bacon.js ソースは http://github.com/fits/try_samples/tree/master/blog/201…

Roy で List モナド

前回に続き、今回も Roy を試してみます。 Roy ではモナドを使った do 記法を使えるようなので、JavaScript で List モナド - Monadic 等で試したチェスのナイト移動の List モナド処理を同じように実装してみました。 Roy 0.2.2 ソースは http://github.com…

Roy による関数合成

Groovy, Scala, F#, Haskell による関数・クロージャの合成 や Java SE 8 で関数合成 で実施したものと同様の関数合成を Roy で試してみました。 Roy は JavaScript へコンパイルできる関数型のプログラミング言語です。 Roy 0.2.2 ソースは http://github.c…

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…

ExtJS EditorGridPanel でランタイムエラーが発生する問題の回避策 - IE 使用時

ExtJS 2.2.1 の EditorGridPanel を IE6, 7 上で使用している場合、以下のような操作でランタイムエラーが発生する。(ただし、環境や設定によってはランタイムエラーが表示されない可能性あり) 編集中の任意のセルから同じ行の Grid に全体が表示されてい…

別ウインドウで表示中の Web ページに対するクロスドメインスクリプト実行

Web ブラウザで別ウインドウ表示中の Web ページ(別ドメイン)のスクリプトを実行する方法を探ってみた。セキュリティの関係上、Web ブラウザは別ドメインのページに対する DOM アクセスを許可しないため、通常の方法では実現できそうに無いが、セキュリテ…

はてなブックマークのタグ検索を行う Ubiquity コマンド作成

注目の FireFox プラグイン Ubiquity の簡単なコマンドを自作してみました。 使用した環境は以下の通り。 FireFox 3.0.5 Ubiquity 0.1.5 Ubiquity コマンドの作成 それでは、はてなブックマークをタグ検索するコマンドを作成します。まず、はてなブックマー…

Flex の DataGrid

Flex 3 SDK の DataGrid コンポーネントを使って、以前 Ext JS で作成したようなデータグリッドのサンプルを作ってみた。機能としては以下のようなものを実装した。 カスタムソートの設定 フィルタリング処理の設定 スタイルの変更(選択行の背景色変更など…

ExtJS の DataGrid でページング処理を実装

Ext JS の DataGrid は多機能で便利なのだが、表示するデータ数が増えるとパフォーマンスに影響がでる。クライアント PC の性能やブラウザに依存するだろうが、数百件程度のデータでも結構厳しい印象がある。そこで、ページ処理を実装して一度に表示するデー…