ホーム > タグ > screensaver

screensaver

更新できるスクリーンセーバーを作ろう(3):fla:verでの制作の流れと注意点

前回では作る手前の話をして、ずいぶんウコンウコンしましたね。またfla:verの開発者さんからもコメントがありました。自動更新に対応してくれるかもしんない!スゲー!応援して待ちましょう。

さて、今回からは技術的なことをお話したいと思います。具体的なコードの手前、設計まわりから見ていきましょう。

fla:verでの制作の流れ

Macで再生するときにいくらかの地雷がありますが、知っていれば回避できるので恐くありません。

1.小さなプレビュー画面かどうか

fla:verでは、小さなプレビュー画面でもスクリーンセーバーの本体(swf)が再生されます。小さなプレビュー画面とは以下のものです。

  • Win「画面のプロパティ→スクリーンセーバー」上の小ないプレビュー画面
  • Mac「システム環境」→「スクリーンセーバ」上の小さなプレビュー画面

そのまま本体のswfを再生すると画面サイズが小さすぎて不都合が生まれることも多いので、ここで分岐をとり、プレビュー画面ならプレビュー用の画面を見せる、といったことをします。

スクリーンセーバーで再生されているとFlashvars"flavermode"にプレビューかどうかのstateが入ります。

trace(stage.loaderInfo.parameters["flavermode"]) //preview プレビュー
                                                 //normal  スクリーンセーバー再生時
AS3での簡易チェックコード
 public static function isPreview(stage:Stage):Boolean
 {
 	var mode:String = stage.loaderInfo.parameters["flavermode"];
 	var result:Boolean;
 	switch (mode)
 	{
 		case "normal" :
 			result = false;
 			break;
 		case "preview" :
 			result = true;
 			break;
 		default :
 			result = false;
 			break;
 	}
 	return result;
 }

補足)previewのときでもstageWidthとheightがゼロじゃないかをチェックする必要があります。Macでは初期値がゼロになります

2.ネットワークチェックとSWFの縦横サイズがゼロじゃないかのチェック

2-1.ネットワークにつながってるかどうかのチェック

  • ネットワークにつながっていれば、サーバから最新の情報をダウンロードする
  • ネットワークにつながっていなければ、ローカルに同梱したファイルを見るようにする

実装方法は外部サーバの適当なファイルに接続を試し、IOErrorが返るかどうかでチェックをします。

という分岐があるので、ここでネットワークのチェックをします。

チェックするファイルにはキャッシュ対策をする

スクリーンセーバーもファイルをキャッシュするので、対策を施します。以下のような簡単なもので大丈夫です。

new URLRequest(url + new Date().getTime());

2-2.stageWidthとstageHeightがゼロじゃなくなるまで待つ(Mac対策)

Macで再生するとstageWidthとstageHeightの初期値がゼロになり、意図しない配置になります。以前のエントリに詳しい実装方法を載せていますので参考にしてください。

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

3.外部設定ファイル読み込み

外部の設定ファイルを読みに行きます。この設定ファイルには

  • 本体となるswfが最新の状態かどうか
  • 読み込む素材はどれどれ

などといったことを記述しておきます。

4.素材読み込み

外部設定ファイルに書いてある素材を読み込んでいきます。

たいていの場合、複数の素材を読み込むことになるので、まとめて読み込めるローダーを使うと便利です。僕はBulkLoaderを使ってガスガス読み込みます。BulkLoaderについてはこないだ書いたのも参考にしてください。

また、すぐに必要のない素材は少しずつ先読みしていくだけのプリローダーを裏で動かし、キャッシュ化しておくと効果的なケースもあります。ドデカいFLVとかは厳しいかもしれませんが、いずれすべて読み込むことになるのなら、ささっと読み込んじゃいましょう。

5.コンテンツビルド

素材のロードが終わり、さまざまな設定を格納したら、ページや配置する画像などの要素をビルド(生成して配置)していきます。

6.コンテンツスタート~ループ

要素の準備ができたら、やっとコンテンツをスタートできます。

スタートさせればあとはループするだけです!

さてさて、大雑把なスクリプトの流れはご理解いただけたでしょうか?ちょっと駆け足過ぎたかもしれないですね。

続いてはちょっとした注意点を見てみましょう。

知っておくと健康にいい注意点4つ

mailto:でメーラー立ち上げようとすると、ブラウザまで立ち上がってしまう

winならIEも開いてしまうので、実質使えません。

「友達に教える」機能を付けるときはWebサイト側にリンクを貼って、

  • 「友達に教える」フォームを用意する、もしくは
  • mailtoのリンクを置く

のがベターです。

インストール時に一緒にインストールされる追加ファイルにフォルダを作れない

fla:verではどの素材も、スクリーンセーバーの本体となるswfと同じ階層に置かれてしまうので、素材の名前付けに注意しましょう。

これには前回のコメント欄で開発者さんが補足してくれました。セキュリティ的に階層がない方がいいそうです。

スクリーンセーバーを再生している途中で「ネットあり」→「ネットなし」になったら落としたほうがいいときもある

途中で設定を「ネットあり」から「ネットなし」に変更すると大変な労力が必要になることがあります。ならば、いっそのことスクリーンセーバーを強制的に落としてしまいましょう

スクリーンセーバーが再生されている=「PCが放置されている状況」が多いので、落としてもしばらくすると「ネットなし」としてスクリーンセーバーが立ち上がります。

ロードする状況化でIO_ERRORなどを見張っておいて、エラーがでたらスクリーンセーバーを落とすコマンドfscommand("quit");を叩くようにします。

あと、落とす前にエラー画面として

「ネットに繋がらなくなったので、落としますね」

と出すのが優しいかと思います。

Macでマウス操作などを許可しているときにブラウザを開いてもスクリーンセーバーが落ちない

マウス操作許可し、親サイトへのリンクやRSSのリンクを張ったりすることがあります。Windowsではリンクを押してブラウザが開くタイミングで、スクリーンセーバーも一緒に落ちてくれます。

このケースではMacでうまくいきません。スクリーンセーバーが落ちずに、裏でブラウザが開きます。ですので、明示的にスクリーンセーバーを落としてやる必要があります。


//リンクを押したら、落とすことも明示する
navigateURL(~~~);
fscommand("quit"); //スクリーンセーバーを落とすコマンド
		

インストーラ用の素材:アイコン素材と背景画像を用意する

http://flaver.jp/からProfessional版をダウンロードし、実際のインストーラがどんなものかを体験してみてください。
シリアルを入力せずに開始すると「試用版」になるので、気軽に試せます。試用版ではスクリーンセーバーを再生したときに「試用中です」と文言がでますが、すべての機能が使えます。

windows用の素材

アイコン素材 icon形式。48、32、16をそれぞれTrueColorと256色を用意します。vista用に特大サイズのアイコンを用意してもいいかもしれません。
IcoFXというソフトを使うと簡単に作れます。IcoFXはMacのicns形式も作れます。
インストーラ画面用の画像 64px * 294px: png, jpg

mac用の素材

アイコン素材 icns形式。img2icnsというソフトが簡単です。
インストーラ画面用の画像 最大567px * 320px: png, jpg

さてさて、こうして骨組みは出来上がりましたね。いっきに説明したので、わけわかんないところもあると思います。

今回もまじめに書いてしまいました。楽しみにしてくれていたみなさん、本当にすみません。ただ、頭にパンティーをかぶって記事を書いていたことだけは覚えておいてください。

次回は実際にサンプルを作ってみましょう。

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

更新できるスクリーンセーバーを作ろう(2):作成ツールを比較したらどれも一長一短あるね!

前回はスクリーンセーバーの基礎知識や周辺などを考察し、ずいぶんアヘアヘしましたね。
今回はスクリーンセーバー作成ツールの比較をしましょう。

スクリーンセーバー作成ツール比較

まずはおおまかな特徴だけを比較してみましょう。GIZMOはまだ使ったことがないので、サイトの情報から推測してたりします。

  スクリーンタイム fla:ver GIZMO
vista対応 非公式
MacLeopard対応 まだ(でもベータ的なものはある)
FlashPlayerのバージョン win:Player8まで
Mac: Player9まで
制限なし たぶん制限なし
as3対応 ×
再生の有効期限 ×
ローカルディレクトリ、
ファイルの操作
× たぶん○
自動更新 × ×
スクリーンセーバー
停止方法が複数ある
日本語入力 たぶん× 不明
外部ファイルを
インストール時に追加できる
不明
外部ファイルの
ディレクトリを保つ
× 不明
マルチモニター再生の選択肢 ×
(すべてのモニターで再生される)
win版とmac版の
合計価格
74,550円 34,800円 320,000円~
(winのみ?、macは不明)

スクリーンタイム(ScreenTime for Flash)


http://www.screentime.jp/

特徴

  • いいところ
    • コンポーネントをfla側に埋め込んで「STFコマンド」を打つといろいろできる
      • ローカルファイルを読み書きできたりするコマンドがいろいろある
    • 有効期限付き
  • 残念なところ
    • AS2.0まで
    • vistaに正式対応してない
    • win版はFlashPlayer8まで
    • mac版はFlashPlayer9まで(AS2)
    • ヘルプがかなりわかりにくい

as2までしか対応していないなど、イケていない面もありますが、最大の特徴としてディレクトリを保ったまま様々な外部ファイルを同梱できるという強みを持っています。

また、スクリーンタイムにはコンポーネントのインストールmxpが配布されています。mxpをインストールすればFlashのヘルプにスクリーンタイムのヘルプが追加されます。

事例

昔はSTFしか選択肢がなかったようで、プリミティブなスクリーンセーバーによく使われています。

zozotownにたくさんあります(ログインの必要あり)
http://gallery.zozo.jp/

見分け方

  • winならインストーラの詳細に「会社名 FIVESTAR~~」と出ます。これは消したり変更はできないようです。
  • スクリーンセーバーのインストーラ画面(win)

    (スクリーンタイムではこの白場に任意の画像を埋め込めます)

fla:ver


http://flaver.jp/

特徴

  • いいところ
    • as3使用可
    • win, mac対応
    • 安い(Win/Mac2つのバージョン合わせて34,800円)
  • 残念なところ
    • 同梱させるファイルにディレクトリ階層を設けられない。
  • それ以外
    • winはActiveXプラグインFlashPlayer、macはsafariのプラグインFlashPlayerで再生する
    • ローカルファイルの読み書きはできないが、スクリーンセーバーとしての基本的な機能は網羅してある

大量のファイルを同梱させるとちょっと大変になりますが、問題がないといえば問題ありません。

それとスクリーンセーバーの再生の機能は強いですが、有効期限やネットワークにつながっているかどうかのチェック機能などもありません。しかし、そういった機能はFlashで代替できるので、ごまかせます。

事例

G’z One CA002 by CASIO
http://gzone.jp/
ぷっちょくんをつくろう!
http://create.pucchokun.jp/
Play MUJI
http://www.muji.com/playmuji/
エディックス(公開終了)
http://www.honda.co.jp/Edix/editSCR/

見分け方

  • スクリーンセーバーのインストーラ画面(win)

    (インストーラ左にある画像はfla:ver側で変更可能です)
  • macならスクリーンセーバーの設定画面のオプション→アンインストールというボタンがあります。

GIZMO


http://gizmo.anthill.jp/

スクリーンセーバー作成代行もしているが、基本的にはフォーマットに則ったswfを渡し、スクリーンセーバー化してもらうサービスとのことです。

Web Designing2009年 06月号のP64にHONDA INTERNAVIの事例とあわせてGIZMOのことも少し書いてありました。

特徴

  • いいところ
    • 自動アップデートあり
    • 超大手で使われた実績
  • 残念なところ
    • 高い

      http://gizmo.anthill.jp/service_screensaver_pack/

      • 初期費用 300,000円(税込315,500円)~
      • 月額費用 20,000円(税込21,000円)~

      (パッケージに、スクリーンセーバーにするFlashコンテンツの制作費用は含まれておりません。)

さすが高いだけあって、自動アップデートがついています。不明な点も多く、詳細は問い合わせなければなりませんが、いろいろカスタムできるようです。

簡単には試せないけれど、失敗が許されない状況や、それを凌駕するコンテンツならこれがベストなのでしょうかね。なにより実績があるのでとても安心できそう。

見分け方

  • winだと裏でGIZMOが立ち上がります
  • スクリーンセーバーのインストーラ画面(win)
  • macならsaverファイルの中を見るとGIZMOのフレームワークが入っています。

まとめ fla:verで十分、より安心感を求めるならGIZMO

案件規模にもよるでしょうが、fla:verである程度カバーできるかと思います。自動更新っぽいことも全部外部にすればなんとかなりますね。それ以上の複雑なことになればGIZMO、といったところでしょうか。

僕はこのfla:verで作るようにしています。次回はfla:verにおける制作のポイントをお話します。

あー、まじめに書いたよー、はぁーまじ疲れるわー、あー、あー、うー、う、ウコンー!!

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

更新できるスクリーンセーバーを作ろう(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!!

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

Home > Tags > screensaver


Search
Feeds
Meta

Return to page top