ウェブページのしくみ おさえておきたい用語 ウェブページの基本 CSS

おさえておきたい用語
観光地理情報学特論Ⅰ 2015年度第12回
観光を学ぶものでも知っておくべき
ウェブページのしくみ
首都大学東京大学院 都市環境科学研究科 観光科学域
倉田 陽平
[email protected]
•
•
•
•
•
•
•
ウェブページの基本
サーバとクライアント
html
CSS（スタイルシート）
CGI
API
JavaScript
ウェブアプリ
リクエスト
html Document
追加リクエスト
画像や音声など
クライアント
サーバ
例：
TOKYO METROPOLITAN UNIVERSITY
2
CSS（スタイルシート）の役割
3
CGIの役割
何をどの位置にどれくらいのサイズでどの
ように出す、というのを細かく指定できる
CGIを使った例
リクエストに応じて動的なページ（またはその
一部のコンテンツ）の作成を行い、クライアント
に返してくれる、サーバ側のプログラム
入力フォーム
例：
最初のウェブページ
空欄に書き込んで
ボタンを押した
アクセス
カウンター
その場で作成された
ウェブページ
（またはその一部）
CGIがそれを
解釈して処理
4
APIとは
5
APIを使った例
JavaScriptとは
サーバを介さずに動的なページを作成できる
クライアント側のプログラム
大企業等が一般公開しているサービスで、
リクエストに応じてページのコンテンツや
データをサーバが返してくれるもの
最初のウェブページ
6
最初のウェブページ
（プログラム付き）
それぞれの
サーバ
何か操作
その場で処理して
ページを一部変更
リクエスト
画像やデータなど
Google Maps
YouTube
など
7
どこにどのサイズで
埋め込む欄を作っておくか
ということは
ＣＳＳで規定してある
8
9
JavaScript + API
JavaScript+APIの例
①最初のウェブページ
（プログラム付き）
ウェブアプリとは
JavaScript（＋APIやCGI）を駆使すること
で、独立したアプリのように振る舞うことが
できるウェブページ．
ウェブの進化にともない、かなり高度な
処理が可能になった
それぞれの
サーバ
③操作に
応じた処理
必要に応じ
リクエスト
②何か操作
画像や
データなど
④一部改変
されたページ
Google Maps
YouTube
など
10
ウェブアプリの例
http://www.comp.tmu.ac.jp/kurata/tools/heatmap_visualizer.html
※ 音声や動画の再生
線画やグラフの描画
地図の描画
ファイルの読み出しや保存
位置情報など各種センサ情報の取得
などなど
12
11
ウェブアプリの例
だれでもガイド！の場合
• GoogleストリートビューAPIを利用
→ストリートビューを全面に貼り付け
• さらにその上にキャラクターとセリフを
指定位置に貼り付け（スタイルシート利用）
• ストーリーの進行に応じて一枚のページを部分的に
書き換えているだけ（違うページに遷移してない）
13
http://www.ctplanner.jp
• １６：９の画面を想定し、以下のように
スタイルシート（ＣＳＳ）で規定している
4.8
• オンラインのデータを自動収集したい
– html＋Microsoft Excelのマクロ（VBA）
– JavaScript＋各データ提供系API
– html （＋CSS）
• そこに地図を出したい
.8
.8
4.8
• オンラインのデータを定期的に自動収集したい
– html＋JavaScript＋Google Maps API
– CGI（PHP）＋MySQL
• 投稿機能をつけたい
ログイン機能をつけたい
5.4
ここは院生室です．
ツーリスが天井裏にすんでいます．
15
参考：研究でプログラムを利用するに
は何を勉強すればいいのか？
• ふつうのホームページをつくりたい
• 単に手持ちのデータの自動処理がしたい
– Microsoft Excelのマクロ（VBA）
• 手持ちのデータの高度な統計処理がしたい
– html＋CGI＋MySQL
1.8
4.8
.8
.8
14
ウェブページをつくるには
何を勉強すればいいのか？
だれでもガイド！の場合
拡大縮小アイコン
地図表示アイコン
「戻る」アイコン
http://www.comp.tmu.ac.jp/kurata/DaredemoGuide/
–R
16
17
18