GoogleMapsを利用した コレクションシステムの試作

Presentation on theme: "GoogleMapsを利用した コレクションシステムの試作"— Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23 公開用ページ

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

25 公開用ページ

26 マーカー

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

28 サムネイル クリック

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

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

31 テキストボックス

32 テキストボックス

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

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

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

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

37 CSS html文のみ H T M L

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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