登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。 目次
登場当時、動きのあるWebページを作る技術として注目されたJavaScriptは、その後“不遇”の時代を経て、Ajaxで再び脚光を浴びました。jQueryなどのライブラリの普及で、開発生産性やブラウザ互換性の問題がほぼ解決した現在、HTML5時代を目前にして、JavaScriptの重要度はさらに高まっています。この特集では、今、知っておきたいJavaScriptを一気に解説します。 目次
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
WebALはWebブラウザで音楽を3D化する、OpenALをポーティングしたJavaScriptライブラリ。 WebALはHTML5/JavaScript製のフリーウェア(ソースコードは公開されている)。ゲームにおいてグラフィックスと同じくらい欠かせない重要な要素が音だ。音楽によって臨場感を出したり、よりゲームの世界に入り込みやすくなる。特にFPSのような3Dゲームはそうだろう。 キーボードで複数の音を操作するデモ 音が単調に聞こえていたら興ざめだ。左右のどちらから音が聞こえるのかによって、よりリアルにゲームを楽しめるようになる。そのためのオーディオAPIであるソフトウェアとしてOpenALが知られているが、それをさらにJavaScriptにポーティングしたのがWebALになる。 元々のOpenALはOpenGLに似せてあるらしい。つまりWebALはWebGLに似せ、組み合わせて使う事が想
昨年末にAppleがデベロッパー向けに公開したiAd Producerは、その名の通り、iAdのコンテンツを作成するツール。iAdの広告料はかなりの金額だそうで、大企業や広告代理店ならいざしらず、一般人には関係ないですよね。 ところが、このiAd Producerが作成するコンテンツはHTML5、CSS3、JavaScriptとして出力される。ってことは、UIWebViewに仕込めばネイティブ・アプリとして動くんじゃない?と思って試したことろ、ちゃんと動きました。しかも、UIWebViewをInterface Builderで貼付けてアウトレットに繋いで、3行ほどコードを書くだけ。 NSString *filepath = [[NSBundle mainBundle] pathForResource:@”AdUnit/index” ofType:@”html”]; NSURL *fileu
Treesaver.jsはHTML5/JavaScriptを使った電子雑誌を作成するためのフレームワーク。 Treesaver.jsはPython製、HTML5/JavaScript用のオープンソース・ソフトウェア。電子書籍は決して遠い存在ではない。誰でも自由に作成、発信できるコンテンツになってきている。ePubを作るのも大して難しいことではない。 サンプルの表紙 コンテンツは既に多数ある訳で、次に問題になるのは見せ方だ。これまでのWebページとは大きく違い、ただ上からずらずらと並べていけばいい訳ではない。しかしそんな見せ方についても既にライブラリが存在する。その一つがTreesaver.jsだ。 Treesaver.jsはHTML5/JavaScriptを使い、テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作成することが出来るソフトウェアだ。Treesaver.jsはコンパイ
StreamieはHTML5/node.jsで作られたWebブラウザベースのTwitterクライアント。 StreamieはHTML5/node.js製のオープンソース・ソフトウェア。去年、今年と新しい技術がどんどん花開いている。一つはHTML5、もう一つはnode.jsだ。どちらもわくわくするようなソフトウェアが登場してきている。まだまだ一般的でないだけに、何ができるのかが興味深い。 タイムライン HTML5の仕様からは外れているが、WebSocketを使ってリアルタイムに更新されるWebアプリケーションも興味深い。そうした面白い技術を組み合わせつつ、こちらも人気が高いTwitterアプリにしたのが今回紹介するStreamieだ。 StreamieはOAuthを使って認証を行い、リアルタイムに更新されるTwitterクライアントだ。リプライやダイレクトメッセージ、タイムライン、ツイートな
jQuery File UploadはHTML5を使って複数ファイルを選択できるファイルアップローダー。ドラッグアンドドロップにも対応。 [/s2If] jQuery File UploadはjQuery/JavaScript/HTML5製のオープンソース・ソフトウェア。Webの仕様の中には面倒だと思うものが幾つかあるが、ユーザとして使っている中で感じるのはファイルアップロードに手間がかかりすぎることだ。 アップロード中 ファイルボックスでは一つしかファイルが選べず、ダイアログをいちいち出して選ばないといけない。Flashで解決する手法もあるが、JavaScriptとの組み合わせに問題があったり導入が若干面倒だった。だがそれを解決する素晴らしいライブラリがjQuery File Uploadだ。 jQuery File UploadはHTML5を使っており、Flashに頼らない複数ファイル
Geolocation API と Google Map API を使って現在地の位置情報と住所を取得するサンプルを作成してみた。なお、動作確認は Firefox 3.6.3 を使用し、localhost の Web サーバーを使って実施した。 Geolocation API を使って現在地を取得するには navigator.geolocation.getCurrentPosition() に位置情報の取得結果を引数に取る関数を渡すだけと非常に簡単。 また、Googel Map API を使って位置情報から住所を取得(逆ジオコーディング)するには google.maps.ClientGeocoder の getLocations を使用する。 geo_sample.html <html> <head> <title>Geolocation API を使った現在地の取得サンプル</title
maptail.jsはアクセスログをリアルタイムに地図上へマッピングするソフトウェア。 maptail.jsはJavaScript/node.js製のオープンソース・ソフトウェア。node.jsに注目が集まっている。様々なソフトウェアが日々開発されていて、そのどれもが新しい技術を積極的に取り入れている。例えばHTML5だ。 こんなに奇麗に HTML5を使えばどんなことができるのか、それは実際にできあがったものを見てみるのが一番分かりやすいはずだ。その例として紹介したいのがmaptail.jsになる。MapとTailを組み合わせたこのソフトウェアはnode.js/HTML5を知る上できっと面白いはずだ。 maptail.jsを起動する時には何らかのログファイル(通常はアクセスログ)を指定して実行する。そうするとアクセスログをリアルタイムに解析し、IPアドレスから位置情報を取得して地図上にマッ
ccvはHTML5とCanvasタグを使ってWeb上で顔認識を行う。C言語によるライブラリもある。 [/s2If] ccvはWebベースまたはC言語製のオープンソース・ソフトウェア。最近の写真管理ソフトウェアの流行として顔認識がある。デジカメやプリンタでも顔認識機能を搭載し、自動的に明るくしたりするものもある。風景写真なども良いが、やはり人が写っている写真のが楽しいのだ。 そんな顔認識技術はWebベースでも提供されるようになっている。特にFacebookのようにSNSの中で使う場合は友人を自動認識させることでより活発な交流を促せるのだ。Webベースでの顔認識をHTML5/Canvasで行うのがccvだ。 実行例 via Tibetan Girl near Mount Everest | Flickr - Photo Sharing! ccvは元々C言語で開発されているコンピュータビジョンラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く