本棚表示キット

第 1 章

はじめに ... 3

1-1.本棚表示キットとは？ ... 4 1-2.動作環境（閲覧側） ... 5

第 2 章

基本的な使い方 ... 6

2-1.テンプレートの構成 ... 7 2-2.作成手順 ... 11 2-3.コンテンツの格納 ... 12 2-4. 本棚表示の設定方法 ... 13 2-5.リスト表示の設定方法 ... 16 2-6.コンテンツ詳細ページの設定方法 ... 19 2-7. メニューバーのロゴの変更方法 ... 23 2-8.ページタイトルの設定 ... 25

第 3 章

カスタマイズ・デザイン変更 ... 27

3-1.本棚の表紙クリックで 直接コンテンツを開く場合... 28 3-2.ヘッダーを追加する ... 29 3-3.ヘッダーのデザインを変更する ... 31 3-4.バナーを追加する ... 33 3-5.本棚のデザインを変更する ... 35 3-6.CSS 構成について ～高度なカスタマイズのために～ ... 40

第４章 マルチユースでの活用方法 ... 41

4-1.作成した本棚ファイルの公開方法 ... 42 4-2.Web ページへの埋め込み方法 ... 43 4-3.パソコン閲覧用 CD・DVD の作り方 ... 44 4-4.モバイルアプリの作り方（※将来記述予定） ... 45

お問い合わせ・更新履歴 ... 46

お問い合わせ窓口 ... 47 更新履歴 ... 48

1-1. 本棚表示キットとは？

本棚表示キットは、ロゴスウェアのコンテンツ作成ソフト（FLIPPER U・STORM Maker・THiNQ Maker）で作成したコンテンツをデジタル本棚に並べて表示するための HTML ファイル群です。 本棚表示キットを利用することで、１から HTML・CSS を作成することなく、コンテンツを並べたデジ タル本棚を作成できます。 本棚表示キットを利用して作成したデジタル本棚は、パソコン、スマートフォン、タブレット等のマル チデバイスで表示できます。 本棚表示キット一式は下記から入手頂けます。 http://download.logosware.com/soft/bookshelf-kit/dl/bookshelf-kit.zip  本棚表示キットの利用例  _{最新カタログとバックナンバーの掲載に}  広報紙とアンケートなどに  _{必要なマニュアルをセットに}  セミナーの録画と資料の掲載に

1-2. 動作環境（閲覧側）

本棚表示キットは動作環境（閲覧側）として以下を推奨しています。

パソコン

Windows Macintosh OS Windows 8、8.1 ※₁ Windows 7 Windows Vista Windows XP ※₂ Mac OS X 10.4、10.5、10.6 日本語版 ブラウザ Internet Explorer 8 以上 ※₃ Firefox 3 以上 Google Chrome Firefox 3 以上 Safari 4 以上 Google Chrome ※１ Windows8 特有のインタフェース（メトロ版）でもご覧いただけますが、 万一想定外の動作をした場合は、デスクトップモードで閲覧してください。 ※２ Windows XP マイクロソフト社サポート終了に関連した情報はこちらをご覧ください。 ※3 Internet Explorer 8 以下の場合、本棚の表示が崩れることがあります。

スマートフォン／タブレット

対応機種 ・iPhone(iPhone 4 以上) : iOS4.3 以上 ・iPad : iOS4.3 以上 ・Android : Android2.2 以上

・Kindle Fire (Kindle Fire 2nd Generation, Kindle Fire HD) ※標準ブラウザでの閲覧を前提とします。Android 対応機種リストはこちらをご覧ください。

2-1. テンプレートの構成

本棚表示キットは以下の 3 種類の画面で構成されています。 1. 本棚表示 2. リスト表示 3. コンテンツ詳細ページ

1. 本棚表示

コンテンツの表紙、タイトルが本棚に並んで表示されます。

2. リスト表示

コンテンツの表紙、タイトル、説明文がリスト形式で表示されます。

 _{「本棚」をクリックすると「１．本棚表示」に切り替わります}  「カタログを開く」をクリックするとコンテンツが開きます

3. コンテンツ詳細ページ

コンテンツの表紙、タイトル、ページ数、説明文、コンテンツを開くボタン等が表示されます。

 _{「戻る」をクリックすると「１．本棚表示」に切り替わります}  「カタログを開く」をクリックするとコンテンツが開きます

本棚表示キットのファイル構成

本棚表示キットは以下のファイルで構成されています。

本棚表示用ファイル

リスト表示用ファイル

コンテンツ詳細ページ用ファイル

コンテンツ格納用フォルダ

2-2. 作成手順

1. デジタル本棚を作成する前に

 _{本棚に並べるコンテンツを用意しておいてください。}  作成には html の知識が多少必要です。

2. デジタル本棚を作成する

以下の流れでデジタル本棚を作成します。詳細は、次のページから説明しています。 1. コンテンツを格納する 2. 本棚表示の設定をする 3. リスト表示の設定をする 4. コンテンツ詳細ページの設定をする 5. メニューバーのロゴを変更する

3. 作成したデジタル本棚を公開する

デジタル本棚 HTML テンプレートを利用して作成したデジタル本棚は、Web サイトなどに載せて利用 するオンライン利用、CD や DVD に焼いて配布するオフライン利用の両方に対応しています。 詳細は、第４章「マルチユースでの活用方法」で説明しています。  パソコン閲覧用 CD・DVD の作成にはオフライン閲覧キット（別売り）が必要です。

2-3. コンテンツの格納

本棚に並べたいコンテンツを本棚表示キットの中にある「contents」フォルダの中に入れます。  _{本棚に並べたい順に「book1」～「book8」とフォルダ名を連番で付けておくと、} その後の設定作業が少し楽です。  フォルダ名は半角英数字にしてください。日本語などの全角文字は使用しないようご注意ください。

＜本棚に並べたいコンテンツ＞

＜本棚表示キット＞

入れる

2-4. 本棚表示の設定方法

各パーツの名称

 1.本棚タイトル、2.コンテンツタイトル、3.コンテンツサムネイルの設定方法を説明します

1 本棚タイトル

2 コンテンツ

タイトル

3 コンテンツ

サムネイル

1. 本棚表示キット内の index.html を編集用ソフトで開く

本棚表示キットの中にある「index.html」が本棚表示画面のファイルです。 HTML ファイルを編集できるソフトで index.html を開いてください。  _{Windows にインストールされている「メモ帳」や「ワードパット」} は使用しないようにご注意ください。  フリーソフトの「TeraPad」や「Crescent Eve」などのエディター は使用して大丈夫です。 ▼index.html の内容

本棚タイトル

コンテンツタイトル

コンテンツサムネイル

2. 本棚タイトルを設定する

h2 タグで囲われた文字を必要に応じて変更してください。

3. コンテンツタイトルを設定する

1. リンク先のコンテンツ詳細ページを指定してください。 2. a タグ（class=”ctitle”）で囲われた文字を変更してください。

4. コンテンツサムネイルを設定する

img タグ（class=”thumbnail”）内の src でコンテンツサムネイルに指定したい画像ファイルを指定し てください。contents フォルダ内に格納したコンテンツの中にはサムネイル用の画像が入っているので それを指定してください。  _{contents フォルダの中に格納したコンテンツフォルダ名が book1～book8 の場合は} すでに指定された状態になっています。（FLIPPER U コンテンツの場合）

＜参考：コンテンツの表紙画像のパス＞

 FLIPPER U コンテンツの場合：contents/コンテンツフォルダ名/page1/thumbnail.jpg  _{STORM コンテンツの場合：contents/コンテンツフォルダ名/view.jpg}  THiNQ コンテンツの場合：contents/コンテンツフォルダ名/thumbnail.png

2-5.リスト表示の設定方法

各パーツの名称

 ここでは 1. コンテンツサムネイル、2.コンテンツタイトル、3.説明文、 4.コンテンツを開くボタンの設定方法を説明します

1

2

コンテンツタイトル

3

コンテンツサムネイル

説明文

4

コンテンツを開くボタン

1. 本棚表示キット内の index_list.html を編集用ソフトで開く

本棚表示キットの中にある「index_list.html」が リスト表示画面のファイルです。 HTML ファイルを編集できるソフトで index_list.html を開いてください。  _{Windows にインストールされている「メモ帳」や「ワードパット」} は使用しないようにご注意ください。  フリーソフトの「TeraPad」や「Crescent Eve」などのエディター は使用して大丈夫です。 ▼index_list.html の内容

コンテンツを開くボタン

コンテンツタイトル

コンテンツサムネイル

説明文

2.コンテンツサムネイルを設定する

img タグ（class=”thumbnail”）内の src でコンテンツサムネイルに指定したい画像ファイルを指定し てください。contents フォルダ内に格納したコンテンツの中にはサムネイル用の画像が入っているので それを指定してください。  contents フォルダの中に格納したコンテンツフォルダ名が book1～book8 の場合はすでに指定さ れた状態になっています。（FLIPPER U コンテンツの場合）

＜参考：コンテンツの表紙画像のパス＞

 FLIPPER U コンテンツの場合：contents/コンテンツフォルダ名/page1/thumbnail.jpg  _{STORM コンテンツの場合：contents/コンテンツフォルダ名/view.jpg}  THiNQ コンテンツの場合：contents/コンテンツフォルダ名/thumbnail.png

3. コンテンツタイトルを設定する

h3 タグで囲われた文字を変更してください。

4. 説明文を設定する

コンテンツタイトル下の p タグで囲われた文字を変更してください。

5. コンテンツを開くボタンを設定する

1. リンク先のコンテンツを指定してください。 2. a タグ（class=” btn”）タグで囲われた文字を適宜変更してください。  ボタンのアイコンは i タグのクラス指定により変更可能です。

2-6.コンテンツ詳細ページの設定方法

各パーツの名称

 ここでは 1. コンテンツサムネイル、2.コンテンツタイトル、3. コンテンツを開くボタン、 4. 説明文の設定方法を説明します

1

2

コンテンツタイトル

4

コンテンツサムネイル

説明文

3

コンテンツを開くボタン

1. 本棚表示キット内の intro_book1.html を編集用ソフトで開く

本棚表示キットの中にある「intro_book1（～8）.html」が コンテンツ詳細ページのファイルです。（※） HTMLファイルを編集できるソフトでintro_book1.htmlを開いてください。  _{Windows にインストールされている「メモ帳」や「ワードパット」} は使用しないようにご注意ください。  フリーソフトの「TeraPad」や「Crescent Eve」などのエディター は使用して大丈夫です。 ※コンテンツ詳細ページのファイルは「intro_book1（～8）.html」が初期設定されていますが、ファ イル名は適宜変更可能です（半角英数のみ）。また、コンテンツ数に合わせてファイルの増減を自由に 行ってください。  _{ファイル名を変更した際には、index.html で指定しているリンク先を合わせて変更してください。}

▼intro_book1.html の内容

2.コンテンツサムネイルを設定する

img タグ（class=”thumbnail”）内の src でコンテンツサムネイルに指定したい画像ファイルを指定してく ださい。contents フォルダ内に格納したコンテンツの中にはサムネイル用の画像が入っているのでそれを 指定してください。  contents フォルダの中に格納したコンテンツフォルダ名が book1～book8 の場合は すでに指定された状態になっています。（FLIPPER U コンテンツの場合）

＜参考：コンテンツの表紙画像のパス＞

コンテンツを開くボタン

コンテンツタイトル

コンテンツサムネイル

説明文

3. コンテンツタイトルを設定する

h3 タグで囲われた文字を変更してください。

4. コンテンツを開くボタンを設定する

1. リンク先のコンテンツを指定してください。 2. a タグ（class=” btn”）タグで囲われた文字を適宜変更してください。  _{ボタンのアイコンは i タグのクラス指定により変更可能です。}

5. 説明文を設定する

div（class=” info”）内の p タグで囲われた文字を変更してください。

2-7. メニューバーのロゴの変更方法

 _{ロゴ画像名は「logo.png」にしてください。}  高さ 22 ピクセルが推奨サイズです。

＜logo.png 以外のファイル名の画像を使う場合＞

1. 本棚表示キットの中にある「index.html」と「index_list.html」を HTML ファイルを編集できるソ フトで開いてください。 2. div（id=” mainmenu”）＞h1＞img の src のファイル名を変更してください。 3. 必要に応じて height の数字を変更してください。

logo.png

＜ロゴ画像＞

＜本棚表示キット＞

入れる

2-8.ページタイトルの設定

ブラウザのタブなどに表示されるページタイトルの設定をしましょう。

1. 各 HTML ファイルを編集用ソフトで開く

title タグで囲われた文字を変更してください。

3-1. 本棚の表紙クリックで

直接コンテンツを開く場合

本棚の表紙をクリックした際、コンテンツ詳細ページではなく直接コンテンツを開く場合は、 index.html 内のコンテンツタイトルとコンテンツサムネイル画像のリンク先を変更してください。 また、target=”_blank”の指定を追加してください。

例：book1 を直接開く場合

コンテンツタイトル部分： コンテンツサムネイル部分：

リンク先ファイル名

<a class=”ctitle” href=”contents/book1/index.html” target=”_blank”>コンテンツタイトル</a>

3-2. ヘッダーを追加する

ヘッダーの追加方法

各 html ファイル内の body タグと div（class=”container”）の間に下記のコードを追加してください。 ▼ヘッダー用のコード index.html ファイル内にはコメントアウトして記述してあるので、コメントアウトを外してご利用くださ い。（コードを囲んでいる「<!--」と「-->」を削除するとコメントアウトが外れます） <div id=”header”> <h1>ヘッダーのタイトル</h1> </div>

3-3. ヘッダーのデザインを変更する

ヘッダーのデザインは下記の CSS ファイルで指定されています。 適宜、CSS および HTML を書き換えてデザインを変更してください。 1. css/shelf-theme.css（全デバイスに適用される CSS） 2. css/x-small.css（幅 320 ピクセル以下のデバイスにのみ適用される CSS） css/shelf-theme.css css/x-small.css

css/shelf-theme.css の#header{}内の background 部分の色指定を変更する。

文字色を変更する

css/shelf-theme.css の#header{}内の color 部分の色指定を変更する。

 色は 16 進数で指定してください。

3-4.バナーを追加する

バナーの追加方法

バナーを表示させたい箇所に下記のコードを追加してください。 ▼バナー用のコード index.html ファイル内にはコメントアウトして記述してあるので、コメントアウトを外してご利用くださ い。（コードを囲んでいる「<!--」と「-->」を削除するとコメントアウトが外れます）  _{バナー画像は全デバイス同じサイズで表示されます。}  幅 300px 以下の画像をお使いください。

<div class="banner clearfix"> <ul>

<li><a href="リンク先 URL" target="_blank"><img src="img/banner1.png" alt="バナー名"></a></li> <li><a href="リンク先 URL" target="_blank"><img src="img/banner2.png" alt="バナー名"></a></li> <li><a href="リンク先 URL " target="_blank"><img src="img/banner3.png" alt="バナー名"></a></li> </ul>

3-5.本棚のデザインを変更する

本棚背景デザインの種類

本棚の背景デザインは２種類あります。それぞれ、本棚タイトル背景と本棚背景を変更できます。 1. おすすめ本棚（上段） 2. 通常本棚（下段）

本棚デザインの変更方法

img フォルダの中の画像を差し替えることで本棚の背景デザインを変更できます。

おすすめ本棚

通常本棚

本棚タイトル背景

本棚背景

本棚デザインに使用する画像

img フォルダ内の本棚デザインにかかわる画像は下記の６ファイルです。 1. おすすめ本棚タイトル背景……img/bg_shelf_title_recommendation.png 2. おすすめ本棚背景……img/bg_shelf_s_recommendation.png（スマホ用） img/bg_shelf_m_recommendation.png（タブレット・PC 用） 3. 通常本棚タイトル背景……img/bg_shelf_title.png 4. 通常本棚背景……img/bg_shelf_s.png（スマホ用） img/bg_shelf_m.png（タブレット・PC 用）

2

1

3

4

4

各画像のサイズ（おすすめ本棚・通常本棚とも共通）

各画像は表示するサイズの３倍のサイズで作成します。  高解像度のスマートフォン、タブレットでの表示のために３倍サイズで作成します。  等倍で作成した場合、スマートフォン・タブレットでぼやけた見え方になるのでご注意ください。  _{背景画像は repeat 指定で縦横繰り返し表示しています。}

表示サイズ（高さ）

■本棚タイトル背景：可変（参考：テキスト１行で 34 ピクセル程度） ■本棚背景全体（１段）：スマホ用…146 ピクセル／タブレット・PC 用…200 ピクセル

■本棚タイトル背景：模様の区切りがいいサイズであればサイズ問わず ■本棚背景全体（１段）：スマホ用…438 ピクセル／タブレット・PC 用…600 ピクセル 背面：スマホ用…402 ピクセル／タブレット・PC 用…552 ピクセル 天板上側：スマホ用…18 ピクセル／タブレット・PC 用…24 ピクセル 天板正面：スマホ用…18 ピクセル／タブレット・PC 用…24 ピクセル

カスタマイズ例

その１：無地

本棚背景を画像 A のようなものにすると、本棚の表示は右の図のようになります。  画像 A のように模様がない背景の場合、横幅は 1px あれば十分です。 ＜画像 A＞ ＜本棚の表示＞ ３分の１に 縮小表示 ＆ XY 軸方向に 繰り返し表示

その２：模様付き・１段ずつ色違い

本棚背景を画像 B のようなものにすると、本棚の表示は右の図のようになります。

本棚背景デザインカスタマイズ用ファイルの提供

本棚背景色やテクスチャを気軽にカスタマイズするためのソースファイルをご用意しています。 本棚表示キットに同梱されている「bookshelf_background.fw.png」をご利用ください。  _{編集には Adobe Fireworks が必要です。} ＜画像 B＞ ＜本棚の表示＞ ３分の１に 縮小表示* ＆ XY 軸方向に 繰り返し表示 *マニュアルの表示スペースの都合上、説明図が３分の１になっていませんが 実際の画面表示は３分の１に縮小されます。 本棚っぽい立体感を 出すためのレイヤー 色・テクスチャを

3-6.CSS 構成について

～高度なカスタマイズのために～

CSS の構成は下記の通りです。

 _{import.css ……以下の CSS 読み込み用。html ファイルはこの CSS を読み込む。}  _{normalize.css ……ブラウザスタイルのリセット用。}

 _{font.css ……アイコン Web フォント指定用。（Glyphicons Halflings 利用）}  shelf-theme.css ……本棚デザインの基本 CSS。  _{x-small.css ……319px 以下の表示調整用。iframe での細いエリアへの表示などに。}  _{medium.css ……670px 以上の表示調整用。タブレット・PC 表示用。}

レスポンシブ、ブレークポイントについて

 _{表示幅に合わせて表示を調整するレスポンシブな作りとなっています。}  _{幅 320～669px までをスマートフォン向け、670px 以上をタブレット・PC 向けのスタイルとしてい} ます。319px 以下のサイズは iframe で細いエリアに表示するためのスタイルとしています。

カスタマイズする際には

 デザインをカスタマイズする際は、別途 customize.css などを作成してスタイルを上書きしてくださ い。各 CSS ファイルを直接変更してもかまいません。  お客さまのメイン閲覧対象デバイスに応じてブレークポイントを変更してもかまいません。ブレークポ イントは import.css、shelf-theme.css、x-small.css、medium.css の４ファイル内で指定してあり ます。

注意事項

 font.css の２～６行目はフォント利用のためのライセンス表記なので削除しないでください。  デザインを自由にカスタマイズするためには CSS の知識が必要です。

4-1.作成した本棚ファイルの公開方法

本棚表示キットを利用して作成したデジタル本棚は、Web サイトなどに載せて利用するオンライン利用、 CD や DVD に焼いて配布するオフライン利用の両方に対応しています。

1. オンラインで利用する

オンラインで利用するためには FTP ソフトなどでサーバーにアップロードしてください。 表示には以下の２種類の方法があります。 1. サーバーにアップロードしてそのまま公開する（デジタル本棚をそのまま表示する） 2. アップロードしたデジタル本棚を既存の Web サイトに埋め込んで表示する（→項目 4-2 で解説）  _{オンライン公開したデジタル本棚はパソコン、スマートフォン、タブレット等のマルチデバイスで} 閲覧できます。

2. オフラインで利用する

オフラインで利用するためには以下の２種類の方法があります。 1. パソコン閲覧用の CD・DVD を作成して配布する（→項目 4-3 で解説） 2. スマートフォン・タブレット用のアプリを作成して配布する（※将来対応予定）  _{パソコン閲覧用 CD・DVD の作成にはオフライン閲覧キット（別売り）が必要です。}

4-2.Web ページへの埋め込み方法

作成した本棚ファイルは既存の Web サイトやブログ記事に埋め込んで利用できます。

埋め込み方法

1. 作成した本棚ファイル一式をサーバーへアップロードする 2. Web サイトやブログ記事の埋め込みたい部分に iframe タグを追加する

例：

アップロード先が「http://www.xxxxx/bookshelf01/」の場合、埋め込みタグは以下のようになります。 コンテンツの表示サイズは width と height で指定してください。スクロールバーが出ないサイズを <iframe src="http://www.xxxxx/bookshelf01/" style="width:550px; height:400px;"></iframe>

4-3.パソコン閲覧用 CD・DVD の作り方

作成した本棚ファイルは CD や DVD に焼いてオフライン閲覧に利用できます。  パソコン閲覧用 CD・DVD の作成にはオフライン閲覧キット（別売り）が必要です。  _{オフライン閲覧キットの仕組みや使い方についての詳細は、オフライン閲覧キットのマニュアルを} ご覧ください。

CD・DVD 作成方法

1. 作成した本棚ファイル一式をオフライン閲覧キットの中に格納する 2. １を CD や DVD に焼く

オフライン閲覧キットへの格納方法

オフライン閲覧キットの「contents」フォルダの中に作成した本棚ファイルをすべて入れてください。 ＜オフライン閲覧キット＞ ＜作成した本棚ファイル一式＞ オフライン閲覧 キット 作成した本棚ファイル一式 入れる 焼く CD・DVD

4-4.モバイルアプリの作り方

（※将来記述予定）

作成した本棚ファイルをモバイルアプリ作成に利用するための方法は将来記述する予定です。

お問い合わせ窓口

製品に関してご不明な点などございましたら、お気軽にお問い合わせください。 製品名： 本棚表示キット URL： http://suite.logosware.com/flipper-maker/developer/bookshelf-kit/ E-mail： [email protected] TEL： 03-5818-8011 受付時間： 10:00～18:00 （土日、祝祭日は除く） ロゴスウェア株式会社 http://www.logosware.com 【東京オフィス】〒110-0016 東京都台東区台東 4-13-21 TOWA SKY BLDG3F

更新履歴

版数 更新日／変更内容

第１版 2014 年 12 月 12 日 新規