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

Slides:



Advertisements
Similar presentations
Integrated Personal Page C05823 森本万里子 C05829 西山礼恵 C05899 高木華子.
Advertisements

データベースの基礎知識 ACEESS の基本操作. データベースの基礎知識 データベース  特定のテーマや目的に毎のデータの集合体 データベースソフトウェア  データベースを作成、管理するソフトウェアの総 称 Oracle(Oracle) IBM(DB2) Microsoft(SQL Server)
Web アプリケーション開発 ~図書館管理システム~ 北海道情報大学 情報メディア学 部 情報メディア学科 新井山ゼミ 高橋 隼.
1 JSP の作成 JSF による Web アプリケーション 開発 第 4 回. 2 ここでの内容 JSF での JSP の作り方と動かし方につい て学ぶ。
© 2005 株式会社はてな 本資料の一部または全部の無断複製・転載を禁じます prototype.js と Perl で Ajax 株式会社はてな 伊藤 直也
1 なんとなく Ajax ~新しくて古い XMLHttp 川合孝典 (Kansai.pm) 2005/5/22.
OWL-Sを用いたWebアプリケーションの検査と生成
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
RailsによるAjaxの利用 回生 小野 実.
4.ユーザー登録マニュアル              Version 年6月10日 国立情報学研究所.
情報基礎A 情報科学研究科 徳山 豪.
DB(データベース)のおはなし 作成者:小野正広 DBと言っても、  ドラゴンボール ではないですぞ! 3/1/2017.
JXTA Shell (3) P2P特論 (ソフトウェア特論) 第6回 /
Webサービスに関する基本用語 Masatoshi Ohishi / NAOJ & Sokendai
ハルビン絵葉書コレクションシステムの再構築と機能追加 -サーバ側:PHPとMySQLを用いて
JPAを利用した RESTful Webサービスの開発
Flashプレイヤーを使った動画配信 情報工学科 宮本 崇也.
WEBから確認できる 駐車場管理システムについて
第2章 ネットサービスとその仕組み(前編) [近代科学社刊]
NC-2 情報通信基礎実験 WEBデザイン基礎実験 (2日目) 担当:清水,田代 副手:浦辺,石井.
JavaによるCAI学習ソフトウェアの開発
「絵葉書を通じてのハルビンの 街の印象調査」システムUIの iPadアプリ化 谷研究室  飯 祐貴.
Web使用のファイル送受信システムの実験
Al-Mailのインストールと使い方 インストール –1 (pop-authの設定、Al-Mailのインストール用ファイルをダウンロード)
「まめだくん Ver.1.0」 特徴と利用方法.
Webサイト運営 09fi118 橋倉伶奈 09fi131 本間昂 09fi137 三上早紀.
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
オペレーティングシステムⅡ 第3回 講師 松本 章代 VirtuaWin・・・仮想デスクトップソフト 2009/10/16.
卒研:データベースチーム 第4回 DOMを使った処理
平成19年5月19日 第3版 東京大学理学部生物化学図書室 前田 朗
HTTPプロトコルとJSP (1) データベース論 第3回.
Webを利用した授業支援システムの開発 北海道工業大学 電気電子工学科 H 渋谷 俊彦.
JQueryでAjax 藤田@ジャストプレイヤー ※参考しまくり文献 jQuery日本語リファレンス.
複数CPU間のための共有メモリ 小島 隆史(中央大学大学院理工学研究科 國井研究室)
Web上で管理・利用できる 面接予約データベースシステムの構築
中間発表 アリの王国更新 金華山の写真整理 柏崎 奈々 中間発表を始めます。
サーバ構成と運用 ここから私林がサーバ構成と運用について話します.
(B2) 親: minami, kazuki 多様な認証機器に対応する 認証システム (B2) 親: minami, kazuki.
JSPの作成 J2EE II 第3回 2005年4月10日.
情報コミュニケーション入門 総合実習(1) 基礎知識のポイント(2)
GoogleMapsを利用した コレクションシステムの試作
Googleツールを用いた新しいWebシステムの開発
データベース設計 第9回 Webインタフェースの作成(1)
基礎プログラミング演習 第1回.
実際にたたいてAPI APIの初歩からプログラムまで使用方法のAtoZ.
空間情報サーバ (株)パスコ.
第8章 Web技術とセキュリティ   岡本 好未.
SVGを用いた地震データ検索・3D表示アプリケーションの開発
介護支援システム SYLVIE 頼れる介護のセキュリティ 開発メンバー リーダー 岩本 和磨
管理画面操作マニュアル <サイト管理(1)> 基本設定 第9版 改訂 株式会社アクア 1.
P2P方式によるオンラインゲームの研究、開発
9.1 DOMの概要 9.2 DOMプログラミングの基礎 9.3 DOMのプログラミング例
理学部 情報科学科 指導教官 千葉 滋 助教授 学籍番号 03_03686 内河 綾
対応可否 スキル一覧 株式会社エージェント 2015年10月7日 Ver.1.0.
制作技術ー3 双方向通信 : CGIシステムと環境変数
平成19年10月19日 図書系のための アプリケーション開発講習会
情報コミュニケーション入門e 第11回 Part2 Web入門(1)
     年  月  日 名前 太郎 x 班.
XMLゼミ 1.3 XML文書の表示 1.4 XMLの役割 1.5 XMLとプログラミング M2 正木 裕一.
非同期分散型の活動を支援する 研究室向けグループウェアの改善
情報処理概論Ⅰ 2007 第5回 2019/4/7 情報処理概論Ⅰ 第5回.
Firebaseを用いた 位置情報共有システム
基礎プログラミング演習 第12回.
地域生活支援システムの開発 越田研究室 j0431 野津洋二.
独習XML ~第1章 XMLの基礎~ 1.1 XML文書の基礎 1.2 XMLとHTML
Microsoft SharePoint Online の Web サイトを カスタマイズする方法
Googleマップを活用した 生物調査データベースの構築
第2回 Webサーバ.
Microsoft Office Project Server 2007
地理情報コンテンツ・データベースコンテンツ新規作成
Presentation transcript:

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

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

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

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

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

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

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

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

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

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

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

では 実際試してみます

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

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

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

仕様 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としてFedoraCore6 WebサーバーはApache。HTML組み込み言語としてPHPと拡張ライブラリーとしてPear データーベースとしてMYSQL、今回のメインになる地図アプリケーションとしてGoogle Map APIを使っています。 管理者 X M L PHP Pear 利用者

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

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

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

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

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

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

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

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

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

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

XML 名前  新海 光 学籍番号 5403019 クラス  38 名前 学籍番号 クラスと言うテキストがあったとします これをXMLに表すと

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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