[ Tips ] FLIPPER U HTML でヘッダーを追加する方法 文書番号第 6 版対象製品対象ユーザー : 12 製 -FL030290-06 : 2016 年 4 月 25 日 : FLIPPER U 4.3.0 以降 : FLIPPER U をご利用中の方 概要 ロゴを配置した HTML を iframe でデジタルブックと組み合わせることで オリジナルロゴ入りのデザインに見せることができます 上部ヘッダーの例 ) パソコンスマートフォン サイドバーの例 ) パソコンスマートフォン ヘッダー サイドバー部分は 上記の例にとらわれず自由に編集していただけます 本書では 上部ヘッダー の例で説明します ( サイドバーでも手順は同じです ) 1 / 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 版コンテンツのみ ) 2 / 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 か所です 3 / 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;"> <!--ヘッダ--> <div style="width:100%;height:40px;position: absolute;top:0;left:0;"> <iframe width="100%" height="40" src="header.html" hspace="0" vspace="0" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0"></iframe> </div> <!--ヘッダ--> <!--ブック--> <div id="content" style="position:absolute;"> 4 / 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 版のパソコン用コンテンツにヘッダーを設定 も行って下さい 5 / 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 を置きます 6 / 15
4. 書き出したブックフォルダ直下にある html5.html を加工します 修正箇所は 以下 ( ア ) ( イ ) の 2 か所です ( ア )<div id="header" class="noprintpage"> ~ </div> を削除し以下の html の記述に変更します 変更前 <div id="header" class="noprintpage"> </div> 変更後 <div id="header" class="noprintpage"> <iframe width="100%" height="100%" src="header.html" hspace="0" vspace="0" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0"></iframe> </div> ( ア ) 削除し以下の記述に変更 <div id="header" class="noprintpage"> <iframe width="100%" height="100%" src="header.html" hspace="0" vspace="0" marginheight="0" marginwidth="0" border="0" frameborder="0" framespacing="0"></iframe> </div> 7 / 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> ( イ ) 削除し以下の記述に変更 <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 を自由に編集してください 8 / 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 を自由に編集してください 9 / 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 ( 書き出し形式追加用 ) のデータを使用します 10 / 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 ファイルを利用するかは 作成したいコンテンツ種別に合わせて選択してください 11 / 15
4. 手順 3 で開いた index.html を修正します 具体的な作業内容は 1-1. Flash 版のパソコン用コンテンツにヘッダーを設定 の手順 4 ( ア ) ( イ ) の作業を行います 書き出したブックフォルダ直下にある index.html ではなく 必ず手順 3 の index.html を修正して下さい 手順 3 の index.html はひな形の為 変数項目が含まれています index.html を編集するときには 変数項目を変更しないようにしてください (<!--<$GOOGLE_ANALYTICS_INIT>--> <!--<$GOOGLE_ANALYTICS_SEND>--> <!--<$ISTRACKING>--> <!--<$TRACKINGCODE>--> など ) 5. 必要なファイルをまとめて 書き出し形式 ファイルを作成します 具体的には 手順 2 で加工した header.html logo.png と 手順 4 で加工した index.html を ZIP 圧縮します (ZIP のファイル名は任意 ) 圧縮方法 (Windows 標準機能 ) ファイル類 (header.html logo.png index.html) を全て選択して右クリック > 送る > 圧縮 (zip 形式 ) フォルダー 圧縮時は ZIP ファイルを解凍したときに 解凍フォルダ直下にファイル類ができるように圧縮してください 解凍時に フォルダ > フォルダ >header.html logo.png のように余計なフォルダが間に入った場合 正しく動作しません 12 / 15
上部ヘッダー + Web 公開用 index.html の例 手順 2 で加工したファイル類 ZIP 圧縮 手順 4 で加工した index.htm 上部ヘッダー + SCORM1.2 用 index.html 類 の例 手順 2 で加工したファイル類 手順 4 で加工した index.html 類 ZIP 圧縮 手順 4 で SCORM1.2 用 SCORM2004 用の index.html を利用する場合は 同フォルダに同梱されている imsmanifest.xml や lwscoconfig.xml も一緒に圧縮します 6. FLIPPER U 4.3.0 以降を起動し ヘッダーを適用したいブックの 書き出し画面 を開きます ( 以下は ホーム画面書き出しボタンから表示している例 ) 7. 左下の 設定を追加 をクリックします 8. 手順 6 で作成した ZIP を選択します 13 / 15
9. タイトル 詳細 タイプ を設定します タイトル 詳細は 後で見てわかりやすいよう入力します 用途や Web 公開用なのか?( スコア機能付き? SCROM1.2? SCORM2004?) などをメモします タイプとして以下を選択します 作成した書き出し形式ファイルに適合したタイプを選択してください Web 公開用 normal Web 公開用 スコア機能 score SCORM1.2 SCORM2004 scorm 10. 書き出し形式が追加されます 11. 追加した書き出し形式を選択してブックを書き出し Web サーバー または LOGOSWARE オンラインストレージにアップロードします 12. デジタルブックを起動して 想定通りに表示されるか確認します 上部ヘッダーの例 ) サイドバーの例 ) 14 / 15
書き出し形式を削除するには 削除したい書き出し形式を選択して 下部のごみ箱ボタンをクリックします 文書に関する情報 お問合せ窓口 ご購入後の製品に関してご不明な点は 以下の窓口までお問い合わせください E-mail :support@logosware.com TEL :03-5818-8011 受付時間 :10:00~18:00( 土日 祝祭日は除く ) 更新履歴 第 1 版第 2 版第 3 版第 4 版第 5 版第 6 版 2012 年 9 月 3 日 2013 年 10 月 15 日書き出し形式追加について追記 2014 年 3 月 20 日 FLIPPER U4.1.4 リリースに伴い改修 2015 年 7 月 24 日 B. スマートフォン用コンテンツにヘッダーを設定 を追記 2015 年 12 月 25 日 FLIPPER U4.3.0 リリースに伴い改修 2016 年 4 月 25 日 HTML5 に関する記述を変更 参照 ( 関連文書 ) なし 15 / 15