2012/05/22

作ろう！HTML5用Webアプリケーションフレームワーク「Brunch」

HTML5をビジネス向けに率先して使っていくのは難しいと思いますが、それでも試してみたいと考えている人は多いはずです。そこでBrunchを活用してみると良いでしょう。HTML5ベースのWebアプリケーションを開発するための仕組みをまとめて提供してくれます。 Twitterのデモアプリです。 ...

2012/05/15

みんなで協力してブロックを埋める「FitIt」

ゲームには幾つかの種類がありますが、Webブラウザを使ったものであればネットワークを介して協力し合うゲームに面白さを感じます。そこで紹介したいのがFitItです。 ゲーム開始です。全部で4人（または4接続）が必要です。 ブロック同士が重なっていると駄目です。 後もう一息。 完成！この完成時の...

2012/05/03

IndexedDBを使ったWebベースのファイル管理「idb.filesystem.js」

Webブラウザ上でまるでファイルシステムのようにファイルやフォルダを階層管理できるのがidb.filesystem.jsです。HTML5のFilesytem APIを使い、データの保存にはIndexedDBを用いています。 デモです。下の方がファイル管理部分になっています。 ファイルをアップ...

2012/05/02

JavaScriptを使ってExifデータを読み取る「exif.js」

スマートフォンの普及によって写真データをオンライン上に扱うケースが増えています。そんな写真のメタデータであるExifをJavaScriptで扱ってしまおうというのがexif.jsです。 サンプルです。写真を指定するとそのExifから位置情報を読み取ってGoogleマップにマーカーを立てていま...

2012/04/16

IE6から使えるHTML5/JavaScriptによるグラフライブラリ「envision」

HTML5/JavaScriptを使った高度なグラフライブラリとしてenvisionを紹介します。一般的なグラフというよりも、ファイナンス系のグラフ描画が得意なようです。 リアルタイムグラフ。刻々とグラフが追記されていきます。 タイムシリーズ。指定範囲だけを拡大できます。 こんな感じでマウス...

2012/04/15

Mozilla製。HTML5によるマルチプレーヤRPG「BrowserQuest」

MozillaがHTML5の魅力を伝えるべく開発しているのがBrowserQuestです。マルチプレーヤのRPGで、2Dの昔ながらの世界が楽しめます。 まずプレーヤの名前を決めます。 サーバに接続開始です。わくわく。 中央にいるのが自分のキャラクターです。最初はみんな同じ格好をしています。 ...

2012/04/14

Android 2.x系でCanvasタグのtoDataURLメソッドをサポート「todataurl-png-js」

todataurl-png-jsはAndroid 2.x系においてCanvasタグに描いた内容をdataURIとして画像で取り出した上で再利用できるようにするJavaScriptライブラリです。 例です。自分で描いた模様をバックグラウンドに設定しています。 こちらはCanvasタグに生成した...

2012/04/13

Bootstrapを使おう！様々なカラーテーマ、プラグインを用意「Kickstrap」

最近作られるWebサービスでよく使われているBootstrap。そんなBootstrapは固定色でそれっぽさが感じられてしまうのが欠点でしたが、見事に打ち消してくれるのがKickstrapです。 色が変わると随分印象が違います。 テーマ機能があります。 青と白。 こんな感じのシンプルなテーマ...

2012/04/12

137億年の宇宙の歴史を一つの年表に「ChronoZoom」

先日MS Researchとモスクワ大学、カリフォルニア大学が公開した宇宙の年表、ChronoZoomはCodePlexにてソースコードが公開されています。 最初の表示です。左がビッグバン、右が現在になっています。 クリックすると拡大して詳細が表示されます。動画の再生も可能です。 現代（とい...

2012/04/11

これからHTML5をはじめるならぜひ読みたい「Dive Into HTML5」

これからHTML5の勉強をはじめよう、そう思い始めた人に読んでほしいのがDive Into HTML5です。HTML5の機能、特徴などについて網羅されたコンテンツです。 トップページです。ePubやPDFといった電子書籍ではないですが、書籍風に整った構成になっています。 段落分けされていて読...

2012/04/10

すごいぞ！HTML5で顔認識「HTML5 Face Detection」

HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆...

2012/04/08

Flashで救済。レガシーなWebブラウザでもWebSocket「web-socket-js」

WebSocketは現在はHTML5仕様から分離されてしまいましたが、リアルタイムコラボレーションを行うためには必須の技術と言えます。そんなWebScoketをFlashを使ってレガシーなWebブラウザでも実現するのがweb-socket-jsです。 送信しています。Google Chrom...

2012/04/06

これは格好いい。Windows 8のMetro UIをHTML5で再現「Metro UI CSS」

次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリスト...

2012/04/02

地球へ帰還せよ。3Dモデルの上にコックピットを表示「cockpit.js」

cockpit.jsを使うとWebベースの3Dゲームに2Dのコックピットを表示するというゲームが作れるようになります。キーボードやマウス操作で移動も可能です。 この臨場感がすごい！ ここが日本辺り。 WASDによる移動、RFによる上下移動、QEによる回転、矢印キーによる移動もサポートされてい...

2012/03/31

ちょっとした工夫。ブラシ風入力にするだけでここまでスムーズな絵が描ける「HTML5 Canvas Brush Sketch」

iPadやWebブラウザ上で絵を描く際に試してみたいのがHTML5 Canvas Brush Sketchです。単純にマウスを動かした線を引くのではなく、ブラシ風に描いてくれます。 こちらはライン版。普通にマウスの軌跡を描きます。 こちらはブラシ版。ぐっと良くなっています。 デモ動画です。 ...

2012/03/31

レガシーからモダンまで。Webブラウザによって配信方法を変更する動画プレーヤ「FlareVideo」

レガシー、モダンなWebブラウザ両方に対応した動画プレーヤがFlareVideoです。それぞれの環境に応じて適した配信設定を自動的に行ってくれます。 再生中です。 画面いっぱいまで広げられます。 フルスクリーンにも対応しています。 テーマも3種類用意されています。 FlareVideoはvi...

2012/03/30

Bootstrapを使ったサイトに組み込みたいWYSIWYGエディタ「Bootstrap-wysihtml5」

最近よく目にするようになったTwitter Bootstrapを使ったWebサイト。そんなWebサイトでWYSIWYGエディタを使うならば導入したいのがBootstrap-wysihtml5です。 Bootstrapらしい、すっきりとしたUIです。 漢字を変換した後の動きがちょっと妙です。 ...

2012/03/27

ドリランドのあの音を使って音楽を作る「dorilasound」

2012/03/21

パスワードロック付き。画像の中に任意のファイルを埋め込むJavaScript「stegano.js」

2012/03/20

Titaniumを使った電子書籍作成のサンプル「Titanium-Booker」