2013年10月02日

Google Web Designerを使ってみたよ

9/30公開されたGoogle Web Designerを早速使ってみました。
このツールの目的は「広告主がクロスプラットフォームの広告を簡単に制作できるようにすること」だそうですが、HTMLファイルなども作れるのでいろいろと応用が効きそうです。

まずはダウンロード


ダウンロードは特設ページ(http://www.google.com/webdesigner/)からどうぞ。
Windows 7/8、Mac OS X 10.7.x以降に対応しています。
ドキュメントはGoogle Web Designer Helpにあります。

そして使ってみる


Google Web Designer
これを、アニメーションさせて・・・
Google Web Designer
こうなる!

起動時に、バナー広告を作るか、HTMLファイルを作るか選択します。
描画ツールやテキスト、3Dオブジェクトなどを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化することが可能です。
作成したコンテンツはHTML5、CSS3、JavaScriptとして出力できます。
AdobeのEdge Animateとか、あのあたりのツールと酷似していますが、出来上がったソースを見てみたらかなり綺麗でわかりやすくて、一昔前に比べて進歩したなーと思いました。

ちょっと、Youtubeの解説画面と比べるとタイムラインの表示が異なっていて、どこかに隠れているのかと思ったのですが、β版だからかもしれないですね。
ちなみにタイムラインは、一番下のパネルで、+のパネルを押して新しいフレームを追加していきます。

コンポーネント


普通のアニメーション機能と別に特筆すべきは、コンポーネント機能です。
コンポーネントは、右側の機能をまとめたパネル内にあるんですが、HTML作成モードだとグレーアウトしていて、使えません。
バナー作成モードのときに使えるようですが、カルーセルとか地図とかHTMLページ内に埋め込みたいときあるよなーと思うのですが、β版だからかもしれません。
コンポーネントの使い方は、使いたいコンポーネントをステージにドロップし、プロパティを設定すれば終わり、という非常に簡単なものです。
360°ギャラリーとか、スワイプ対応ギャラリーとか、スマホでも使えそうなコンポーネントがあります。
コンポーネントの使い方
カルーセルに鏡面表示のオプションなんかついているのもありがたいです。

その他


細かいところなんですが、これいいなーとおもったのが、オブジェクトのサイズを調整する方法です。
Adobe系のアプリと違って、角にマウスをあてて、ドラッグすればサイズが変わる・・・というものではなく、プロパティからピクセルでサイズを指定しなければならないのですが、このとき、サイズを入力するところからマウスをドラッグすると、それに応じてステージ内のオブジェクトのサイズが変わるようです。
位置、サイズの移動方法
まぁ角を引っ張ってくる方法と、両方使えるとさらに便利なんですが。

まとめ


こういうツールはどれもそうですが、サイトを作るという目的で使うには適していません。
あくまでアニメーションを簡単に作成したい、JSできないけどインパクトがある機能を付けたい、というときにコードを引っ張ってくるというのが最適な使い方かな、と思います。
そういう意味では本来のGoogleWebDesignerが示している「バナーを作る」ツールというポジションは正しいのかなと思います。

・・・というわけで、以上、簡単ではありましたがレビュー報告でした。
タグ:google web designer
posted by BigMoonEz at 11:54 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

2007年04月26日

<a>タグでExcelのスプレッドシートにリンクする

スプレッドシートHTMLでExcelファイルにリンクする場合は、
<a href="xxx.xls" target="_blank">Excelのファイル</a>
のように記述しますが、スプレッドシートを指定してリンクさせることもできます。
「# シート名! セル番地」の形式で記述します。
<a href="xxx.xls#Sheet2!A1" target="_blank">
のように記述します。


posted by BigMoonEz at 11:05 | Comment(2) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

2007年03月01日

更新しやすいようにHTMLページ内に他のHTMLコードを読み込む

サイト全体のページ数が多い場合、メニューが変更になった場合に全ページ修正するのは非常に困難です。
Dreamweaverなどのホームページ作成ソフトでは、置換機能が充実しており、コマンド一発で簡単に更新できる場合もありますが、更新後全ページのチェックが大変な場合もあります。
そのような場合のために、共通部分を別ファイルにしておき、各ページから読み込む方法をご紹介します。

フレームを使う
最も簡単に特に知識も必要なく利用できる方法です。ページ内に違和感なく埋め込みたい場合は<iframe>を使う手もありますが、スクロールバーが出てデザイン的に許せない、という場合も多いはず。

ページをincludeする
SSIが有効なサーバーであれば、
<!--#include virtual="side.html"-->
とすることで、上記の場合はside.htmlというファイルが読み込まれて表示されます。

JavaScriptで別ファイルを読み込む
<script language="JavaScript" src="side.html"></script>
として、別なファイルを読み込みます。
この場合、読み込むファイルにはJavaScriptのdocument.writeで記述してやる必要があります。
document.write('<table border="0">');
という記述になりますのでタグの知識は必須になります。
また、Javascriptを切っているユーザーを考慮し、代替の方法が必要になります。

スクリプト言語(Perl/CGI、PHP)を使ってページを読み込む
ファイルの拡張子が.cgiや.phpなどになってしまう(.htmlにする方法もここにありますが)ので、嫌がられる場合も多いですが、可能です。


検索エンジンのロボットは外部ファイルを読みに行った際に同一ページのソースとして認識するかどうかわかりませんので、グローバルメニューを外部ファイルにする場合は本文中にもリンクを設けるなどの工夫が必要です。
アクセス数を気にする場合は、面倒でもHTMLで記述したほうが良い場合もあります。

posted by BigMoonEz at 12:27 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

2007年01月31日

metaタグで遊ぶ

metaタグはHTMLファイルの<head>〜</head>内に記述する「そのページに付加する情報」を記述します。
よく使われるのが、文字コードを指定する方法です。

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
※charsetに文字コードを指定(Shift-JIS、UTF-8など)


この他にも別ページジャンプさせる方法

<meta http-equiv="Refresh" content="5;URL=http://www.hoge.com/">
※countに移動時間(秒)を指定、URLにジャンプ先アドレスを指定。


など有名ですが、実はこのmetaタグでページに訪問、退出時に特殊効果を出すことができます。(ただしIEのみ)

フェードイン
<meta http-equiv="page-enter" content="blendtrans(duration=1)">
※page-enter・・・ページに訪問したときの効果、退出時は"page-exit"
 content・・・効果の種類


のように記述しますが、効果が以下のようにたくさんあります。

まわりから中央へ四角で表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=0)>

中央からまわりへ四角で表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=1)>

まわりから中央へ丸で表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=2)>

中央からまわりへ丸で表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=3)>

下から上に表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=4)>

上から下に表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=5)>

左から右に表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=6)>

右から左に表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=7)>

左から右に分割して表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=8)>

上から下に分割して表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=9)>

左から右に細かく分割して表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=10)>

上から下に細かく分割して表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=11)>

点を描いて表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=12)>

左右から中央へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=13)>

中央から左右へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=14)>

上下から中央へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=15)>

中央から上下へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=16)>

右上から左下へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=17)>

右下から左上へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=18)>

左上から右下へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=19)>

左下から右上へ表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=20)>

細かい横線で表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=21)>

細かい縦線で表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=22)>

効果をランダムに使って表示
<meta http-equiv=page-enter content=revealtrans(duration=5,transition=23)>

※durationは効果終了までの時間を指定(秒)


ただし、これらの効果は、次のページが読み込まれてから効果が表示されます。
読み込むページが重いと効果が出るまでに時間がかかってしまいますのでご注意を。

HTMLについてはこれで学習!
posted by BigMoonEz at 11:46 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

2007年01月23日

CSSを使わずに1px罫線のテーブルを描く

ちょっとありがちな有名ネタで恐縮ですが・・・

1ピクセルのテーブルを描くには、<table>タグを入れ子にします。

<table border="0" cellspacing="0" cellpadding="0" width="300" bgcolor="#000000" >
<tr><td>
<table border="0" cellspacing="1" cellpadding="2" width="100%">
<tr><td bgcolor="#FFFFFF">
ここにコンテンツを記入
<td></tr></table>
</td></tr></table>


外側の<table>のbgcolorは、線の色になります。
ポイントは、 内側のテーブルの、cellspacingを1に、widthを100%にすることです。
また、内側のテーブルは、TRなりTDにbgcolorを必ず設定してください。
設定しないと外側のテーブルのbgcolorがそのまま適用されます。

ちなみに・・・
スタイルシートで同じことをやる場合は、

<<CSSファイル>>
.line{
border-collapse:collapse;
border:1px solid #000;
}

.line td,th{
border:1px solid #000;
padding:2px;
}

<<HTMLファイル>>
<table class="line">
<tr><th>ここにコンテンツを記入</th></tr>
</table>


となります。
ちなみに、私はスタイルシートに関する知識は「スタイルシートサンプルブック」と、「プロとして恥ずかしくないスタイルシートの大原則」で覚えました。
オススメです。
posted by BigMoonEz at 10:17 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする

2007年01月21日

WMVへのリンク

WMVファイルにリンクを貼る場合、aタグでそのままリンクを貼るとインターネットエクスプローラでは表示できますが、NetscapeやFirefoxなど他のブラウザでは表示がされなくなります。
NNやFirefoxなどの他のブラウザでも見えるようにするには、埋め込み型にすると問題なく表示されます。

<object ID="Player" width="400" height="400" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autoStart" value="True">
<param name="URL" value="hoge.wmv">
</object>

posted by BigMoonEz at 15:52 | Comment(0) | TrackBack(0) | HTML | このブログの読者になる | 更新情報をチェックする