Adobe AIRコンテストで審査員特別賞を取ったWeb Plamoが面白いです。1日1回アクセスすれば最短で7日間で飛行機が完成。完成した模型は3DでレンダリングしてAIRアプリを通してジオラマアプリケーションとして楽しめると言ったものだそうです。ジオラマの背景を手がけているのはスタジオジブリの背景を手がけている人だそうで...。飛行大会なども計画しているみたいですね。
テクノロジーとしてFlashのShared Objectと言うCookieの用にローカルに情報を保持する機能を利用してるらしく、未登録のまま模型を制作していく事が可能との事。
まだ準備中の恐竜の骨を組み立てるバージョンも楽しみです。
Dreamweaverのテンプレートでタグに付加するクラスやIDをテンプレートプロパティ画面から入力させるようにする場合、[修正]→[テンプレート]→[属性を編集可能にする]から作成します。この時、属性を付加するタグの直後とhead内に以下のようなDWテンプレートタグが記述されます。
<!-- TemplateParam name="name_class" type="text" value="className" -->
<p class="@@(_document['name_class'])@@">
head内に記述されるタグ内のパラメータをざっと説明すると、name属性は編集する際に識別するための名前、type属性は入力する内容のタイプ、value属性は初期値となります。
この@@(〜)@@と言う記述とそれに対応したテンプレートパラメータのタグをhead内に記述すればテンプレートプロパティからURLを入力したりテキストを入力したりすることが可能になります。
例えばあるimgタグ内のsrc属性、alt属性、title属性をテンプレートプロパティから入力出来るようにするには次のように記述します。
<!-- TemplateParam name="name_URL" type="URL" value="/img/defalt.gif" -->
<!-- TemplateParam name="name_alt-title" type="text" value="altとtitleの名前" -->
<img src="@@(name_URL)@@" alt="@@(name_alt-title)@@" title="@@(name_alt-title)@@" />
編集可能領域でも良いじゃない？って思うかもしれませんが、例えばこのイメージがh1で挟まれている場合、altとtitleで設定している値がtitleタグやぱんくずリストとかに使い回せる可能性が出てくるのでそれぞれの値に@@(name_alt-title)@@を記述してあげればテンプレートプロパティから一括で入力出来るようになる訳です。使い方次第では結構便利ですよね？
この所Flashをいじる時間がぐっと増えました。何度も挫折をしたFlash Action Scriptですが、実務で使う必要が出て来たので一生懸命勉強しています。やはり無理矢理でも実務でやらないとFlashは覚えれませんね。
実務ではFuse Kitを使ったりしてるのでAction Script2.0がメインなのですが、やっぱりAction Script3.0を覚えたいので家ではコツコツと勉強してます。
勉強がてらFlashのブログでも立ち上げるかなと考え中...
Roll OverのJava Scriptライブラリが普及してる今、画像置換(Image Replacement)を使用するケースは減っているのでしょうか？JSによるRoll Overはお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合などがありますよね。
JSによるRoll Overを利用する場合にそれを実現する場合、yuga.js0.6.0を使用するかグローバルナビの項目の数だけカレント状態になったコードを用意することになるかと思います。でもやはりグローバルナビなんかはDreamweaverユーザーならライブラリとかで1つのソースコードで管理したくなりませんか？
なのでやっぱり画像置換を...と思ってしまう訳です。でもtext-indent: -9999px;とかなんかやだなってな場合、もう一つheight: 0;で画像置換する方法があります。
例えば1つのナビゲーションボタンが横130px、高さ30pxの場合は次のようなコードになります。
#glovalNav li#home a {
padding-top: 30px
width: 130px;
height: 0;
overflow: hidden;
display: block;
background: url(hoge.gif) no-repeat 0 0;
}
#glovalNav li#home a:hover { background: url(hoge.gif) no-repeat -30px 0; }
#glovalNav li#home a.current { background: url(hoge.gif) no-repeat -60px 0; }
高さを0pxにして画像の高さ分をpadding-topで指定してあげます。Appleのサイトなんかはこの方法の画像置換を使ってますね。
何となくtext-indent: -9999pxよりは気分がすっきりするのは自分だけでしょうか...
2009年7月25日 修正版をエントリーしました。
画像置換 height: 0;バージョン 修正版
Twitter経由で知りましたがショック！！すかさずIT Media Mobileで見てみると...ホントダ...
CNET Japanにはドコモ側のコメントで「今回の発表は残念」のような記事が書いてあったのけど、iPod情報局では6月9日までまだ分からないよ〜見たいな記事がかかれていました。
ちょっとだけ6月9日に期待をして待ちますか...
