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

公開日:2013年10月1日 

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

公開されたばかりの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 を出力できます。

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

とりあえず使ってみた

gwd1

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

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

DEMO

ファイルの生成も1クリック

zipfile

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

nihongo

このデモではテキストを使ってないのですが、日本語フォントが選択できないようです。何か方法があるのでしょうか。

Google Web Designerのポテンシャル

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

html5

http://9elements.com/io/projects/html5/canvas/
とっても綺麗です

http://randomibis.com/coolclock/
アナログ時計です

mangekyou

http://www.chiptune.com/kaleidoscope/
万華鏡のようなヴィジュアル

他にもたくさんありますので、確認してみてください。
HTML5で書かれたスゴいサイト – NAVERまとめ

で、何に使うか?

個人的にはフラッシュに変わるものという認識です。
iOSとフラッシュは決別したので、IE6などの古いブラウザはHTML5未対応ですが、これから再現可能な環境はHTML5が多くなっていくでしょう。


それにしても、書きだされたファイルの動作が重たいです。
間違っても写真をフェードイン・アウトするためだけに使ったりしないようにしましょう。それならjQueryで十分です。

もう1点気になるのは、グーグルはなぜこのツールを「Google Web Designer」と名付けたのでしょうか。通常のコーディングもできるのか?

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

追記:2013.10.2
本記事のアクセス数について書きました。
何もしない1日。ついでに「google web designer」で10位以内に入ったアクセス数

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

  1. 通りすがりのもの より:

    >>書きだされたファイルの動作が重たいです。

    google広告ではなく、空のファイル HTMLで作成
    すれば軽快です。

    • Kenta Mizuguchi より:

      コメントありがとうございます。
      それは知りませんでした。ファイルを作る時、あるいは書き出す時に他のモードがあるってことですかね。実務で使う前には、ちゃんと勉強したいと思います。

コメントを残す