フォンを 対 象 として,JavaScriptのスマートフォン インタフェース 用 ライブラリのひとつである jquery mobileを 利 用 して,スマートフォン 特 有 の ユーザインタフェースを 備 えたWebサイトを 構 築 し, 操 作 性 の 検 証 を 試 みた. 以 降, 本 稿

Transcription

1 スマートフォン 向 け 津 波 ディジタルライブラリィの 構 築 ( 今 井 ) スマートフォン 向 け 津 波 ディジタルライブラリィの 構 築 今 井 さやか Design of Tsunami Digital Library Web Site for Smart Phone IMAI Sayaka Abstracts: We are developing a Tsunami Digital Library (TDL) from In TDL, we provided digital books, newspaper contents, videos, CG simulations of Tsunami disaster and etc. by using PC web browser. In these years, smartphone technologies were progress rapidly. Many users use the smartphone to browse contents in TDL. But TDL does not support browsing by smartphones. Last year, we renewed the server and the web sites for TDL. In same time, we designed the TDL web site for smartphones. In this paper, we reported the renewal points in TDL web site, and also reported the new web site for smartphones. The problems of the design of the web site for smartphone are (1) small display size, (2) changes of a page by touching the display, (3) videos. When we designed the web site for smartphones, we use HTML5, CSS, and JavaScript and jquery mobile library. jquery mobile library has many user interface framework. And the other side, since there is no standard of video in HTML5, smartphones cannot play videos in TDL. So, we converted videos to mp4 format, and provided by using video tag of HTML5. Users can be showed videos in both smartphone and PC Safari browser. For other types of browser, for example, Google Chrome, IE etc. video format is future problems. Key Words:Tsunami Digital Library, Smartphone, HTML5, jquery, video tag. 1.はじめに 我 々は 津 波 に 関 する 文 献, 新 聞 記 事, 津 波 遡 上 シ ミュレーション 動 画,フィールドワークデータ, 津 波 災 害 ビデオなどを 総 合 的 に 管 理 し,インターネッ トを 通 じて 広 く 公 開 する 津 波 ディジタルライブラリ (Tsunami Digital Library: TDL)を 開 発 している [1][2] 年 から 現 在 までつづくプロジェクトであり, 常 にデータの 追 加 が 行 われ, 運 営 されている.ここで は 津 波 についての 情 報 を 得 るだけでなく, 津 波 災 害 に 対 する 防 災 計 画 を 策 定 する 上 でも 有 効 であると 考 える.2011 年 ₃ 月 に 発 生 した 東 日 本 大 震 災 後 は TDLへのアクセス 数 が 増 加 し, 津 波 災 害 への 関 心 の 高 まりを 伺 わせた. 昨 年,2012 年 にTDLのリ ニューアルを 行 った.また, 近 年 主 流 になりつつあ る,Android 携 帯 やiPhoneなどのスマートフォン でのWebインタフェースに 対 応 するよう 検 討 をし ている.スマートフォンに 搭 載 されているブラウザ 機 能 でも 通 常 のPC 用 のWebサイトを 表 示 し,TDL の 文 献 や 新 聞 記 事 を 閲 覧 することは 可 能 であるが, 画 面 サイズが 小 さいことから 若 干 見 づらいページが 多 くなる.そこで 本 研 究 では,Androidスマート ( 147)

2 フォンを 対 象 として,JavaScriptのスマートフォン インタフェース 用 ライブラリのひとつである jquery mobileを 利 用 して,スマートフォン 特 有 の ユーザインタフェースを 備 えたWebサイトを 構 築 し, 操 作 性 の 検 証 を 試 みた. 以 降, 本 稿 では₂ 章 でリニューアル 後 のTDLの 最 新 の 概 要 について 紹 介 する.₃ 章 では,スマート フォン 用 のTDLサイトについてシステム 構 成 と 実 行 結 果 を 紹 介 する. 事 は, 選 択 した 新 聞 掲 載 面 の 津 波 災 害 に 関 する 記 事 本 文 を 表 示 している.また,トップページには 文 献 一 覧 へのリンクのほかに,キーワード 検 索 用 の Googleカスタム 検 索 のツールを 設 置 し,TDLに 格 納 されている 全 コンテンツに 対 するキーワードでの 検 索 を 行 えるようにした. 図 ₄に 波 高 というキー ワードで 検 索 した 結 果 のスナップショットを 示 す. 2. 津 波 ディジタルライブラリ(TDL) 2.1 システム 構 成 2012 年 に 我 々は 長 年 稼 働 したTDLサーバをリ ニューアルし, 合 わせてTDLサイトデザインをも リニューアルして 公 開 した. 図 1はリニューアル 後 の 津 波 ディジタルライブラリィの 検 索 トップページ である.このページから₃ 種 類 の 文 献 別 に 一 覧 を 表 示 し, 目 的 の 文 献 を 閲 覧 することができる. 論 文 では 全 文 献 の 中 で 論 文 に 分 類 されるもの, 報 告 書 は 自 治 体 や 政 府 機 関 などの 団 体 が 発 行 している 文 献, 雑 文 は 論 文, 報 告 書 に 分 類 されないその 他 の 文 献 のリストへのリンクである. 新 聞 記 事 では 津 波 が 発 生 した 当 時 の 新 聞 記 事 を 閲 覧 することができ る.また 全 文 献 では,TDLに 格 納 されている 論 文, 報 告 書, 雑 文, 新 聞 記 事 すべてを 一 覧 表 示 し, この 中 から 目 的 の 文 献 を 探 し 出 すことも 可 能 である. これらのデータのうち, 新 聞, 文 献 はデータベース システムを 利 用 した 検 索 閲 覧 システムを 構 築 してい る.データベースシステムには 旧 TDLで 利 用 して いた 文 献 データのXML 文 書 をそのまま 移 植 し, Webブラウザに 表 示 する 際 に 文 字 サイズや 色,CSS やXSLTなどの 装 飾 を 変 更 することで,デザインを 一 新 した.また, 旧 TDLのコンテンツも 残 してい るので,デザイン 変 更 前 のコンテンツや 旧 コンテン ツを 閲 覧 することも 可 能 である. 図 ₂に 津 波 災 害 記 録 文 献 の 閲 覧 例 を 示 す.Web ページの 左 フレームには 検 索 された 文 献 の 目 次 が 表 示 され,クリックするごとに 右 画 面 に 本 文 が 表 示 さ れる.また, 本 文 中 の 図 表 へのリンクをクリックす ると, 該 当 する 図 表 が 表 示 され, 図 を 見 ながら 本 文 を 読 み 進 むことができる 構 成 になっている. 新 機 能 として, 画 像 のサムネイルを 文 中 に 表 示 するように し, 詳 細 に 見 たい 図 はクリックして 拡 大 して 見 て, そうでない 図 は 大 体 の 把 握 ができるよう 工 夫 を 盛 り 込 んだ. 図 ₃には 新 聞 記 事 の 閲 覧 例 を 示 す. 新 聞 記 図 1 TDL 検 索 トップページ 2.2 Google Analyticsの 導 入 TDLのリニューアルにおいて,サイトへのアク セス 数 をアクセスカウンタにより 表 示 していたもの を,Google Analyticsの 導 入 により,ページビュー 数 の 変 化 やページごとのアクセス 数 などさまざまな アクセス 解 析 が 可 能 となった.これにより, 閲 覧 者 の 興 味 の 動 向 や, 次 にどのような 資 料 を 充 実 すべき かなどの 検 証 を 行 うことができる. 図 ₅にGoogle Analyticsによる 分 析 ページのスナップショットを 示 す. 図 5では,2013 年 ₄ 月 ₁ 日 ~2013 年 ₉ 月 30 日 のページビュー 数 を 月 ごとに 折 れ 線 グラフで 表 示 し, ページビュー 数 の 推 移 を 観 察 することが 可 能 である. この 期 間 にTDL 全 体 のページビュー 数 は4000~ 6000ページビューの 間 で 推 移 し, 半 年 で29,022ペー ジビューに 達 していることが 確 認 できる. ( 148)

3 AA スマートフォン向け津波ディジタルライブラリィの構築 今井 図２ 津波災害記録文献の閲覧例 図３ 津波新聞記事の閲覧例 図４ Googleカスタム検索によるキーワード検索 図５ Google Analytics の分析画面 149

4 3. スマートフォン 対 応 Webページの 構 築 3.1 スマートフォン 対 応 サイトについて 近 年,スマートフォンやタブレット 型 端 末 が 携 帯 端 末 の 主 流 となり,かつて 非 常 に 普 及 していた 携 帯 電 話 はシェアを 縮 小 しつつある.TDLは 以 前 i-modeサイトに 対 応 して,GPS 付 携 帯 電 話 を 利 用 し て 現 在 のGPS 位 置 からTDL 検 索 を 行 う 検 索 サイト の 開 発 を 行 った [3]. 本 研 究 では, 現 在 主 流 となっ ている 技 術 のひとつであるAndroidスマートフォン をとりあげ,Androidスマートフォンのブラウザに 対 応 したTDLサイトを 構 築 し, 使 用 感 の 検 証 やPC サイトの 表 示 状 況 との 比 較 を 行 った.TDLのWeb サイトをスマートフォン 対 応 とするにあたり, 以 下 の₃ 項 目 について 実 装 検 討 した. スマートフォン 画 面 サイズへの 対 応 タッチ 操 作 によるページ 遷 移 動 画 再 生 動 画 再 生 は 特 に, 動 画 ファイルをTDLサーバ 上 から 再 生 可 能 な 実 装 を 検 討 した. 一 方, 実 装 するプ ログラミング 言 語 においてはスマートフォン 対 応 の Webページ 構 築 にHTML,CSS,JavaScriptを 使 用 した.マークアップ 言 語 には 最 新 版 であるHTML5 を 使 用 した.これは, 従 来 のHTMLにリッチイン ターネットアプリケーションに 代 わる 機 能 を HTMLに 持 たせたものであり,よりユーザの 閲 覧 環 境 に 左 右 されないWebページの 作 成 が 可 能 とな る. 現 在 において 普 及 率 はそれほど 高 くはないが, Google ChromeやSafari,IE9などもHTML5に 対 応 しつつあり, 今 後 HTML5に 対 応 したブラウザが 増 えていくことが 期 待 される.また, 動 的 なWebペー ジの 作 成 に 利 用 されるJavaScriptにおいても 様 々な ライブラリが 公 開 されており, 本 研 究 ではスマート フォン 対 応 のライブラリを 持 つ,jQuery [4] を 取 り 上 げ,TDLのスマートフォン 対 応 サイトを 構 築 した. page を 持 つdiv 要 素 で1ページと 区 別 される.ま た, 各 ページのレイアウト 領 域 もdiv 要 素 の 中 にカ スタムデータ 属 性 を 利 用 して 定 義 する.このような 属 性 を 指 定 することで, 一 つのソースの 中 でのペー ジ,ヘッダー,コンテンツ,フッターなどの 領 域 を 区 別 することができる. 以 下 は,トップページで 表 示 する 基 本 的 なリストを 示 すソースである. <ul data-role= listview data-theme= c data-inset= true > <li data-role= list-divider >メインコンテンツ</li> <li><a href= #movie ><h3 class= wordbreak > 津 波 映 像 </h3> <p class= wordbreak > 実 写 映 像 とシミュレーション</p> </a></li> ( 中 略 ) </ul> ここでは listview という 要 素 を 指 定 し, 各 ページへ のリンクを 張 ったリストを 表 示 させる.また,デー タのテーマ( 色 やデザイン)が a ~ e まで₅ 種 類 用 意 されており, data-theme 属 性 の 値 に 指 定 す るとそれぞれのデザインを 採 用 することができる. ま た,<ul>タ グ 内 にdata-inset 属 性 の 値 を true で 指 定 すると,リストの 各 項 目 のデザインを 切 り 替 えることができる.トップページのリスト 表 示 に 採 用 した. 図 ₅ 左 に 上 記 ソースの 表 示 結 果 を 示 す. 図 ₅ 右 にdata-inset 属 性 を 指 定 しないタイプのリスト を 表 示 する. 文 字 色 はCSSにて 青 を 指 定 してい る. 各 リストからのページ 遷 移 にはアニメーション を 伴 って 表 示 が 切 り 替 わる. 特 に 指 定 しない 場 合 は, 左 へスライドしながら 遷 移 するアニメーションが 使 われている. メインコンテンツ の 遷 移 には 左 へ のスライドアニメーション, 当 サイトについて の 遷 移 には,ページが 拡 大 しながら 切 り 替 わるポッ プアニメーションを 設 置 し 比 較 できるよう 作 成 した. 3.2 スマートフォン 対 応 サイトの 実 装 jquery mobileライブラリを 利 用 することで,ス マートフォン 対 応 のTDLを 作 成 した.jQueryの 特 徴 は ページ の 概 念 が 一 般 的 なWebサイトの 制 作 と 大 きく 異 なる 点 である. 一 般 的 なWebページ では,リンクをクリックするごとに, 異 なる HTMLソースファイルをブラウザが 読 み 込 まれる. しかし,jQuery mobile では,すべての Webページ のソースがひとつのファイルに 記 述 され,ページの 区 別 はHTML5の 拡 張 機 能 で あ るdata-role 属 性 図 6 TDLトップページのリスト 左 :data-inset 属 性 値 true 右 :data-inset 属 性 値 指 定 なし ( 150)

5 スマートフォン 向 け 津 波 ディジタルライブラリィの 構 築 ( 今 井 ) また,スマートフォンの 画 面 サイズはPC 画 面 と 比 較 して 非 常 に 小 さく, 一 度 に 表 示 できるデータに は 限 りがあり, 画 面 を 複 数 カラムに 分 割 したり, 入 れ 子 構 造 のリストを 何 項 目 も 表 示 したりするレイア ウトは 向 かない.そこで,リスト₁ 項 目 の 内 容 をあ らかじめ 折 りたたんだような 状 態 で 非 表 示 にしてお き,タッチされると, 再 表 示 するといった 開 閉 パネ ルやアコーディオンパネルが 用 意 されている. <div data-role= collapsible > <h3 class= wordbreak >1. 津 波 がくるぞお</h3> <div data-role= collapsible-set > <div data-role= collapsible > <h3 class= wordbreak > 日 本 語 ナレーション</h3> ( 中 略 ) </div></div></div> 上 記 のソースの 表 示 結 果 を 図 ₇に 示 す. 図 ₇ 左 の アコーディオンパネルの 表 示 例 では, 津 波 がくる ぞお の 項 目 の 中 に 入 れ 子 構 造 で 日 本 語 ナレー ション 英 語 ナレーション 解 説 がサブリストと して 入 れられている.また, 解 説 には 本 文 があ り,それぞれが,data-role 属 性 の 値 を collapsible にすることによって, 最 初 の 状 態 はアコーディオン パネルが 閉 じた 状 態 で 非 表 示 にしておき,タッチさ れると, 図 ₇ 右 のようにアコーディオンが 開 閉 して 解 説 文 章 が 改 めて 表 示 される 仕 組 みになっている. 図 7 アコーディオンパネルの 表 示 例 TDLではYouTubeなどの 動 画 サイトを 使 用 せず に, 動 画 を 閲 覧 できる 仕 組 みを 採 用 している.した がって,TDLにアクセスしたユーザは,PCブラウ ザとは 別 にメディアプレーヤーなどの 再 生 ソフトを インストールしておく 必 要 がある.しかし,この 仕 組 みであると,スマートフォンでは 再 生 することが できないことが 最 大 の 問 題 である.HTML5では <video>タグを 利 用 し,PC 用 ブラウザやスマート フォン 対 応 ブラウザに 関 わらず 再 生 できる 機 能 を 標 準 装 備 している.そこで 本 研 究 で 作 成 したビデオ 閲 覧 ページでは,<video>タグを 利 用 することで,ス マートフォンでは 映 像 再 生 できない 問 題 を 解 決 した. 以 下 に<video>タグを 用 いた 動 画 再 生 のソースを 示 す. <video controls preload= none width= 320 height= 240 > <source src= movie/sanriku.mp4 > <p> 動 画 を 再 生 するにはvideoタグをサポートしたブラウザ が 必 要 です</p> </video> 上 記 のソースのスマートフォンによる 表 示 結 果 を 図 ₈に 示 す.また, 同 じプログラムソースをPC 上 でSafariブラウザを 用 いて 表 示 した 結 果 を 図 ₉に 示 す. 上 記 のタグにおいて,controls preload 属 性 は Webページを 読 み 込 む 際, 複 数 の 動 画 コンテンツが ある 場 合, 複 数 動 画 を 同 時 にブラウザに 送 信 するか どうかを 指 定 する. 一 つのページに 多 数 の 動 画 が 用 意 されている 場 合 や,メモリの 少 ないスマートフォ ンで 閲 覧 する 場 合 は, 自 動 読 み 込 みをオフにしてお く 必 要 がある.<p>タグ 内 の 注 意 文 はvideo 要 素 に 対 応 していないブラウザで 閲 覧 した 際 に 表 示 される. このタグに 対 する 動 作 はWebブラウザによって 異 な る.Firefox3,Opera10,Internet Explorer6,7,8 は video 要 素 に 対 応 していないため, 上 記 の 記 述 では 動 画 は 再 生 されない.また, 動 画 そのもののコー デックもブラウザによって 大 きな 違 いがある. 現 時 点 では, 標 準 化 されていない. 本 研 究 では,まずは スマートフォンでの 動 画 再 生 を 可 能 とすることを 主 な 目 的 と し て,AVCLabs Inc.が 提 供 す る Any Video Converterフ リ ー 版 [5] を 使 用 し,PC 用 の TDLサイトに 掲 載 されていた 動 画 の 変 換 を 行 った. 変 換 フォーマットはmp4を 採 用 した.スマートフォ ンおよび PC 用 ブラウザSafari5.1.7でも 動 画 再 生 が 可 能 であることを 確 認 した( 図 ₈,9). TDLをこのようにスマートフォンのブラウザに 対 応 させたことで, 小 さな 画 面 でもTDLの 文 献 を 閲 覧 することが 可 能 となり,PC 用 のサイトを 閲 覧 し た 際 と 比 較 して, 画 面 の 拡 大 縮 小 の 操 作 が 激 減 す る.しかし,jQuery mobile を 用 いたプログラムソー スはかなりの 容 量 になり,ページ 遷 移 の 際 には 少 々 重 い 印 象 を 受 けた.しかし,TDLサイトの 読 み 込 み は 最 初 のアクセスの₁ 回 なので,ページ 遷 移 のたび にHTMLソースを 読 み 込 むよりははるかに 軽 い 印 象 を 受 ける. 今 後,スマートフォンの 機 能 が 向 上 し, 処 理 能 力 が 上 がることで 解 消 していくと 思 われる. ( 151)

6 謝 辞 本 研 究 のスマートフォンサイト 制 作 は2012 年 度 卒 業 生 船 山 えり 氏 の 卒 業 制 作 を 基 礎 としている.こ こに 記 して 謝 意 を 表 する. 図 8 video 要 素 を 用 いた 動 画 再 生 画 面 参 考 文 献 [1] Sayaka Imai, Yoshinari Kanamori and Nobuo Shuto: Tsunami Digital Library, J. Gonzalo at al. (Eds.) ECDL2006, LNCS 4172, pp , Springer-Verlag Berlin Heidelberg [2] Tsunami Digital Library: ( 相 模 女 子 大 学 内 限 定 サイト) [3] Sayaka Imai, Yoshinari Kanamori and Nobuo Shuto: Retrieving Tsunami Digital Library by use of Mobile Phones, L. Kovacs, N. Fuhr, and C. Meghini (Eds.): ECDL2007, LNCS 4675, pp , Springer-Verlag Berlin Heidelberg [4] 西 畑 一 馬 鍋 坂 理 恵 :jquery Mobile スマート フォンサイトデザイン 入 門,ASCII,2012. [5] Any Video Converter フ リ ー 版,AVCLabs Inc.: 図 9 Safariブラウザによる 動 画 再 生 の 確 認 4. まとめ 本 研 究 では,2001 年 より 稼 働 している 津 波 ディジ タルライブラリィのサイトリニューアルについて 報 告 し, 合 わせて, 近 年, 携 帯 端 末 として 主 流 になっ ているスマートフォンからのアクセスを 想 定 して, スマートフォン 対 応 のTDLサイトを 実 装 し,ス マートフォン 端 末 やPC 用 ブラウザのSafariにおい て,Webサイトの 表 示, 動 画 再 生 などが 可 能 であ ることを 確 認 した. 今 後 の 課 題 としては,TDLの すべてのページのスマートフォン 対 応 や, 文 献 や 新 聞 記 事 をスマートフォンから 閲 覧 した 際 の 効 果 的 な 提 示 方 法 などがあげられる. ( 152)