Tutorial - Viewer Auto-Install

SVGのオートインストーラについて

エンドユーザーがSVGコンテントを含むページを簡単に見ることができるように、アドビはHTMLページに埋め込むことが可能なスクリプトを提供しています。これを利用すると、エンドユーザーがSVGビュワーをインストールしていない場合には、自動的にAdobe SVGビュワーのダウンロードとインストールが行われます。

SVGビュワーをインストールしていないユーザーが、ここのようなページ来た場合、Adobe SVGビュワーをダウンロードしてインストールするかどうかを尋ねるダイアログが表示されます。ユーザーが“Yes”を選択すると、Adobe.comのページにジャンプし、ブラウザにもよりますが、ユーザーが最低限の操作をすれば、ダウンロードおよびインストールをすることができます。インストールが終了すると、ユーザーはSVGを含むページに戻ってくることができます。そして今度は、内容を見ることができるわけです。もしユーザーがインストールを促すダイアログで“No”を選択すると、SVGグラフィックの代わりにAdobe.comのオートインストーラのページへのリンクが表示されます。ユーザーがこのリンクをクリックすると、先に“Yes”を選択した場合と同じことが起こります。ユーザーが再度SVGを含むページに来た場合でも、30日間はインストールを促すダイアログは表示されないようになります。

クリックすると何が起こるか

次の表は、ダイアログで“Yes”と答えた場合、およびリンクをクリックした場合に、ユーザーの環境によってどのようなことが起こるかを、一覧表にしたものです。

OS	ブラウザ	バージョン	JavaScript	Java	状況
Windows	Internet Explorer	3.x以前	任意	任意	4
		4.0以降	有効	任意	1
		4.0以降	無効	任意	3
	Netscape	3.x以前	任意	任意	4
		4.0から4.07	任意	任意	3
		4.08から4.73	有効	有効	2
		4.08から4.73	有効	無効	3
		4.08から4.73	無効	有効	3
		4.08から4.73	無効	無効	3
Macintosh	Internet Explorer	4.x以前	任意	任意	4
	Internet Explorer	5.0以降	任意	任意	3
	Netscape	4.06以前	任意	任意	4
		4.07	任意	任意	3
		4.08から4.73	任意	任意	2
その他	任意	任意	任意	任意	4

状況：

ユーザーはAdobe.comのオートインストーラのページにジャンプします。ここでユーザーは、インストーラをダウンロード開始するリンクをクリックするように促されます。ユーザーがインストール・プロセスを完了すると、ページがこれを感知して、SVGグラフィックが含まれている元のページに自動的にバックします。
ユーザーはAdobe.comのオートインストーラのページにジャンプします。ここでユーザーは、インストーラをダウンロード開始するリンクをクリックするように促されます。ユーザーはインストール・プロセスを完了してから、SVGグラフィックが含まれている元のページに戻るために、バックボタンをクリックしなければなりません。
リンクが表示され、これをクリックすると、ビュワーをインストールする意志があるかどうか尋ねてきます。“Yes”をクリックすると、ユーザーはAdobe.comのオートインストーラのページにジャンプします。ここでユーザーは、ダウンロードしてインストールしたいビュワーを選択することができます。ユーザーはインストール・プロセスを完了してから、SVGグラフィックが含まれている元のページに戻るために、バックボタンをクリックしなければなりません。
利用しているブラウザではビュワーを使用することができませんという情報が表示され、さらにAdobe.com/svgへのリンクが表示されます。ユーザーがこのリンクをクリックすると、詳細な情報を知ることができます。

Adobe SVGオートインストーラをご自分のWebページで利用する方法

このページにあるオートインストーラ・スクリプトを利用するために、まず“svgcheck.js”と“svgcheck.vbs”の２つのファイルをここからダウンロードしてください。

autoinstall.zip をダウンロード

これら２つのファイルを自分のサイトに置き、HTMLドキュメントの<head>エレメントに次の２行を書き込んでください（URLはご自分のサイトの構造に合わせて変更してください）。

<script language="JavaScript" src="svgcheck.js"></script>
<script language="VBScript" src="svgcheck.vbs"></script>

さらに最初のSVGグラフィックの前に、次のコードを付け加えてください。これはページごとに１度ずつ呼び出されるものです。これがインストールを促すアラートを表示します。アラートが表示されたときに、見えるようにしたいと考えているすべてのHTMLの後に置くのがよいでしょう。

<script language="JavaScript"><!--
checkAndGetSVGViewer();
// -->
</script>

最後に次のコードをすべてのSVGグラフィックに付け加えてください（もちろん、SVGのURLとサイズは自分のサイトに合うように修正してください）。

<script language="JavaScript"><!--
emitSVG('src="hello.svg" name="SVGEmbed" height="200" width="600" type="image/svg-xml"');
// -->
</script>
<noscript>
<embed src="hello.svg" name="SVGEmbed" height="200" width="600" type="image/svg-xml"
pluginspage="http://www.adobe.com/svg/viewer/install/">
</noscript>

次のレッスン：ワークフロー