卒業研究 PHPによるGoogleMapAPI を利用した 喜田村緑郎日記システムの 試作 平成１９年2月１０日 情報システム解析学科

Presentation on theme: "卒業研究 PHPによるGoogleMapAPI を利用した 喜田村緑郎日記システムの 試作 平成１９年2月１０日 情報システム解析学科"— Presentation transcript:

1 卒業研究 PHPによるGoogleMapAPI を利用した 喜田村緑郎日記システムの 試作 平成１９年2月１０日 情報システム解析学科
　 卒業研究 PHPによるGoogleMapAPI を利用した 喜田村緑郎日記システムの 試作 平成１９年2月１０日 情報システム解析学科 谷研究室　新海 光 これから、卒業研究を始めたいと思います。今回私の卒業研究はPHPによるGoogleMAPAPIを利用した喜多村緑朗日記システムの試作です。谷研究室新海　光が発表します。

2 目次 はじめに・・ 仕様 デモンストレーション 今後の課題

3 喜田村緑郎ってどんな人？？ 明治４年(1871)年−昭和36(1961)年
大正12(1924)年から昭和26(1951)年ほぼ毎年確認さている日記 女形の芸を完成した人物 食にうるさい人物 この人は、明治４年から昭和36年までに生きていた人です。大正12年から昭和26年までほぼ毎日日記を書き続けていた人で女形の芸を完成した人物とも言われています。また食にとてもうるさい人物と言われています。

4 喜多村緑郎 を知ったきっかけ 学術フロンティアの一貫である文献をデジタルアーカイブ化する要求が国文学科からありました

5 喜多村緑郎 を知ったきっかけ 学術フロンティアの一貫である文献をデジタルアーカイブ化する要求が国文学科からありました

6 学術フロンティア 文部科学省が，大学院研究科，研究所の中から，重点的研究領域ごとに，優れた研究実績をあげ，将来の研究発展が期待される卓越した研究組織のプロジェクトに対して選定し，総合的に支援するという事業のことである

7 喜多村緑郎 を知ったきっかけ 学術フロンティアの一貫である文献をデジタルアーカイブ化する要求が国文学科からありました

8 デジタルアーカイブとは？？ 歴史的・文化的資産や自然環境などを始め、様々な分野の情報をデジタル映像やデジタル文書として保存・蓄積したもの。

9 検索エンジンで有名なGoogle社が地図WEBアプリケーションGoogleMapAPIを提供をしました

10 Google Map Google Map API 特徴 ブラウザー上で地図を動かせる 航空写真、マッ
ことができる関数集合 特徴 ブラウザー上で地図を動かせる 航空写真、マッ プ、マップと航空写真の合成に切り替えることができる ディスクトップアプリケーションのように動く。 これは、Google　社が提供しているサービスでブラウザー上で地図を動かせ、航空写真とマップ、航空写真とマップの合成をボタンで切替えることができるシステムです。つまり この技術を簡単に個人で扱えることができる関数集合としてGoogle Map APIがあります。 引用

11 研究目的 Web上に地図を表示 喜田村緑郎日記 デジタルアーカイブ

12 では 実際試してみます

13 研究目的 Web上に地図を表示 喜田村緑郎日記 デジタルアーカイブ 新しい発見や 日記を訂正したりするには それなりの知識が 必要
しかしこれでは、新しい発見や地図を訂正したりするにはそれなりの知識が必要です。 なので。 Web上に地図を表示

14 できる地図WEBアプリケーションシステムを
研究目的 喜田村緑郎日記 喜田村緑郎が歩いた場所を 知識がない人でも簡単に登録、削除、修正 できる地図WEBアプリケーションシステムを 試作 データー 登録 削除 修正 人文科学である喜田村緑郎日記をデジタルアーカイブ化し、そのデーターを追加、削除、修正、できるような地図Webアプリケーションに変更しました。 このことによって、喜多村緑朗が歩いた場所を知識がない人でも簡単に登録、削除、修正、できる地図アプリケーションシステムを試作しました。 編集可能な地図Webアプリケーションに 変更

15 目次 はじめに・・ 仕様 デモンストレーション 今後の課題

16 仕様 OS:Fedora Core 6 Webサーバー：Apache HTML組込み言語：PHP+Pear(拡張ライブラリ)
仕様　 今回試作する環境 OS:Fedora Core 6 Webサーバー：Apache HTML組込み言語：PHP+Pear(拡張ライブラリ) データーベース：MYSQL Web マップ：Google Map API Google社 クライアント サーバー ブラウザー Apache SQL データー ベース Google Map 今回試作する環境は、OSとしてFedoraCore６ WebサーバーはApache。HTML組み込み言語としてPHPと拡張ライブラリーとしてPear データーベースとしてMYSQL、今回のメインになる地図アプリケーションとしてGoogle　Map　APIを使っています。 管理者 X M L PHP Pear 利用者

17 システム機能 管理ページ 用語 日記 場所 ユーザー管理 公開ページ 用語 日記 Google Map
日記　　 場所　 ユーザー管理 公開ページ 用語 日記 Google Map 管理ページと公開ページの二種類にわけてあります。 管理ページは上から用語、日記、場所の登録、画像管理、ユーザー管理 公開ページは用語、日記、Google　Map

18 目次 はじめに・・ 仕様 デモンストレーション 今後の課題

19 デモ内容について 喜多村緑朗が歩いた場所の登録、削除、修正 昭和６年４月２６日データー 大野屋根 入力値 緯度、経度 場所 説明 出力
昭和６年４月２６日データー　　大野屋根 入力値 緯度、経度 場所　　　　 説明 　　　　　 出力 歩いた場所を地図上に表示し、歩いた場所を順に表示

20 編集可能な喜多村緑郎日記 地図WEBアプリケーション
デモンストレーション してみます

21 目次 はじめに・・ 研究目的、背景 仕様 今後の課題

22 今後の課題 目的なデーターを探すために検索機能を付ける。 日付ごとにマップにポイントを表示できていない。
削除時、修正時、に修正しやすいように検索をつける。現在全データーを地図上に表示できるようになったが、日付、ごとにマップに表示させること

23 以上で 発表終わります ありがとうございました

24 使われている技術 GoogleMapAPI Ajax XML DOM 非同期通信 Javascript

25 Ajax 特徴 ページの遷移なしで動的に変化してくれる ディスクトップアプリケーションの動作をインターネット上でも実現可能
Ajax（エイジャックス）はJavascriptによる 非同期通信でXMLデーターをクライアントとサーバーサイドでやりとりを行う技術を総称しています。なにか新しい技術そのものをしめすのではなく古くからある技術を寄せ集めてよみがえらせた技術です。 最大の特徴としてページの遷移なしで動的に変化してくれます。 これはこれまでディスクトップアプリケーションでは当たり前の動作がインターネット上のWebアプリケーションでも実現できるようになりました。

26 XML 特徴 文書やデータの意味を構造的に記述可能 特定のソフトウェアに依存しないデータ形式である点 ユーザーが独自のタグを指定できる
人間、ソフトウェア両方とも理解しやすい 特徴として文章やデーターの意味を構造的に記述可能です。 また特定のソフトウェアに依存しないデーター形式である点 ユーザーが独自のタグを指定できる 人間、ソフトウェア両方とも理解しやすい

27 XML 名前 　新海　光 学籍番号　５４０３０１９ クラス　　３８ 名前 学籍番号 クラスと言うテキストがあったとします これをXMLに表すと

28 XML <?xml version=”1.0” encoding=”UTF-8”?>
属性 <?xml version=”1.0” encoding=”UTF-8”?> <students id=” ”> <名前>新海 光</名前> <クラス>38</クラス＞ </students> 開始タグ 要素 終了タグ このようになります。 かならず開始タグから終了タグを囲います。 その間を要素と言われ要素の中に属性を置くことができます。

29 DOM(Document Object Model)
特徴 XMLにアクセスするためのAPI DOMTreeという木を作りXML文章内のデーターの順番に関係なく自由にアクセスできる 特徴は XMLにアクセスするためのAPIです。 また、DOMTreeという木を作り文章内のデーターの順序に関係なく自由にアクセス可能です。

30 DOM(Document Object Model)
<?xml version=”1.0” encoding=”UTF-8”?> <students id=” ”> <名前>新海 光</名前> <クラス>38</クラス＞ </students> DOMTree Root Students id= 先ほどのXMLをDOMTreeにすると以上になります。 名前 新海 クラス 38

31 DOM(Document Object Model)
<?xml version=”1.0” encoding=”UTF-8”?> <students id=” ”> <名前>新海 光</名前> <クラス>38</クラス＞ </students> DOMTree Root クラス３８にアクセスすると

32 DOM(Document Object Model)
<?xml version=”1.0” encoding=”UTF-8”?> <students id=” ”> <名前>新海 光</名前> <クラス>38</クラス＞ </students> DOMTree Root Students id=

33 DOM(Document Object Model)
<?xml version=”1.0” encoding=”UTF-8”?> <students id=” ”> <名前>新海 光</名前> <クラス>38</クラス＞ </students> DOMTree Root Students id= 名前 新海

34 DOM(Document Object Model)
<?xml version=”1.0” encoding=”UTF-8”?> <students id=” ”> <名前>新海 光</名前> <クラス>38</クラス＞ </students> DOMTree Root Students id= 名前 新海 クラス 38

35 非同期通信 特徴 Webブラウザーはリクエストを送信したら返信を待たない サーバーは必要なデーターのみを送信
Ajaxの心臓部と言われている技術です。 Webブラウザーは、ユーザー側からの要求を送信したら返信を待たないです。 また、ページの一部分を更新したら、自動的に一部分を更新してくれます。

36 クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信 これを図で説明すると

37 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 これを図で説明すると

38 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 ビジネスロック 処理 これを図で説明すると

39 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 データーベース 処理 ビジネスロック 処理 これを図で説明すると

40 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 データーベース 処理 ビジネスロック 処理 データー返信 これを図で説明すると

41 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 データーベース 処理 ビジネスロック 処理 ページの一部の データー データー返信 これを図で説明すると

42 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 データーベース 処理 ビジネスロック 処理 ページの一部の データー データー返信 結果の返信 これを図で説明すると

43 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 データーベース 処理 ビジネスロック 処理 ページの一部の データー データー返信 結果の受信 結果の返信 これを図で説明すると

44 これを図で説明すると クライアント Webサーバー アプリケーションサーバー DBサーバー XMLHttpRequest 送信
リクエスト受信 データーベース 処理 ビジネスロック 処理 ページの一部の データー データー返信 結果の受信 結果の返信 これを図で説明すると ページの一部 を更新

45 Google Map システム機能 管理ページ 用語 追加、削除、修正 日記 追加、削除、修正 地域 追加、削除、修正
用語　追加、削除、修正 日記　追加、削除、修正 地域　追加、削除、修正 場所　追加、削除、修正 ユーザー管理　追加、削除 公開ページ 用語 日記 Google Map 管理ページと公開ページの二種類にわけてあります。 管理ページは上から用語、日記、地域、場所公開ページは用語、日記、Google　Map

46 Pear PHPの拡張ライブラリー DB：データーベースとの接続、追加、削除、修正をしてくれる。 Auth：認証
HTML　QuickForm フォーム HTML　QuickForm　Controller　 ：フォームの遷移

47 Kitamuradb Auth 認証テーブル Youhotb 用語テーブル Nikkitb 日記テーブル placetb 場所テーブル
データーベース名 Kitamuradb テーブル名 Auth 認証テーブル Youhotb 用語テーブル Nikkitb 日記テーブル placetb 場所テーブル

48 データーベース設計 Auth 認証テーブル Userid 整数 ユーザーID Username 可変長文字 ユーザ
Password 可変長文字 パスワード

49 データーベース設計 Youhotb 用語テーブル Yougoid 整数 用語ID Yougo 可変長文字 用語
Kaisetu 可変長文字 解説

50 データーベース設計 Nikkitb 日記テーブル nikkiid 整数 日記ID datename date型 日付
weather 可変長文字 天気 Nikki 可変長文字 日記 Hosoku 可変長文字 捕捉説明

51 データーベース設計 placetb 場所テーブル Plcid 整数 場所ID Locid 整数 地域ID Dateid 整数 日付ID
Description 可変長文字 説明 Link 可変長文字 リンク Image 可変長文字 イメージファイル Lat 浮動小数点 緯度 Lng 浮動少数点 経度