GoogleMapsを利用した コレクションシステムの試作 谷研究室　隈部宣道　谷中理枝　出口直輝

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

研究の目的 研究の意義 文化遺産をデジタルに保存 web上で公開 付加情報を加えれる デジタル化 web上で公開 興味がある資料 オリジナル資料の閲覧は難しい 資料を痛ませずに閲覧可能

先行研究について 喜多村緑郎日記のデジタルアーカイブ 日記を年表ごとに GoogleMapsを利用 単語でリンクを作成可能 松嶋 慎太郎

共同研究について 史学科と共同の経緯 切手イベント後援：日本大学文理学部情報科学研究 所 会場内で公開する絵葉書デジタルアーカイブの構築 史学科からの要望 GoogleMapsを利用した地図上のインターフェース 検索機能の多様化（50音検索、画像検索、…etc） 画像を開いた後の機能（拡大表示、縮小表示） 会場に来た人が楽しめるシステムにしてほしい 将来的にはweb上での公開

研究対象について ハルビン絵葉書のデジタルアーカイブ製作 目的 切手パビリオンでの公開 Web上での公開 先行研究との違い 研究対象が画像であること 画像の処理機能をつけること 幅広い検索の実装

ハルビンについて 中国の北部 黒龍江省 19世紀初頭までは小さな漁村 現在は文化の融合された都市 東方のパリ、東洋のモスクワと称されている

研究するのは可能だが、面白みがあるわけではない!! 黒崎コレクションについて 黒崎コレクション 日大が借りて作り上げた既存のアーカイブ 研究するのは可能だが、面白みがあるわけではない!!

システム概要 公開用 検索の種類 ワード検索 画像検索 マップ検索 画像処理 拡大表示 管理用 追加処理 画像の追加 付随情報の追加 編集処理 葉書の編集 葉書の削除

システム概要 使用言語 PHP JavaScript SilverLight データベース PostgresSQL 動作環境 OS：CentOS webサーバー：apache 対応ブラウザ FireFox

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

Ajaxとは Asynchronous JavaScritp ＋ XML Webアプリケーション構築手法 プラグイン不要 リッチなインタフェイスを提供 非同期通信による画面遷移を伴わない表示

従来のWebアプリケーション 同期通信 リクエスト送信 クライアント 検索 ■□●○◆◇ サーバ クリック 更新されたWebページ

従来のWebアプリケーション 同期通信 リクエスト送信 クライアント サーバ 更新されたWebページ

従来のWebアプリケーション 画面遷移 クライアント サーバ 同期通信 リクエスト送信 検索 ■□●○◆◇ ○□◇◇△ ・・・・・・・・・・・・・・・・・・・ □△▽●☓■ ▽▼●◇○ ・ 画面遷移 更新されたWebページ

AjaxWebアプリケーション クライアント サーバ クリック 同期通信 リクエスト送信 検索 ■□●○◆◇ ○□◇◇△ ・・・・・・・・・・・・・・・・・・・ □△▽●☓■ ▽▼●◇○ ・ クリック データ 画面の一部を 動的に変更

Ajaxアプリケーションの利点 データサイズが最小限 Webアプリケーションよりユーザーを待たせない 煩雑さを軽減 クライアントに処理を委譲

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

GoogleMapsとは Googleが提供する地図検索サービス APIは無償提供 Webページに地図の貼り付け可能 Ajaxを全面的に採用

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

システム全体図 一般ユーザー 管理者 Google社 GoogleMapsサーバ クライアント クライアント ハルビン絵葉書サーバ

公開用ページ

ページの初期設定 Google社 GoogleMapサーバ 一般ユーザー ハルビン絵葉書サーバ クライアント GoogleMaps サムネイル

公開用ページ

マーカー

マーカークリック時 一般ユーザー クライアント ハルビン絵葉書サーバ クリック GoogleMaps 詳細情報

サムネイル クリック

サムネイル Silverlightで構築 Silverlight： Microsoftが開発したRIAを実現す るためのフレームワーク 画像をクリックすると GoogleMaps上のマーカーから Windowを開く 詳細情報を表示する アクセスした時点で登録されている全 ての画像を表示

サムネイルクリック時 一般ユーザー クライアント ハルビン絵葉書サーバ GoogleMaps サムネイル　　 詳細情報 クリック

テキストボックス

テキストボックス

テキストボックス ２５０msに１度更新を確認 更新があればサーバと通信をし、 候補を表示 サムネイルを候補に絞る マーカーを候補に絞る 候補は絵葉書の掲載対象 ふりがな検索も可能 データフォーマットに JSONを使用

JSON JSON( JavaScript Object Notation ) XMLよりパースが容易 XMLより軽量 Ajaxの分野ではよく採用される C/C++ , Java , Perl , PHP , Python , Ruby‥ 多くの言語で利用可能

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

CSS Webサイトのレイアウト を定義する規格 利点 見やすいhtml文にな る メンテナンスが楽

CSS html文のみ H T M L

CSS html文＋CSS C S S H T M L

CSS Webサイトのレイアウト を定義する規格 利点 見やすいhtml文にな る メンテナンスが楽

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS デザインの工夫点 黒 崎 コレクション

CSS システムのデザインの工夫点 画面サイズ フレーム分け 地図の大きさ 背景色 文字の情報量

CSS 問題点 IEでの不具合 対応策 IE用のCSSの作成 アンダースコア･ハック

CSS アンダースコア･ハック 　IEのバグを利用して 　IEでだけ読まれるよ 　うにする手法 　　　この部分

Tphoto 画像を重ねるのに使用したプラグイン 古地図を重ねる のに利用

Tphoto 古地図を重ねた理由 Googlemapsで中国の地図が完全ではない 過去と現在の町並みの比較 日本 中国

Tphoto Tphotoにより実現可能な事 Googlemaps上の任意の場所に画像貼付け可 能 大きさの設定 透明度の指定

試作システムのデモ 実際に使ってみる

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

管理側のシステムについて 管理画面へ ok 認証 ng トップ画面 トップ画面に戻る 直接管理画面へ 認証画面 IdとPWを入力 管理画面に直接行けない工夫 セッションについて クライアントで値を保存する機能 認証時のIDとPW 管理画面へ ok 認証 ng トップ画面 トップ画面に戻る 直接管理画面へ

画像のアップロード アップロードファイルチェック 画像ファイル 規定容量 拡張子jpg,gif,png アップロードファイルの保存 ファイル名の変更 1.jpg 2.gif 検索用の縮小画像 small/1.jpg small/2.gif

絵葉書情報の追加 画像の追加 表と裏からそれぞれ1枚ずつ 画像名を保持する 場所の追加 GoogleMapsから場所を選択 緯度と軽度を保持する 付随情報の追加 テキストを打ち込んでいく 登録画面 Input データの追加 確認画面 Confilm 書き換え不能 処理画面 Proc データベースへの登録 終了画面 Finish 正常に終了 エラー画面

絵葉書情報の編集・削除 場所 アイコンを選択すると情報が出る 編集or削除 画像 選択すると地図上でアイコンが選択 Search 登録画面 Input データの追加 確認画面 Confilm 書き換え不能 処理画面 Proc データベースへの登録 終了画面 Finish 正常に終了 編集画面 Search データの特定をする エラー画面

管理者側まとめ セキュリティ セッションを利用した認証 ユーザーが任意に書き込めるスペースの制限 画像アップロードで悪質なスクリプト対策 利便性 データの登録は1画面で行える 公開用と同じ検索システムが利用出来る

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

本システムのWeb公開について Web公開における問題点 クロスブラウザ非対応 Microsoft Silverlightの普及率 改善点 SilverlightをやめｊQueryへ jQuery：インターフェースに富んだJavaScript ライブラリ アンダースコアハックによりクロスブラウザを実現

公開用システムのデモ 実際に使ってみる

目次 研究の目的・先行研究について 公開用ページ Ajaxとは GoogleMapsとは 実装した機能（サムネイル、テキストボックス） 実装した機能（CSS、古地図透過） デモ１　切手パビリオン版 管理用ページ セッション 登録画面　編集・削除画面 デモ２　web公開用2.0版 今後の課題

今後の課題 要望 当時の情報入手 写真,絵葉書の追加 表情検索等 課題 双方向性のあるシス テムの構築 新たな検索システム の追加

御静聴ありがとうございました