FLIPPER U2：画像や動画をポップアップで表示する方法が知りたい

知りたい事

画像や動画をデジタルブックの紙面上にポップアップで表示する方法を知りたい

概要

FLIPPER U2のリンク設定画面で JavaScript の window.open() 関数 を使用すると、画像や動画をポップアップウィンドウとして紙面上に表示できます。

注意点：

• ポップアップ画像や動画は、1つのリンクにつき 1つのファイル（画像または動画） を表示します。
• パソコン再生時のみ ポップアップウィンドウが動作し、モバイル端末では別ウィンドウで表示 されます。
• JavaScript の設定や動作確認はお客様の責任 でお願いします。

作成手順

１．画像・動画ファイル名、フォルダ名、ウィンドウサイズを決める

ポップアップ表示する画像や動画は、FLIPPER U2で作成したブックデータ内のフォルダに格納します。

事前に決めておく項目：

• 画像や動画のファイル名
  例: image1.png、chap1.mp4
  
  
• 保存先フォルダ名
  ポップアップウィンドウで表示するための画像や動画データを格納するフォルダ名
  例：「image」フォルダ、「video」フォルダ
  
  
• ポップアップウィンドウサイズ
  ポップアップウィンドウのサイズを決めます
  例：幅 800ピクセル × 高さ 600ピクセル

２．JavaScriptを作成する

FLIPPER U2 リンク設定画面のURL欄に記載するJavaScriptを作成します。

例：ブックデータ内の image フォルダにある image1.png を幅 800ピクセル × 高さ 600ピクセル のサイズで表示する場合は以下のようなJavaScriptとなります。

例）
javascript:NW =window.open('image/image1.png', 'windowName','width=800,height=600');void(0)

※  複数のリンク設定が必要な場合は、Excel などで管理 すると効率的です。

３．FLIPPER U2 でリンク設定を行う

1. FLIPPER U2で通常通りデジタルブックを作成します。
2. [リンク] メニュー を開き、リンク設定画面を表示します。
3. ポップアップ表示したい範囲を指定し、以下の設定を行います。
   
   ・ 種別　　　　： 特殊リンク
   ・ URL　　　　 ： 手順2で作成した JavaScript を入力
   ・ ツールチップ： 必要に応じて補足説明を記入（任意）
4. 【書き出し】からブックデータを書き出します。
   
   
   
   

４．書き出したブックデータにファイルを格納する

1. 書き出し後のブックデータ内に、事前に決めたフォルダ名 を作成します。
2. ポップアップ表示する 画像や動画ファイル をそのフォルダ内に格納します。
3. 動作確認 を行い、ポップアップ表示が正常に機能するか確認してください。
   
   動作を確認する際は、以下のいずれかで動作をご確認ください。

　　・ ローカルビューアー で確認する

　　・ ロゴスウェアオンラインストレージ にアップロードして確認する
　　※ ご契約者のみ利用可能（有償オプション）

　　・ 自社のWebサーバー にアップロードして確認する

関連記事

• Youtubeの動画をポップアップウィンドウで開く方法