アクセシビリティ

Dreamweaver記事

 

ラクラクかんたん！Flash Video組み込み手法


目次

  1. はじめに
  2. Premiere Pro CS3・After Effects CS3によるFlash Videoの作成
  3. Dreamweaver CS3によるFlash Videoの組み込み
  4. Express Installの実装
  5. Express Installのカスタマイズ

Express Installの実装

ここでは、Flashコンテンツを公開する上で欠かせない機能『Express Install』についてご紹介します。

Express Installについて

Express Installとは、エンドユーザーの環境において、再生に必要なFlash Playerのバージョンがインストールされていなかった場合、最新版のFlash Playerに自動的に更新する機能です。 従来、再生に必要なバージョンの Flash Player がインストールされていなかった場合、ユーザーを Adobeサイトの『Flash Playerダウンロードセンター』へ誘導していました。そして、更新後、ユーザーはWebサイトに再度アクセスする必要がありました。

従来の更新ワークフロー

しかし、Express Installを実装すると、最新版のFlash Playerへの更新をシームレスに行います。つまり、『Flash Playerダウンロードセンター』に訪れる必要なく、自身のサイト内だけで、最新バージョンのFlash Playerへの更新を完了することができます。結果、更新後、ユーザーがWebサイトに再度アクセスする手間が省けます。

Express Install実装時の更新ワークフロー

※Flash Player インストールのために、ブラウザを一旦終了する必要のある場合でも、インストールの引き金となったFlashコンテンツのあるWebサイトに自動的に戻ります。

Express Installについてまとめると、下記の通りになります。

  • 最新バージョンの Flash Player に自動更新
  • Flash Player 自身の機能
  • Express Installを実行するための SWF ファイルが必要
  • 実行するには、エンドユーザーがFlash Player 6.0.r65 以上をインストールしている必要がある
  • カスタマイズが可能

Express Installに必要なファイルは、下記の通りになります。

  • Flash Playerのバージョンチェックを行うJavaScriptファイル
  • Express Installを実行するためのSWFファイル

Express Installの実装

「Dreamweaver CS3によるFlash Videoの組み込み」にて配置したFlash Videoコンテンツに、Express Installを実装してみましょう。

まずは、サンプルファイルの「Data.zip」を解凍し、「ExpressInstall」フォルダを準備します。
「ExpressInstall > Tools」フォルダ内の、「ExpressInstall.swf」ファイルをサイトルートに配置。そして、同フォルダ内の「ExpressInstall.js」ファイルをサイト定義内の「Scripts」フォルダに配置します。
各ファイルの説明は、以下の通りです。

  • ExpressInstall.swf：
    • Express Installを実行するためのSWFファイルです。
  • ExpressInstall.js：
    • エンドユーザーにインストールされているFlash Playerのバージョンチェックを行い、その結果に基づき、「Express Installの実行」もしくは、「Flashコンテンツの再生」の処理を行います。

「ExpressInstall.js」・「ExpressInstall.swf」ファイルを配置

HTMLドキュメントを開き、コードビューより、45行目辺りに記述されているJavaScript関数「AC_FL_RunContent( 'codebase','http://download.macromedia. …, …)」をコピーします。

JavaScript関数：AC_FL_RunContent( )のコピー

その後、Flash Videoを配置した際に記述されたすべてのコードを削除します。（つまり、新規HTMLドキュメント作成時の状態に戻します）
例外として、40行目辺りに記述されている「AC_RunActiveContent.js」の外部リンクは残しておきましょう。

「AC_RunActiveContent.js」の外部リンク

「ExpressInstall.js」を開きます。

1〜10行目までが、『再生に必要とするFlash Playerのバージョン』を指定しています。
初期設定では、Flash Player 9.0.r115以上となっています。

// 必要とする Flash Player メジャーバージョン
var requiredMajorVersion = 9;
// 必要とする Flash Player マイナーバージョン
var requiredMinorVersion = 0;
// 必要とする Flash Player リビジョンナンバー
var requiredRevision = 115;

20〜47行目までが、エンドユーザーにインストールされているFlash Playerバージョンが、再生に必要なバージョンに満たない場合に、Express Installを実行するSWFファイル「ExpressInstall.swf」を指定しています。

if ( hasProductInstall && !hasReqestedVersion ) {
	var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
	var MMredirectURL = window.location;
	document.title = document.title.slice(0, 47) + " - Adobe Flash Player Installation";
	var MMdoctitle = document.title;
	AC_FL_RunContent(
		'src', 'ExpressInstall',
		'movie', 'ExpressInstall',
		'id', 'FPdetection',
		'name', 'FPdetection',
		'width', '○○○', // Flashコンテンツの『幅（pixel）』を指定
		'height', '○○○', // Flashコンテンツの『高さ（pixel）』を指定
		'bgcolor', '#FFFFFF',
		'quality', 'high',
		'codebase', 'http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,65,0',
		'pluginspage', 'http://www.adobe.com/go/getflashplayer',
		'type', 'application/x-shockwave-flash',
		'FlashVars', 'MMredirectURL='+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle,
		'allowScriptAccess','always',
		'menu', 'false'
	);

36・37行に、実際に再生を行いたいFlashコンテンツの「幅（pixel）」と「高さ（pixel）」を入力します。

（※今回は、「sampleVideo.flv」の幅と高さになります。Express Installを実行するFlashコンテンツの幅と高さではありません。）

Flashコンテンツの「幅」と「高さ」の指定

49〜76行目までが、エンドユーザーにインストールされているFlash Playerバージョンが、再生に必要なバージョンを満たしている場合に、再生するSWFファイルを指定しています。

初期状態では、ここは空白（※コメントのみ）になっているので、55行目辺りにカーソルを置き、先程、HTMLドキュメントよりコピーした「AC_FL_RunContent( )」関数をペーストします。

これにより、エンドユーザーに、再生に必要なFlash Playerバージョンがインストールされている場合、「sampleVideo.flv」が再生されることになります。

JavaScript関数： AC_FL_RunContent( )のペースト

「ExpressInstall.js」を保存します。
HTMLドキュメントに戻り、Flash Videoを再生したい位置に「ExpressInstall.js」ファイルを配置します。

「ExpressInstall.js」ファイルの配置

ブラウザより、コンテンツのテストを行います。
テストを行う前に、下記要件が満たされていることを確認してください。

  • 再生に必要とするバージョンより、古いバージョンのFlash Playerをインストールしてください。
  • インターネット環境が必要です。
  • ApacheやIISなどが稼働しているサーバ上でテストしてください。ローカルのドキュメントから Express Install を実行する場合には、元のドキュメントに戻らないケースがあります。

Express Installの実行テスト

ページ 4 / 5
前のページ
次のページ