オープン型電子出版 UI（操作／ナビゲーション）仕様案
1. 概要
オープン型電子出版 DRM / UI における UI は、DRM モジュールを初期化し、DRM モジュールにログインする。その後ネットワークから取得したコンテンツを UI のコンテンツ一覧画面に表示させ、コンテンツを選択すると DRM の複合化を行い、コンテンツ閲覧画面を表示する。

1.1

対応コンテンツ、フォーマット対応コンテンツは EPUB 形式である。
UI では WebKit を使用して EPUB 文書を表示しているため, xhtml 形式で記述した htmlタグの殆どの形式を表示することができる。

1.2

動作条件

・ Android2.2 以降の AndroidOS 搭載端末
・ microSD カード
・ ネットワークが利用可能であること

1.3

電子書籍リーダーの共通UI 機能要件

検証結果から、電子書籍リーダーには以下の項目の UI が共通のものとして必要であると考えられる。表 1 に、機能要件の一覧を示す。

-1-

表 1 オープン型電子出版 UI（操作／ナビゲーション）機能要件一覧
機能カテゴリ
書籍管理備考機能
アイコン

多くのリーダーと同様、書籍管理にはアイコン表示とリスト表示の 2 種類を切り替えて利用出来るようにする。切り替えはタブで行う。
どちらの表示でも、以下のような機能を有するのが好ましい。
・ソート機能書籍名、著者名、出版日、購入日、既読／未読／読み掛け、カテゴリ（小説,漫画,等）の情報で、ユーザーが自由に並び順を変えられる。
・並び順の任意変更
ソートとは違い、ユーザーが自由に書籍を並び変えられる。書籍の表紙（アイコン）をドラックすることでリスト簡単に行えるものとする。
・グループ化
ユーザーが自由に書籍をグループ化出来るようにする。また、アイコン／リスト表示では、特定のグループのみを表示することが可能とする。
・選択表示
しおりやハイライトをつけた書籍のみリストアップする。
・メタデータ表示
書籍タイトル、著者、要約、しおりの有無。また、読みかけの書籍については、読み進んだページ数の割合（%）等を表示する。

閲覧メニュー表示

文書表示中に画面上部をタップすることでメニューを表示する。また、このときページジャンプ用のスライダーの表示も行う。

目次

目次を表示し、選択したページへ遷移させる。
目次の表示はメニューから行う。

索引

索引を表示し、選択したページへ遷移させる。
索引の表示はメニューから行う。

サムネイル

全ページのサムネイルを一覧表示し、その中から選択したページへ遷移させる。
サムネイルの表示はメニューから行う。

-2-

機能カテゴリ

備考

機能
ルビ表示

日本語のルビ表示への対応。

縦書き縦書きへの対応。縦書き、横書きが自由に選択出来るのが好ましい。切り替えはメニューから行う。

ページめくりタッチパネルの上を左右にフリックすることでページをめくる。また、タッチパネルの左右両端をタップすることでも同様に動作させる。

ページジャンプ

ページをタップする等の操作でスライダーを表示し、そこから自由にページ遷移させる。

マーキング

しおり

ページの上端をタップすることでしおりを追加する。
逆に、しおりが追加されているページでは、しおりを削除する。
しおりは複数追加することを可能とする。また、各しおりを識別するために、しおり毎にメモを入力可能とする。
なお、文書を最後に読んでいたページには自動的にしおりが追加され、次回文書を開いた時に自動的にそのページへ遷移するものとする。

しおり一覧

しおりの一覧を表示して選択することで、直接指定したページへジャンプすること。また、一覧中で選択したしおりを削除、メモを編集する機能も備えること。
一覧表示はメニューから行う。

ハイライト

文書中の任意の箇所をなぞって選択した部分をハイライト表示する。ハイライトの色は任意に指定出来るものとする。また、ハイライトにはメモを入力可能とする。
ハイライトをタップすることで、削除またはメモの編集をする機能も備えること。

ハイライト一覧

ハイライトの一覧表示にして選択することで、直接指定したページへジャンプすること。また、一覧中で選択したハイライトを削除、メモを編集する機能も備えること。
一覧表示はメニューから行う。

-3-

機能カテゴリ

備考

機能
画面メモ

タッチパネル上に直接指やのタッチペンを用いて、文書中に手書きのメモを書き込めること。
書き込んだメモは、削除したり非表示にしたりできる機能を備えること。

検索

文書中の任意の言葉を選択して、文書内を検索可能とすること。検索された箇所は文字色一時的に変更し、順にページ遷移することが出来るようにすること。また、戻る事も可能とすること。なお、文書中から選択せずとも、任意に言葉を入力しての検索も出来るようにする。

表示調整

文字サイズ文字サイズの変更を可能とする。操作はピンチイン・アウトにて行う。

文字色反転

背景色と文字色を反転させて、読む場所の明るさ等に対応させる。変更は、メニューから行う。

縦横表示

ディスプレイを横倒しにした際、見開き表示とするか、通常表示とするか選択可能とする。選択はメニューから行う。
お気に入りの本があれば、Facebook や twitter で簡単ソーシャルに発信することが出来る。
本文の一部を抜き出して Twitter へ投稿することが可
能なものもある。
メモを Evernote に送信。
青空文庫に読書感想文を投稿。
Android では文書中をドラックすることで任意の箇所を選択し、共有の操作が出来る。共有は、Anndroid のアプリケーション連携を用いているため、Facebook、Twitter、Gmail 等、様々なサービスとの連携が図れる。
リコメンド。
その他

読上げ文書の読上げを行う。

コピー

文書中の任意の箇所をなぞって選択した部分を、OS のクリップボードにコピーする。ただし、DRM にて保護された文書の場合は不可とする。

-4-

機能カテゴリ

備考

機能リ ッ チ コ ン テ ン テキストや画像中に動画や音声などを組み込んだリッツ

チコンテンツへの対応。動画や音声が組み込まれた箇所をタップすることで再生を行う。
（他のアプリとの連携での再生も検討の価値あり）

本の移動端末間で、書籍の移動を行えるようにする。DRM で保護されたものであっても、移動することで別端末で閲覧可能となることが望ましい。

本の貸し借り端末間で、書籍の貸し借りを可能とする。予め貸出期間等は固定しておく必要あり。また、DRＭの保護上、貸し借りの不可能なものにも対応すること。

定期購読

新聞や雑誌の定期配信を行う。
（販売社との共通したインターフェースを検討する必要あり）

おすすめ

過去に購入した書籍等を元に、おすすめの本を通知する。
可能であれば体験版の無料配信が出来ると良い。
（販売社との共通したインターフェースを検討する必要あり）

端末同期

複数端末間で書籍やアノテーション等の同期を行う。

印刷

1 機種だけだったが、印刷を行うことが可能なものがあった。

-5-

2. UIの実装イメージ
以下に、実装イメージを示す。
画面フローは以下のとおりである。
アノテーション

ログイン

タイトルバー

ページ表示/操作

ファイル
付箋入力

コンテンツ一覧

マーカー色選択

スライダーバー
マーカー入力付箋/マーカー一覧

目次

索引

検索結果

検索入力

図 1 画面フロー

2.1

ログイン機能図 2 ログイン画面
DRM に登録された ID とパスワードを入力し、OK ボタンをタッチすると DRM モジュールにログインする。
・ ログインに成功した場合、コンテンツ一覧の本棚画面を表示する。
・ ログインに失敗した場合はエラーメッセージを表示、再度ログインを促す。

-6-

2.2

コンテンツ一覧

上部の本棚／リストタブで本棚画面とリスト画面に切り替える。
（１） コンテンツ本棚画面
現在取得済みのコンテンツを本棚形式で表示する。

図 3 コンテンツ本棚画面-7-

（２） コンテンツリスト画面
現在取得済みのコンテンツをリスト形式で表示する。

図 4 コンテンツリスト画面（３） コンテンツ一覧の共通仕様案
コンテンツの数が多いとスクロールが可能になる。
各コンテンツ行の左に表示している画像はコンテンツのカバー画像である。
リスト画面の場合はカバーの右に、コンテンツのタイトル、作成日、作者を表示している。
コンテンツをタッチすると選択され、そのコンテンツの DRM 復号化を行いコンテンツの内容を表示する。
コンテンツ行を長押しするとそのコンテンツの削除ができる。

図 5 削除確認画面
ここで OK を選択するとコンテンツが削除され、 Cancel を選択すると一覧に戻る。

-8-

2.3

コンテンツ閲覧コンテンツ一覧でコンテンツを選択するとコンテンツ閲覧画面を表示する。
・ はじめてコンテンツを表示したときは、コンテンツの最初のページを表示する。
・ 前回このコンテンツを表示した場合は、最後に開いたページを表示する。

①④⑤③

②

図 6 ページ操作画面（１） タイトルバー
図 6 ページ操作画面①の部分をタッチするとタイトルと付箋の表示／非表示を制御するボタンがついたタイトルバーが表示される。

図 7 タイトルバー
・ タイトルの文字数が多い場合は タイトルの最後に“・・・”が付く。
・ 付箋の表示／非表示ボタンはトグルボタンになっており、初期値は赤いボタンで付-9-箋表示状態になっている。
・ このボタンをタッチすると灰色に変わり、付箋が非表示になる。
・ ボタン以外の部分をタッチするとタイトルバーが非表示になる。
（２） スライダーバー
図 6 ページ操作画面②の部分をタッチするとスライダーバーが表示される。

図 8 スライダーバー
・ 左に表示している％数値はコンテンツ全体から現在のページの割合を表示している。
・ 右に表示している数値は 現在のページ／全体のページ である。
・ スライダーを移動するとページが移動する。
・ またページをスライドしたり、ページの左右タッチでページが変わった場合、数値とスライダーのハンドルの位置が同調して変わる。
・ スライダー以外の部分をタッチするとスライダーバーが非表示になる。
（３） 左右タッチでページ遷移
図 6 ページ操作画面③の部分の左をタッチすると前ページへ、右をタッチすると次ページへ遷移する。

- 10 -（４） ページスライド（フリック操作）
ページ画面の中ほどタッチしたまま左右へスライドさせると、スライドさせた方向へページが移動する。

図 9 ページスライド- 11 -

（５） ページメニューの表示
図 6 ページ操作画面⑤の位置をタッチするとページメニューが表示される。

図 10 ページメニュー
しおり
図 10 ページメニューからしおりを選ぶと、しおりが設定される。
しおり位置は現在表示中のページの先頭文字位置となる。

- 12 -



付箋
図 10 ページメニューから付箋を選び、ページの中で付箋を入れたい位置にタッチすると付箋文字入力画面が表示される。

図 11 付箋文字入力画面
キーボードから付箋文字を入力し、OK ボタンをタッチする画面に付箋が表示される。
この付箋は画面上部タッチから表示されるタイトルバーに付いている付箋表示／非表示ボタンによって表示制御ができる。
付箋が表示されている位置をタッチすると、付箋編集ダイアログが表示される。

図 12 付箋編集ダイアログ
このダイアログで付箋文字の編集と付箋の削除ができる。

- 13 -

マーカー
図 10 ページメニューからマーカーを選ぶとマーカーの色選択ダイアログが表示される。

図 12 マーカー色の選択
・ マーカー色はこのダイアログで選択する。
・ 外側の円をドラックすると中心部の円に色が反映する。
・ その状態で中心部の円をタッチするとマーカー色が確定する。
・ 色付きの四角をタッチした場合はその色がマーカー色となる。
色を選択し、ページ上にドラッグする開始位置と終了位置にシアン色のハンドルが表示
し指定した色でマーカーが描画される。

図 13
最後にマーカー以外の部分をタップするとシアン色のハンドルは非表示になりマーカー入力が確定される。
マーカーが描画された部分をタッチするとマーカーの操作ポイントが表示し、色選択ダイアログが表示される。

- 14 -

図 14
このダイアログとマーカー色の変更と、マーカーの削除ができる。
また、このダイアログを表示したとき、現在のマーカーにシアン色のハンドルが表示するので、ハンドルをドラックすることでマーカーのサイズが変更できる。
検索
図 10 ページメニューから検索を選ぶと、検索文字を入力する画面が表示される。

図 15 検索文字入力画面
この画面で検索文字を入力し、OK をタッチすると検索結果画面が表示される。

- 15 -

図 16 検索結果画面
・ 検索結果はリスト形式で表示される。
・ 下線付きの青文字で表示されるタイトルをタッチすると、その文字が表示されているページへジャンプする。
・ 上部の入力領域で、新たに検索文字を入力してリターンキーかアイコンをタッチすれば別の検索結果が表示される。
・ 下部の数値はリストのページ数である。
・ この数値をタッチするか、前へ／次へ をタッチすると目的のページへジャンプする。

- 16 -

コピー
図 10 ページメニューからコピーを選ぶと、表示中のページ上でドラックする事で文字をクリップボードにコピーができる。

図 17 コピー
なお、コンテンツがコピー禁止になっている場合、メニューにコピーは表示しない。

2.4

オプション機能コンテンツのページを表示している状態でデバイスのオプションボタンをタッチするとオプションメニューが表示される。

図 18 オプションメニュー- 17 -

（１） しおりジャンプ
このメニューを選択すると、しおりが設定されていれば、そのしおりのページを表示する。しおりが設定されてなければ“しおりがありません”というエラーメッセージを表示する。
（２） 付箋／マーカー一覧
このメニューを選択すると、付箋／マーカー一覧画面が表示される。

図 19 付箋／マーカー一覧
・ コンテンツ内で現在設定している付箋とマーカーの一覧である。
・ 一覧内の行を選択すると、その行に情報を設定したページを表示する。
・ 下の数値はページ遷移用のボタンである。
・ １ページ９個までの情報が表示されている。

- 18 -

（３） 目次
このメニューを選択すると、目次画面が表示される。

図 20 目次
この目次は コンテンツ内の table of contents に記述された順に表示している。
各目次行を選択すると、その内容のページを表示する。

- 19 -

（４） 索引
このメニューを選択すると、索引画面が表示される。

図 21 索引
・ 索引の内容はコンテンツ内の索引情報から得た情報をアルファベット順にリスト形式で表示している。
・ 索引内の数字の意味は、１は１番目に使用されているページ、２は２番目に使用されているページであり、数値をタッチするとその語句が使用されているページへジャンプする。
・ 右に縦表示されているアルファベットと“他”をタッチすると、タッチしたインデックスを先頭にリストを移動する。
・ ▲▼をクリックすることでインデックスをスクロールすることができる。

- 20 -

3. アノテーションファイル
コンテンツを最後に開いたページ、しおり、付箋、マーカーの情報はアノテーションフ
ァイルに保存されている。
アノテーションファイルのファイル名は、コンテンツファイルのファイル名に拡張子”ann” をつけた形式である。
アノテーションファイルの文書の説明は「UCCF 仕様案」を参照。
本仕様書では、UI の操作とアノテーションファイルの要素の関係を記述する。
表 2
UI 操作

アノテーションファイルの要素

最後に開いたページ

Bookmark

しおりBookmark

付箋

Annotation

マーカー

Annotation

・ 最後に開いたページは Bookmark の Name を “0”とする。
・ しおりは Bookmark の Name を “1” で利用している。
・ 付箋とマーカーの違いは、 Color が存在する場合はマーカー、 AnotationContentが存在する場合は 付箋としている。

4. TTS機能
TTS 機能の ON/OFF は、「図 10 ページメニュー」、「図 18 オプションメニュー」のメニュー数を拡張し、実装する。多くの電子出版コンテンツの場合、章単位である、EPUB内の xhtml ファイル単位で TTS 機能へテキストデータを渡すこととする。（全文章のテキスト受け渡しでは、一度の処理に時間がかかりすぎることが想定されるため）

実装方法

は、本報告書の第２編と整合性を取るものとする。

5. 文字拡大機能
文字拡大機能については、「図 2-14 ページメニュー」、「図 2-23 オプションメニュー」のメニュー数を拡張し、実装する。実装方法は、本報告書の第３編３章と整合性を取るものとする。

- 21 -