知りたい事
画像や動画をデジタルブックの紙面上にポップアップで表示する方法を知りたい
作成方法
FLIPPER U2のリンク設定画面でURL欄に、JavaScriptのwindow.open()を設定する事で紙面の上にポップアップウィンドウとして表示することが可能となります。
ポップアップ画像や動画は、1つのリンクにつき、1画像(または1動画)になります。
但し、ポップアップウィンドウが動作するのはパソコン再生のみとなります。
モバイルで閲覧した場合は別ウィンドウで表示されます。
※ JavaScriptの設定や動作については、お客様の責任において調査、ご確認の上ご利用ください。
作成の流れは以下の通りです。
1.画像や動画ファイル名・フォルダ名、ウィンドウサイズを決めます
2.リンク編集画面のURL欄に記載するJavaScriptを決めます
3.FLIPPER U2のリンク設定画面でJavaScriptを設定します
4.書き出したブックデータに画像や動画を格納します
1.画像や動画ファイル名・フォルダ名、ウィンドウサイズを決めます
画像や動画をポップアップウィンドウで表示するためには、FLIPPER U2から書き出したデータ内の画像や動画を参照します。
FLIPPER U2でJavaScriptのリンク設定する前に、予め以下を決めておきましょう。
- 画像・動画ファイル名(例:image1.png、chap1.mp4)
→ 画像や動画のファイル名を決めます。 - 画像・動画を保存するフォルダ名(例:image フォルダ、videoフォルダ など)
→ ポップアップウィンドウで表示するための画像や動画データを格納するフォルダ名を決めます。 - ウィンドウサイズ(例:横:800pixel 縦:600pixel)
→ ポップアップウィンドウのサイズを決めます。
2.リンク設定画面のURL欄に記載するJavaScriptを決めます
FLIPPER U2 リンク設定画面のURL欄に記載するJavaScriptを決めます。
例えば、ブックデータ内のimageフォルダに、image1.png を格納し、800×600のサイズでポップアップウィンドウで画像を表示させたい場合は、以下のようなURLになります。
※ 設定箇所が多い場合は、エクセルなどでまとめておくことをお勧めします。
例)
javascript:NW =window.open('image/image1.png', 'windowName','width=800,height=600');void(0)
3.FLIPPER U2のリンク設定画面でJavaScriptを設定します。
- FLIPPER U2で通常通りデジタルブックを作成します。
- [リンク]メニューからリンクの設定画面を開きます。
- ポップアップとして表示したい領域を指定し、リンクの設定を以下のようにします。
・ 種別 : 特殊リンク
・ URL : 手順2で予めて決めておいたJavaScriptを入力します。
・ ツールチップ: マウスオーバーした際に表示される補足説明をします。(任意) - すべての設定が終わりましたら、書き出します。
※ プレビュー機能でポップアップ表示の動作確認はできません。
4.書き出したブックデータに画像や動画を格納します
手順1で予め決めておいたフォルダにポップアップウィンドウで表示したい画像や動画を格納し、正しくポップアップウィンドウで表示されるか確認します。
尚、動作を確認する際は、以下のいずれかで動作をご確認ください。
・ ローカルビューアー で確認する
・ ロゴスウェアオンラインストレージ にアップロードして確認する
※ ご契約者のみ利用可能(有償オプション)
・ 自社のWebサーバー にアップロードして確認する