sassy log: ブラウザ

ラベル ブラウザ の投稿を表示しています。すべての投稿を表示

2011年7月20日水曜日

HTML5のpushState

HTML5には、
HistoryオブジェクトにpushState()とreplaceState()というメソッドが追加されました。

pushStateというのは、
Historyのリストに新しくエントリを追加してしまいます。
ページ遷移をしていなにのに、Hisotryが追加されるのです。

下記にコードを示します。

<html>
<head>
<script>
function push_history() {
  history.pushState("", "", "/example");
}
</script>
</head>
<body>
Hello, World!
<form>
<input type="button" value="button" onclick="push_history()" />
</body>
</html>

これにより、
現在のページが "http://foo.com/hello/index.html " だった場合、
ボタンをクリックするとURLが第3引数により、"http://foo.com/example" に変化しており、
戻るのリストをみると、１個Historyが追加されているのがわかります。
実際に戻るをクリックすると、URLバーが
"http://foo.com/hello/index.html "
に戻ります。

これで、ページを遷移していないのに、
Historyにエントリを追加して、URLを変更することができます。

Ajaxとこれを組み合わせた技術を "Pjax" と呼びますが、
これは別途まとめようと思います。

2010年11月23日火曜日

Firefox Developers Conference 2010に行ってきました。

11月20日に
Firefox Developers Conference 2010 に行ってきました。
私が聞いた講演は下記。

基調講演
John Resig feat. Shibuya.js
Firefox 4 & Mobile
Firefox Panorama
Web の地上化～生活に溶け込ませるブラウザの発想と戦略～
トークセッション: HTML5 時代の技術で Web プラットフォームはどう変わるのか
大ライトニングトーク

どれも、充実したないようで、大変満足。
下記に、基調講演のメモと、
@dynamitterさんが紹介してたトークセッションのデモサイトのリンクを張っておきます。
その他の内容はもし時間があけばまとめてみようと思います。

基調講演
Jay Sullivanさんの基調講演。
これからはOpen Web Platformになる。
Firefoxは今後

mobile
cloud
apps
social

の４つの柱を考えていく。とのこと。

mobile
cloud
apps
social

Mozillaの今後どういう方向で進化していくかがよくわかりました。

@dynamitterさんが紹介してたHTML5関連デモのまとめ

FireFoxのイベントはかなり勉強になります。
また機会があれば行こう
と思います。

2010年11月21日日曜日

第12回「HTML5とか勉強会」に参加してきました。

11/18に、第12回「HTML5とか勉強会」に参加してきました。
いつも気が付いたら満員だったのですが、念願の初参加です！
今回は素晴らしいスピーカーの皆さまでした!感激でした！
(あと、英語だったので、あんまり理解できないところも多々。。。orz)

Paul Irish: The State of HTML5 : Inaugural Address
http://wde2010-pi.appspot.com/#slide1

HTML5関連技術について、一通りのデモを見せてくれました。
Audio data APIとWebGLを組み合わせたもののデモは秀逸でした。
WebGLで書いたビリヤードゲームで、玉のぶつかった音とかをAudio Data APIで表現したり。
もう、HTML5でゲームやらアプリやらを作れる時代が来ていることを実感。
SVG Filterなんかも紹介。
ライブラリとして、
HTML5の対応状況を調べてくれる　modernizer.js 　http://www.modernizr.com/
無駄なスクリプトのロードを防いだりしてくれるスクリプトローダーの
yeonope.js http://yepnopejs.com/
を紹介していました。

Bruce Lawson: WAI-ARIA
http://www.slideshare.net/brucelawson/bruce-lawsonhtml5ariajapan

WAI-ARIAというアクセシビリティの仕様のお話。
WAI-ARIAを描けば、例えば、ディスプレイがないデバイスでも音声などで補助してくれる、
そういうことを実現するための仕様です。
WAI-ARIAはHTML5と組み合わせることが可能で、
roleという属性を使って、"navigation"とか"banner"とかその要素の
役割を書くことができるようです。
HTML5には<nav>とか、<header>とかセマンティクスが用意されていますが、
対応したデバイスを考えてWAI-ARIAも組み合わせて書くべし。
あとは、要素にwebSRTを指定して、動画に字幕をつけるデモもしてました。

Jonathan Stark: jQuery Mobile + PhoneGap
http://www.slideshare.net/jonathanstark/building-mobile-apps-with-html-css-and-javascript-4807782

モバイルのWebを書くにはどうするかという話。
モバイルのwebを書くためのライブラリとして

iUI
jQTouch
Sencha Touch
jQuery Mobile

を紹介。
jQTouchのライブコーディングは非常におもしろかった。
WebアプリとNativeアプリを組み合わせるための
PhnoeGapの紹介もしてくれました。

Michael Fellinger: Canvas implementation using CoffeeScript

Coffee Scriptという
Ruby/Pythonライクで、
書いたコードをJavaScriptに変換してくれるスクリプト言語を紹介してくれました。
存在は知っていましたが、いじったことはなかったので、
あとでいじってみようと思いました。
詳細は下記で。Web上で動かすこともできます。
http://coffeescript.org

懇親会でのライトニングトークも面白かったです。

「HTML5で作るスマートフォンのネイティブアプリ」（クジラ飛行机さん）http://www.slideshare.net/kujirahand/html5-js-waffle

「iOS+HTML5/CSS3プレゼン＋Twitter Streaming API」（小松さん）
「jQuery Mobile」（吉川さん）　http://yst.web.infoseek.co.jp/jquerymobile.html

このようなすばらしい勉強会を企画してくれた主催者の皆様に感謝！
また行きたいな！

2010年11月5日金曜日

ブラウザカンファレンス2010に行ってきました。

ブラウザカンファレンス2010が11月2日にYahoo!JAPANであり、
行ってきました。

以下に雑多ですが、メモを書いておきます。
本当はまとめて文章にしようと思ったのですが、
整理する時間がなかったので、ほぼそのまま公開。
多分、いっぱい書き落とし、聞き落としがあるような気がしますが。。。

HTML５時代におけるYahoo!JAPANの取り組み

Yahoo!の是井さんの発表
* 現状
- 130以上のサービスを提供している
- 49671000000/PV 226120000/UB 月
- 様々なプラットフォームでサービスが提供できるようにする（機器に依存したコードはできる限り避ける）
-- モバイル、スマフォ、テレビ、ゲーム機

* ライフエンジン
- Yahoo!Japanの基本姿勢
- いつでも、どこでも、顧客にサービスを提供できるように

* ライフエンジンを実現するために
- 災害情報モジュールは一斉配信され、全てのサービスで表示
-- 配信プラットホームに一斉配信で全てのデバイスで表示
- 基準規定を設けてサービスを提供
- UIガイドライン設定
-- PCブラウザのみでも数十種類のバージョンをサポート、モバイル、スマフォも最適化へ
- サポートブラウザを規定
-- 一定のシェアを超えればサポートになる
- 社内の軽量javascriptライブラリを使う
- テンプレートシステム
- Yahooモバイルトランスコーダー
- スマートフォン共通テンプレートシステム
-- HTML5、CSS3、JavaScriptを使用したテンプレート。Webstorageを使用してJavaScriptをキャシュするのでアクセス速度が速い。

* HTML5導入
- 「新しい技術を取り込むこと」と「多くのユーザーに対応できること」とのバランス
-- スマートフォン中心に導入
--- スマートフォンはすべてWebKitだからね
-- PCブラウザは様子をみながら

パネルディスカッション

まず、ディスカッションの前に各ブラウザ代表者のプレゼンがありました。
その後に、ディスカッションという形式でした。

加藤誠さん(Mozilla)
- Firefox4では、JavaScriptが早くしている
- でもSunsupider は本当に役にたってる？使われない使い方ばかり
-- ベンチマークはリアルワールドではない
- Krakenはリアルでどう使われているか元にして作った。
- 発表資料 http://www.slideshare.net/djraven/keep-it-real-5643210

ダニエルさん(Opera)
- なぜ自分はOperaを好きになったか
- ユーザを楽しませる会社である
- Extension=> Web標準を使って拡張
- 正しい作り方をしてもらうため、変なページはデベロッパーに連絡

春日井さん(Microsoft)
- Silverlightは残る
- PC使用中の57%の時間はブラウザを使っている
- ブラウザは劇場
-- 高速化：GPU JavaScript
-- Webがアプリ化する

北村英志さん(Google)
- Chromeは早い
- タブごとにプロセスが分かれる
- Extensionも別プロセス
- JavaScriptはどんどん早くなっている
- Web標準でextension作れる(operaとの違いは？)
- Chrome web Store
-- Web アプリのマネタイズの方法を提供
-- Hosted Application (従来のWeb)
-- Packaged Application(クライアント側で実行)

* 実装の優先度
** Firefox
コードの貢献度
bugzillaの報告度(ユーザの声）
** Opera
ユーザと顧客の優先度バランス
** IE
W3Cに従う
W3Cが定めるHTML5に従う。WebSocketsを実装していないのはHTML5仕様から外れたため
IEは社会インフラになっているので、変えることを好まないユーザが多い。開発して実装するまでの時間が一番かかる。
-- 個人ユースと、法人ユース（会社の縛り）を意識している
-- 「ブザウザには2種類ある。個人でWebを楽しむために使うブラウザと、会社で使わざる得ないブラウザである」
** Chrome
ユーザの声とパフォーマンス重視
html5でコンセンサスが得られているか

* Extension
** Firefox
FireFoxモバイル版に全く同じものを持って行く
ユーザが好みにカスタマイズできる方向で
** Opera
- 仕様は統一するべき
-- Extensionはwidget apiをもとに作った
** Chrome
Exteisionのapiが統一されていることは重要

* 開発者ツール
** Firefox
デバッガにもextension必要じゃね？
Firebugはリリースに影響するほど大きい
** Opera
Dragonfly モバイルサイトとの連携もできる
** IE
F12キー
開発ツールは持っている Visual Studio / Expresson
JavaScriptのツールがない vswdでjs対応計画中
** Chrome
必要な機能実装している

* Video/Audioのコーデック
** Firefox
-- ロイヤリティフリーかどうか重視
-- W3Cに入るかどうかを重視
-- H.264難しい WebM
** Opera
- ロイヤリティフリーが重要
- WebM
- マルチデバイスでコーデックの統一は重要
** IE
- H.264
-- 汎用性の高さ
-- テレビとか利用を考えると汎用性重要
** Chrome
- WebM

感想

Operaがハードウェアを強調していたのが印象的でした。
インターフェースの話(テレビのリモコンはブラウジングが難しい)とか
標準化にもハードウェアが入るべきとか。
videoのコーデックは統一するには時間がかかりそうな気がしました。
個人的には、WebMがロイヤリティフリーでいいと思うんですけどね。
IEの汎用性を考えてH.264っていうのもわかる気がしました。

とにもかくにも、
各ブラウザベンダがWeb技術自体の普及という目標のもと、それぞれが切磋琢磨していて、
いい意味で競争しているんだなと思いました。

発表資料は公開できるものは公開できると言っていたので、
公開されるのが楽しみです。じっくり研究したいと思います。

とても勉強になりました。ありがとうございました。

2010年9月5日日曜日

Mozilla 勉強会＠東京 4th に行ってきました。

Mozilla勉強会に初参戦してきました。

会社ではブラウザのレンダリングエンジン開発の任を解かれたといこともあり、
いままで行きたくても行きづらかった勉強会に行こうと思い、
思い切って参加しました。
アウェイな空気でいづらかったらどうしようと思いましたが、そんなことはなく、
すごく楽しめました。

dynamis さんの発表、Firefox4の新機能の紹介。
Firefox4はいろいろな機能が実装されます。楽しみ！

taken さんのSVGの発表。もとSVGistとしてはとっても興味深かったです。
ついに SVG AnimationがFirefox4で使えるようになる！

@hokutsさんのオフラインwebアプリケーションとIndexed Databaseは面白かったです。
なかなか、Web StorageとかDBあたりの仕様はサボっていてきちんと勉強していなかったので、
とても勉強になりました。

LTも楽しい内容満載でした。(LTじゃなくて普通に発表聞きたかった。。。)

今回の内容はとてもためになりました。
あとできちんとまとめないと。

2009年8月17日月曜日

NodeListとHTMLCollection

HTMLDocumentには、document.imagesとかdocument.formsとか、DOM Treeからある要素のみを返すアクセッサがあります。

それとは別に DOM Coreには getElementsByTagName() というメソッドがあります。

これらは同じものだと勘違いしていたのですが、document.xxx はHTMLCollection, getElementsByTagName() は NodeListを返します。

で、HTMLCollection は NodeListを継承しているわけではないのです。

ま、HTMLCollection は NodeListと同じ属性とメソッドを持っているので、JavaScriptから見れば同じとみなしていいのかもしれませんが、どうも違和感が。。。

2009年8月15日土曜日

event handler content attributes

onXXXといったイベントハンドラを書ける属性がありますが、

HTML4.01のときは、この属性がかける要素が決まっていました。
HTML4.01のIntrinsic events
これが、HTML5だと、Global attributesとして定義されているので、すべての要素に書けます。

ということは、そのイベントハンドラが呼ばれるかどうかは、その要素にイベントを発火させられるかどうかということになります。

だから、「この要素にこのイベントハンドラを書けるのか」という質問されると、「この要素はフォーカスが当たるからonfocus/onblurが書ける」とか、そういった説明をしなければいけません。
これが、HTML5の要素はかなりあるので、意外と面倒くさいです。

ちなみに、実はHTML4.01では<img>要素にonload属性は書けませんでした。
(書いてあるコンテンツは結構あるみたいですが。)

でも、HTML5では、どの要素にもonload属性が書けるようになったので、リソースをロードする<img>要素ではloadイベントが発火するので、onloadイベントハンドラは呼ばれるのは正しい仕様です。

<img>要素の例を考えると、HTML5の考え方のほうが自然なのかもしれませんね。

2009年2月25日水曜日

Safari 4ベータ版

アップル、Safari 4を発表--Cover Flow、Tabs on Topなど多数の新機能

なんだかよさげ。まだ試していないけど、早く試したい。

登録: 投稿 (Atom)

sassy log

2011年7月20日水曜日

HTML5のpushState

2010年11月23日火曜日

Firefox Developers Conference 2010に行ってきました。

2010年11月21日日曜日

第12回「HTML5とか勉強会」に参加してきました。

2010年11月5日金曜日

ブラウザカンファレンス2010に行ってきました。

2010年9月5日日曜日

Mozilla 勉強会＠東京 4th に行ってきました。

2009年8月17日月曜日

NodeListとHTMLCollection

2009年8月15日土曜日

event handler content attributes

2009年2月25日水曜日

Safari 4ベータ版

ブログアーカイブ

ラベル

SELF INTRODUCTION

このブログを検索

2011年7月20日水曜日

2010年11月23日火曜日

2010年11月21日日曜日

2010年11月5日金曜日

2010年9月5日日曜日

2009年8月17日月曜日

2009年8月15日土曜日

2009年2月25日水曜日

ブログ アーカイブ

ラベル

SELF INTRODUCTION

このブログを検索

登録

ブログアーカイブ