Googleインターフェース

Googleインターフェース
ACE 発表者 suzuk
アウトライン


Google




GoogleMAPs
GooglePersonalised
Google Suggest
GMail






Rich Clinetとは？
Flash
Java Applet
CURL
Ajax
まとめ
Rich Client



7分
比較とAJAXを話す理由
AJAX


13分
AJAXとは？
AJAXのサンプル
AJAX実習
10分
10分
Google 理念
Googleは検索を行う会社です。
星占いも、
チャットも、
ファイナンス
もありません。
Google 理念
Googleは、ユーザーが一刻も早くウェブサイ
トから離れることを目標に掲げています。
「今すぐの喜び」を信じています。
Sign in
そのために
ウェブ
イメージ
リ
ニュース
グループNew!
ディレクト
サイトのページから余計なビットやバイトを残らず削ぎ落としました。
サーバー環境の効率を向上させることに全力を傾けてきました。
その結果
80億を超えるウェブページの中から、
約1/2秒以内に有効な検索結果をお届けで
きるようになり、
世界最大の検索エンジンに成長しました。
PageRank
 多くの良質なページからリンクされ
ているページは同じく良質である
 評価対象のページの被リ
ンク数をみる

元はノーベル生物学受賞者を予
測するために使っていたらしい
 リンクを張っているページの評価も
考慮する


Yahoo!など評価の高いページ
からのリンクは点数が高い
リンクをばんばん他のページに
張っているようなページのリンク
は点数が低い
ただ、
検索エンジンを提供すれば良いというだけで
はないのです。
PageRank開発者
Googleの使命は、
「世界中の情報を整理して、世界中の人たち
がその情報を使えるようにする」
だからです。
現CEO
そんなGoogleの新しい機能たちを紹介しましょう。
 GoogleLabs
 Googlism
 Google sets
 GMail
 GoogleSuggest
 GoogleMaps
 Google local
 GoogleMaps おまけ
http://ht.sfc.keio.ac.jp/~sato/ACE_KGPsample.html
にアクセス
まずは、Google工場にとんでみましょう。
http://labs.google.com
実用化
Google Maps
Googlism
“ Googlism.com will find out what
Google.com thinks of you, your friends or
anything! “
Googlism.comはＧｏｏｇｌｅがあなたやあなたのお友達やいろいろ
な物についてどう思っているか検索します。
たとえばBushの名前を入れて検索すると
・bush
・bush
・bush
・bush
・bush
is
is
is
is
is
the antichrist
the bomb
walking into a trap
irrelevant and must go
right to snub johannesburg
と、Bushで始まる文章が色々出てきます。
Googlism
徳田先生の場合
Gloogle sets
入力される5つほどのキーワードを基に、そのキーワード
が含まれるより広い意味での概念を理解し類義語を表示
してくれる。
例えば「Ferrari」「Toyota」などと入力すると、自動車メー
カーを探してるのだということを理解し、「Ford」や「BMW」
などさまざまな自動車メーカーの一覧をリストアップする。
Google sets
Gmail
□ Gmailとは
Gmail は検索機能つきの無料ウェブメールサービスで約
2,000 MB (2 GB) の保存容量が用意されています。また、
Google の強力な検索エンジンでサポートされており、アカ
ウントで送受信したメッセージをすぐに見つけることができ
るので、手間をかけてメッセージを分類する必要はありま
せん。
Gmail では、メールのすべてのやりとりが自動的に表示さ
れるので、文脈に沿ってメッセージを読むことができます。
また、ポップアップ広告や関連性の低いバナー広告では
なく、関連性の高いテキスト広告や関連ウェブページへの
リンクがメッセージの横に表示されます。
Gmail
やってみましょう
 Pukiwiki という単語の
場所が知りたい。
Gmail
Google Suggest
 ユーザーが検索ボックスにキーワードを入力して
いる間に、リアルタイムでキーワード提案をしてく
れる機能です。
例えば“program”というキーワードを入力すると、
“progr”のところでGoogleが
"programming“
“programming languages”、
“progesterone”
などの候補を表示してくれる。
Google Suggest
候補を挙げてくれます
自分の予想した
単語は出てきたかな？
Google Maps
 Nasaの衛星写真システムをGoogleが導入し
たことで、スクロール可能な地図な地図を作成
することに成功した。
 Local
 Direction
出発地と、目的地を入力欄に入力すると、そ
の道順を示してくれる。
Google Maps
衛星写真
Google Maps
自由の女神を探してみよう!!!
Google Maps
Google Maps： Google Local
Google Maps ：Drection
Googleサービスの特徴
 優れたユーザインタフェース
 ユーザの操作に瞬時に反応する
 見た目がきれい
 Webブラウザ上で動的なアプリケーションを実現
する
Rich Client
Rich Client
動的なWebコンテンツを実現する
なぜ今Rich Clientを取り上げるのか？
 昨今のアプリケーション開発
 その多くがWebアプリケーションシステムである
 Google効果
 話題を呼ぶGoogleのサービス公開
 Google Map
 GMail
Rich Client誕生の背景
 HTMLベースでの限界
 表現力が貧弱である
 Thin Client
 サーバ側の負荷が増大する
 サーバサイドの要求処理であるため
Rich Clientとは？
 標準Webブラウザと比べて高いUI機能
 操作性
 表現力
 機能性
 サーバとの通信・連携機能がある
RichClient と従来のWebの関係
Flashとは
 ブラウザ上でアニメーションやゲームが実現で
きる！
 Flash Playerで再生する (普及率98％)。
⇒世界でもっとも普及しているリッチクライアント。
 回線に付加をかけない。
 読み込んでから再生するから。
 ファイルも小さい。
Flash サンプル
マクロメディアオフィシャルサイト
http://www.macromedia.com/jp/
Java Appletとは
 Java VM（Java Virtual Machine）上で動く
 OSに依存しない。
 回線に負荷をかけない。
 プログラムをユーザーに送信しローカルで実行させる
 ブラウザで動的な表現ができるようになる
 ブラウザ版YahooチャットもJava Applet！
 滑らかな動きが苦手。
 ファイルがFlashより大きい。
Java Appletサンプル
歪む花の画像
http://www.yo.rim.or.jp/~nakagawa/WWW/Zoomer/
CURLとは
 ブラウザ・プラグイン型
 クライアントサイドで動作する次世代のWeb言
語
 完全なオブジェクト指向サポート
 高度な操作性の提供
 通信付加を下げる
 サーバから転送するアプレットサイズが小さい
 バージョン追加により過去の動作環境を保障
CURLサンプル
CURL オフィシャルサイト
http://wisdom.sakura.ne.jp/system/winapi/win32/win109.html
Ajaxとは
 ほとんどのWebブラウザで動く
 Java Script機能が必要
 XMLHｔｔｐRequestオブジェクトが必要
 Webブラウザがサポート
 Operaは未実装
Ajaxサンプル
 Google Maps
http://maps.google.com/
機能比較
 Ajaxと他のRich Clientとの違い
 より広範囲の環境にサービスを提供できる
 Webブラウザ標準の機能だけで良い
名前
実行環境の普及率必要なコンポーネント
Flash
○
Flash P lug In
Java A pplet
○
Java R untim e
CURL
△
CURL
A jax
◎
なし
Ajax
シンプルにして十分な機能
Ajaxとは？
 Ajax(Asynchronous JavaScript +XML)
 非同期なJavascriptとXMLの連携
 特徴
 古く簡単な技術からできている
 JavaScriptによる下記技術の統合




XML,XSLTを使用したデータのやりとりや制御
XMLHttpRequestを用いた動的なデータ検索
XHTMLとCSSによる基本レイアウト
Documentオブジェクトを使用した、ページの動的変更
Googleサービスによる影響
 旧来からある技術の見直しを検討させている
 Googleは昔からある技術を組み合わせて、
「最新のアプリケーション」を構築した
Ajaxの考え
 基本的な思想
 ユーザにサーバとの通信を意識させない
※ 従来のWebアプリの問題点
 全ての動作がhttpリクエストを送ってしまう
 ユーザは処理毎に待たされる
 サーバサイドの負担増
システム概要図
Ajaxエンジン
 概要
 インターフェースのレンダリングとサーバとの通信を担当
 ページとは非同期にデータをサーバーから読み出す
 最初のGETメソッドでWebページの変わりに読み込まれる
 動作
 ユーザーの全てのアクションはhttpを直接呼び出すのでは
なく、JavaScriptによってAjaxエンジンを呼び出す
 外部のデータが必要な時のみサーバーとの通信を行う
（主としてＸＭＬが用いられる）
サンプルコード(郵便番号による住所検)
 新しいAjax用のサーバとの通信オブジェクトを生成
try {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/xml&qu
ot;);
}
・・・・・・
サンプルコード(郵便番号による住所検)
 返答メッセージ用ハンドラ
function handleHttpResponse() {
・・・・・・・
var xmlDoc = xmlHttp.responseXML;
if (xmlDoc.documentElement) {
・・・・
}
}
サンプルコード(郵便番号による住所検)
 郵便番号から住所を取得する関数
function getAddrss() {
var zip = document.getElementById('zip').value;
xmlHttp.open(‘GET’,
‘ajaxzip.cgi?z=’ + true);
xmlHttp.onreadystatechange = andleHttpResponse;
xmlHttp.send(null);
}
サンプルコード(郵便番号による住所検)
 サーバから取得したオブジェクトを解析
var xmlDoc = xmlHttp.responseXML;
if (xmlDoc.documentElement) {
var pref =
xmlDoc.getElementsByTagName('pref').item(0).
firstChild;
var city =
xmlDoc.getElementsByTagName('city').item(0).
firstChild;
var ville =
xmlDoc.getElementsByTagName('ville').item(0).
firstChild;
}
Ajax実習
 今回の実習では
 郵便番号による住所検索
 GoogleMap
 必要なもの
 Webブラウザのみ
まとめ
 Googleサーフィンをしました
 Rich Client
 Webブラウザ上の動的できれいなインターフェー
ス
 Ajax
 Java ScriptとXMLで実現する Rich Client
 Ajaxデモ
 必要なのはWebブラウザだけ

Download Report