デジタルブック・デジタルカタログ制作サービス 「ココピーディービー」 Coco-pDB
サポートページ
デジタルブックのセットアップ方法 (Webサーバへのアップロードとリンク設定)
作業前に、ビューアーの動作環境(推奨閲覧環境)をご確認ください
. 納品データ(zipファイル)を解凍(展開)する。


デジタルブックの完成データは、zip形式の圧縮ファイルで納品されますので、解凍ソフトなどを用いてコンピュータ上の任意の場所に展開してください。

記録メディアにて納品されたデータは、圧縮化されていないことがございます。この場合、解凍(展開)作業は不要ですので、記録メディア内のルートフォルダごとコンピュータ上の任意の場所にコピーしてください。



. 解凍(展開)したフォルダ(ルートフォルダ)の名称をサーバ用に変更する。


解凍したルートフォルダの名称をWebサーバ上で扱える半角英数字及び記号で構成される任意の文字列に変更してください。

左図は、ルートフォルダ名を 「catalog」 に変更した場合の例です。



. ルートフォルダを開き、内容を確認する。


ルートフォルダを開き、中身(デジタルブック構成ファイル)をご確認ください。

構成ファイルの内の "_SWF_Window.html" と "index.html" の両ファイルは、Webサーバへのアップロード後、任意のリンク元からビューアーへのリンク先として指定するファイルになります。

詳しくは、下記.項をご参照ください。

当該ルートフォルダに含まれるファイル及びサブフォルダを誤って削除したり、これらの名称や階層構造を改変すると、ビューアーの起動及び動作に不具合が発生し、デジタルブックの正常な閲覧に支障をきたす惧れがございます。
データの取り扱いには、くれぐれもご注意ください。
実際のファイル構成は、デジタルブックの構成内容により異なります。(左図は一例です。)



. ローカル環境下でビューアーを開き、デジタルブックを確認する。


ビューアーを開く前に、Adobe Flash Player のグローバルセキュリティ設定をご確認ください


ビューアーの起動方法は、以下の2パターンです。

)"index.html"(動作環境・操作方法説明ページ)のページ上部にある 「ビューアーを開く」 ボタンから開く。(※推奨)

)"_SWF_Window.html"(ビューアー組込ファイル)を直接開く。

上記)の方法では、JavaScript制御により展開時のサイズが固定されたシンプルなウィンドウ(ブラウザのツールバーやスクロールバーなどが非表示になるウィンドウ)でビューアーが開かれます。
(ブラウザによっては、ロケーションバー及びステータスバーが表示されるバージョンもございます。)

)の方法の場合は、デフォルトのウィンドウ、もしくは新しいタブに開かれます。
(※左図をご参照ください。)

Webサーバへのアップロード後、任意のリンク元から "index.html" を経由させずに、JavaScript制御されたウィンドウでビューアーを直接開くには、リンク元のページに所定のスクリプトを埋め込んでいただく必要がございます。
詳しくは、下記.項をご参照ください。


<ご注意ください!>
Windows XP SP2 以上ローカル環境下において上記ファイルを Internet Explorer で開くと、ブラウザ側の設定により、アクティブコンテンツの実行が制限され、次のような帯状の情報バーが出現する場合がございます。

この場合、情報バーをクリックして表示されるメニューより 『ブロックされているコンテンツを許可』 をご選択ください。なお、既定の設定が有効の場合、Web上での閲覧に際して情報バーが表示されることはありません。



. Webサーバにデジタルブックをアップロードする。


上記.項の確認作業で問題がなければ、FTPクライアントソフトなどを利用し、Webサーバにアップロードしてください。

アップロードは、デジタルブックのルートフォルダ(例では 「catalog」 フォルダ)ごと一括してアップロードされることをお奨めいたします。

通常のWebドキュメントと同様に、Webサーバ所定のドキュメントルート内にアップロードできれば完了です。



. デジタルブックのURLを確認し、ビューアーへのリンクを設定する。


デジタルブックビューアーのURLを確認します。

左図は、Webサーバのドキュメントルート(例 「docs」)内のディレクトリ 「book」 に、デジタルブックのルートフォルダ 『catalog』 を設置した例です。

上記の場合、デジタルブックビューアーへアクセスできるURLは、以下のようになります。

)動作環境・操作方法説明ページのURL(※リンク推奨)
 http://xxxx.xx/book/catalog/ または、
 http://xxxx.xx/book/catalog/index.html

)ビューアー組込ファイルのURL
 http://xxxx.xx/book/catalog/_SWF_Window.html

任意のサイトにデジタルブックへのリンクを張る場合は、通常のアンカーリンクの方法などにより、)または)のファイルへリンクさせてください。
以上でセットアップは完了です。

なお、任意のリンク元から "index.html" を経由させずに、JavaScript制御されたウィンドウでビューアーを直接開くには、リンク元のページに所定のスクリプトを埋め込んでいただく必要がございます。
詳しくは、下記.項をご参照ください。



. JavaScript制御のリンクを設定する。 (※設定は任意です)


デジタルブックへのリンク元のページに次の設定を行うことにより、JavaScript制御によって展開時のサイズが固定されたシンプルなウィンドウ(ブラウザのツールバーやスクロールバーなどが非表示になるウィンドウ)でビューアーを直接開くことができるようになります。("index.html" から開いた時のようなビューアーウィンドウを "index.html" を経由させずに開くことが可能になります。)

「ビューアーへのリンク元となるHTMLファイル」と「デジタルブックのデータフォルダ」を必ず同一のドキュメントルート下に設置し、「ビューアーへのリンク元となるHTMLファイル」に以下のソースを追加してください。

<head> 内に記述

<body> 内に記述

【1】 = デジタルブックのルートディレクトリ内 【/js/WindowOpen.js】 への相対パスを挿入
【2】 = デジタルブックのルートディレクトリ内 【_SWF_Window.html】 への相対パスを挿入
【3】 = リンク元になるテキストまたは<img>などのインライン要素を挿入(内包)

特定のページを直接開く場合は、挿入部【2】の".html"拡張子に続き 【?pagecode=□】 を追加してください。
部分は、表紙から起算したページ番号に置換。例:24ページの場合 → '〜/_SWF_Window.html?pagecode=24')

また、同一ページ内に異なる複数のビューアーへのリンクを設定する場合、各デジタルブックのルートディレクトリに同梱されている "WindowOpen.js" ファイルは全て同一内容であるため、<head>内の記述をその分追加することはせず、いずれか1つへのパスのみを記述されるか、あるいは当該jsファイルのいずれかをコピーして任意のディレクトリーに設置し、これを参照させるようにしてください。(当該jsファイルは、各デジタルブックの "_SWF_Window.html" ファイル自体もそれを外部参照に使用するため、元の場所から移動、または削除しないようくれぐれもご注意ください。)

<!-- ソース記述例 -->

<html>
<head>

<!-- 複数ビューアーへの直リンクを張る場合でも参照させる外部jsファイル(WindowOpen.js)は1つ -->
<script type="text/javascript" src="../book/catalog1/js/WindowOpen.js"></script>

</head>
<body>

<!-- 1階層上の "book" ディレクトリ内のデジタルブック "catalog1" への直リンク例 -->
<a href="javascript:void(0)" onclick="window.open('../book/catalog1/_SWF_Window.html'
,'new','width=1000,height=670,left='+(screen.availWidth/2-507)+',top='+(screen.availHeight/2-381)+'
,resizable=yes'); return false;">カタログ1を開く</a>

<!-- 1階層上の "book" ディレクトリ内のデジタルブック "catalog2" の60ページへの直リンク例 -->
<a href="javascript:void(0)" onclick="window.open('../book/catalog2/_SWF_Window.html?pagecode=60'
,'new','width=1000,height=670,left='+(screen.availWidth/2-507)+',top='+(screen.availHeight/2-381)+'
,resizable=yes'); return false;">カタログ2の60ページを開く</a>

</body>
</html>

<上記のリンク設定を行う場合は、以下の点にご注意ください!>
  • 記述は相対パスのみの対応となります。絶対パスでは動作いたしません。
  • 印刷機能ファイル連携設定 を付加している場合、一部機能制限が発生する場合が稀にございます。
  • "WindowOpen.js" を参照させない場合でもビューアーは固定ウィンドウで正しく開かれますが、ビューアー動作上不具合が発生する惧れがございますので、<head>内の記述は省略しないでください。
  • "WindowOpen.js" は納期のタイミングにより更新される可能性がございます。異なる時期に弊社にて制作したデジタルブックを共存させる場合は、当該ファイルが更新されていないかをご確認ください。更新されている場合は、最新のファイルを参照するように設定してください。
  • HTMLの記述方法など、本項での解説範疇を超えるサポートは致しかねます。あらかじめご了承ください。






Copyright © 2008 - 2010 Cocoproduct Co.,Ltd. All Rights Reserved.