［ ホワイトペーパー］
FLIPPER U
HTML でヘッダーを追加する方法
文書番号
： 12 製-FL030290-03
第3版
： 2014 年 3 月 20 日
対象製品
： FLIPPER U（
「書き出し形式の追加」をご利用の場合は 4.1.4 以降）
対象ユーザー
： FLIPPER U をご利用中の方。
概要
本資料は、FLIPPER U 4.1.4 以降ご利用者の方を対象にしています。
ロゴを配置した HTML を iframe でデジタルブックと組み合わせることで、オリジナル
ロゴ入りのデザインに見せることができます。
上部ヘッダーの例）
サイドバーの例）
ヘッダー部分は、上記の例にとらわれず自由に編集していただけます。
追加する方法は以下の 2 つです。本書では一つずつ紹介します。
書き出し後にヘッダーを追加する（1 冊だけヘッダーを適用する場合に向く）
書き出し形式を追加する（何冊も同じヘッダーを適用する場合に向く）
1 / 11
注意
HTML の知識が必要です。ロゴスウェアでは、HTML の書き方についてのサポート
はお受けしておりませんのでご了承ください。
この方式では、スマートフォン用コンテンツにロゴ画像は表示されません。スマー
トフォン用コンテンツにロゴ画像を出すには、以下の文書を参照してください。
http://doclib.logosware.com/content.html#!/230/
ボタン類を含めて全体的にデザインを変更する際は、着せ替えスキンが便利です。
ヘッダーも追加できます。
http://doclib.logosware.com/content.html#!/229/
A. 書き出し後にヘッダーを追加する
この方法は、1 冊だけヘッダーを適用する場合に向いています。
1.
事前準備として、サンプルを以下よりダウンロードします。
http://download.logosware.com/soft/flipper-u/dl-free/FL030290-03_header.zip
zip を解凍すると、以下のようなフォルダが格納されています。
2.
作成済みのブックを、通常通りの手順で書き出します。
3.
書き出したブックフォルダ直下に、手順 1 でダウンロードした「1.ヘッダーサンプル＞上部
ヘッダー（またはサイドバー）」フォルダの header.html（サイドバーの場合は right.html）と
logo.png を置きます。
4.
index.html を加工します。加工の素材として、手順 1 でダウンロードした「2.index.html 加
工用の sample.html＞上部ヘッダー（またはサイドバー）」フォルダの「sample1.html」
「sample2.html」を利用します。
2 / 11
本書では「上部ヘッダー」の例で説明します。
（サイドバーでも手順は同じです）
修正箇所は、2 か所です。
(ア) index.html の<head>タグの、<style type="text/css">～</style>を削除し、
sample1.html にある javascript を追記します。
(イ) index.html の、<body> <div id="content">を削除し、削除した位置に
sample2.html の内容を追記します。
Web 公開で書き出した場合の例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
（ア）削除し「sample1.html」の内容をコピー
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
----- 上部ヘッダー「sample1.html」の例----
<title>ようこそ</title>
<script type="text/javascript">
<script type="text/javascript" src="flipper3js/redirector.js"></script>
function myOnLoad(){
windowResize();
<script type="text/javascript" src="swfobject/swfobject.js"></script>
window.onresize = windowResize;
<script type="text/javascript"
}
src="swfaddress/swfaddress.js"></script>
(省略)
<script type="text/javascript" src="flipper3js/flipper3util.js"></script>
winSizeObj.width = winWidth;
winSizeObj.height = winHeight;
<style type="text/css">
/* hide from ie on mac */
return winSizeObj;
html {
}
</script>
height: 100%;
overflow: hidden;
}
（イ）削除し「sample2.html」の内容をコピー
#content {
height: 100%;
----- 上部ヘッダー「sample2.html」の例----
}
<body marginheight="0" marginwidth="0"
leftmargin="0" topmargin="0" onLoad="myOnLoad();"
style="overflow:hidden;">
/* end hide */
body {
height: 100%;
margin: 0;
<!--ヘッダ-->
padding: 0;
<div style="width:100%;height:40px;position:
absolute;top:0;left:0;">
background: #FFFFFF;
font: 76% Arial, sans-serif;
}
</style>
<iframe width="100%" height="40" src="header.html"
hspace="0" vspace="0" marginheight="0"
marginwidth="0" border="0" frameborder="0"
framespacing="0"></iframe>
</div>
</head>
<!--ヘッダ-->
<body>
<!--ブック-->
<div id="content">
<h1>ようこそ</h1>
<div id="content" style="position:absolute;">
<p>ページ数：4</p>
・・・
（略）
3 / 11
5.
書き換えた index.html からブックを起動し、正常に動作するか確認します。
Webサーバーにアップせず、自パソコン上でindex.html からブックを起動する
には、グローバルセキュリティの設定が必要です。以下をご参照ください。
http://doclib.logosware.com/content.html#!/233/
上部ヘッダーの例）
サイドバーの例）
その後、必要に合わせて index.html、header.html（または right.html）
、logo.png を
自由に編集してください。
4 / 11
B. 書き出し形式を追加する
この方法は、何冊も同じヘッダーを適用する場合に向いています。
1.
事前準備として、サンプルを以下よりダウンロードします。
http://download.logosware.com/soft/flipper-u/dl-free/FL030290-03_header.zip
zip を解凍すると、以下のようなフォルダが格納されています。
2.
必要に合わせて、ヘッダー内容を編集します。
手順 1 でダウンロードした「1.ヘッダーサンプル＞上部ヘッダー（または サイドバー）」フォ
ルダの「header.html（または right.html）」「logo.html」を変更します。
この部分です
最終的に、ここにデジタルブックが表示されます。
「header.html
（または right.html）
」
をダブルクリックしブラウザで表示すると、
表示イメージを確認できます。
header.html（または right.html）はヘッダーとして表示される iframe の html で
す。logo.png は、ロゴ画像です。
5 / 11
3.
「index.html」を修正するにあたり、修正対象の index.html ファイルを開きます。
手順 1 でダウンロードした「3.書き出し形式追加用の index.html」中の、「Web 公開用」「ス
コア用」「SCORM1.2 用」「SCORM2004 用」のフォルダ配下にある index.html ファイルを
編集していきます。
4.
どのフォルダの index.html ファイルを利用するかは、作成したいコンテンツ種
別に合わせて選択してください。
index.html を加工します。
加工の素材として、手順 1 でダウンロードした「2.index.html 加工用の sample.html＞上
部ヘッダー（またはサイドバー）」フォルダの「sample1.html」「sample2.html」を利用します。
本書では「上部ヘッダー」の例で説明します。
（サイドバーでも手順は同じです）
修正箇所は、2 か所です（次ページ参照）
。
6 / 11
(ア) index.html の<head>タグの、<style type="text/css">～</style>を削除し、
sample1.html にある javascript を追記します。
(イ) index.html の、<body> <div id="content">を削除し、削除した位置に
sample2.html の内容を追記します。
「Web 公開用」の例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta property="og:title" content="<!--<$TITLE>-->" />
<meta property="og:type" content="website" />
<meta property="og:description" content="" />（ア）削除し「sample1.html」の内容をコピー
<title><!--<$TITLE>--></title>
<!--<$CONTENTS_PASSWORD>-->
----- 上部ヘッダー「sample1.html」の例----
<!--<$MOBILEREDIRECT>-->
<script type="text/javascript">
<script type="text/javascript" src="swfobject/swfobject.js"></script>
function myOnLoad(){
<script type="text/javascript" src="swfaddress/swfaddress.js"></script>
windowResize();
<script type="text/javascript" src="flipper3js/flipper3util.js"></script>
window.onresize = windowResize;
}
<style type="text/css">
(省略)
/* hide from ie on mac */
winSizeObj.width = winWidth;
html {
winSizeObj.height = winHeight;
height: 100%;
return winSizeObj;
overflow: hidden;
}
}
</script>
#content {
height: 100%;
（イ）削除し「sample2.html」の内容をコピー
}
/* end hide */
----- 上部ヘッダー「sample2.html」の例----
body {
height: 100%;
<body marginheight="0" marginwidth="0"
leftmargin="0" topmargin="0" onLoad="myOnLoad();"
style="overflow:hidden;">
margin: 0;
padding: 0;
background: #FFFFFF;
font: 76% Arial, sans-serif;
<!--ヘッダ-->
<div style="width:100%;height:40px;position:
absolute;top:0;left:0;">
}
</style>
<!--<$GOOGLE_ANALYTICS_INIT>-->
<!--<$TWITTER_TIMELINE>-->
<iframe width="100%" height="40" src="header.html"
hspace="0" vspace="0" marginheight="0"
marginwidth="0" border="0" frameborder="0"
framespacing="0"></iframe>
</div>
<!--ヘッダ-->
</head>
<body>
<!--ブック-->
<div id="content">
<div id="content" style="position:absolute;">
<h1><!--<$TITLE>--></h1>
・・・（略）
7 / 11
5.
修正が完了したら、html ファイルを保存して閉じます。
6.
必要なファイルをまとめて、「書き出し形式」ファイルを作成します。
具体的には、手順 2 で加工したヘッダーと、手順 4 で加工した index.html 類とを、１つのフ
ォルダに集めて ZIP 圧縮します（ZIP のファイル名は任意）。
「サイドバー」＋「Web公開用index.html」の例
手順 2 で加工したヘッダー
ZIP 圧縮
手順 4 で加工した index.html
「上部ヘッダー」＋「SCORM1.2 用index.html類」の例
手順 2 で加工したヘッダー
ZIP 圧縮
手順 4 で加工した index.html 類
7.
手順 4 で SCORM1.2 用、SCORM2004 用の index.html を利用する場合
は、同フォルダに同梱されている「imsmanifest.xml」や
「lwScoConfig.xml」も一緒に圧縮します。
圧縮時は、ZIP ファイルを解凍したときに、解凍フォルダ直下にファイル類が
できるように圧縮してください。
例えば「○○フォルダ」にファイル群を集めた場合に、Windows 標準機能で「○
○フォルダ」を選択して圧縮してしまうと、解凍時に「○○フォルダ＞○○フ
ォルダ＞header.html、logo.png」のように余計なフォルダが間に入り、正しく
動作しません。
FLIPPER U 4.1.3 以降を起動し、ヘッダーを適用したいブックの「書き出し画面」を開きま
す。（以下は、ホーム画面書き出しボタンから表示している例）
⇒
8.
左下の【 設定を追加 】をクリックします。
8 / 11
9.
手順 6 で作成した ZIP を選択します。
10. 「タイトル」「詳細」「タイプ」を設定します。
タイトル、詳細は、後で見てわかりやすいよう入力します。
用途や、Web 公開用なのか？（スコア機能付き？、SCROM1.2？、SCORM2004？）
などをメモします。
タイプとして以下を選択します。
作成した書き出し形式ファイルに適合したタイプを選択してください。
Web 公開用 → normal
Web 公開用 ※ スコア機能 → score
SCORM1.2、SCORM2004 → scorm
11. 書き出し形式が追加されます。
12. 追加した書き出し形式を選択してブックを書き出します。
または、オンラインストレージにアップロードします。
13. デジタルブックを起動して、想定通りに表示されるか確認します。
上部ヘッダーの例）
サイドバーの例）
9 / 11
書き出し形式を削除するには、削除したい書き出し形式を選択して、下部のごみ箱
ボタンをクリックします。
ひな形の index.html には変数項目が含まれています。index.html を編集するときに
は、変数項目を変更しないようにしてください。
（<!--<$GOOGLE_ANALYTICS_INIT>--> <!--<$GOOGLE_ANALYTICS_SEND>-->
<!--<$ISTRACKING>--> <!--<$TRACKINGCODE>--> ・・・など）
10 / 11
文書に関する情報
お問合せ窓口
ご購入後の製品に関してご不明な点は、以下の窓口までお問い合わせください。
E-mail
：support＠logosware.com
TEL
：03-5818-8011
FAX
：03-5818-8012
受付時間
：10:00～18:00（土日、祝祭日は除く）
更新履歴
第1版
2012 年 9 月 3 日
第2版
2013 年 10 月 15 日 書き出し形式追加について追記
第3版
2014 年 3 月 20 日 FLIPPER U4.1.4 リリースに伴い改修
参照（関連文書）
なし
11 / 11
© Copyright 2024 ExpyDoc
