追加する方法は以下の 2 つです書き出し後にヘッダーを追加する (1 冊だけヘッダーを適用する場合に向く ) 書き出し形式を追加する ( 何冊も同じヘッダーを適用する場合に向く ) 注意 HTML の知識が必要ですロゴスウェアでは HTML の書き方についてのサポートはお受けしておりませんのでご

(1)

1 / 15 ［ Tips ］

FLIPPER U

HTML でヘッダーを追加する方法

文書番号： 12 製-FL030290-06 第 6 版： 2016 年 4 月 25 日対象製品： FLIPPER U 4.3.0 以降対象ユーザー： FLIPPER U をご利用中の方

概要

ロゴを配置した HTML を iframe でデジタルブックと組み合わせることで、オリジナルロゴ入りのデザインに見せることができます。上部ヘッダーの例）パソコンスマートフォンサイドバーの例）パソコンスマートフォン  ヘッダー、サイドバー部分は、上記の例にとらわれず自由に編集していただけます。  本書では「上部ヘッダー」の例で説明します。（サイドバーでも手順は同じです）

(2)

2 / 15 追加する方法は以下の 2 つです。  書き出し後にヘッダーを追加する（1 冊だけヘッダーを適用する場合に向く）  書き出し形式を追加する（何冊も同じヘッダーを適用する場合に向く）

注意

 HTML の知識が必要です。ロゴスウェアでは、HTML の書き方についてのサポートはお受けしておりませんのでご了承ください。  パソコン用とスマートフォン用とそれぞれで作業が必要です。  ボタン類を含めて全体的にデザインを変更する際は、着せ替えスキンが便利です。パソコン用コンテンツは簡単にヘッダーを追加できます。 http://doclib.logosware.com/content.html#!/229/  オンラインストレージ専用プランをご利用の方は、1 冊だけヘッダーを適用する設定ができません。「2. 何冊も同じヘッダーを適用する（Flash 版コンテンツのみ）」をご参照ください。

 1. 1 冊だけヘッダーを適用する（書き出し後にヘッダーを追加する） 1-1. Flash 版のパソコン用コンテンツにヘッダーを設定 1-2. HTML5 版のパソコン用コンテンツにヘッダーを設定 1-3. スマートフォン用コンテンツにヘッダーを設定  2. 何冊も同じヘッダーを適用する（Flash 版コンテンツのみ）

(3)

3 / 15

1. 1 冊だけヘッダーを適用する（書き出し後にヘッダーを追

加する）

この方法は、1 冊だけヘッダーを適用する場合に向いています。

1-1. Flash 版のパソコン用コンテンツにヘッダーを設定

書き出し時に「PC +スマートフォン/タブレット（Flash + HTML5）」を選択した場合はこちらの作業を行います。 1. 事前準備として、サンプルを以下よりダウンロードします。 http://download.logosware.com/soft/flipper-u/dl-free/FL030290-05_header.zip zip を解凍すると、以下のようなフォルダが格納されています。「パソコン用」のデータを使用します。（ここでは「パソコン用＞3.index.html（書き出し形式追加用）」は使用しません） 2. 作成済みのブックを、「PC +スマートフォン/タブレット（Flash + HTML5）」で書き出します。 3. 書き出したブックフォルダ直下に、手順 1 でダウンロードした「パソコン用＞1.ヘッダーサンプル＞上部ヘッダー（またはサイドバー）」フォルダの header.html（サイドバーの場合は right.html）と logo.png を置きます。 4. 書き出したブックフォルダ直下にある index.html を加工します。加工の素材として、手順 1 でダウンロードした「パソコン用＞2.index.html 加工用＞上部ヘッダー（またはサイドバー）」フォルダの「sample1.txt」「sample2.txt」を利用します。修正箇所は、以下（ア）、（イ）の 2 か所です。

(4)

4 / 15

(ア) index.html の<head>タグの、<style type="text/css">～</style>を削除し、 sample1.txt にある javascript を追記します。

(イ) index.html の、<body> <div id="content">を削除し、削除した位置に sample2.txt の内容を追記します。 （ア） （イ） （ア）削除し「sample1.txt」の内容をコピー --- 上部ヘッダー「sample1.txt」の例---- <script type="text/javascript"> function myOnLoad(){ windowResize(); window.onresize = windowResize; } (省略) winSizeObj.width = winWidth; winSizeObj.height = winHeight; return winSizeObj; } </script> （イ）削除し「sample2.txt」の内容をコピー --- 上部ヘッダー「sample2.txt」の例---- <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0"

onLoad="myOnLoad();" style="overflow:hidden;">

marginwidth="0" border="0" frameborder="0" framespacing="0"></iframe> </div>   <div id="content" style="position:absolute;">

(5)

5 / 15 5. 手順 4 で書き換えた index.html からブックを起動し、正常に動作するか確認します。  Web サーバーにアップせず、自パソコン上で index.html からブックを起動するには、グローバルセキュリティの設定が必要です。以下をご参照ください。 http://doclib.logosware.com/content.html#!/233/ 上部ヘッダーの例）サイドバーの例）その後、必要に合わせて index.html、header.html（または right.html）、logo.png を自由に編集してください。  閲覧 PC に FlashPlayer が入っていない場合は、自動的に HTML5 版のブックが再生される為、必要に応じて、「1-2.HTML5 版のパソコン用コンテンツにヘッダーを設定」も行って下さい。

(6)

6 / 15

1-2. HTML5 版のパソコン用コンテンツにヘッダーを設定

書き出し時に「PC +スマートフォン/タブレット（HTML5）」を選択した場合はこちらの作業を行います。 1. 事前準備として、サンプルを以下よりダウンロードします。 http://download.logosware.com/soft/flipper-u/dl-free/FL030290-05_header.zip zip を解凍すると、以下のようなフォルダが格納されています。「パソコン用」のデータを使用します。（ここでは「パソコン用＞3.index.html（書き出し形式追加用）」は使用しません） 2. 作成済みのブックを、「PC +スマートフォン/タブレット（HTML5）」の手順で書き出します。 3. 書き出したブックフォルダ直下に、手順 1 でダウンロードした「パソコン用＞1.ヘッダーサンプル＞上部ヘッダー（またはサイドバー）」フォルダの header.html（サイドバーの場合は right.html）と logo.png を置きます。

(7)

7 / 15

4. 書き出したブックフォルダ直下にある html5.html を加工します。修正箇所は、以下、（ア）、（イ）の 2 か所です。

（ア）<div id="header" class="noprintpage"> ～ </div>を削除し以下の html の記述に変更します。

≪変更前≫

≪変更後≫

framespacing="0"></iframe> </div>

（ア）削除し以下の記述に変更

frameborder="0" framespacing="0"></iframe> </div>

(8)

8 / 15 （イ）<style> ～ </style>を削除し以下の html の記述に変更します。 ≪変更前≫ <style> [v-cloak] { display:none } </style> ≪変更後≫ <style> [v-cloak] { display:none } #header { display: block; height: 40px; } .header-space { top: 40px; } </style> 5. index.html からブックを起動し、正常に動作するか確認します。その後、必要に合わせて html5.html、header.html（または right.html）、logo.png を自由に編集してください。 （イ）削除し以下の記述に変更 <style> [v-cloak] { display:none } #header { display: block; height: 40px; } .header-space { top: 40px; } </style>

(9)

9 / 15

1-3. スマートフォン用コンテンツにヘッダーを設定

 スマートフォン用コンテンツにヘッダーを追加するには、4.3.0 以降をご利用ください 1. 事前準備として、サンプルを以下よりダウンロードします。 http://download.logosware.com/soft/flipper-u/dl-free/FL030290-05_header.zip zip を解凍すると、以下のようなフォルダが格納されています。「スマートフォン用」のデータを使用します。 2. 作成済みのブックを、「PC +スマートフォン/タブレット（Flash+HTML5）」または、「PC +スマートフォン/タブレット（HTML5）」、で書き出します。 3. 書き出したブックフォルダ内にある¥m¥index.html のファイル名を「index2.html」に変更します。 4. 「スマートフォン用＞1.ヘッダーサンプル＞上部ヘッダー（またはサイドバー）」フォルダの index.html、header.html（サイドバーの場合は right.html）、logo.png を、書き出したブックフォルダ内の m フォルダ直下に置きます。 5. ブックフォルダ一式を Web サーバーにアップロードし、スマートフォンで正常に動作するか確認します 6. その後、必要に合わせて index.html、header.html（または right.html）、logo.png を自由に編集してください。

(10)

10 / 15

2. 何冊も同じヘッダーを適用する（Flash 版コンテンツのみ）

この方法は、何冊も同じヘッダーを適用する場合に向いています。  書き出し形式を追加するには、4.3.0 以降をご利用ください。  本設定は、Flash 版のパソコン用コンテンツのみに適用できるものです。 ※スマートフォン用のコンテンツ、および、HTML5 版のパソコン用コンテンツは、ブックデータを書き出した後、一冊ごと設定してください。「1.1 冊だけヘッダーを適用する（書き出し後にヘッダーを追加する）」をご参照ください。 1. 事前準備として、サンプルを以下よりダウンロードします。 http://download.logosware.com/soft/flipper-u/dl-free/FL030290-05_header.zip zip を解凍すると、以下のようなフォルダが格納されています。「パソコン用＞3.index.html （書き出し形式追加用）」のデータを使用します。

(11)

11 / 15 2. 必要に合わせて、ヘッダー内容を編集します。手順 1 でダウンロードした「パソコン用＞1.ヘッダーサンプル＞上部ヘッダー（またはサイドバー）」フォルダの「header.html（または right.html）」「logo.html」を変更します。  「header.html（または right.html）」をダブルクリックしブラウザで表示すると、表示イメージを確認できます。

 header.html（または right.html）はヘッダーとして表示される iframe の html です。logo.png は、ロゴ画像です。

3. 「index.html」を修正するにあたり、修正対象の index.html ファイルを開きます。

手順 1 でダウンロードした「パソコン用＞3.index.html（書き出し形式追加用）」中の、「Web 公開用」「Web 公開用※スコア用」「SCORM1.2 用」「SCORM2004 用」のフォルダ配下にある index.html ファイルを編集していきます。

 どのフォルダの index.html ファイルを利用するかは、作成したいコンテンツ種別に合わせて選択してください

この部分です

(12)

12 / 15 4. 手順 3 で開いた「index.html」を修正します。具体的な作業内容は、「1-1. Flash 版のパソコン用コンテンツにヘッダーを設定」の手順 4 （ア）、（イ）の作業を行います。  書き出したブックフォルダ直下にある index.html ではなく、必ず手順 3 の index.html を修正して下さい。  手順 3 の index.html はひな形の為、変数項目が含まれています。index.html を編集するときには、変数項目を変更しないようにしてください。（    ・・・など） 5. 必要なファイルをまとめて、「書き出し形式」ファイルを作成します。具体的には、手順 2 で加工した header.html、logo.png と、手順 4 で加工した index.html を ZIP 圧縮します（ZIP のファイル名は任意）。  圧縮方法（Windows 標準機能）ファイル類（header.html、logo.png、index.html）を全て選択して右クリック＞送る＞圧縮（zip 形式）フォルダー圧縮時は、ZIP ファイルを解凍したときに、解凍フォルダ直下にファイル類ができるように圧縮してください。解凍時に「○○フォルダ＞○○フォルダ＞header.html、logo.png」のように余計なフォルダが間に入った場合、正しく動作しません。

(13)

13 / 15

「上部ヘッダー」＋「Web 公開用 index.html」の例

「上部ヘッダー」＋「SCORM1.2 用 index.html 類」の例

 手順 4 で SCORM1.2 用、SCORM2004 用の index.html を利用する場合は、同フォルダに同梱されている「imsmanifest.xml」や「lwScoConfig.xml」も一緒に圧縮します。 6. FLIPPER U 4.3.0 以降を起動し、ヘッダーを適用したいブックの「書き出し画面」を開きます。（以下は、ホーム画面書き出しボタンから表示している例） ⇒ 7. 左下の【設定を追加】をクリックします。 8. 手順 6 で作成した ZIP を選択します。手順 4 で加工した index.htm 手順 2 で加工したファイル類 _{ZIP 圧縮} 手順 2 で加工したファイル類手順 4 で加工した index.html 類 ZIP 圧縮

(14)

14 / 15 9. 「タイトル」「詳細」「タイプ」を設定します。  タイトル、詳細は、後で見てわかりやすいよう入力します。用途や、Web 公開用なのか？（スコア機能付き？、SCROM1.2？、SCORM2004？）などをメモします。  タイプとして以下を選択します。作成した書き出し形式ファイルに適合したタイプを選択してください。 Web 公開用 → normal Web 公開用 ※ スコア機能 → score SCORM1.2、SCORM2004 → scorm 10. 書き出し形式が追加されます。 11. 追加した書き出し形式を選択してブックを書き出し、Web サーバー、または、LOGOSWARE オンラインストレージにアップロードします。 12. デジタルブックを起動して、想定通りに表示されるか確認します。上部ヘッダーの例）サイドバーの例）

(15)

15 / 15



書き出し形式を削除するには、削除したい書き出し形式を選択して、下部のごみ箱ボタンをクリックします。

文書に関する情報

お問合せ窓口

ご購入後の製品に関してご不明な点は、以下の窓口までお問い合わせください。 E-mail ：support＠logosware.com TEL ：03-5818-8011 受付時間：10:00～18:00（土日、祝祭日は除く）

更新履歴

第 1 版 2012 年 9 月 3 日第 2 版 2013 年 10 月 15 日書き出し形式追加について追記第 3 版 2014 年 3 月 20 日 FLIPPER U4.1.4 リリースに伴い改修第 4 版 2015 年 7 月 24 日「B.スマートフォン用コンテンツにヘッダーを設定」を追記第 5 版 2015 年 12 月 25 日 FLIPPER U4.3.0 リリースに伴い改修第 6 版 2016 年 4 月 25 日 HTML5 に関する記述を変更

参照（関連文書）

なし