Google Developer Dayに参加してきたのでレポートを

会場：パシフィコ横浜
日時：10:00〜18:00(13:00〜15:00、2セッションに参加)

参加セッション
１．HTML5により拓かれる次世代Web →　HTML5の概要について
　[1]HTML5の概要
　[2]規格の概要
　[3]新機能の解説 → 実例などはこちら

２．オフィスアワー(GEO/位置情報)への参加
　[1]色々きいてみた

-
















































































１．HTML5により拓かれる次世代Web

































































































































































-
















































































[1]HTML5の概要
HTML5はアプリケーションプラットフォーム
　・HTML4までは基本的に構造化文書を定義するという姿勢であった
　・HTML5は構造化文書として強化されるっとともに
　・アプリケーションを作るための要素が追加
　・挙動の定義
　・さまざまなAPIを定義
　・アプリケーションを動かすための標準プラットフォームを定義する規格へ

HTML5がウェブの使いやすさを向上させる
　・オフライン関連機能
　・SVG,MathML,canvas,audio,videoなどによる表現力向上
　・メニューやフォーム強化

開発者にとってのメリット
　・プラグインを使わないと実現できなかったことの一部がHTMLとスクリプトで可能になる
　　→プラグインを使うと、ブラウザごとの検証などが別途必要だった
　　
　・メニューやフォーム検証などに大量のスクリプトコードが必要だったのが、HTMLの記述だけで可能になる
→メニュータグなどを使うとかなり効率化できる
　・規格であいまいだった点や、標準規格が存在しなかった部分が規格化されてブラウザ間の非互換が現象
　　→例：Windowオブジェクト

主な新機能
　・WebWorkers:スクリプトデマルチスレッド
　・WebSockets
　・WebStrage
　・アプリケーションキャッシュ
　・フォームの強化
　・メディア要素
　・アプリケーション向け要素
　・構造化文書向け要素
　・ドラッグ＆ドロップ機構（要素にたいおう、ファイルではない）
　・contenteditable属性の標準化
　・ドキュメント間メッセージング
　・ルビ
　・date-*属性：アプリケーション依存のデータを埋め込む
　・SVGとMathMLの埋め込み

今からHTML5をはじめよう
　・iPhoneやAndroidなど特定プラットフォーム向けのウェブアプリならすぐに恩恵を受けられる
　　−アプリケーションキャッシュ、Canvasなど
　　−Androidもアプリケーションキャッシュつかえる
　・一般向けでも、「無くても構わないがあると便利」な機能はHTML5で実装しても現実的
　　→UIをよくするなど

　・HTML5のドラフトに目を通してフィードバックする
　・オープンソースブラウザのHTML5対応に貢献する
　　→いち技術者としてのコミットするのもまた一興


































































































































































-
















































































[2]規格の概要
HTML5は10年ぶりのHTML新バージョン
　・HTML4,XHTML1.1,DOM Level 2 HTMLを包括し、機能を加える規格
　・XHTML2およびXFormsは含まない
　・W3Cの企画となるが亜、十作業はWHATWG

HTML5は4つの規格で構成
・元は１つだったがあまりに巨大なため分割された
　　HTML5
　　Web Strage
　　Web Workers
　　The Web Sockets API
・Editorによると、2009年10月に最後のWorkingDraft

　＊実運用段階は2010-2011年ごろになりそうとのこと
　＊GeoLocationAPI？
　　→http://www.itmedia.co.jp/news/articles/0808/23/news008.html

HTML表記とXHTML表記
　・HTML表記とXHTML表記をサポート
　・SVGとMathMLはXHTML表記のときのみサポート


































































































































































-
















































































[3]新機能の解説
WebWorkers
　・バックグラウンドでスクリプトを実行するシック身
　・毎回新しいスレッドを生成するWorkerと,複数のウィンドウで共有できる
SharedWorker
　・ウィンドウを閉じても働き続けるPersistent workerを議論中

workerの使い方
　var worker = new Worker("foo.js");

　worker.postMessage(data); //文字列を送る

　worket.onmessage = function(event) { //文字列を取得
　　hugahuga = event.data;
　};


WebSockets
　・専用のプロトコルでサーバと文字列の送受信をする仕組み
　　−HTTPではないのでサーバ側での実装も必要
　・XMLHｔｔｐRequestと比べると、オーバーヘッドが小さくリアルタイム性が高い

　//サーバへ接続
　var socket = new WebSocket("hugahuga");

　//サーバへ文字列を送る
　socket.postMessage("hello");

　//サーバから情報を取得
　socket.onmessage = function(event) {
　　hugahuga = event.data;
　};


WebStrage
　・ページ遷移しても消えない、クライアント側のデータ格納機構
　・データ形式の違いで2種類のタイプ
　　 文字列のKey-valueペアを扱うStrage型
　 　SQLを扱う

WebStrageのStorage型
　・window.localStrage
　  サイト側に保存される。スクリプトやユーザが消さない限り保存され続ける
　  →クッキーとおなじ
　・window.sessionStrage
　　サイト別、かつウィンドウ別に保存される。複数のウィンドウで同じサイトを開
　　いていても、別のインスタンスとなる。閉じると消滅

WebStrageのDatabase型
　・localStrageと同様、サイト別に保存される記憶領域
　・SQLが使用可能
　・同期実行方と非同期実行方の２つのインターフェイス

アプリケーションキャッシュ
　・キャッシュしてもよいURL。しないでほしいURLを宣言
　・ブラウザがオンライン時にキャッシュされていないURLを先読みし、オフライン時にはキャッシュを使う

　 明示的にキャッシュ制御ができる
　 オフライン対応するためには必要

フォームを強化
　・input要素の新タイプ
　・search,tel,url,email,month,week,time,datetimなどなど

　フォーム検証機能
　→フォームがSubmitされる前に、各フィールドの最小値・最大値・文字列パターン・入力必須かどうかをチェック
　　JSのフォームバリデートのようなものを標準実装している模様。JS使わないでそんなことできるのか！

　　タグ内部で正規表現が使える！すげー
　　例：<input type="ulr" placeholder="画像のURLいれてね"pattern="https?://.+\.(gif|png|jpg)"


メディア要素
　canvas
→スクリプトによる二次元グラフィックス描画
　　HTMLだけで絵が描ける！

　videoとaudio
→img要素の同じように記述できる
　再生速度やボリュームや、再生開始、などなどタグで制御できる

アプリケーション向け要素
　menu要素
　　あらゆる要素にコンキテキストメニューを定義
　　ツールバーを簡単に定義


まとめ
　今までJSが必要だったところが、JSを使わないでタグだけで実装できてしまうという所がスゴイ！

-
















































































２．オフィスアワー（GEO/位置情報）に参加

































































































































































-
















































































[1]色々きいてみた

モバイル開発にて現状ではiareaを使って、緯度経度から大まかな住所を取得しているが、無料で位置情報から細かい住所まで突き止めることはできないか
　→リバースジオコーディングを使うとよい。APIで提供されている。無料のものもある。
　　参考：http://www.okada.jp.org/RWiki/?R%A4%C7%A5%B8%A5%AA%A5%B3%A1%BC%A5%C7% A5%A3%A5%F3%A5%B0
　→または、国土交通省からデータが公開されているので、自分でDBに突っ込んでつくるのもあり。
　　 地道だけど、ライセンス気にする必要がないのである意味確実かも。

　　緯度経度から住所、住所から緯度経度、相互変換が簡単にできるようになれば、今後の開発で応用できそう。


モバイル用にストリートビューの画像を取得する方法は無いか
　→Android携帯などはストリートビューに標準対応しているからそれで見れるが、一般の携帯には普及していないので、現状は無理。どうしてもというなら力技で取得するしかない。
　→画像のデータを売ってるところもあるから、そこで地理情報を買うのもあり。
　→携帯で使いたいならGoogleStaticMapsの今後に期待。


公式には書いてないが、pathのパラメータを2つ渡すと異なるパスを引けるとい
うことなど見つけたが、GoogleStaticMapsにドキュメントに載ってはいない裏技
的な使い方などはないのか
　→・日付変更線またぐとパスがおかしくなる
　　・探すなるアメリカのGoogleMapsのコミュニティを探してみるといい
　　・GoogleMapsAPIの不具合報告掲示板など見てるとたまに裏技的なものがでてくる
　　・日本のドキュメントに公開されてないパラメータもあるので、アメリカのドキュメントなど見るといいかもしれない
　・試行錯誤してみたという、サンプルを教えてもらいました。
　　http://code.google.com/p/gmaps-utility-library-dev/

ちなみに行ったタイミングが悪かったのか、噂のアンドロイド携帯はいただけません
でした。とても残念。