この記事では、 シームレスなインストール体験を実現する Express Install の使用方法について解説します。

Express Install とは

エンドユーザーの環境に必要なバージョンの Flash Player がインストールされていなかった場合、いままではユーザーを Macromedia サイトのダウンロードページへ誘導する必要がありました。しかし、これでは、せっかくサイトを訪問してくれたユーザーを、一時的にでも他のサイトに逃がしてしまうことになります。また、インストールのためにブラウザを終了したら、ユーザーに積極的に再訪問を促す手段はありませんでした。

図１．従来の Flash Player 更新例

Express Install を使用すると、 Flash Player の最新版への更新をシームレスな、すなわち、自身のサイト内だけで更新が完結するような体験としてユーザーに提供することが可能になります。インストールを行うページやインストール後に表示されるページ等は自由に設定することができ、ブラウザを一旦終了する必要のある場合でも、インストールの引き金となった Flash コンテンツのあるページに戻すことができます。

図２．Express install の更新例

Express Install に必要なサンプルファイルは、Flash Player Detection Kit の一部として配布されています。 これに含まれる FLA ファイルのライブラリからムービークリップをコピーするだけで、Express Install が使用できるようになります。

Flash Player Detection Kit の URL：
http://download.macromedia.com/pub/flash/detection_kit/detectionkit.zip　 (ZIP, 428K)

Express Install の仕組み

Express Install は、インストールのトリガーとなる SWF ファイルをロードし、その　SWF ファイルから Flash Player の更新処理を起動する API を呼び出して開始されます。つまり、実際に Flash Player の更新を行うのは、Flash Player 自身の機能です（*1）。 インストールのトリガーとなる SWF ファイルは、サイトの開発者が用意することになりますが、Flash Player Detection Kit の一部として配布されているサンプルから、容易に作成することができます。

更新処理は Action Sctript から呼び出すため、更新の開始を任意のタイミングで行うようなデザインが可能です。さらに、インストールが終了した時に表示されるページや、インストールを中断した際の動作等もカスタマイズできます。ちなみに、提供されているサンプルをそのまま利用すると、インストール終了時にはインストールを開始したページに戻るようになっています。ただし、ローカルのドキュメントから Express Install を実行する場合には、元のドキュメントに戻らないケースがあります。

*1：Express Install は、Mac OS か Windows 上で Flash Player 6 r65 以降がインストールされ JavaScript が有効になっているブラウザで実行することができます。

サンプルファイルの使用方法

上記 detectionkit.zip を展開すると、Express Installation というディレクトリ内に Express Install 用のサンプルファイルが含まれています。

• playerProductInstall.swf

  とりあえず、この SWFファイルを HTML ページに埋め込むだけで、Express Install を実現することができます。 Flash Player の動作確認に便利です。
  
  

• playerProductInstall.fla

  上記 SWF ファイルの元になっている FLA ファイルです。ライブラリにに含まれる AutoUpdater というムービークリップが Express Install の機能を実現しています。このAutoUpdater ムービークリップをコピーすることで、任意の Flash コンテンツで Express Install を使えるようになります。
  以下は、AutoUpdater ムービークリップを Flash MX 2004 内で表示しているところです。
  
  
  図３．AutoUpdater ムービークリップの編集画面 （Flash MX 2004 Professional）
  
  実際のインストールに必要な機能は全て外部 AS ファイルに記述され、actions レイヤーの最初のフレームで include されています。これにより、AutoUpdaterムービークリップのインスタンスをステージ上に配置すると、画面に表示されるタイミングでスクリプトが実行され Express Install が開始されます。
  図３のステージ上にグレーのムービークリップ（AutoUpdaterLoaderClip）が置かれていますが、これは単なるプレースホルダーと考えて構いません。AutoUpdater自身 は Express Install が始まると、loadMovie によりすぐに他のムービーと置き換えらるためです。AutoUpdaterLoaderClip の大きさは、インストール中に表示される情報パネルと同じになっているため、そのまま分かりやすい目安として使うことができます。
  ここで、このファイルの基本的な使い方をまとめておきます。
  1） AutoUpdater （と AutoUpdaterLoaderClip） ムービークリップを Express Install を起動する FLA ファイルにコピー
  2） FLA ファイル内の適切な箇所に AutoUpdaterムービークリップを配置、または生成するスクリプトを記述

• playerProductInstall.as

  実際の更新処理を呼び出すためのスクリプトです。基本的に、このファイルを変更する必要はありません。上の説明にもあるように、 AutoUpdater ムービークリップを配置すれば、このファイルは自動的に読み込まれるので、ムービーの制作時にも直接意識する必要はないでしょう。
  なお、このファイルは、忘れずに FLA ファイルと同じディレクトリにコピーするようにしましょう。下の playerProductInstallCallback.as も同様にコピーする必要があります。
  

• playerProductInstallCallback.as

  このファイルを使って、Flash Player の更新状況に応じて呼び出されるいくつかのコールバック関数をカスタマイズすることができます。これにより、よりユーザーフレンドリーなインストール体験をデザインすることが可能になります。現在、定義可能な状況は、ダウンロードが終了したとき、キャンセルされたとき、失敗したときの３つです。

function installStatus(statusValue) {
	if (statusValue == "Download.Complete") {
		// インストールが完了したケース
	}
	else if (statusValue == "Download.Cancelled") {
		// ユーザーがインストールをキャンセルしたケース
		// 標準ではユーザーには何も表示されない
	}
	else if (statusValue == "Download.Failed") {
		// インストーラのダウンロードに失敗したケース
		// 標準ではユーザーには何も表示されない
	}
}

インストール画面のデザイン

ここでは、簡単な画面デザイン上の注意点を記述しておきます。

まず、インストールを行う Flash コンテンツの大きさは 215x138 ピクセルよりも大きくする必要があります。 これは、インストール情報パネルを表示するためです。
また、Express Install を実行中、Flash コンテンツの領域が半透明の薄いグレーで覆われます。その状態が、エンドユーザーから違和感のない画面デザインであることが望ましいでしょう。

図４．Express install を実行中の画面例

HTMLへの組み込み

Express Install を行う SWF ファイルは、Flash Player 6 r65 以降がインストールされ、かつ必要なバージョンの Flash Player がインストールされていない状況のみで表示されるべきです。インストール専用のページを用意してユーザーーを誘導することも出来ますが、別記事で紹介している Flash Player Detection Kit と組み合わせて使うことをお勧めします。Express Installation ディレクトリ内には detection kit を応用した playerProductInstall.html というサンプル HTML ファイルが提供されていますのでご参照ください。

以下のコードは、サンプル HTML ファイル内から Express Install に固有な箇所を抜き出したものです。Flash Player Detection Kit について、詳しくはこちらをご覧ください。

• まず、Flash Player のバージョン判定をしている箇所です。 ここで、Flash Player 6r65 以降がインストールされているか確認しています。

  	// Version check for the Flash Player that has the ability ...
  	var hasProductInstall = DetectFlashVer(6, 0, 65); 
  
  	// Version check based upon the values entered above ... 
  	var hasReqestedVersion = DetectFlashVer(requiredMajorVersion,
  	 requiredMinorVersion, requiredRevision);

• 次に、インストール後に表示されるページを指定しています。標準では、インストールを開始したドキュメントを指しています。

  	// Location visited after installation is complete if ...
  	var MMredirectURL = window.location; 

  インストール後に他のページを表示したい場合は、ここでターゲットの URL を指定します。

  	var MMredirectURL = "www.example.com/exsample.html"; 

• 次は、インストール完了時に自動的に閉じるウインドウを指定するための記述です。これは IE のみに有効です。（他のブラウザは全てのウインドウを閉じるため）

  	// Stored value of document title used by the installation...
  	// This is necessary to remove browser windows that will...
  	// DO NOT MODIFY THE FOLLOWING TWO LINES 
  	document.title = document.title.slice(0, 47) 
  	+ " - Flash Player Installation"; 
  	var MMdoctitle = document.title;

  （注）このまま実行すると、Flash Player 8 がインストールされた後もブラウザのタイトルに " - Flash Player Installation" が付いたままになってしまいます。 これを避けるには、この箇所を下記の Express Install 用の条件ブロックである" ( hasProductInstall && !hasReqestedVersion ) " の条件文内に移動するという方法があります。
  
  
• 最後に Express Install 用の HTML 文を出力している箇所です。 playerProductInstall.swf と書かれている場所は、実際に Express Install を行う SWF ファイルと置き換えてください。

  if ( hasProductInstall && !hasReqestedVersion ) {
   var productInstallOETags = '<object classid="clsid:D27CDB6...
   + 'width="550" height="200"'
   + 'codebase="http://download.macromedia.com/pub/shockwave/cabs...
   + '<param name="movie" value="playerProductInstall.swf?MMredirectURL=...
   + '<param name="quality" value="high" /><param name="	bgcolor" val...
   + '<embed src="playerProductInstall.swf?MMredirectURL='+MMredirect...
   ...
   ...
   ...
   + '<\/embed>'
   + '<\/object>';
   document.write(productInstallOETags);
  }

 

著者について