Home > Archives > 2009-05

2009-05

更新できるスクリーンセーバーを作ろう(1):最近の動向と消費者とのかかわりや基礎知識

昨年の末から「クライアントが更新可能なスクリーンセーバーを作る」というお題で5,6個作りました。そこで得た作り方やつまづきポイントなどをまとめてみます。ちょっと長くなるので数回に分けて連載してみます。

今回は基礎知識とスクリーンセーバー作成ツールの比較です。「作る前」の段階ですね。

スクリーンセーバーを配布する戦略と消費者意識

スクリーンセーバーはCRTモニタの焼きつき防止のためにあったそうです。しかし、最近の主流である液晶モニタでは焼きつきが起きにくいそうです。そんな進化の流れに逆行するように、スクリーンセーバーは流行しつつあります。

一般の方もPCの操作にもだいぶ慣れたのでしょう。壁紙を変えるように、あるいは昨日とは違うシャツを着るような感覚でスクリーンセーバーも簡単に変更できるような時代になりました。

また、我々の作るコンテンツは、ブラウザ上(Webサイトであり、ブログパーツである)から切り離され、スクリーンセーバーへと変化したときに、消費者の意識に変化を与えられると考えられます。ブラウザではユーザが主体となって操作をし何らかの体験を獲得しますが、スクリーンセーバーはまったく逆です。勝手に立ち上がり、映像や画像、つまりユーザの好きなものを流してくれるのです。

自分からアプローチしなければ振り向いてくれなかった人が、進んでこちらにアプローチしてくれる、といったことかもしれません。

あるいは、かっこいいサイトをクリップして自分のそばにおいておきたい、という所有欲求であるかもしれません。youtubeやDailyMotionから動画や音楽をぶっこ抜いて、iPodにぶち込むことと似ているとは思いませんか?

一見するとWebサイト化しているように見えるスクリーンセーバーではありますが、Webサイトとは別の道から消費者を刺激しています。

更新することで飽きさせないスクリーンセーバーに

天下のUNIQLOCKや、オサレなHONDA INTERNAVIも、更新されるコンテンツが楽しみの一つとなっています。

UNIQLOCK
http://www.uniqlo.com/show/
HONDA INTERNAVI REALIZATION
http://www.honda.co.jp/internavi/realization/#/downloads
Play MUJI
http://www.muji.com/playmuji/

スクリーンセーバーの変更を簡単にできるようになった今、簡単に変更させずに「チャンネルはそのままで」とさせるスクリーンセーバーが求められています。せっかく好意を持ってインストールまでしてもらった優良顧客の心を、いかに引き止め、惹き付け続けるのか。ちょっとした更新性を付加することで、そういったブランドイメージを構築するに十分な媒体になりえます。

でもね、僕は頭がパッパラパーだからこれより難しいお話は頭の上に放り投げて、次の話題へ移ろうと思うんだ!アヘアヘアヘ!!

スクリーンセーバーの基礎知識

さて、一通りアヘアヘしたので、簡単にスクリーンセーバーで気をつけることをリストしましょう。

  • いったん配布してしまうと、自動アップデートが難しいのでミスすると大変な目にあうかも
  • だいたいのスクリーンセーバ作成ソフトがwinとmac用に分かれていて、別々に購入する必要がある
  • スクリーンセーバー作成ツールはどれも一長一短ある

そんなたいしたことはありませんね。さて、次へいきましょう。

更新可能なスクリーンセーバーにするための3つの手段

更新可能にするには以下の3つの手段があります。しかし、ツールによってはできないことや苦手なこともあります。ひとまずこの3つの手段を押さえておきましょう。

1.サーバに設定xmlを置き、更新する

サーバにあるxmlを読みに行かせ、xmlで画像を変更したり、レイアウトを変更したり、などといったことをします。

2.スクリーンセーバーの本体となるswf自体をサーバに置いて更新する

サーバに本体のswfを置きます。読み込みに時間がかかるときもありますが、不具合があってもすぐに差し替えられる安全性があります。

3.ローカルファイルを置き換えて更新する

作成ツールによってはローカルファイルを書き換えてくれるものもあります。

ローカルファイルを置き換え、中身をごっそり入れ替えることが一番いいのですが、なかなか簡単ではありません。


さてさて、その辺も踏まえて次回は作成ツールの比較をしましょう。

See you next AHEAHE!!

スクリーンセーバーのことシリーズ

SWFObjectのDynamic Publishingを使うとIEとかでStage.stageWidthとheightが一瞬ゼロになるという都市伝説は実在した!

IEとかでstage基準の中央寄せができなくなることがある

特定の状況で一定時間、swfの「stageのwidthとheightがゼロ」になり、stageの中心にモノを置いたはずなのに、変な位置にきてしまうことがあります。今回はその問題を肩パッド探検隊が追います。

基本的な対処法は以下のblogにおまかせ!

崖っぷちWEBデザイナーブログ | stage幅取得のタイミングをテストしてみた

二番煎じですが、ちょこっと書いていきます。対処するクラスが見たい方はページ内リンクで!

SWFObject1.5、SWFObject2.1のDynamic PublishingでWinIEがダメで、MacのFirefoxも怪しいらしい。あとMacのFla:verで作ったスクリーンセーバーもダメ

SWFObjectのDynamic Publishingの場合

SWFObjectで空divを起点に動的にObjectタグを埋め込むやつをすると

  • IE全般
  • MacのFireFox

で、一瞬だけstage.stageWidthとstage.stageHeightが0になります。

Dynamic Publishingってのは以下のjsコードで空divに埋め込むやつです

//SWFObject1.5
var so = new SWFObject("hoge.swf", "topFlash", "100%", "100%", "8", "#FFFFFF");
so.write("flashcontent");

//SWFObject2.xならDynamic Publishingと呼ばれるタイプ
swfobject.embedSWF("hoge.swf", "flashcontent", "100%", "100%", "9.0.45", "expressInstall.swf", flashvars, params, attributes);
			

widthとheightがゼロになるサンプル

サンプルでテストしてみてください。
サンプルのasはこちら

  • wmodeはtransparent
  • 最初にstageの中心に文字を書こうとしますが、ダメブラウザだと文字が(0,0)にきます
  • swfの中心に「うんこ」と書かれたらOKブラウザ!
  • 崩れてたらStageの初期サイズが0のダメブラウザ。IEかMacのFirefoxです
  • traceされているテキストは以下です
    • 一発目にStageのwidthとheightをチェック
    • ENTER_FRAMEイベントと何回ENTER_FRAMEが回ったか
    • ENTER_FRAMEでStageのwidthとheightをチェック
    • stageのResizeイベント
    • stageWidthがゼロだったらADDED_TO_STAGEイベントを取得
    • それぞれのgetTimer

サンプルの結果

win
IE6~8 Firefox3 Opera9.6 Safari3 Safari4 chrome
×
キャプチャ
win_capture
mac os10.5
Firefox3 Opera9.6 Safari3 Safari4
(崖っぷちさんとこではMacのFirefoxでもアウトでしたが私の環境ではOKでした)

ENTER_FRAMEの方がRESIZEイベントよりも速くStageのwidthが変わったことを知る

このサンプルを作っていてわかったのですが、ENTER_FRAMEでwidthとheightを監視して、ゼロじゃなくなったあと(ENTER_FRAMEのイベントハンドリングが終わったあと)にRESIZEイベントが飛んできます。なので、無意味なタイムラグが生じます。

SWFObjectでの原因

SWFObjectの原因は以前のエントリで妄想を膨らませましたが、これは間違っていると思います。詳細ご存知のかた、おしえてください!

fla:verで作ったスクリーンセーバーをMacで再生するとき

fla:ver(http://flaver.jp/)というスクリーンセーバー作成ソフトで作ったスクリーンセーバーでも起こります。
ref) Mac OS X 10.5で MovieClip が表示されないことがあります

対処するクラスを作りました

大変つまらないクラスですがどうかご査収くださいませ
stagesize問題を対処したサンプルの実行結果

対処法について

  • Event.RESIZEよりEvent.ENTER_FRAMEの方がstageの幅高の取得が早いので、ENTER_FRAME監視がベター
  • dispatchEventしてるのは入口と出口を分けないため。
    (newする前にif(stage.stageWidth * stage.stageHeight != 0)を挟めばOKブラウザをスルーできますが、OKブラウザとNGブラウザで出口がバラバラになるとややこしいのでこうしました。)

クラスとサンプル

サンプルとソースzip

StageSizeChecker.as
package com.katapad.utils 
{
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.utils.getTimer;
	
	/**
	 * WinIEやMacFFでSWFObjectのDynamic Publishingをしたときにおこる
	 * Stage.stageWidthとstageHeightが0になる問題を
	 * EnterFrameで監視してチェックするクラス<br />
	 * Event.RESIZEが飛んでくるタイミングがEvent.ENTER_FRAMEより遅いので、
	 * EVENT.COMPLETEのついでにstageからEVENT.RESIZEも飛ばします(オプション)。
	 * 
	 * @author katapad.com
	 * @version 0.1
	 * @since 2009/03/17 3:40
	 * @usage
	 * <p>MainクラスやPreloaderクラスの最初に</p>
	 * <pre>
	 * var StageSizeChecker:StageSizeChecker = new StageSizeChecker(stage);
	 * StageSizeChecker.addEventListener(Event.COMPLETE, delayInit);
	 * StageSizeChecker.start();
	 * </pre>
	 * <p>を書いて、あとはEvent.COMPLETEの受取先で</p>
	 * <pre>event.target.removeEventListener(Event.COMPLETE, delayInit);</pre>
	 * <p>すればOK</p>

	 */
	public class StageSizeChecker extends EventDispatcher 
	{
		/**
		 * stage.stageWidthとstage.stageHeightが0以外になったら配信します。
		 * @eventType flash.events.Event.COMPLETE
		 */
		[Event(name = "complete", type = "flash.events.Event")]
		
		//----------------------------------
		//  static var/const
		//----------------------------------
		
		//----------------------------------
		//  instance var 
		//----------------------------------
		private var _stage:Stage;
		private var _isResizeEvent:Boolean;
		
		/**
		 * ステージサイズを見張り、ゼロ以外ならEvent.COMPLETEを配信します。
		 * @param	stage
		 * @param	isResizeEvent	_stage.dispatchEvent(new Event(Event.RESIZE))も同時に発動させるかどうか
		 */
		public function StageSizeChecker(stage:Stage, isResizeEvent:Boolean = true) 
		{
			init(stage, isResizeEvent);
		}
		
		private function init(stage:Stage, isResizeEvent):void 
		{
			_stage = stage;
			_isResizeEvent = isResizeEvent;
		}
		
		//--------------------------------------------------------------------------
		//
		//  PUBLIC
		//
		//--------------------------------------------------------------------------
		public function start():void
		{
			if (isValidSize())
			{
				complete();
				return;
			}
			_stage.addEventListener(Event.ENTER_FRAME, check);
		}
		//--------------------------------------------------------------------------
		//
		//  PROTECTED
		//
		//--------------------------------------------------------------------------
		
		//--------------------------------------------------------------------------
		//
		//  EVENT HANDLER
		//
		//--------------------------------------------------------------------------
		private function check(event:Event):void 
		{
			if (isValidSize())
				complete();
		}
		
		//--------------------------------------------------------------------------
		//
		//  PRIVATE
		//
		//--------------------------------------------------------------------------
		private function isValidSize():Boolean
		{
			//trace( getTimer(), "_stage.stageWidth : " + _stage.stageWidth );
			return _stage.stageWidth * _stage.stageHeight != 0;
		}
		
		private function complete():void
		{
			_stage.removeEventListener(Event.ENTER_FRAME, check);
			if (_isResizeEvent)
				_stage.dispatchEvent(new Event(Event.RESIZE));
			dispatchEvent(new Event(Event.COMPLETE));
			_stage = null;
		}
		
		//--------------------------------------------------------------------------
		//
		//  GETTER/SETTER
		//
		//--------------------------------------------------------------------------
	
	}
	
}

Home > Archives > 2009-05


Search
Feeds
Meta

Return to page top