今回のテーマは「JavaScript」

Ajaxを使ったWebアプリケーションの到来とともに一気に注目度を高めたのがJavaScriptだ。それまではセキュリティの問題などから、WebブラウザのJavaScriptをオフにするケースも多く、ちょっとした画面のイフェクトくらいにしか使われてこなかった。だが今では、JavaScriptを有効にしているのがほとんどで、Ajaxに限らずRIA(リッチ・インターネット・アプリケーション)を構築するうえで欠かせない技術になっている。

また、数年前まではHTMLのレンダリング速度や操作の軽快さがWebブラウザに求められてきたが、最近ではJavaScriptの実行速度で差別化を図るようになっている。Google Chrome、Firefox、Safari、Operaなどが新しいJavaScript実行エンジンを開発し、その速度を競い合っている。

今回はそんな「JavaScript」に注目してWebアプリケーションやオープンソース・ソフトウェア(OSS)を紹介したい。今現在はもちろん、今年、来年さらに重要になっていくであろう技術を今のうちに体験しよう。

今回紹介するOSS・Webアプリ
Chrome Experiments』 Google Chromeの可能性を探求する
Wescript』 ユーザスクリプトを発見、共有する
jsPDF』 JavaScriptを使ってPDFを生成する
Pyjamas』 PythonからJavaScriptを生成する



Google Chromeの可能性を探求する

名称 Chrome Experiments
URL http://www.chromeexperiments.com/

Google ChromeはGoogleの開発するWebブラウザだ。『Chrome Experiments』ではそんなGoogle Chrome上で動作するJavaScriptを多数紹介している。JavaScriptなので他のWebブラウザでも動作しないことはないが(ものによっては動作しない場合もある)、Google Chromeの高速なJavaScriptエンジンを使うとさらにその魅力が増すようになっている。

トップページ。多数のGoogle Chrome上で動くアプリケーションが登録されている

Googleのトップページが重力によって落下するもの、ウィンドウを使ったパズル、3Dモデル、ボールが跳ねるものなど実に多彩だ。単なる画面のイフェクトだったJavaScriptがAjaxを使ってRIAに踏み入れたように、JavaScriptにはこのような可能性もあるのかと感じられるショーケースになっている。

ボールを進めていくゲーム。一つのステージが終わると次のステージが表示される

なお、これらのWebアプリケーションは誰でも登録することができる。腕に覚えのあるJavaScript開発者の方はぜひ挑戦してみてほしい。

16パズルの例。完成すると一枚の画像になる




ユーザスクリプトを発見、共有する

名称 Wescript
URL http://wescript.net/

通常、Webサイトに表示されている情報は、閲覧者が操作できないようになっている。だがJavaScriptを使って自分の好みの画面に組み替えることは可能だ。そのようなソフトウェアはユーザスクリプトと呼ばれる。たとえば、特定サイトから広告をはじめとした不要な表示を消したり、用意されていないアクションを自分で設定するといったことができる。

そして『Wescript』では、皆が使っているユーザスクリプトに関する情報を共有できるサービスを提供している。皆が使っているものであれば、便利なものが多いはずだ。有名なサイトのものも多い。そうすれば自分で探す手間も省け、ユーザスクリプトの魅力をいち早く知ることができる。

ユーザスクリプトを見つけたり、更新チェックをしたりするのが便利になるFirefoxアドオンを提供している

さらに、更新されたユーザスクリプトに関する情報も得られる。あくまでも表示されたHTMLに対しての操作になるので、Webサイト側のデザインが変わったりすると使えなくなるのがユーザスクリプトの弱点でもある。そうした場合、最新のWebサイトデザインに対応したものがリリースされれば、また変わらず利用できるようになる。ユーザスクリプトを使ってみたい、またはすでに使っているという方はぜひWescriptを見てほしい。

更新チェック機能で更新されているユーザスクリプトをすぐに発見できる

人気のあるユーザスクリプトをインストールすればさらに便利になる




JavaScriptを使ってPDFを生成する

名称 jsPDF
URL http://code.google.com/p/jspdf/

Webシステムを開発する際、表示されている内容をPDFにしたい、レポートをPDFで生成してほしいと要望されることは多い。通常、そのような場合はサーバ側で専用の生成エンジンを導入して作成するのだが、『jsPDF』は違う。なんとWebブラウザ上でPDFを生成、表示することができる。

サンプルのスクリプト。ページを追加、文字をレンダリングする

タネあかしをすれば、最近のWebブラウザが対応しているDataスキームURIを使ってPDFを生成している。PDFはバイナリだが、表示内容をBASE64でエンコードして表示している。SafariやFirefox3、Operaなどであれば表示ができるだろう。また、iPhone版Safariでの表示にも対応している。

スクリプトを実行した結果。PDFとして認識されている

現状では文字を表示するのみで、日本語の表示は不可能。だが、今後の予定として画像や多言語対応、テキストリンクが挙げられている。使いどころは難しいかもしれないが、技術的には面白いソフトウェアだ。




PythonからJavaScriptを生成する

名称 Pyjamas
URL http://pyjs.org/

一般的にJavaScriptはWebブラウザ向けのプログラミング言語とされている。そのためサーバ側で何らかのシステムを構築する場合、サーバサイドとクライアントサイドは別の言語を選択することになる。もしこれが同じ言語でできるとすれば、開発者にとっては非常にありがたいことになるだろう。

Pyjamas』はまさにそのためのソフトウェアだ。Pyjamasは、Pythonを使ってプログラミングを行ない、それをJavaScriptに変換する。同じような技術としてGoogleの開発するGWT(Google Web Toolkit)が知られているが、PyjamasはそのPython版という位置付けだ。

メーラーのようなインタフェースのWebアプリケーション

まだ複雑な操作はできないが、最適化された例としてメーラーのようなWebアプリケーションや表計算風の表示を行なうサンプルが提供されている。JavaScriptを習得することなくJavaScriptを使えるようになる、魅力的なライブラリと言えそうだ。

表計算風にセルを編集するサンプルアプリケーション

いかがでしたか?

Webアプリケーションが次々と登場する中、JavaScriptの注目度は高まっている。RIAを提供する技術としてはFlashやSilverlightなどもあるが、手軽さ、軽快さではJavaScriptが一歩秀でている。さらに実行速度もどんどん向上しており、可能性は飛躍的に広がっている。

prototype.jsやjQueryのようなフレームワークに続いて、Pyjamasのように自動生成するもの、さらにYUIやCappuccinoといったJavaScriptを使い、まるでローカルアプリケーションのようなインタフェースを提供するライブラリも出てきている。インターネットが進化する限り、JavaScriptも同様に進化していくことだろう。

JavaScriptはWebブラウザさえあれば始められる手軽なプログラミング言語でもある。ぜひ触って、プログラミングの楽しさを感じてみてほしい。

著者プロフィール:MOONGIFT 中津川 篤司(なかつがわ あつし)

1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。