公開されたばかりのGoogle Web Designerで簡単なデモを作ってみた

公開日：2013年10月1日　

今朝、はてブでホッテントリしてて知ったのですが、グーグルが何らかの開発ツールを公開したようです。

グーグル　ウェブデザイナー

windows MacOSとも無料で使えて、日本語化もされてます。

HTML5開発ツール

Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーションで、視覚的なコーディング インターフェースを使用して、HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザイン、作成できます。デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。

と公式サイトに書いてありますが、私は純粋なウェブデザイナーでは無いので何を言っているのかイマイチわかりません。

とりあえず使ってみた

このようなインターフェイスです。フラッシュ制作ツールなど使ったことない私ですが、直感的になんとなくわかります。

DEMOは四角のオブジェクトを書いて、フレームをコピーして、オブジェクトの位置を変えて、フレーム間の動き（何秒かけて次のフレームに移行するか？など）を調整しただけのものです。

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」と名付けたのでしょうか。通常のコーディングもできるのか？

何れにせよ、もうしばらく使ってみます。