Chrome Life

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

HTML5

BootstrapのUIがドラッグアンドドロップだけで組める!最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」

先日、Twitter Bootstrapが2.1.1にアップデートされました。 Bootstrapが2.1になって大幅に機能も追加され、ウェブサイトを構築する上で必要なUIがほとんど揃っている感じがします。 最近では、スタートアップ系のWebサービスを作る人にとっては、Bootstrap…

3Dモデルが簡単に共有できるWebGLを使った3Dモデルビューア「3dfile.io」

WebGLを使えば、ブラウザ上で3Dグラフィックスを表現することができます。 Chrome Lifeでも3Dゲームや3D人体解剖図などでWebGLが活用されていることをご紹介しました。 最近のゲームや映画などでは、3Dによる表現が当然のように使われ、クオリティーもリアル…

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

先日のChromeのアップデートでバージョンが21になり、「getUserMedia API」がデフォルトで使えるようになりました。 今までは、試験機能だったためオプションの設定で有効にしなければいけなかったのですが、それが不要になっています。 これでブラウザらWeb…

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

HTML5ではドラッグ&ドロップAPIが提供されています。このAPIを利用すれば要素の並び替えなどをアドオンなしで実装することも可能です。 しかし、汎用的なものを作るとなると少し面倒です。 そこで今回ご紹介するのは、HTML5ドラッグ&ドロップAPIを利用した…

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

3Dグラフィックスをブラウザだけで表現できる「WebGL」は、HTML5が浸透してくることでますます期待されています。 今までもWebGLを使ったサンプルやアプリケーションが登場していますが、どちらかというと3次元で表現したものがブラウザで見れるといったレベ…

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

Kinectは、カラダ全体をコントローラー代わりにできるXbox用のセンサーです。 開発者の中には、Kinectのセンサーを使ってプログラミングする人もいるぐらい人気のインターフェースになっています。 しかし、筆者のようにKinectを持っていない人は、手軽に試…

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

みなさんは、HTMLやCSSのコーディングには何を使っていますか? デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディ…

コードリーディングに最適!たった200行で作れるHTML5製テトリスのプログラミング学習ムービー

みなさんは、フルスクラッチでテトリスを作ることができますか? プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラ…

HTML5のWYSIWYGエディタ「wysihtml5」がシンプルで扱いやすい!jQuery不要

最近は、HTML5で組む機会も増えてきたので、いろいろ調べていたらHTML5ベースのWYSIWYGエディタを発見しました。 WYSIWYGエディタといえば、TinyMCEが有名どころですが、そんなにスタイルを変更させたくなかったり、高機能すぎて少し重たかったりするので、…

HTML5で作られたゲームボーイエミュレータ「JS GameBoy Color Game Center」の完成度が高すぎる!

HTML5で作られたゲームもいろいろありますが、今回がエミュレーター本体をHTML5で作った事例をご紹介したいと思います。 ネイティブアプリであれば様々なゲームのエミュレータは存在しますが、ブラウザ上で動くものは少なく、再現性も低いものばかりでした。…

HTML5で作られた驚異のフォトエディターまとめ

最近では、HTML5で作られたサービスも増えてきました。 特に、グラフィック関連のツールはHTML5で作られたものが多く、今までFlashやネイティブアプリでしか実現できなかった機能も、HTML5のCanvasを利用してうまく実現されています。 簡単な画像加工や写真…

スクラッチ宝くじのような削ると見えてくるjQueryプラグイン「wScratchPad」を使うと面白いコンテンツが作れそうw

jQueryのプラグインを使えば、画像に様々な効果を加えたり、アニメーションさせて表示させたりいろんなことができます。 そんなプラグインは出揃った感がありますが、今回とてもユニークなプラグインを見つけたのでご紹介したいと思います。 「銀はがし」が…

いろんな用途で使える!柔軟性の高いHTML5プレゼンテーションライブラリー「Presenteer.js」

最近では、HTML5製のプレゼンテーションツールも増えてきました。 筆者は、先日Node.jsの勉強会で「reveal.js」を使ったのですが、動きもカッコよくて簡単にスライドが作れてなかなかよかったです。 しかし、こういったプレゼンツールは画面全体がスライドに…

人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ!

みなさんは、サイトをスクラッチで作る時にどうされていますか? HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局…

HTML5+WebGLで医学・解剖学が学べる!3D人体解剖図ウェブアプリ「BIODIGITAL HUMAN」

私たち人間の体はとても複雑で神秘的な造りをしています。 医学が進歩しても、いまだに解明できていない病気も多くあります。 そんな不思議のベールにつつまれた人体ですが、最新のWebテクノロジーを使って医学・解剖学の分野で理解を深めるためのツールが登…