DEIM Forum 2011 A9-4
エディトリアル・デザインに関するテンプレートを用いたクエリ入力
支援機能を有する e-Books 検索エンジン
小池 悠佳 倉林 修一
慶應義塾大学環境情報学部 〒252-0882 神奈川県藤沢市遠藤 5322
E-mail: {t09334yk,kurabaya}@sfc.keio.ac.jp
あらまし 本稿では，高度なレイアウト構造を有する書籍を対象として，レイアウト構造指定と色彩を指定する
クエリによる書籍検索エンジンの実現方式を示す．本検索エンジンの特徴は，一般ユーザが容易に書籍のレイアウ
ト構造を指定することを目的として，エディトリアル・デザインに関する情報（レイアウト，および，配色）をあ
らかじめ知識ベース中に蓄積し，この知識ベースを用いて，ユーザによるクエリ入力を支援する点にある．本シス
テムは，Web ベースのスケッチによるレイアウト構造指定と，配色を選択することによって，サーバ側に蓄積され
ているレイアウト構造のサンプルデータと配色のサンプルデータを用いておおまかに入力されたクエリを補完し，
検索する．このクエリ入力支援機能により，利用者は，容易に試行錯誤しながら，専門知識がなくてもデザインを
スケッチし，選択をするだけで書籍を検索することができる．本稿では，実際に本システムの実装を行う．
キーワード 電子書籍，検索エンジン，エディトリアル・デザイン
An e-Books Search Engine with an Editorial- Design Templates for Assisting
Query-Input
Yuka KOIKE and Shuichi KURABAYASHI
Faculty of Environment and Information Studies, Keio University, 5322 Endo, Fujisawa, Kanagawa, 252-0882, Japan
E-mail: {t09334yk,kurabaya}@sfc.keio.ac.jp
Abstract This paper propose a novel search engine that recognizes a high-level layout structure of e-books. The aim of this
search engine is to enable users to find e-books from the aesthetic viewpoint by using a graphical-design-oriented query. The
unique feature of this search engine is an smart query-assistance function that utilizes a knowledge base of layout structure in
order to enable users to input layout sketch and color by using Web-based touch UI. By this query-assistance function, user can
input layouts and colors very easily without any technical knowledge. An applicable scope of this study includes a book cover
layout search for e-books, an article layout search for e-magazines, and a CSS/HTML layout search for web pages.
Keyword e-Book, Search Engine, Editorial Design
1. は じ め に
今 日 ， デ ジ タ ル ・ メ デ ィ ア ・ コ ン テ ン ツ の ネ ッ ト ワ ー ク を 通 じ た 流 通 の 普 及 に 伴 い ， 書 籍 や 雑 誌 の 電 子 化 が 進 ん で い る ． 電 子 書 籍 （ e-Books） [1]は 以 前 か ら 提 案 さ れ て い る が ， 近 年 ， 携 帯 情 報 端 末 の 小 型 化 ， 電 源 の 長 寿 命 化 を 契 機 と し て ， e-Books が 爆 発 的 に 普 及 し 始 め て い る ． ア メ リ カ 出 版 社 協 会 （ AAP） が 2010 年 12 月 に 発 表 し た 統 計 に よ れ ば ，米 国 内 に お け る ，2010 年 １ 月 か ら 10 月 ま で の 電 子 書 籍 販 売 額 の 合 計 は ，3 億 4530 万 ド ル を 記 録 し ， 書 籍 販 売 に お け る 8.7%が 電 子 書 籍 と な っ て い る [2]．こ の よ う な 状 況 に お い て ，電 子 書 籍 を 効 率 的 に 発 見 し ， 利 用 す る た め に は ， 直 感 的 に 書 籍 ・ 雑 誌 ・ Web ペ ー ジ を 検 索 す る メ カ ニ ズ ム が 必 要 と な る ． 特 に ， e-Books の デ ザ イ ン に 応 じ た 検 索 ・ 閲 覧 技 術 に 注 目 が 集 ま っ て お り ， 従 来 の 文 字 列 照 合 に よ ら な い 新 た な 検 索 方 式 が 求 め ら れ て い る [3]． 電 子 書 籍 の 検 索 や 閲 覧 を 改 善 す る こ と を 目 的 と し た 従 来 研 究 と し て ， 特 定 の ト ピ ッ ク を キ ー と し て ， デ ジ タ ル ・ ラ イ ブ ラ リ 中 の 電 子 書 籍 を 横 断 的 に 閲 覧 可 能 と す る 方 式 [4]や ，電 子 書 籍 読 者 の 個 人 的 な 目 的 や 嗜 好 に 応 じ て ， 閲 覧 中 の 文 章 に 関 連 す る 周 辺 情 報 ・ 知 識 を 推 薦 す る 方 式 [5]が あ げ ら れ る ．ま た ，デ ザ イ ン を 対 象 と し た 検 索 に 関 す る 研 究 と し て は ， Web ペ ー ジ の デ ザ イ ン を 対 象 と し た 視 覚 的 類 似 度 の 計 量 方 式 [6] に 関 す る 研 究 が お こ な わ れ て い る ． 従 来 の 文 字 列 に よ る 検 索 で は ， あ ら か じ め 検 索 キ ー ワ ー ド を 知 る 必 要 が あ る た め ， 未 知 の 分 野 ， お よ び ， 新 刊 の 書 籍 ・ 雑 誌 を 検 索 す る こ と は 困 難 で あ る ． こ れま で ， 紙 媒 体 の 書 籍 を 対 象 と し た ， 人 手 に よ る 検 索 で は ， 表 紙 の デ ザ イ ン や そ れ に 伴 う 印 象 を 手 掛 か り と し て ， 書 籍 を 検 索 し て き た ． こ の 表 紙 の デ ザ イ ン や そ れ に 伴 う 印 象 ， お よ び ， 書 籍 内 に 置 け る レ イ ア ウ ト 構 造 を 対 象 と し た 検 索 を ， 電 子 書 籍 に 適 用 す る こ と が で き れ ば ， 電 子 書 籍 の 発 見 性 を 大 い に 高 め る こ と が 可 能 と な る ． そ こ で ， 本 稿 で は ， 高 度 な レ イ ア ウ ト 構 造 を 有 す る 書 籍 を 対 象 と し て ， レ イ ア ウ ト 構 造 指 定 と 色 彩 を 指 定 す る ク エ リ に よ る 書 籍 検 索 エ ン ジ ン の 実 現 方 式 を 示 す ． 本 シ ス テ ム は ， エ デ ィ ト リ ア ル ・ デ ザ イ ン の 分 野 に お い て 蓄 積 さ れ て き た デ ザ イ ン ・ テ ン プ レ ー ト の デ ー タ ベ ー ス を 用 い て ， 利 用 者 が 大 ま か に 指 定 し た レ イ ア ウ ト 構 造 と 配 色 に 応 じ て ， 電 子 書 籍 の 検 索 を 実 現 す る ． エ デ ィ ト リ ア ル ・ デ ザ イ ン と は ， 雑 誌 や 書 籍 等 の 視 覚 的 効 果 の デ ザ イ ン 技 法 で あ る [7]． 本 シ ス テ ム の 特 徴 は ， エ デ ィ ト リ ア ル ・ デ ザ イ ン の 専 門 家 が 設 計 し た デ ザ イ ン ・ テ ン プ レ ー ト を 用 い て ， 一 般 利 用 者 の ク エ リ 入 力 を 補 正・補 完 す る こ と に よ り ， 高 度 な エ デ ィ ト リ ア ル ・ デ ザ イ ン の 条 件 を 容 易 に 指 定 可 能 と す る 点 に あ る ．こ の ク エ リ 入 力 支 援 機 能 に よ り ， 利 用 者 は ， 容 易 に 試 行 錯 誤 し な が ら ， 専 門 知 識 が な く て も デ ザ イ ン を ス ケ ッ チ し ， 選 択 を す る だ け で 書 籍 を 検 索 す る こ と が で き る よ う に な る ． 本 シ ス テ ム の 利 用 者 は ，書 籍 の タ イ ト ル の 文 字 列 の よ う な 記 号 に よ ら ず ， 書 籍 の 直 観 的 な デ ザ イ ン に 応 じ て ， 書 籍 を 発 見 す る こ と が で き る ． 本 稿 で は ， こ の e-Books 検 索 エ ン ジ ン の 基 本 機 能 と し て ， １ ） デ ザ イ ン ・ テ ン プ レ ー ト を 用 い た レ イ ア ウ ト 選 択 機 能 ， ２ ） デ ザ イ ン ・ テ ン プ レ ー ト を 用 い た 配 色 パ タ ー ン 生 成 機 能 ，３ ）e-Books 表 紙 画 像 検 索 機 能 ， ４ ） レ イ ア ウ ト と 配 色 に 応 じ た 検 索 結 果 可 視 化 機 能 ， の 4 機 能 の 実 現 方 法 に つ い て 述 べ ， プ ロ ト タ イ プ シ ス テ ム を 用 い た 実 験 に よ り ，本 方 式 の 実 現 可 能 性 を 示 す ．
2. デ ザ イ ン・テ ン プ レ ー ト・デ ー タ ベ ー ス を 用
い た e-Books 検 索 方 式
本 シ ス テ ム は ， デ ザ イ ン ・ テ ン プ レ ー ト ・ デ ー タ ベ ー ス を 用 い た ク エ リ 支 援 機 能 を 有 す る e-Books 検 索 エ ン ジ ン で あ る ． 本 節 で は ， こ の エ デ ィ ト リ ア ル ・ デ ザ イ ン 指 向 検 索 エ ン ジ ン の 構 成 方 式 ， デ ー タ モ デ ル ， お よ び ， 主 要 機 能 に つ い て 述 べ る ．2.1. システム概 要
本 シ ス テ ム の 構 成 を ， 図 １ に 示 す ． 本 シ ス テ ム の 利 用 者 は ， ク エ リ 入 力 イ ン タ ー フ ェ イ ス 上 に お い て ， HTML5 の Canvas 機 能 を 用 い た ス ケ ッ チ 操 作 に よ り ， 大 ま か な レ イ ア ウ ト 構 造 を ， 線 画 と し て 入 力 す る ． シ ス テ ム は ， エ デ ィ ト リ ア ル ・ デ ザ イ ン ・ テ ン プ レ ー ト の デ ー タ ベ ー ス か ら ， 類 似 す る レ イ ア ウ ト 構 造 デ ー タ を 取 得 し ， そ れ ら 類 似 レ イ ア ウ ト を サ ン プ ル ・ デ ー タ と し て 利 用 者 に 提 示 す る ． 利 用 者 が ， 提 示 さ れ た レ イ ア ウ ト ・ サ ン プ ル ・ デ ー タ よ り 任 意 の レ イ ア ウ ト ， お よ び ， 配 色 を 選 択 す る こ と に よ り ， 当 該 レ イ ア ウ ト 構 図 1 シ ス テ ム 構 成 図 ： エ デ ィ ト リ ア ル ・ デ ザ イ ン の 分 野 に お い て 蓄 積 さ れ て き た デ ザ イ ン ・ テ ン プ レ ー ト の デ ー タ ベ ー ス を 用 い て ， 利 用 者 が 大 ま か に 指 定 し た レ イ ア ウ ト 構 造 と 配 色 に 応 じ て ， 電 子 書 籍 の 検 索 を 実 現造 ， お よ び ， 配 色 と 共 通 の 特 徴 を 有 す る メ デ ィ ア デ ー タ （ e-Books） を 検 索 し ， 結 果 を 表 示 す る ．
2.2. エディトリアル・デザインのためのデータモデル
エ デ ィ ト リ ア ル ・ デ ザ イ ン の た め の デ ー タ モ デ ル を 構 成 す る 代 表 的 な 要 素 と し て ， レ イ ア ウ ト ， 色 彩 ， 文 字 の 配 置 ， が あ る ． 本 稿 で 述 べ る シ ス テ ム で は ， レ イ ア ウ ト ， お よ び ， 色 彩 の 要 素 を 扱 う ． 以 下 ，2.2.1，お よ び ，2.2.2 に お い て ，テ ン プ レ ー ト ・ デ ー タ べ ー ス と 表 紙 画 像 デ ー タ の ， 二 つ の デ ー タ 構 造 の 詳 細 を 述 べ る ．2.2.1. テ ン プ レ ー ト ・ デ ー タ ベ ー ス
テ ン プ レ ー ト ・ デ ー タ ベ ー ス は ， エ デ ィ ト リ ア ル ・ デ ザ イ ン の 要 素 で あ る レ イ ア ウ ト 構 造 と 107 色 の 色 彩 の 情 報 を 蓄 積 し て い る ． 本 シ ス テ ム は ， こ の デ ー タ ベ ー ス の 二 つ の 情 報 （ 色 彩 ， お よ び ， レ イ ア ウ ト ） を 用 い て ， 利 用 者 が 入 力 し た ク エ リ を 補 正 す る ． レ イ ア ウ ト 構 造 デ ー タ は ， 実 画 像 か ら 作 成 し た レ イ ア ウ ト の テ ン プ レ ー ト と し て ， あ ら か じ め ， 縦 15 マ ス ， 横 10 マ ス で 区 切 り ， レ イ ア ウ ト の 線 が 存 在 す る マ ス に は 1 の 値 ， そ の 四 方 の マ ス に 0.5 の 値 を 割 り 当 て 重 み づ け を お こ な っ た も の で あ る (図 4)． 実 際 の 実 装 に お け る 初 期 画 面 と ， 入 力 し た ク エ リ を 補 正 し た 検 索 例 を ， 図 2， お よ び ， 図 3 に ， 示 す ． 図 4 レ イ ア ウ ト ・ テ ン プ レ ー ト の 例 色 彩 デ ー タ は ， 107 色 を 用 い て 159 の 言 語 に よ る イ メ ー ジ か ら 抽 出 さ れ た カ ラ ー イ メ ー ジ チ ャ ー ト ・ デ ー タ を 基 に ， グ レ ー ス ケ ー ル ， 彩 度 の 高 い 色 ， 淡 色 ， 霞 色 ， 暗 色 を 網 羅 し て い る 配 色 デ ー タ で あ る [10]． 図 5 に 配 色 チ ャ ー ト の 一 覧 を 示 す ． 図 5 配 色 チ ャ ー ト の 一 覧2.2.2. 表 紙 画 像 デ ー タ
表 紙 画 像 デ ー タ は ， テ ン プ レ ー ト ・ デ ー タ ベ ー ス を 作 成 す る 際 に 基 と な る ， 書 籍 の 実 画 像 デ ー タ で あ る ． 本 デ ー タ は ア マ ゾ ン か ら 取 得 し た 書 籍 の 表 紙 画 像 を 用 い て お り ， 107 色 を 用 い た 107 次 元 の ベ ク ト ル と な っ て い る ． 本 デ ー タ に つ い て ， MediaMatrix を 用 い た ヒ ス ト グ ラ ム を 図 6 に 示 す ．各 表 紙 画 像 デ ー タ に つ い て ， 上 位 5 件 の 色 彩 デ ー タ を 表 示 す る ． 図 2 実 装 に お け る 初 期 画 面 図 3 レ イ ア ウ ト 入 力 に よ る 検 索 例図 6 表 紙 画 像 デ ー タ の 例
2.3. レイアウト選 択 機 能
本 シ ス テ ム は ， 表 紙 レ イ ア ウ ト の 様 々 な バ リ エ ー シ ョ ン を 事 前 に 用 意 し ， そ れ ぞ れ の レ イ ア ウ ト 構 造 の メ タ デ ー タ を 人 手 に よ り 付 与 し て お き ， 利 用 者 が 入 力 す る ラ フ な レ イ ア ウ ト 指 定 と ， レ イ ア ウ ト の バ リ エ ー シ ョ ン の 類 似 性 を 計 量 す る ．レ イ ア ウ ト 構 造 は ，節 2.2.1 で 示 し た よ う に ，15×10 の マ ト リ ク ス と し て 表 現 さ れ て い る ．本 シ ス テ ム は ，利 用 者 が 入 力 し た レ イ ア ウ ト・ マ ト リ ク ス と ， こ の テ ン プ レ ー ト ・ レ イ ア ウ ト ・ マ ト リ ク ス を 比 較 し ， マ ト リ ク ス 間 の 類 似 性 と し て 計 量 す る ． 本 シ ス テ ム は ， こ の レ イ ア ウ ト の 類 似 性 を 計 量 す る 関 数 fla yo u t(q,t)を 次 の よ う に 定 義 す る ． 𝑓𝑙𝑎𝑦𝑜𝑢𝑡(𝑞, 𝑡) ≔ 𝑞[𝑖,𝑗 ]𝑠[𝑖,𝑗 ] 10 𝑗 =1 15 𝑖=1 こ こ で ， q は ， 利 用 者 が 入 力 し た レ イ ア ウ ト 構 造 を 示 す 15×10 の マ ト リ ク ス で あ り ， t は ， テ ン プ レ ー ト ・ デ ー タ ベ ー ス 中 に 格 納 さ れ て い る テ ン プ レ ー ト の レ イ ア ウ ト 構 造 を 示 す 15×10 の マ ト リ ク ス で あ る ．2.4. 配 色 パターン生 成 機 能
配 色 パ タ ー ン と は ， 対 象 表 紙 画 像 に お け る 色 彩 の さ ま ざ ま な バ リ エ ー シ ョ ン を 用 意 し ， そ れ ぞ れ の バ リ エ ー シ ョ ン の メ タ デ ー タ ・ ベ ク ト ル を 格 納 し た デ ー タ ベ ー ス で あ る ． 本 シ ス テ ム は ， 表 紙 画 像 の 色 彩 メ タ デ ー タ ベ ク ト ル を 生 成 し ， 色 彩 感 の 類 似 性 を 計 量 す る た め に ，表 紙 画 像 の 全 ピ ク セ ル の RGB 値 を マ ン セ ル 表 色 系 で あ る HVC 値 へ 変 換 し ， さ ら に ， カ ラ ー チ ャ ー ト 10７ 色 の ヒ ス ト グ ラ ム へ 変 換 す る [8]． こ こ で HSV 値 を 用 い る の は ，HSV の 三 角 錐 で 距 離 計 算 を 行 う こ と に よ り ， 人 間 の 直 観 的 な 色 彩 感 覚 に 沿 い や す い か ら で あ る ． こ の 107 色 に 変 換 し た 色 彩 情 報 ベ ク ト ル を Color Scheme Metadata Vector と す る ． RGB 値 か ら HSV 値 へ の 変 換 に は ， 次 の 式 を 用 い た ． V = max(R, G, B) S = 255 ×max R, G, B − min(R, G, B) max R, G, B H = 60 𝐵 − 𝐺max R, G, B − min(R, G, B) 𝑅 == max(R, G, B) 60 2 + 𝑅 − 𝐵
max R, G, B − min(R, G, B) 𝐺 == max(R, G, B) 60 4 + 𝐺 − 𝑅
max R, G, B − min(R, G, B) 𝐵 == max(R, G, B) ま た ， HSV 空 間 に お け る 距 離 計 量 に は ， Godlove 色 差 式 [9]を 用 い た ． Godlove 色 差 式 ∆𝑔𝑜𝑑𝑙𝑜𝑣𝑒を 次 に 示 す ∆𝑔𝑜𝑑𝑙𝑜𝑣𝑒 𝐻1, 𝑉1, S, 𝐻2, 𝑉2, 𝑆2 = 2𝑆1𝑆2 1 − cos 2π 𝐻1−𝐻2 100 + 𝑆1− 𝑆2 2+ 4 𝑉 1− 𝑉2 2 2 図 １ で 示 し た よ う に ， 本 シ ス テ ム は デ ザ イ ン ・ テ ン プ レ ー ト の デ ー タ ベ ー ス を 用 い て ， 利 用 者 が 大 ま か に 入 力 し た レ イ ア ウ ト を 補 正 す る と 同 時 に ， 利 用 者 が 選 択 し た 配 色 を 割 り 当 て る 機 能 を 有 し て い る ． あ ら か じ め デ ー タ ベ ー ス に 蓄 積 さ れ て い る 配 色 パ タ ー ン (図 7) を 用 い て ， ク エ リ を 自 動 で 生 成 す る ． 図 7 配 色 パ タ ー ン の 例
2.5. e-Books 表 紙 画 像 検 索 機 能
本 シ ス テ ム は ， 検 索 対 象 で あ る 表 紙 画 像 と ， 2.4 節 で 示 し た 方 式 を 用 い て 生 成 し た 配 色 パ タ ー ン 画 像 そ れ ぞ れ の 特 徴 を 表 す カ ラ ー ベ ク ト ル を ， そ れ ぞ れ Cover Color Metadata Vector ，Color Scheme Metadata Vector と す る ． こ の 2 つ の ベ ク ト ル を 比 較 し ， 画 像 間 の 類 似 性 と し て 計 量 す る ． 本 シ ス テ ム は ， Cover Color Metadata Vector と ， Color Scheme Metadata Vector 間 の 内 積 値 を 算 出 す る 関 数 を 提 供 す る ． こ の 関 数 fco rrela tio n(c,s)を 次 の よ う に 定 義 す る ． 𝑓𝑐𝑜𝑟𝑟𝑒𝑙𝑎𝑡𝑖𝑜𝑛 (𝑐, 𝑠) ≔ 𝑐[𝑖]𝑠[𝑖] 𝑛 𝑖=1 こ こ で ， c は ， 書 籍 の 表 紙 の 実 画 像 か ら 生 成 し た 色 ヒ ス ト グ ラ ム で あ り ，s は ，2.4 節 で 示 し た 方 式 を 用 い て 生 成 し た 配 色 パ タ ー ン の 色 ヒ ス ト グ ラ ム で あ る ．2.6. レイアウトと配 色 に応 じた検 索 結 果 可 視 化 機 能
本 シ ス テ ム の 実 装 画 面 を ， 図 8 に 示 す ． 検 索 結 果 を 表 示 す る た め に ， 本 シ ス テ ム は ， 2 次 元 の 結 果 表 示 Ｕ Ｉ を 提 供 す る ． 本 Ｕ Ｉ は ， 色 の 軸 を 縦 ， レ イ ア ウ ト の 軸 を 横 に と っ た 座 標 形 式 で ， よ り 両 者 の 適 合 度 が 高 い も の は 左 上 ， 色 の 適 合 度 が 高 い も の は 縦 軸 上 ， レ イ ア ウ ト の 適 合 度 が 高 い も の は 横 軸 上 ， 両 者 の 適 合 度 が 低 く な る に つ れ て 右 下 に 表 示 す る ． 同 レ イ ア ウ ト ・ 同 色 の 構 造 を 有 す る メ デ ィ ア デ ー タ が 複 数 あ る 場 合 に は ， 同 じ 座 標 上 に 複 数 の 結 果 を 表 示 す る ． こ の 座 標 形 式 に よ り ， 利 用 者 は ， レ イ ア ウ ト と 色 に よ る 比 較 検 討 が 可 能 で あ る ． 本 シ ス テ ム で は ， レ イ ア ウ ト の 選 択 と 配 色 の 選 択 の 度 に イ ン タ ラ ク テ ィ ブ に 検 索 結 果 を 表 示 す る た め ， マ ウ ス に よ る ス ケ ッ チ 入 力 か ら 想 定 さ れ る 類 似 レ イ ア ウ ト の サ ン プ ル の 幅 を 広 く と り 、 利 用 者 の 操 作 を よ り 簡 単 な も の に し て い る ． 図 8 レ イ ア ウ ト と 配 色 に 応 じ た 検 索 結 果 可 視 化 機 能3. システム・インプリメンテーション
本 節 で は ， ス マ ー ト フ ォ ン に お い て 標 準 的 に サ ポ ー ト さ れ て い る HTML5 の 機 能 で あ る Canvas を 使 用 し ， Web ブ ラ ウ ザ 上 に お い て ， 色 彩 分 析 を 実 現 し ， エ デ ィ ト リ ア ル ・ デ ザ イ ン 条 件 に 応 じ た 書 籍 検 索 を 実 現 す る 方 式 を 示 す ． 本 シ ス テ ム で は ， 検 索 対 象 書 籍 の 表 紙 画 像 デ ー タ を サ ー バ 上 に 用 意 し て お き ，XMLHttpRequest を 用 い て 動 的 に 画 像 デ ー タ を Canvas 上 に 読 み 込 み ， JavaScript に お け る Canvas API に よ り ， 読 み 込 ん だ 画 像 デ ー タ へ の ピ ク セ ル ・ レ ベ ル で の ア ク セ ス を 実 現 す る ． 実 際 に 動 作 し て い る シ ス テ ム の ス ク リ ー ン シ ョ ッ ト を 図 9 に 示 す ． Web ブ ラ ウ ザ は サ ー バ 上 に あ る ebooksearch.js と jquery.js の ２ つ の javascript を 参 照 し て お り ， ebooksearch.js で は 色 彩 類 似 性 計 量 ， お よ び ， レ イ ア ウ ト 類 似 性 計 量 関 数 が 定 義 さ れ て い る ． ま た ， jquery.js に は ，ebooks earch.js で 行 わ れ た 相 関 量 演 算 の 結 果 を 元 に CSS を 書 き 換 え る フ ァ ン ク シ ョ ン が 用 意 さ れ て い る ． JavaScript， お よ び ， HTML5 を 用 い る こ と に よ り ， マ ル チ デ バ イ ス で の 動 作 を 実 現 し た ．JavaScript，お よ び ，HTML5 を 組 み 合 わ せ た 実 装 方 式 の 利 点 は ，次 の 2 点 で あ る ． ド キ ュ メ ン ト に 埋 め 込 み 可 能 な 電 子 書 籍 検 索 エ ン ジ ン の 実 現： 電 子 書 籍 に 直 接 本 シ ス テ ム を 組 み 込 み ，書 籍 内 の コ ン テ ン ツ 検 索 へ 応 用 可 能 で あ る ． ま た ， IDPF （ International Digital Publishing Forum、 国 際 電 子 出 版 フ ォ ー ラ ム ） が 策 定 中 の 次 世 代 電 子 書 籍 フ ォ ー マ ッ ト EPUB 3 （ http://idpf.org/epub/30 ）で は ，HTML5＆ SVG に 準 拠 し た JavaScript を サ ポ ー ト 予 定 で あ り ， Web の み な ら ず ，電 子 書 籍 端 末 上 で の 動 作 を 視 野 に 入 れ る こ と が 出 来 る ． 書 籍 ジ ャ ン ル に 応 じ た テ ン プ レ ー ト 切 り 替 え : 様 々 な ジ ャ ン ル の テ ン プ レ ー ト を ，電 子 書 籍 と 対 応 さ せ て お く こ と に よ り ，特 定 の ジ ャ ン ル に お い て よ く 用 い ら れ る テ ン プ レ ー ト を 使 用 す る こ と が 出 来 る よ う に な り ，検 索 精 度 を 向 上 さ せ る こ と が 出 来 る ． 特 に ， 雑 誌 や 書 籍 な ど ， 本 の 形 態 に 応 じ て テ ン プ レ ー ト は 大 き く 異 な る た め ，本 シ ス テ ム の 応 用 可 能 性 を 拡 大 す る た め に は ，書 籍 ジ ャ ン ル に 応 じ て テ ン プ レ ー ト を 変 更 す る こ と が 必 要 と な る ． 図 9 レ イ ア ウ ト と 配 色 に 応 じ た 検 索 結 果 可 視 化 機 能 の 実 装 例 ．本 シ ス テ ム は ，レ イ ア ウ ト 条 件 と の 相 関 ラ ン キ ン グ を X 軸 に ，色 彩 条 件 と の 相 関 ラ ン キ ン グ を Y 軸 に マ ッ ピ ン グ し ，エ デ ィ ト リ ア ル ・ デ ザ イ ン 条 件 に 応 じ た 書 籍 検 索 を 実 現（ 図 中 で は ， 縦 線 の レ イ ア ウ ト と ，橙 色 系 の 色 指 定 で ，両 属 性 を 有 す る 書 籍 が 結 果 中 最 上 位 と な っ て い る ） メ タ デ ー タ 抽 出 の た め の 基 本 色 と し て は ， カ ラ ー イ メ ー ジ チ ャ ー ト [10] に よ る 107 色 の 色 を 用 い る ．ヒ ス トグ ラ ム 生 成 方 式 に つ い て は ， 画 像 の 各 画 素 の RGB 値 に つ い て HSV 値 に 変 換 し ，代 表 色 107 色 の RGB 値 に 対 し て ，HSV 空 間 の 円 錐 モ デ ル で 最 も 近 い 色 を 選 択 し て ， 画 像 全 体 の 107 色 の 占 め る 各 割 合 を 算 出 し た ． 手 順 の 概 要 を 以 下 に 示 す ． ま た ， 手 順 を 図 式 化 し た も の を 図 10 に 示 す ． 図 10 HTML5 に お け る Canvas API を 用 い た 色 彩 ヒ ス ト グ ラ ム 生 成 の 手 順 図 11 シ ス テ ム の 動 作 画 面 Step-1: 表 紙 デ ー タ を XMLHttpRequest に よ り ダ ウ ン ロ ー ド し ， Image オ ブ ジ ェ ク ト を 用 い て デ コ ー ド し ， CanvasAPI を 経 由 し て 各 ピ ク セ ル に ア ク セ ス を 行 い ， 色 彩 情 報 を RGB と し て 抽 出 す る ． Step-2: 各 々 の 静 止 画 像 の 色 彩 を ，色 相 ，明 度 ，彩 度 の 3 成 分 か ら な る HSV モ デ ル を 用 い て 表 現 す る Step-3: HSV モ デ ル に 変 換 さ れ た 各 々 の 静 止 画 像 を ， そ の 色 彩 か ら マ ン セ ル 表 色 系 代 表 107 色 の カ ラ ー ヒ ス ト グ ラ ム に 置 き 換 え ，カ ラ ー ヒ ス ト グ ラ ム に も と づ く 色 彩 の 出 現 割 合 を 求 め る ． Step-4: 分 析 さ れ た 静 止 画 像 の 各 々 を ，URL を キ ー と し て ク ラ イ ア ン ト 側 の Web Storage へ 格 納 す る ． { "co lor St r in g ": [ "C IC /4 (0 , 108 , 93 ) ", "C IC /3 (2 55 ,2 55 , 255 ) ", "CI C/2 ( 24 7, 19 7 ,2 00 ) ", "C IC /1 (11 6, 66 , 131 ) ", "CI C/5 ( 17 2, 20 3, 57 ) ", "CIC /6 ( 18 2, 13 9, 18 0) ", "CIC /8 (1 92 , 2 24 ,2 30 ) ", "C IC /7 (7 6, 93 , 70 ) ", "C IC /9 (2 17 ,8 3 ,1 0) ", "CI C/1 0 (2 5 5, 23 4, 15 4) " , "C IC /1 2( 20 0 ,20 0 ,2 00 ) ", "C IC /11 (2 26 , 191 , 21 2) ", "CI C/1 3 (4 9 ,8 6, 12 6) ", " CIC /1 4( 71 , 31 ,8 5) ", "CI C/1 5 (1 27 , 83 ,7 0) ", "CI C/1 6 (1 04 ,4 4 ,5 8) ", "CIC /1 7 ( 227 , 109 , 74 ) ", "C IC /1 8( 30 , 17 ,6 0) ", "CI C/1 9 (2 09 ,2 01 , 22 3) ", "C IC /2 0( 74 ,1 05 ,11 8) ", "CI C/2 1 (2 40 , 15 4, 13 2) ", "CI C/2 2 (1 97 ,0 , 63 ) ", "C IC /2 3( 176 , 98 ,8 8 ) ", "C IC /2 4( 38 ,111, 14 5) ", "C IC /25 ( 15 0, 20 0, 17 2) ", "CI C/2 6 (1 4 4, 14 4, 14 4) " , "C IC /2 7( 12 0 ,10 3 ,7 3) ", "CI C/2 8 (1 57 ,1 80 , 168 ) ", "CIC /3 0 (1 46 ,4 5, 19 ) ", "C I C/2 9 (20 9 ,1 07 ,1 44 ) ", "C IC /3 1( 0 ,5 9, 77 ) ", "C IC /3 2( 75 , 73 ,9 6) ", "CIC /3 3 (1 7 8, 18 9, 17 0) ", "CI C/3 4 (0 , 15 7, 16 5) ", "CI C/3 5 (2 10 ,1 74 , 16 8) ", "C IC /3 6( 21 9, 83 ,9 0) ", "CI C/3 7 (1 27 ,1 34 ,117 ) ", "C IC /3 8( 15 3 ,15 3 ,1 76 ) ", "C I C/3 9 (81 , 81 ,8 1) ", "CI C/4 0 (11 7 ,19 3 ,2 21 ) ", "C IC /4 1( 0 ,13 7 ,8 5) ", "CI C/4 2 (1 41 ,1 29 ,1 23 ) ", "CIC /4 4 (0 ,1 08 ,1 54 ) ", "CIC /4 3 (8 5, 34 ,7 1) ", "C IC /4 5( 15 6, 18 1, 183 ) ", "CIC / 46 (0 ,7 0, 13 9) ", "CI C/4 7 (1 06 , 81 ,9 7) ", "CI C/4 8 (7 4 ,0 ,9 2) ", "CI C /4 9( 21 4, 18 9 ,1 63 ) ", "C IC /5 0( 14 2, 12 8 ,111 ) ", "CIC /5 1 (2 55 ,2 46 ,1 99 ) ", "C IC / 52 (76 , 92 ,1 3 7) ", "CI C/5 3 (2 55 ,2 23 ,0 ) ", "CIC /5 4 (1 98 ,2 18 ,1 35 ) ", "C IC /5 5 (1 00 ,8 2, 12 7) ", "CIC /5 6 (5 8, 31 ,7 0 ) ", "C IC /5 7( 73 ,1 30 ,9 9) ", "C IC /5 8( 64 ,1 64 ,113 ) ", "C IC /5 9( 209 , 17 4, 18 2) ", "CI C/6 0 (2 1 ,5 3, 95 ) ", "C IC /6 1( 93 , 121 ,115 ) ", "CIC /6 2 (0 ,1 37 ,1 90 ) ", "C IC /6 3( 13 7, 10 3 ,10 7 ) ", "C IC /6 4( 67 ,1 44 ,1 51 ) ", "C I C/6 5 (0 ,1 43 , 147 ) ", "CIC /6 6 (5 4, 38 ,112 ) ", "C IC /6 7( 0 ,63 ,113 ) ", "C IC /6 8 (0 ,1 03 ,11 9) ", "C IC /6 9( 25 3, 21 4, 17 9) ", "CI C/7 0 (4 3 ,7 1, 68 ) ", "C IC /7 1 (0 ,8 2, 12 3) ", "CIC /7 2 (0 ,0 ,0 ) ", "C IC /7 3 (1 43 ,1 43 ,1 90 ) ", "C IC /7 4 (18 0 ,11 7, 81 ) ", "C IC /7 5( 137 , 0, 55 ) ", "CIC /7 6 (3 5, 35 ,3 5) ", "C IC /7 7( 15 8, 94 ,1 00 ) ", "C IC /7 8 (2 33 ,1 3 3, 13 5) ", "CI C/7 9 (98 , 98 ,1 59 ) ", "C IC /8 0( 17 1 ,1 45 ,0 ) ", "C IC /8 1( 14 9 ,16 9 ,1 0 3) ", "CI C/8 2 (9 9, 14 1, 12 ) ", "C IC /8 3 (21 6 ,2 33 ,2 14 ) ", "C IC /8 4( 22 5 ,22 9 ,7 8) ", "CIC /8 5 (2 5 0, 19 3, 13 4) ", "CI C/8 6 (1 89 , 209 , 23 4) ", "CI C/8 7 (8 4, 10 , 61 ) ", "C I C/8 8 (24 8 ,1 97 ,1 84 ) ", "C IC /8 9( 24 4, 17 0 ,41 ) ", "CI C/9 0 (6 7, 12 0, 18 2) ", "C IC / 91 (38 , 42 ,9 4) ", "CI C/9 2 (2 40 ,2 41 ,1 98 ) ", "C IC /9 3 (9 1, 77 ,9 7) ", "C IC /9 4( 15 4, 0, 88 ) ", "C I C/9 5 (13 6 ,7 0, 10 8) ", "CI C/9 6 (119 ,1 82 ,1 0) ", "C IC /98 ( 197 , 0, 10 3) ", "CI C/9 7 (11 8, 16 6 ,21 2 ) ", "C IC /9 9( 23 6, 15 2, 0) ", "C IC /1 01 (11 4, 0 ,7 3) ", "CIC /1 00 (1 4 7, 20 2, 20 7) ", "CI C/1 0 2( 19 0 ,22 5 ,2 46 ) ", "C IC /1 05 (2 37 ,1 57 ,1 73 ) ", "C IC /1 04 (1 67 ,1 46 ,9 3) ", "CI C/1 0 3( 16 1 ,1 01 ,1 ) ", "C IC /1 06 (1 88 ,1 92 , 22 1 ) ", "C IC /1 07 (0 ,6 8, 10 3) "] , "imp r es s ion s ": [ [ "あ っ さ り し た ", 0. 0, 0 .07 69 23 07 69 23 076 94 , 0. 0, 0 .0 ,0 .0 , 0. 0 ,0 .0 76 923 07 69 23 0 769 4 ,0 .0 ,0 . 0 ,0 .0 , 0. 07 69 230 76 92 30 76 94 ,0 .0 , 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0 .0 ,0 .0 ,0 . 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 . 076 92 3 076 92 30 76 94 ,0 .0 , 0. 0 ,0 .0 ,0 .0 , 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 76 92 30 76 923 07 69 4, 0 .0 ,0 .0 , 0. 0 ,0 .0 76 923 07 69 23 0 769 4 ,0 .0 ,0 . 0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 076 92 30 76 92 307 69 4 ,0 .0 ,0 . 0, 0. 07 69 23 07 69 230 76 94 ,0 . 0, 0 .0 , 0. 0, 0 .07 69 2 307 69 23 07 69 4, 0. 0 ,0 .0 , 0 . 0, 0. 0 ,0 .0 ,0 . 0, 0 .0 ,0 .0 76 92 30 76 923 0 769 4 ,0 .0 ,0 . 0 ,0 .0 76 92 30 76 923 07 69 4, 0 .0 769 23 07 69 23 07 69 4, 0. 0 ,0 .0 ,0 . 0, 0. 076 92 30 76 923 07 69 4, 0 .0 ], [ "お し ゃ れ な ", 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 08 33 33 333 33 33 33 33 ,0 .0 , 0. 0 ,0 .0 ,0 . 083 33 33 33 3 333 33 33 ,0 . 08 333 33 33 33 33 33 33 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 8 333 33 33 33 3 333 33 ,0 . 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 833 33 33 33 3 333 33 3, 0 .0 ,0 .0 , 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 . 0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0 .0 ,0 .0 , 0. 0, 0. 0 ,0 .0 ,0 . 0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 08 33 33 333 33 33 33 33 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 08 333 33 33 33 33 33 33 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0 .0 ,0 . 0, 0. 0 ,0 .0 ,0 . 0, 0. 08 33 33 33 33 333 33 33 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 0, 0 .0 ,0 .0 , 0. 08 33 33 333 33 33 33 33 ,0 .0 , 0. 08 33 33 3 333 33 33 33 3 ,0 .0 , 0. 08 33 333 33 33 33 33 33 ,0 .0 , 0. 0 ,0 .0 ,0 . 083 33 33 33 33 33 333 3, 0. 0] , 図 12 JSON に よ る 色 彩 デ ー タ 定 義 の 例
4. まとめ
本 稿 で は ， 高 度 な レ イ ア ウ ト 構 造 を 有 す る 書 籍 を 対 象 と し て ， レ イ ア ウ ト 構 造 指 定 と 色 彩 を 指 定 す る ク エ リ に よ る 書 籍 検 索 エ ン ジ ン の 実 現 方 式 を 示 し た ． 本 検 索 エ ン ジ ン の 特 徴 は ， 一 般 ユ ー ザ が 容 易 に 書 籍 の レ イ ア ウ ト 構 造 を 指 定 す る こ と を 目 的 と し て ， エ デ ィ ト リ ア ル ・ デ ザ イ ン に 関 す る 情 報 （ レ イ ア ウ ト ， お よ び ， 配 色 ） を あ ら か じ め 知 識 ベ ー ス 中 に 蓄 積 し ， こ の 知 識 ベ ー ス を 用 い て ， ユ ー ザ に よ る ク エ リ 入 力 を 支 援 す る 点 に あ る ． 本 シ ス テ ム は ， Web ベ ー ス の ス ケ ッ チ に よ る レ イ ア ウ ト 構 造 指 定 と ， 配 色 を 選 択 す る こ と に よ って ， サ ー バ 側 に 蓄 積 さ れ て い る レ イ ア ウ ト 構 造 の サ ン プ ル デ ー タ と 配 色 の サ ン プ ル デ ー タ を 用 い て お お ま か に 入 力 さ れ た ク エ リ を 補 完 し ， 検 索 す る 機 能 を 実 現 し た ． こ の ク エ リ 入 力 支 援 機 能 に よ り ， 利 用 者 は ， 容 易 に 試 行 錯 誤 し な が ら ， 専 門 知 識 が な く て も デ ザ イ ン を ス ケ ッ チ し ， 選 択 を す る だ け で 書 籍 を 検 索 す る こ と が で き る ．本 シ ス テ ム の 実 装 方 式 と し て ，HTML5 に お け る Canvas を 用 い た ，ク ラ イ ア ン ト サ イ ド に お け る 色 彩 分 析 の 実 装 を 示 し た ．
参 考 文 献
[1] Harrison, B.L., E-books and the future of reading. Comput er Graphics and Applications, IEEE, 2000. 20(3): p. 32-39.
[2] American Association of Publishers : “AAP Reports October Book Sales”, 2010, http:// www.publishers.org/main/PressCenter/Archicv es/2010_Dec/AAPReportsOctoberBookSales.ht m [3] Landoni, M.A., The active reading task: e-books and
their readers, in Proceeding of the 2008 ACM workshop on Res earch ad vances in large digital book repositories2008, ACM: Napa Valley, California, USA. p. 33-36.
[4] Schilit, B.N. and O. Kolak, Exploring a digital library through key ideas, in Proceedings of the 8th ACM/IEEE-CS joint conference on Digital libraries2008, ACM: Pit tsburgh PA, PA, USA. p. 177-186.
[5] Chin-Yeh, W., et al. Extending e-books with contextual knowledge recommenders b y analyzing personal portfolio and annotation to help learners solve problems in time. in Advanced Learning Technologies, 2004. Proceedings. IEE E Int ernational Conference on. 2004.
[6] 古 澤 徹 , 渡 井 康 行 , 山 崎 俊 彦 , 相 澤 清 晴 :“ 見 た 目 に 基 づ く Web ペ ー ジ 検 索 の た め の 視 覚 的 類 似 度 尺 度”, 映 像 情 報 メ デ ィ ア 学 会 誌 , Vol. 62, No.2, 2008, p.209-215.
[7] Robert Klanten, et al "Turning Pages: Editorial Design for Print Media", Die Gestalten Verlag, ISBN: 978-3899553147, 2010.
[8] Shuichi Kurabayashi and Yasushi Kiyoki: "MediaMatrix: A Video Stream Retrieval System with Mechanis ms for Mining Cont exts of Query Examples," In Proceedings of the 15th Int ernational Conference on Database Systems for Advanced Applications (DASFAA2010), pp.452-455, Tsukuba, Japan, April 1 -4, 2010.
[9] Godlove, I. H. "Improved Color- Difference Formula, with Applications to the Perceptibilit y and Acceptabilit y of Fadings". J. Opt. Soc. Am., 41, 11, pp.760-770, 1951.
[10] 南 雲 治 嘉 :"カ ラ ー イ メ ー ジ チ ャ ー ト ",グ ラ フ ィ ッ ク 社 .
