When I was growing up, my dad had the best job I could possibly imagine: he was an arcade game and pinball technician. For me, that meant summer trips through Poland’s coastal cities with their seasonal arcade parlors; peeking inside cabinets to learn programming and engineering secrets; and—of course—free games! One of my favorites was PAC-MAN, whose popularity transcended the geopolitical barrie

SVG-editはWebベース/JavaScript製のオープンソース・ソフトウェア。時々こういうソフトウェアに出くわすからオープンソースの紹介は止められない。オンラインで動作するWebアプリケーションは多数存在し、画像編集すらオンラインで行えるようになっている。 オンラインでSVGを作成、編集！ そういったソフトウェアは大抵Flashを使って動作する。だがSVG-editは違う、JavaScriptのみで動作するのだ。jQueryを用いたソフトウェアになっており、Webブラウザ上でSVGファイルを編集、作成できるようになっている。 まるで画像編集ソフトウェアのようなインタフェースをもち、右側に並んだツールアイコンを使ってドローができる。文字を書いたり、円や四角を描くこともできる。直線や自由線を描き、色を変更することだって可能だ。オブジェクトは描画後にドラッグして移動したり回転させることも

Ample SDKはJavaScript製のオープンソース・ソフトウェア。JavaScriptはAjaxが登場して以来、一気に進化を遂げた。Prototype.jsやjQueryを使えばインタラクティブなアクションが可能なWebサイトが簡単に構築できる。そうしたライブラリはプラグインによって細かく分割された機能をもっているのが特徴だ。 XULによる画面定義 だが自分の目的にあったプラグインがあれば良いが、ないと自分で作ったり探す羽目になる。Ample SDKであればその使い方を覚えてしまえば一つのライブラリで済むのが利点と言えそうだ。リッチなインタフェースや操作を可能にする各種機能が盛り込まれている。 機能は数多いが、例えばリサイズしたりドラッグアンドドロップを実現するオブジェクトを簡単に作ることが出来る。さらにマウスオーバーで枠の色が変わるデモやJavaScriptのアクションをブラウザ

Super TablesはJavaScript製のオープンソース・ソフトウェア。業務システムをはじめ、レポート出力等で多用されるのがテーブル組みだ。縦横に長いデータを表示する場合、表計算ソフトウェアであればヘッダ部を固定表示にする。そうすればスクロールしても何の項目かすぐに分かる。 中央に表示されているテーブル だが素のままのHTMLではそのような柔軟な表示は行えない。そのためシステムによっては10行ごとにヘッダを繰り返し挿入したりする。だがそれも再利用性が悪くなるだろう。そこで使ってみたいのがSuper Tablesになる。 Super Tablesを使うとテーブルの縦方向ヘッダを固定にしてスクロールしても常に表示される。さらに横方向のヘッダも固定になり、一番左側のカラムが常に表示されるようになる。テーブルのユニークになるIDを常に表示したりすると便利だ。 実際のデータ。普通のテーブル組

node.jsはJavaScript製のフリーウェア（一部オープンソースのライブラリが入っている）。クライアントサイドとサーバサイド、両方が同じ言語で書ければどれだけ開発工数が低減されるだろうか。Web系の技術者は常にそこにジレンマを感じることだろう。 デモのチャットアプリ 方法は二つ、JavaScriptでサーバサイドを実装するか、GWTのようにJavaScriptを覆うかだ。node.jsはJavaScriptでサーバサイドを実装する。特徴的なのはそのエンジンとしてGoogle製のv8エンジンを採用していることだろう。さらにnode.js自体がポートをリッスンし、Webサーバとして動作するのが特徴だ。 独自でWebサーバを用意しているからだろうか、動作は軽快だ。チャットアプリケーションがデモとして用意されているが、レスポンスはとても良い。サーバサイドの実装と合わせて同一言語で開発できる

個人的には一番使っていて無いとちょっと不便に感じる自作のグリモンといえば「Google Reader Full Feed」なのですが、最近メインのブラウザをGoogle Chromeに変えた事もあり、使えずにちょっぴり不便になってました。 しかしながらGoogle Chromeに移植するとなれば簡単には行かないだろう事が分かっていたので移植するのを躊躇していました。先日、はてなブックマーク数を表示するGoogle Chrome Extensionも作った事だし、少しは知識もついたので、ようやく重い腰をあげて作ってみました。 最初は移植を考えてましたが、結構元にしているLDR FullFeedのコードがまばらになっていてメンテナンス性も悪かったので、今回は元のコードを捨てて１から作り直しました。とはいっても中で使っている部品などはConstellationさんの物や、os0xさんの物を使わせ

Firefoxを使ってWebシステムを開発する際には必須とも言えるFirebug。そして人気の高いJavaScriptライブラリのjQuery。この二つが組み合わさったとき、これまで以上の魅力が感じられるようになる。 マウスを当てるとそのエレメントがハイライト表示される そう確信できるのがFireQueryを使った瞬間だ。この二つの融合は、JavaScriptの開発をバーストしてくれるのではないだろうか。 今回紹介するオープンソース・ソフトウェアはFireQuery、Firebugと連携するjQuery開発補助アドオンだ。 FireQueryはconsole.logに吐き出した内容を元に、画面上のエレメントをハイライトしてくれる。例えばconsole.log($('p'));と出せば、コンソールに出力された jQuery(p)という表示にマウスを当てると、該当部分がハイライト表示になる。ど

インターネットの世界では素早さを求める動きが強まっている。それこそ、サイト内検索で欲しい情報が見つからなかったり、レスポンスが遅れたりすればあっという間にユーザがいなくなってしまう。 JavaScriptだけで検索を行う そんな高速なサーバ検索は難しいかもしれないが、クライアントサイドであれば意外と高速化できる。 今回紹介するオープンソース・ソフトウェアはjQuery Live Search、jQueryを使ったリスト検索ライブラリだ。 jQuery Live SearchはWebページ上にあるリストを検索するライブラリだ。リアルタイムにフィルタリングが行われるのでインクリメンタル検索に近い。デモでは1,000件のリストに対してフィルタリングを行っている。 文字を入力するたびに絞り込まれていく レスポンスはブラウザの性能によるだろうが、思っていた以上に高速だ。検索結果の件数も表示されるので

基幹システムをWebベースで作るといった話題が持ち上がるようになっている。そんな中、よく聞かれるのが表計算ソフトウェア的にデータを操作できる機能だ。技術者の方であればその難易度はご存知の通りで、大抵Excelを使えるようにCSVで出力してお茶を濁すことが多い。 需要の多そうなグリッドライブラリ しかしもう諦めないで良い。高機能、ではないけれど簡易的なデータ操作であればgrrid.jsを使ってみよう。 今回紹介するオープンソース・ソフトウェアはgrrid.js、Webベースで表計算ソフトウェアのように動作するグリッドライブラリだ。 grrid.jsを使うとまるで表計算ソフトウェアのようなグリッドが表示される。各セルは自由に文字を入力できる。移動はエンターキー、タブキー、矢印キーを使って可能だ。タブキーで右、エンターキーは下にフォーカスが移動する。なお、動作にはprototype.jsが用いら

まさにあのAAが似合う、そんな代物だ。Webサイトでコネクション数を極力減らすための技術として、DataスキームURIが知られている。これはhttpからはじまるようなURLの代わりに、data:からはじまる書き方で直接データをbase64で表記して流し込んでしまう手法だ。 できると思う？ 対応しているブラウザは限られるが、仕様自体はRFC2397として定義されているのでIE7などでも利用できるようになっている。これを使えば画像のみならず、こんなことができてしまう。 今回紹介するオープンソース・ソフトウェアはjsPDF、JavaScriptで生成するPDFライブラリだ。 まさに無茶だ。jsPDFはJavaScriptだけでPDFを生成してしまう試みだ。何をばかなことを、とお思いだろうか。であれば実際に試してみると良い。日本語は残念ながら使えないが、英語であればちゃんとしたPDFが生成されるこ

（現在のところ）Firefoxのような拡張機能もなければ、○○ツールバーなどもインストールできないChrome。そんなChromeを使えるようにするには、ブックマークレットしかないのだ。 Google Chromeは速い！　それは分かっていても、Firefoxのようなさまざまな拡張機能が追加できないことが、常用できない理由の1つ（Chromeにも拡張機能が追加されるという話もあるが）。そんな人のために、拡張機能の代わりになりそうなブックマークレットを紹介しよう。 ブックマークレットはブックマークとしてJavaScriptを登録して、好きなページで実行するもの（詳しくはブックマークレットに関する記事を参照）。Chromeでは、ブックマークレットのリンクをブックマークバーにドラッグ＆ドロップすれば登録できる。その機能を使いたいサイトで、ボタンを押せば、機能が実行される。 ブログを書くためのブッ

Googleが提供している、GWTというフレームワークがある。これはJavaを使ってWebアプリケーションを開発し、結果をJavaScriptに変換することでクライアント向けのコードを書かずにWebアプリケーション開発ができるという代物だ。 メーラーのようなWebアプリケーション とても便利だとは思うのだが、いかんせんJavaだ。もっと需要を増やすためにはJavaではなくスクリプト言語でいくべきではないか。そもそもとしてGoogleと言えばPythonだろう、そう憤った（かどうかは知らないが）開発者が生み出したのがpyjamasだ。 今回紹介するオープンソース・ソフトウェアはpyjamas、PythonからJavaScriptを生み出すソフトウェアだ。 pyjamasはPythonで作られたソフトウェアで、同じくPythonで組んだコードをJavaScriptに変換する。いわばコンパイラー

すでに半年以上昔ではあるが、Perlの新しいオブジェクトシステムとしてMooseに注目が集まった。面倒なオブジェクト定義が手軽に、さらに型指定なども容易にできるのでオブジェクト指向プログラミングが簡単になる、というライブラリだ。 デモアプリケーションのblok。MS Visio風なドローアプリケーション コーディング量が減り、可読性が高まればバグの入り込む余地が減るので、システムの品質が高まる。工数も下がるし、メンテナンスもしやすいと言った具合に文句なしに良い。そんなMooseにインスパイアされたのがJooseだ。 今回紹介するオープンソース・ソフトウェアはJoose、JavaScript版Mooseだ。 JooseではMoose同様にオブジェクトを定義することができる。hasを使って属性を定義すれば、セッター/ゲッターは自動的に生成される。さらにメソッドの追加も簡単にできる。もちろん、属