Category : 技術ネタ

7 月 25 2009

超絶クオリティの Flash 3D レーシングゲーム

Posted by tanjo at 2:27 AM

golfgti_01

Volkswagen のプロモーションサイト GOLF GTI-TRACKS が凄いことになっています。
Flash もついにここまで来たか!という感じです。

ムービー(シナリオ)を挟みながら、1対1のレーシングゲームを勝ち抜いていく、というコンテンツ。

golfgti_02

驚いたのは3Dの作り込み具合。まるで首都高バトルですね。ムービーにも結構気合いが入っているようです。以前、エコだ!動物園にも驚かされましたが、コレはコレでまた凄い。広大な3Dフィールドをドライブできるのはやっぱり楽しいですね。

ただ案の定、容量も相当あるみたいで、ロードにはかなり時間がかかりました。動作負荷も結構なもんなのでご注意を。

Alternativa3D

3Dライブラリには、Alternativa3D が使われているとのこと。このライブラリ、Papervision3DAway3D ほどメジャーではありませんが、Astro にもいち早く対応していたし、ポテンシャルだったら他を凌いでいるかもしれません。

» Alternativa3D の実力がうかがえる FPS っぽいデモ

はぁ~、私が PV3D RACING の開発を中途半端なところでサボっている間にこんなコンテンツが出てきてしまうとは。先越された。。。いい加減ロンチに向けて手を打たねばっ!

6 月 03 2009

Windows 7 RC を使ってみました 2 - 新タスクバーってどうなの!?

Posted by tanjo at 2:22 AM

Windows 7 で大きく変わった部分といえば、タスクバーのインターフェイス。まぁ新機能については各所でもう紹介されてはいますが、私なりに使用感を書いてみようと思います。

win7_taskbar01

実はタスクバーの仕様って Windows 95 からずっと変わってなかったんですね。
そんなベーシックなUIがどう変更されたのか、簡単にピックアップするとこんな感じでしょうか。

  1. タブ型から、大きなアイコン表示へと変更
  2. 各アプリケーションごとにまとめられる
  3. 「クイック起動」の廃止(統合された)
  4. 右クリックメニューの強化
  5. ドラッグでアイコンを並べ替え可能
  6. Aero との連携が強力に

このほかにも、バー右端に「デスクトップの表示」ボタンが追加されたとか、通知領域の非表示アイコンがスライド式ではなくポップアップ式になった等々、けっこう細かくチューニングされているみたいです。
また、今までと(ほぼ)同じようなスタイルに設定することも、実は可能です。

ルック&フィール

ひとことで言ってしまえば、Mac OS X の Dock に近い、です。
「ウィンドウ一覧(…って呼べばいいのか?)」と「クイック起動」が統合されて、さらにウィンドウ一覧もアプリケーションごとにまとめられる仕様になりました。このことで、「開いてるウィンドウの一覧がどんどん追加されていくタブバー」というより「どのアプリケーションが実行されているか表示する領域」という意味合いが強くなったのかな、という印象を受けました。

dock

バーに登録してあるアイコンをクリックしてアプリケーションを開くと、今までのようにウィンドウ一覧として追加されるのではなく、アイコンのまわりに枠がつきます。1アプリで複数のウィンドウを開いていても、この枠が多重になるだけです。
また、アクティブなウィンドウや応答待ちのアプリケーションは枠の色で判別できるようになっています。

win7_taskbar02

そんなわけで、あらかじめたくさんのアプリを登録しておいても、タスクバーの幅が圧迫されて困るなんてことにはならなそうです。…というよりよく使うソフトははじめからタスクバーに入れてランチャとして使ってくれ、と言いいたげですね。ランチャ+アプリケーション&ウィンドウの管理をするバー、内容自体は Dock とだいたい同じというわけです。

ただ、Macと違ってアイコンが洗練されていなかったり、似てるのが多くてまぎらわしかったりして、慣れるまでは戸惑うかもしれません。枠を使ったウィンドウの状態表示は、結構分かりやすくて良いと思うんですけどね。

追加機能

まずは右クリックメニューの強化。
たとえば、エクスプローラや Internet Explorer なら履歴からページを開いたり、Windows Media Player なら曲を再生したり。こういった操作が、わざわざウィンドウを開かずにできるようです。ただ、当然アプリケーション側で対応してないと意味ないので、現行のサードパーティ・ソフトではあまり使えません。
あとそれと、今までデフォルトであった「最大化」とか「最小化」項目がなくなってるけど、正式リリースまでには復活するのでしょうか…。

win7_taskbar03

ドラッグでの表示順並べ替え。
これは個人的にはかなり嬉しいですね。というか今までできなかったのかが疑問なくらい。ついに実装、しかもまるで Google Chrome のタブを並べ替えるかのごとく(笑)、スーッと気持ちよく動かせます。

さらに、Aero との連携も強化されているらしいです。(残念ながら私の仮想環境では Aero が動作しないため確認はできていません。)
Vista 同様、タスクバーの項目上をロールオーバーすると、ウィンドウのサムネイルが瞬時に表示されるみたいです。さらに、複数のウィンドウを抱えているアプリの場合、今度はサムネイル上をロールオーバーすることで、該当ウィンドウだけデスクトップに表示(それ以外は半透明に)なるそうです。この状態でクリックすると、最前面にウィンドウが表示されます。これは Vista の Flip 3D なんかより全然実用的かも。

win7_taskbar04

でも今までのがいい、というときは

さてさていろいろ書いたけど、アイコン表示はやっぱり分かりにくいし、ランチャなら自前で用意するし、アプリケーションごとに勝手にまとめられちゃうし、タスクバー領域は分厚くなるし、そもそもデザインが、…とデメリットになりそうなところも少なくありません。
そんなわけで、できるだけ現行のインターフェイスに近づけようと設定をいじってみたところ、、、
予想外の収穫がありました!

まず設定の仕方としては、タスクバーを右クリック > 「プロパティ」から。

  • タスクバーのデザインで「小さいアイコンの使用」にチェック
  • タスクバーのボタンは「タスクバーがいっぱいの場合に結合」または「結合しない」

win7_taskbar_setting

こうすれば見た目は現行そっくりになります。統合されたクイック起動もそれらしく。もちろんタスクバーを多段表示にすることもできます。
(ただし、クイック起動アイコンをクリックしても右側にウィンドウが追加されるのではなく、アイコン自体がウィンドウを表すタブに変形する、という仕様は変更できません。)

一安心してこの状態で使ってみると、実は結構使いやすくなっていることに気づきました。具体的には…

  1. エクスプローラや Office などでウィンドウがたくさんできても、アプリケーションごとに連続して並んでくれる
  2. ドラッグで順番を並べ替えられるのはやっぱり便利
  3. 複数ウィンドウがあるソフトの場合は、ドラッグするとソフトごとにセットで動いてくれて整理しやすい(1.2.の組み合わせ)

win7_taskbar05

ちょっとしたことだけど、かゆいところに手が届くような感じです。ウィンドウ数が増えてくるとどれがどれだか分かりにくくなって、Alt + Tab に頼るしかない、…という煩わしさは軽減されそうです。

スタートメニュー

ついでにスタートメニューについて、気になる部分があったので書いておきます。

1つは終了ボタンのデフォルトが「スリープ」から「シャットダウン」に戻されていたこと。
Vista のときは新機能のスリープをやたら推してたような気がしますがねぇ(笑)。あまり普及しなかったからか、それともやっぱりこまめに起動し直す必要があるからか。まぁどちらにしても乗り換えユーザにとっては分かりやすくなってくれたと思います。
あ、もちろん、スリープ機能も実装はされてるし、設定でスリープを標準にすることもできますよ!

win7_startmenu

そしてもう1つ、「クラシック・スタートメニュー」が廃止されてること…。
さすがに正式版には搭載されるだろう、と予想している人もいるみたいですが。確かにクラシックメニューが選択できないとなると困るユーザは多いと思います。う~ん、どうなるんでしょうね。

まとめ

たぶん大がかりな新機能やデザインなんかより、タスクバーのUIの方がユーザにとっては全然影響ありますよね。そこを思い切って変更したと聞いて、「大丈夫か?」と正直思っていましたが、思いのほか悪くなかったというのが使ってみた感想です。
でも、とは言っても、私はやっぱり慣れてるうえ使いやすくなった旧来スタイルで使用することになりそうです。(^^;)

5 月 25 2009

Windows 7 RC を使ってみました 1 - 仮想マシンに楽々セットアップ

Posted by tanjo at 1:18 AM

win7_logo

今月はじめに Windows 7 のRC版が一般公開されたみたいですね。さっそく使ってみました。
ハードに余りがないので、気楽に使える仮想マシンにインストールします。今回使用したのは VMware Workstation 6.5。

追加のハードやメディアは必要なし&無料で試せますよ。

VMware のラインナップ

ひとえに VMware といってもいくつかプロダクトがあるんですね。関係ありそうなデスクトップ製品はこの3つ。

  • VMware Workstation
    有償の統合型ソフト。仮想マシン作成から実行や管理まで、高機能です。単体起動の VMware Player も付属。
  • VMware Server
    無償。仮想マシン作成と実行ができるらしい。ただ設定のインターフェイスがウェブベースだったり、英語版しかなかったりと、ちょっと使いにくそう。
  • VMware Player
    無償。ただし実行環境のみ。仮想マシンの作成には、ほかのソフトを用意する必要があります。

素人にはどれも条件良くないじゃん!…と思いきや、VMware Workstation は実行環境以外は、ライセンス購入しなくても使えるようです。こりゃありがたい!(現在の最新版、WS 6.5.2の場合。)
そんなわけで、コアなことをしないのであれば、とりあえず Workstation だけインストールして、仮想マシンのセットアップは Workstation 本体、実行は付属の Player というふうにすれば十分使えます。

ちなみにMS派の人は、Virtual PC 2007 が無償提供されているのでそちらをどうぞ。
» Microsoft Virtual PC

VMware の方が高速に動きやすい&Linuxの対応状況が良い、とかいう情報を耳にしたので私は VMware を使うことにしました。

仮想マシンのセットアップ

まずは VMware Workstation の入手。公式からだとダウンロード前にいろいろと情報を登録するページが出てきましたが、窓の杜だとすぐに落とせます。ライセンスは購入しないのでこれで問題なし。
» 窓の杜 - VMware

そして Windows 7 RC のダウンロード。Microsoft のページから、RC版ダウンロードのリンクをたどって入手できます。MSN(Windows Live)のアカウントが必要です。
» Microsoft Windows 7

RC版は「少なくとも6月中は提供、ダウンロード数に制限なし」とのこと。使用期限は2010年5月31日までだそうです。現在、日本語版を含む5カ国、32bit/64bit版それぞれが提供されています。

さてさて、セットアップ。VMware Workstation の新規仮想マシンウィザードから、ダウンロードした Windows 7 RC の ISO イメージファイルを選択して仮想マシンを作成。Windows 7 ではなく Vista と認識されましたが、問題はないようです。

vmsetup

一度 Workstation を終了させてから、VMware Player で仮想マシンを実行。OS の初期設定を行ったあと、見事 Windows 7 が起動しました!パチパチ!

win7_desktop1

Aero は動作せず

機能追加(&軽量化?)された Aero は試してみたかったところ。実は VMware WS を選んだ理由には、「最新版は Direct X 9.0c に正式対応してるらしいから Aero 動くんじゃない?」という期待がありました。
が、しかし。そうは言ってもグラフィックをエミュレーションしてるだけなので、スペックが足りなすぎて Aero はオンになりませんでした。残念…!

aero_score

ちなみに Aero を動かすための他の案として、「仮想マシンにリモートデスクトップからアクセスする」、「レジストリをいじって、スペック足りなくても無理矢理オンにする」といった方法が紹介されていました。
しかし前者は Vista → 7 の接続だとプロトコルのバージョン相違(?)だとかで Aero は動作せず。後者は成功したという報告はほとんどなく、私の環境でもダメでした。

う~ん。誰かできた人がいたら情報ください~(苦笑)

さてさて、それはともかく、次回は Windows 7 を使ってみた感想でも書こうかと思います。
なお今回セットアップした環境は、なかなか安定していますよ。今のところ。

2 月 18 2009

IE6でposition:absoluteの要素が表示されないバグ

Posted by tanjo at 4:32 PM

前回のCSSのz-indexを使ってFlashを背景表示する例にて、Internet Explorer 6 だと絶対配置(position:absolute)のFlash領域が消えてしまう、という問題があったんですが、無事解決できました。

IE6で position:absolute の要素が消えてしまう条件というのは結構ややこしくて、原因を見抜くのに一苦労してしまうことがありそうです。以下のサイトで詳しく検証されていました。

» jmblog.jp - IEで絶対配置(position:absolute)のボックスが消えるバグの検証

さて、私の場合はというと、絶対配置する要素の前で float を使っていたのが原因のようでした。(たぶん、一番陥りやすいパターン?)
事前に clear しておいてもなぜか効果がない(=表示されないまま)の場合があるっぽく、一瞬つまずきましたが、絶対配置の要素自体に clear:both を使うことで解決!

#absolute {
	position: absolute;
	clear: both;
	...
}

教訓。「position:absolute は clear:both とセットで使った方が吉」。

2 月 13 2009

CSSのz-indexを使ってFlashを背景表示する例

Posted by tanjo at 3:36 PM

CSSのz-indexを使ってFlashを背景表示する…ときの注意点とか、やってみて気づいたこと。

zindex

使ってみた例というのは、こないだ作ったサイトです。
» 多摩美術大学 グラフィックデザイン学科 卒業制作展 2009 [WOW]

やりかた

この方法、たぶん「HTMLのプルダウンメニューがFlash領域にかぶってしまうとき」なんかには割とよく使われるのでしょうか?私の例では、「HTMLページの背景余白にでっかいFlashを表示する」とかいう妙な使い方だけど。

HTML↓↓

<div id="content">
  <!-- ここにHTMLのページコンテンツ -->
  ほげほげ
</div>
<div id="flash">
  <!-- ここにFlashを(不)透明表示設定で挿入する。 -->
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
    <param name="movie" value="main.swf" />
    <param name="wmode" value="transparent" />
    <embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" />
  </object>
</div>

CSS↓↓

#content {
	position: relative;    /*通常どおりの位置に配置*/
	z-index: 1;
}
#flash {
	position: absolute;    /*#contentの後ろ側にW100%, H500pxで配置*/
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 500px;
}

とまあ、ソースはこんな感じです。z-index はブロックレベル要素の描画レイヤーの上下を設定できるプロパティです。(数字が大きいほど手前になる。)
注意点としては、

  • レイヤー関係を反映させるには、通常どおりの位置に表示させたい要素も、position: relative; と指定する。無指定(position: static)のままではダメ。
  • Flashを挿入するとき、<param>タグや表示用のJavaScriptで、wmode を transparent(または opaque)と設定すること。

この2つを満たさないと、奥にあるはずのFlashが手前に表示されてしまったりするようです。

マウスフォーカス

さて、ここまではトラブルなくできたんですが、今回の私の例だと、「実は背景Flash領域もクリッカブル。マウスのフォーカスってどうなるんだ?」という疑問がありました。
結論から書くと、「細かいところは環境依存」ぽいです。

HTML部分の方が手前にあるので、テキストの選択やリンクは問題なく動作しました。でも、行間でのクリックとか、右クリックのコンテキストメニュー(HTMLメニューかFlashメニューか)は、ブラウザと、それとOSによっても異なるみたいです。
一応上側に来るブロックレベル要素に背景色や背景画像をしてやると、Flashのクリック判定はなくなるようですが、Macだと右クリックはFlashメニューが表示されたりと、けっこういろいろ。

ま、マウス判定はちょっと微妙なところがありましたが、表示上は綺麗にレイヤー化してくれたので、HTMLテキストや透過GIFの後ろ側に動くFlashが表示されるというのはなんか新鮮で面白かったです。

誤動作?

確認済みの誤動作について。やっぱり妙な表現はあんまりするモンじゃありませんかね(^^;

  • IE6 だとFlash用のブロックレベル要素が表示されない。でもこれはz-index関連のトラブルではなくて、position: absolute; に対する IE6 独自のバグっぽい。詳しいことは調査中。
    » 解決しました。
  • Mac OSX 10.4 Firefox 3.0 にて、HTMLのリンクにカーソルを乗せると、一瞬だけFlashが上に描画されて画面がちらつくという報告が。10.4 Safari や 10.5 Firefox 3 では確認できず。??
  • とっても古いSafari(1.2とか)はz-index自体を解釈しないみたい。

12 月 29 2008

Papervision3D 各バージョンのオンラインドキュメント

Posted by tanjo at 2:34 AM

拡張と改変が著しいPV3D。頼りのドキュメントが自分の使ってるバージョンと違ったりすると、思わぬ混乱を招いたりします(…しました)。
そんなわけで、各バージョンのオンラインドキュメントURLをまとめておきます。なお最近のリビジョンだと、ダウンロードしたライブラリの docs ディレクトリ以下にドキュメントが同梱されているようです。

12 月 26 2008

Flashのパブリッシュ先を相対パスで指定する

Posted by tanjo at 5:43 PM

OS、バージョンによっても違うかもしれませんが一応メモメモ。ちなみに私の環境は Windows Vista / Flash CS3 です。

publishconf

Flashのパブリッシュ設定でフォルダアイコンをクリックすると、書き出し先を任意のフォルダ(絶対パス)に指定できますよね。
実はその左のパス設定欄は直接入力が可能で、しかも相対パスでもOKみたいです。
書き出し先を相対パスにしてみたところ、パブリッシュもプロジェクト保存も問題なくできました。(「../」で上層フォルダにもアクセスできます。)

フォルダに階層をもたせながら、Flashの作業ファイルをやりとりするときにはちょっと便利、かも。そういう状況がよくあるかは、知らない(^^;

11 月 25 2008

YouTubeにループ再生ボタンを追加するスクリプト

Posted by tanjo at 6:58 AM

Loopy for YouTube」というGreaseMonkeyスクリプトを使うと、YouTubeにループ再生ボタンを追加することができます。
ここで紹介されていて知りました。
» Youtubeのビデオを簡単にループ再生するためのGreasemonkeyスクリプト-Loopy for YouTube - 適宜覚書はてな異本

インストールするとYouTubeにアクセスしたとき、こんな感じのループ再生/解除ボタンが表示されるようになります。

loopy

Loopy for YouTubeのインストール

動作させるには、あらかじめFirefoxアドオン Greasemonkey が必要です。
» Mozilla Firefox のアドオンサイト
» 開発・配布元サイト : Greasespot

Loopy for YouTube は以下から入手できます。
インストールするには右上の [Install] ボタンを押すだけ!
» Loopy for YouTube for Greasemonkey - userscripts.org

10 月 20 2008

FlashDevelopでAstro開発できるようにセットアップ

Posted by tanjo at 6:43 AM

先日 Flash Player 10 が正式リリースされたこともあり、そろそろバージョン10(Astro)向けの開発ができるようにと Flex SDK と FlashDevelop をセットアップしておきました。

Flex SDK の入手

私が今まで使ってたのはAstro未対応のバージョンでした。まずは Flex SDK を更新します。
Adobe Open Source のページからいろいろなリビジョンの Flex 3 SDK が入手できます。
» Download Flex 3 - Flex SDK - Confluence

最新マイルストーン・リリースの 3.1.0 build 2710 を使うことにしました。Adobe 製品ページから入手できる Flex 3 SDK も現在はこのリビジョンみたいです。

が!なぜだか build 2710 の Adobe Flex SDK リリースには Astro 向けコンパイルに必要な playerglobal.swc が含まれていません!Open Source Flex SDK の方には含まれていたので、オープンソース版の frameworks/libs/player/10 フォルダをそのままコピーして追加しました。

frameworks/libs/player/10/playerglobal.swc がちゃんと含まれているリビジョンでは、もちろんこの作業は不要です。ちなみに公式のFAQによると、[Adobe版] = [オープンソース版] + [非オープンソースのコンポーネント] という構成らしいので、中身に違いはないはずなのに…。

Flex SDK の設定

ほとんど設定する必要ないみたいです(^^
以前は Flash Player 10 に対応するために frameworks/flex-config.xml を編集する必要があったようですが(» 解説ページ)、3.1.0.2710 ではセットアップ済みでした。
そういうわけで、追加クラス(Papervision3Dとか)を再設定してやるだけで、他はやることなし!

スタンドアロン版 Flash Player 10 の入手

Flex 3 SDK にもスタンドアロン・プレーヤーは含まれています。(runtimes/player 以下のフォルダ)
だけどせっかく Flash Player 10 の正式版がリリースされたことだし、そっちをインストールしておきます。
» Adobe Flash Player - Downloads

上記ページの Get older versions 項のリンク先から Flash Player 10 (debugger versions) (26 MB) をダウンロードしました。Windows では flashplayer10r12_36_win_sa_debug.exe というのがスタンドアロン・プレーヤーの実行ファイルです。

FlashDevelop の設定

FlashDevelop最新版は公式サイトから入手できます。以前インストールしたときのメモはこちら
» FlashDevelop.org

グローバル設定は変更する必要ありません。Flash Player 10 をターゲットにするプロジェクトの設定だけでOK。ちなみに FlashDevelop のバージョンは 3.0.0 Beta9 を使っています。
こんなふうに設定しました。

  • Project > Propaties の Output タブにて、Platform を「Flash Player 10」に設定。
  • 同じく Propaties の Compiler Options タブにて、Advanced > External Libraries の[...]をクリックして Astro 用 SWC ライブラリのパスを入力。

2つ目は、Astro で追加された新プロパティなどの入力補完をするための設定です。これで rotationX とかを補完してくれるようになります。設定しなくても、コンパイルはできるみたいですが。
ライブラリパスは、私の環境では C:\flex_sdk_3\frameworks\libs\player\10\playerglobal.swc でした。さっきオープンソース版から追加したファイルのことですね。

なお、入力補完用のクラス定義ファイルを作ってくれたかたがいるようです。お好みでこちらもどうぞ。
» FlashDevelop3 beta9 で Shader クラスのコードヒントを表示する - blog.seyself.com

10 月 19 2008

Flash Player 10 正式リリース!

Posted by tanjo at 5:33 PM

10月15日に、Flash Player 10(Astro)が正式にリリースされました。
現在、最新版のバージョンは 10.0.12.36 です。

ブラウザ用プラグインの入手はこちら。
» Adobe Flash Playerダウンロードセンター

アップデート、デバッガ版、スタンドアロン版、古いバージョン、…とかはこちら。
» Adobe Flash Player - Downloads
*スタンドアロン版は、Get older versions のリンク先から入手できました。

Next »