# 付録

# チャプター領域のデザインをカスタマイズする

チャプターの構造は以下の通りです。

<div id="..."><!-- チャプター領域のdiv要素 -->
  <div class="uliza-chapter">
    <div class="item">
      <div class="thumbnail"></div>
      <div class="description" data-start-time="start-time"></div>
    </div>
    <!-- <div class="item"> が並ぶ -->
  </div>
</div>

要素を表すclassは以下の通りです。

uliza-chapter: チャプター領域の中に表示するチャプターの実体です。
item: チャプターの項目です。
thumbnail: 項目内のサムネイルです。
description: 項目内のテキストです。
title: 項目内のタイトルです。
start-time: 項目内の再生開始位置です。

状態を表すclassは以下の通りです。

has-started: プレイヤーが再生中の状態です。class「uliza-chapter」と同じ要素に付きます。
linearad-has-started: プレイヤーが広告再生中の状態です。class「uliza-chapter」と同じ要素に付きます。
lock: プレイヤーが画面ロックをしている状態です。class「uliza-chapter」と同じ要素に付きます。
selected: 選択中の項目です。class「item」と同じ要素に付きます。
hover: マウスカーソルがホバー中の項目です。class「item」と同じ要素に付きます。

「ユーザーガイド (opens new window)」のチャプター領域の表示例に示すCSSはソースファイルulizahtml5-chapter.cssをご確認ください。カスタマイズする場合は十分な動作検証をしてください。

# プレゼンテーション領域のデザインをカスタマイズする

プレゼンテーションの構造は以下の通りです。

<div id="..."><!-- プレゼンテーション領域のdiv要素 -->
  <div class="uliza-presentation">
    <div class="toolbar">
      <div class="prev-chapter toolbar-button"></div>
      <div class="next-chapter toolbar-button"></div>
      <div class="page-number"></div>
      <div class="spacer"></div>
      <div class="shrink-page toolbar-button"></div>
      <div class="page-enlargement"></div>
      <div class="enlarge-page toolbar-button"></div>
    </div>
    <div class="document-area">
      <canvas class="document-layer"></canvas>
      <div class="annotation-layer"></div>
    </div>
  </div>
</div>

要素を表すclassは以下の通りです。

uliza-presentation: プレゼンテーション領域の中に表示するプレゼンテーションの実体です。
toolbar: ツールバーです。
toolbar-button: ツールバーのボタン類です。
prev-chapter: 前チャプターボタンです。
next-chapter: 次チャプターボタンです。
page-number: 現在のページ番号です。
spacer: 現在のページ番号と縮小ボタンのスペースです。
shrink-page: 縮小ボタンです。
page-enlargement: 現在の拡大率です。
enlarge-page: 拡大ボタンです。
document-area: 資料を表示する領域です。余白を含みます。
document-layer: 資料を表示する領域です。
annotation-layer: 資料のリンク用の領域です。

状態を表すclassは以下の通りです。

disabled: 無効中のツールバーのボタンです。class「toolbar-button」と同じ要素に付きます。
fit: 資料のサイズが資料を表示する領域のサイズと同じ状態です。class「document-area」と同じ要素に付きます。
has-started: プレイヤーが再生中の状態です。class「uliza-presentation」と同じ要素に付きます。
letter: 資料の幅が資料を表示する領域の幅より大きい状態です。class「document-area」と同じ要素に付きます。
linearad-has-started: プレイヤーが広告再生中の状態です。class「uliza-presentation」と同じ要素に付きます。
lock: プレイヤーが画面ロックをしている状態です。class「uliza-presentation」と同じ要素に付きます。
hover: マウスカーソルがホバー中のツールバーのボタンです。class「toolbar-button」と同じ要素に付きます。
over: 資料のサイズが資料を表示する領域のサイズより大きい状態です。class「document-area」と同じ要素に付きます。
pillar: 資料の高さが資料を表示する領域の高さより大きい状態です。class「document-area」と同じ要素に付きます。

「ユーザーガイド (opens new window)」のプレゼンテーション領域の表示例に示すCSSはソースファイルulizahtml5-presentation.cssをご確認ください。カスタマイズする場合は十分な動作検証をしてください。

# 字幕リストのデザインをカスタマイズする

字幕リストの構造は以下の通りです。

<div id="..."><!-- 字幕リストのdiv要素 -->
  <div class="uliza-subtitle-list">
    <div class="header">
      <div class="search-area uliza-icon-search">
        <input class="search-input" placeholder="search"></input>
      </div>
      <div class="track-area uliza-icon-subtitles">
        <span class="select-track"></span>
        <div class="track-list">
          <div class="track-item"></div>
          <!-- <div class="track-item"> が並ぶ -->
        </div>
      </div>
    </div>
    <div class="cue-list-area">
      <div class="cue-list">
        <div class="cue" data-start-time="start-time"></div>
        <!-- <div class="cue" data-start-time="start-time"></div> が並ぶ -->
      </div>
    </div>
    <div class="auto-scroll-button"></div>
  </div>
</div>

要素を表すclassは以下の通りです。

uliza-subtitle-list: 字幕リストの実体です。
header: 字幕リストのヘッダー領域の項目です。
search-area: ヘッダーの検索窓の領域です。
search-input: 検索窓の入力領域です。
search: 入力領域のプレースホルダーの文言です。
track-area: ヘッダーの字幕切り替えの領域です。
select-track: 現在選択されている言語のラベルです。
track-list: 切り替え可能な言語のラベルのリストです。
track-item: 切り替え可能な言語のラベルです。
cue-list-area: 字幕のリストの領域です。
cue-list: 字幕のリストです。
cue: 字幕です。
auto-scroll-button: 自動スクロールボタンです。

状態を表すclassは以下の通りです。

has-started: プレイヤーが再生中の状態です。class「uliza-subtitle-list」と同じ要素に付きます。
linearad-has-started: プレイヤーが広告再生中の状態です。class「uliza-subtitle-list」と同じ要素に付きます。
lock: プレイヤーが画面ロックをしている状態です。class「uliza-subtitle-list」と同じ要素に付きます。
auto-scroll: 自動スクロールする状態です。class「uliza-subtitle-list」と同じ要素に付きます。
open: 切り替え可能な言語ラベルのリストが表示されている状態です。class「header」と同じ要素に付きます。
active: 表示中の字幕です。class「cue」と同じ要素に付きます。
hover: マウスカーソルがホバー中の項目です。class「track-item」とclass「cue」と同じ要素に付きます。
non-hit: 検索の条件に一致しなかった項目です。class「cue」と同じ要素に付きます。

「ユーザーガイド (opens new window)」の字幕リストの表示例に示すCSSはソースファイルulizahtml5-subtitle-list.cssをご確認ください。カスタマイズする場合は十分な動作検証をしてください。

# マルチアングルリストのデザインをカスタマイズする

マルチアングルリストの構造は以下の通りです。

<div id="..."><!-- マルチアングルリストのdiv要素 -->

  <div class="uliza-multi-angle-container">
    <div class="wrapper">
      <div class="uliza-multi-angle-list">
        <div class="item">
          <canvas class="angle"></canvas>
          <div class="poster"></div>
          <div class="cover"></div>
          <span class="label"></span>
        </div>
        <!-- <div class="item"> が並ぶ -->
      </div>
      <div class="uliza-multi-angle-cover">
        <span class="message"></span>
      </div>
    </div>
  </div>
</div>

要素を表すclassは以下の通りです。

uliza-multi-angle-container: マルチアングルリストの実体です。
uliza-multi-angle-list: 項目の一覧です。
item: アングルの項目です。
angle: 映像です。
poster: ポスター画像です。
cover: ホバー時のカバーです。また、ラベルの背景です。
label: 各項目のラベルです。また、選択時の枠です。
uliza-multi-angle-cover: 操作不可時のカバーです。
message: 操作不可時の文言です。

状態を表すclassは以下の通りです。

has-started: プレイヤーが再生中の状態です。class「uliza-multi-angle-container」と同じ要素に付きます。
cannot-operate: マルチアングルリストを操作できない状態です。class「uliza-multi-angle-container」と同じ要素に付きます。
selected: 選択中の項目です。class「item」と同じ要素に付きます。
hover: マウスカーソルがホバー中の項目です。class「item」と同じ要素に付きます。

「ユーザーガイド (opens new window)」のマルチアングルリストの表示例に示すCSSはソースファイルulizahtml5-multi-angle.cssをご確認ください。カスタマイズする場合は十分な動作検証をしてください。

← 実装方法改版履歴 →