公開されたばかりのGoogle Web Designerで簡単なデモを作ってみた
公開日:2013年10月1日

公開されたばかりのHTML5開発ツール「Google Web Designer」をダウンロードして触ってみた。まだよくわかってないのですが、すごいポテンシャルを秘めたツールのようです。
今朝、はてブでホッテントリしてて知ったのですが、グーグルが何らかの開発ツールを公開したようです。
windows MacOSとも無料で使えて、日本語化もされてます。
HTML5開発ツール
Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。
と公式サイトに書いてありますが、私は純粋なウェブデザイナーでは無いので何を言っているのかイマイチわかりません。
とりあえず使ってみた

このようなインターフェイスです。フラッシュ制作ツールなど使ったことない私ですが、直感的になんとなくわかります。
DEMOは四角のオブジェクトを書いて、フレームをコピーして、オブジェクトの位置を変えて、フレーム間の動き(何秒かけて次のフレームに移行するか?など)を調整しただけのものです。
ファイルの生成も1クリック

ツールの「公開」をクリックすれば、1つzipファイルに書き出してくれます。解凍するとhtml,css,javascriptが書かれた1つのhtmlファイルになります。
イメージファイルなど使ってなければ、ファイルは1つのようです。ここまで要したクリック数は10クリック程度です。

Google Web Designerのポテンシャル
HTML5は本気だすと下記のような素晴らしいサイトが作れるそうです。
(Google Web Designerで制作されたものではありません。)

http://9elements.com/io/projects/html5/canvas/
とっても綺麗です
http://randomibis.com/coolclock/
アナログ時計です

http://www.chiptune.com/kaleidoscope/
万華鏡のようなヴィジュアル
他にもたくさんありますので、確認してみてください。
HTML5で書かれたスゴいサイト – NAVERまとめ
で、何に使うか?
個人的にはフラッシュに変わるものという認識です。
iOSとフラッシュは決別したので、IE6などの古いブラウザはHTML5未対応ですが、これから再現可能な環境はHTML5が多くなっていくでしょう。
それにしても、書きだされたファイルの動作が重たいです。
間違っても写真をフェードイン・アウトするためだけに使ったりしないようにしましょう。それならjQueryで十分です。
もう1点気になるのは、グーグルはなぜこのツールを「Google Web Designer」と名付けたのでしょうか。通常のコーディングもできるのか?
何れにせよ、もうしばらく使ってみます。
カテゴリー:ホームページ制作 » 便利なサービス・ツール
作成者:けん
>>書きだされたファイルの動作が重たいです。
google広告ではなく、空のファイル HTMLで作成
すれば軽快です。
コメントありがとうございます。
それは知りませんでした。ファイルを作る時、あるいは書き出す時に他のモードがあるってことですかね。実務で使う前には、ちゃんと勉強したいと思います。