Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

Chromeがゲーム機になる!WebRTCを使ったダンスゲーム「BeHero Tap Dance」

先日のChromeのアップデートでバージョンが21になり、「getUserMedia API」がデフォルトで使えるようになりました。

今までは、試験機能だったためオプションの設定で有効にしなければいけなかったのですが、それが不要になっています。

これでブラウザらWebRTCの機能を使うことができるようになるので、ウェブカメラを利用したインタラクティブなアプリも増えてくるでしょう。

前回の記事では、顔認識で機体を操作するゲームを紹介したのですが、今回はもっとKinectにありそうなダンス系ゲーム「BeHero Tap Dance」を紹介したいと思います。

BeHero Tap Dance」は、カラダ全体を使ってリズムに合わせながら、コーナーのマーカーに触ることでスコアが加算されるゲームです。

最新のChromeブラウザであれば、サイトにアクセスしてカメラアクセスの許可ボタンを押すだけで遊べます。

Kinectの世界がブラウザで体験できる!

そんな時代がとうとうやってきたのです。

実際のプレイ風景です。


WebRTCを使ったダンスアプリ

どうみても遊んでるのがバレバレですねw

BeHero Tap Dance」のゲーム内容はまだまだといった感じですが、技術的にこういったことができるというのが分かっただけでも進歩だと思います。。

ゲーム会社が本気をだせばきっとスゴイものが作れるはずです。

ブラウザとウェブカメラを連動させたアイデアがあれば、いまがチャンスかもしれませんね!

↑開発者のBeHeroのメンバーが実際にプレイしている写真(楽しそうですね)

是非、チャレンジしてみてください。

それでは、また!

HTML5ドラッグ&ドロップAPIを利用した超軽量の並び替え用jQueryプラグイン「HTML5 Sortable」

HTML5ではドラッグ&ドロップAPIが提供されています。このAPIを利用すれば要素の並び替えなどをアドオンなしで実装することも可能です。

しかし、汎用的なものを作るとなると少し面倒です。

そこで今回ご紹介するのは、HTML5ドラッグ&ドロップAPIを利用した超軽量の並び替え用jQueryプラグインHTML5 Sortable」です。

HTML5 Sortable」は、ネイティブHTML5のドラッグ&ドロップAPIを使用して構築されているので超軽量です。

HTMLのコードは下記のようにして使います。

<ul class="sortable">
    <li>Item 1
    <li>Item 2
    <li>Item 3
    <li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
    $('.sortable').sortable();
</script>

リストとグリッドの両方に対応しています。

ドラッグ無効なリストやバンドル付リストを作ることも可能です。

よくある、左右のリストの並び替えも簡単に実装できます。

jquery-ui sortable pluginに似たAPIを提供しています。

ライセンスはMITライセンスです。

開発者からのメッセージによると、jquery-html5sortableプラグインを試したがIEでは動かなかったので作ったようです。 ※筆者のIE Testerで試したところIE6では動かず、IE7以降で動作しました。

ソースコードは非常に短いのでコードリーディングにも最適だと思います。

HTML5APIはパワフルなのですが、そのまま使うよりも「HTML5 Sortable」のようなjQueryプラグインでラップしている方が開発しやすいと思います。

是非、チェックしてみてください。

それでは、また!

HTML5で近代的な3Dゲームを実現する第一歩になりそうなWebGLのデモ

3Dグラフィックスをブラウザだけで表現できる「WebGL」は、HTML5が浸透してくることでますます期待されています。

今までもWebGLを使ったサンプルやアプリケーションが登場していますが、どちらかというと3次元で表現したものがブラウザで見れるといったレベルのものがほとんどでした。

ブラウザで表現するのにも限界があるのか?と思っていましたが、そんなことはないというサンプルを見つけました。

Team Fortress2が作ったthree.jsのWebGLを使ったデモです。

精密な3Dグラフィック表現、キャラクターのスムーズなアニメーション、微妙な影の重なり具合など完成度が高いサンプルになっています。

本当にブラウザで動いてるの?

と疑ってしまうほどです。

three.jsは、JavaScriptからWebGLを簡単に使えるようになるライブラリーです。

今までもthree.jsを使ったサンプルはいくつか紹介されていて、見たこともあったのですが今回のデモが素晴らしかったのでご紹介しました。

HTML5で作られたゲームは、専用ゲーム機に比べるとまだまだな感じはありますが、今回のデモを見る限りそれほど遠い未来ではないような感じがします。

HTML5/WebGLがゲーム業界のスタンダードになる

そんな時代が近い将来やってくるかもしれませんねw

Kinectの世界がブラウザで体験できる】 Chromeバージョン21から標準でWebRTCが使えるようになったので、Kinectのようなゲームがどんどん登場してきています。面白いので是非チェックしてみてください。 Chromeがゲーム機になる!WebRTCを使ったダンスゲーム「BeHero Tap Dance」

【3Dグラフィックスの現場で使えるサービス】 ファイルをアップロードするだけで3Dモデルの共有ができるサービスです。様々な3Dファイルフォーマットに対応しているので、こちらもあわせてチェックしてみてください。 3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」

【画期的な3Dモデルテクノロジー】 顔写真をアップロードするだけで簡単に3Dで動く顔が生成できる技術です。デモが用意されているので是非試してみてください。 これはすごい!一枚の顔写真から自分の顔の3Dモデルが作れるサービス「Vizago」

ソースコードをブログで公開している方へ】 ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookGoogle+でシェアされた時に目立ちにくくなってしまいます。そんな時は、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」が便利です。 ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」

それでは、また!

WebRTCを使って顔コントローラーで遊ぶKinect風ゲーム「FaceKat」

Kinectは、カラダ全体をコントローラー代わりにできるXbox用のセンサーです。

開発者の中には、Kinectのセンサーを使ってプログラミングする人もいるぐらい人気のインターフェースになっています。

しかし、筆者のようにKinectを持っていない人は、手軽に試すことができません。

そこで今回ご紹介するのが、WebRTCを使って顔をコントローラー代わりにして遊ぶKinect風ゲーム「FaceKat」です。

FaceKat」は、パソコンについているウェブカメラを利用して、その映像をブラウザのWebRTC機能を使って取り込み、顔認識で機体を操作するゲームです。

FaceKatのプレイムービー


WebRTCを使ったKinect風ゲーム「FaceKat」

Chrome+ウェブカメラで顔がコントローラーになる!

WebRTCの機能を使うには、最新のChromeを起動してURLに「chrome://flags」を入力し、MediaStreamを有効にします。 有効後はChromeの再起動が必要です。(筆者は、MacBook Airで試しています。Windowsで動作するかは確認していません)

FaceKat」にアクセスすると、カメラへのアクセス許可が聞かれるので「許可」ボタンをクリックします。

これで、カメラの映像がブラウザ上に表示されます。中央のSTARTボタンをクリックするとゲームが始まります。

顔を上下左右に動かすことで機体の向きが変わります。 ゲームは単純で丸い物体に接触しないように進んでいくだけです。飛行スピードは徐々に早くなっていきます。

丸い物体に衝突すると画面がオレンジ色に点滅します。3回衝突するとゲームオーバーです。

WebRTCを使えば、こういったカラダの一部を使ったセンサーアプリやゲームなどが作れるようになります。

まだChromeの中ではWebRTCが試験的機能なのでデフォルトで有効になってはいませんが、これが有効になるといろんなインターフェースのアプリが登場しそうですね!

近未来的なインターフェース

をいち早く試してみたい方は、「FaceKat」を是非チェックしてみてください。

くれぐれも仕事中にやらないようにしてくださいね。頭を振りまくるのでかなり怪しまれますww

【追記】

いろいろ調べていると、FaceKatの元になっているのが「FastKat」というゲームです。 こちらは、マウスで操作するタイプなので、ウェブカメラが無い人はこちらで遊べますよ。

続編の「FastKat2」というのもあって、こっちはよりリアルになっています。 どちらもスピード感があって、面白いゲームですので、一度遊んでみてください。

Kinectの世界がブラウザで体験できる】 Chromeバージョン21から標準でWebRTCが使えるようになったので、Kinectのようなゲームがどんどん登場してきています。面白いので是非チェックしてみてください。 Chromeがゲーム機になる!WebRTCを使ったダンスゲーム「BeHero Tap Dance」

それでは、また!

HTML5、CSS3、JavaScriptがリアルタイム編集できる!軽量HTMLエディタ「Liveweave」

みなさんは、HTMLやCSSのコーディングには何を使っていますか?

デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。

デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。

しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。

コードを修正→ファイルの保存→ブラウザで更新→確認

この手順を繰り返すのですが、これがなかなか面倒です。

できれば、コードを修正したタイミングですぐに確認できるとベストですよね。

そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。

Liveweave」は、ブラウザ上で動作するHTMLエディタです。

コーディングエリアとレンダリングエリアが2ペインで表示されるので、コーディングしながらリアルタイムに結果を確認することができます。

ファイルの保存、ブラウザで更新の手順を省くことができるので、

コーディングスピードも一気に加速

するでしょうww

エディタは、左右分割と上下分割、コーディングエリアのみ、レンダリングエリアのみのレイアウトが選べるようになっています。

コードを選択状態にして、Tidyボタンを押すと、コードを整形することができます。

もう1つ便利なのが、jQueryjQuery Mobile、MooTools、Ext JSなどのライブラリーをメニューから選ぶだけでインクルードしてくれる機能です。

ライブラリーは、GoogleライブラリAPIから読み込まれるようになっています。

デバッグして問題なければ、最後にSaveボタンをクリックして作ったHTMLファイルがダウンロードできるようになっています。

もちろん、最終的にはファイルを分割したり調整は必要になってきますが、最初の枠組みを作る段階ではいろいろと手を加えて確認することも多いので、「Liveweave」を使うととても便利だと思いますよ。

HTML5やCSS3の勉強したい人や、新人の研修で教える際に重宝するかもしれませんねww

是非、チェックしてみてください。

それでは、また!

これはすごい!ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」

前回の記事で、200行で作れるHTML5テトリスをご紹介してたくさんの反響がありました。

誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。

これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか?筆者もそのうちの一人です。

しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。

そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワークCAAT」です。(CAATは、Canvas Advanced Animation Tookitの略)

CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。

CAATの機能と特徴

  • オンスクリーンエンティティ
  • カスタムマトリックススタック
  • ゲームループフック
  • シーン管理、シーントランジション
  • アフィン変換とアルファ透明度のアプリケーションのための補間
  • 完全なピクセルベースの表現
  • 複雑なパス定義
  • ビヘイビア
  • シームレスな2Dボックス統合
  • シーン毎のタイマー数無制限
  • 座標計算
  • マウス、キーボード、加速度センサーからの入力システム
  • リソース管理とプリロード。
  • スプライト、図形、テキスト、パス、補間、等の描画
  • 容易に拡張可能なフレームワーク
  • オープンソース(MITライセンス)
  • 主要なキャンバス対応のブラウザで動作可能(Internet Explorerはバージョン9以上が必要)

CAATのレンダリングエンジン

CAATのレンダリングエンジンは、CanvasだけでなくWebGLCSSにも対応しています。

これらは、1つのコードベースでレンダリングを切り替えることができるようになっています。

デモでは、SumonというゲームをCanvas版WebGL版CSS版の3つが用意されており、動きの違いを確認することができます。

CAATのデモ

CAATのデモを見るとどのようなことができるのかが分かります。まずは自分の目で見てみるのが一番ですね。

複雑なパス制御

パスに沿って魚と数字が動くデモです。パスのポイントをマウスで移動すると追従します。 右側のアイコンで移動周期と速度を切り替えることもできます。

ビヘイビア管理

魚が順番に出現して、それぞれの魚が別々の行動を行うデモです。このような自然と魚が泳いでいるシーンを作ることができます。

タイマー管理

草が風になびいて時間と共に景色(背景)の変化を作っているデモです。夜空の星やホタルが飛ぶなどの細かい演出があり、見ているだけで癒されます。

衝突の検出

マウスに追従して円が動きます。円同士が衝突するとバウンドするデモです。複雑な形状の衝突判定もできそうですね。

シーンの切替

複数のシーンを別々で管理して切り替えるデモです。シーンの切替時もアニメーションさせることができます。

CAATのチュートリアルとソース

CAATのチュートリアルも用意されているので、デモとあわせて作り方を見ていくとよいと思います。

APIのドキュメントがあるのもうれしいですね。

GithubからCAATのソースをダウンロードすることができます。

まとめ

CAAT」を使えば、JavaScriptだけで高度なゲームを作ることができます。

他にもゲームのフレームワークはたくさんありますが、デモチュートリアルAPIがきっちりと整備されているので、初心者でもとっつきやすいと思いますよw

iPhoneiPadでも軽快にデモのアニメーションが動いたので、スマホ向けのゲームの基盤として利用しても面白いかもしれません。

とりあえずGithubからソースをダウンロードして、コードリーディングするだけでも勉強になるかもしれません。

是非、この週末ゲーム作りにチャレンジしてみてください。

それでは、また!

コスパ最高!旧型MacBook Air13インチの最安値が7万8千円に!新型発売後1万円ダウンで今が買い時

みなさん新型MacBook Airを購入しましたか?

筆者は、ものすごーーーく欲しいんですけど、我慢しています。(汗;

新型MacBook AirはオプションでCPUやメモリ・HDDのスペックをパワーアップできるので、とても魅力的な究極のノートブックに仕上がっています。(新旧比較表はこちらの記事にまとめています)

しかし、購入前にチェックしてほしいのが旧型MacBook Airの価格です。

実は、新型MacBook Airの発売後から急激に旧型MacBook Airが値下がりを続けています。

なんと、旧型MacBook Air13インチの最安値

77,997円

になっています。(2012年6月26日現在)

スペックは、メモリ4GB、SSD128GBなのでそれほどハイスペックではありませんが、セカンドマシンとして使う人にとっては十分だと思います。

同じスペックの新型MacBook Airと比較すると、24,800円も安く購入できることになります。

コスパ高すぎです!

最安値の価格推移をチェックしてみると、新型MacBook Air発売前と比べて1万円も値下がりしたことになります。

まだまだ値下がりする可能性もありますので、購入前に是非チェックしてほしいと思います。

ハイスペックにこだわる人は、新型MacBook Airがおすすめですが、そこまでスペックにはこだわらない人は旧型MacBook Airがコストパフォーマンス的におすすめです。

現在は、16のショップが、7万8千円代で販売しています。

まだ、MacBook Airを持っていない人は、Apple Storeなどで実際にさわってみてください。

すぐに欲しくなるとおもいますよww

筆者は1年前はWindowsユーザー(Let’s Note派)でしたが、MacBook Airを購入してすっかりMac派に変わりました。

最初は、戸惑いもありましたが、アプリの環境も整ってきているので、十分スイッチすることができると思います。

是非、検討してみてください。

旧型MacBook Air 13インチの最安値を価格.comで調べる

Chrome Lifeでは、MacBook Airに関する下記の記事も書いています。あわせてチェックしてみてください。

それでは、また!