Hatena::Groupweb

vantguarde

9.15

IE10のタッチイベントってなんだろう

| 00:18

IE10のスタンドアローンなPPかベータだしてよ!

さて、Keynoteを見てて、“Touch First”だとか言ってるしIE10でもタッチイベントなデモをやってておーって思ったんですが、どんなイベントを実装してるのかが気になりました。

W3CだとTouch Eventsなんて仕様がありますが、これはマルチタッチ(ジェスチャーって言えばいいのかな?)に対応してません。なのでそれをサポートしてたとしても足りないわけです。IE10のデモだとうりうりと画面を何本かの指で押してた感じなので、何かしらそういう仕組みがあるはず。なんだろう。

って、デモが公開されてるんだから、それを見ればいいんですね。ごそごそ。

ありました。http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.jsの66行目から。

// Determine correct events to register for
if(navigator.msPointerEnabled) {
    downevent = "MSPointerDown";
    upevent = "MSPointerUp";
    moveevent = "MSPointerMove";
    document.addEventListener("MSPointerCancel", function(e){ removeTouchPoint(e); }, false);
    document.addEventListener("MSGestureInit", function(e){ e.preventManipulation(); }, false);
    document.addEventListener("MSGestureHold", function(e){ e.preventDefault(); }, false);
}
else {
    downevent = "mousedown";
    upevent = "mouseup";
    moveevent = "mousemove";
}

navigator.msPointerEnabledという妙なプロパティでサポートを検知してますね。イベントは確認できる範囲で6つ。

  • MSPointerDown
  • MSPointerUp
  • MSPointerMove
  • MSPointerCancel
  • MSGestureInit
  • MSGestureHold

mouseでもなくtouchでもなくpointerと。マウスイベントも同じイベントをimplementしてるとかそういうモデルになってるんでしょうか。WebKitのtouchstartなどをサポートしなければならないはめになったりしないんだろうかとも思ったりしますが、どうなのでしょうね。

このpointerというの、Win8でも共通の概念なんですよねえきっと。さっぱりわからんちんです。ただ、タッチ/非タッチなものでtouchstart, mousedownとふたつのイベントを書く必要がないのは楽かなと。

2011-09-22 追記:

IEBlogにまさにこれを扱った記事が投稿されました。

g:subtech:id:mayukiさんのコメント(ありがとうございます!)にもあるとおり、mouse, touch, penを含めた抽象的な形式を"pointer"と呼んでいるようです。event.pointerTypeで形式もとれるようですが。

あとズームやパンを禁止するのに–ms-content-zooming: noneなんてプロパティがありますね。metauser-scalableよりは扱いやすい気はしますが、ここらへんもっと良い感じにできないかしら。

mayukimayuki2011/09/15 16:08WinRT上ではmouse, touch, penをひっくるめてPointerDeviceみたいですね。
http://msdn.microsoft.com/en-us/library/windows/apps/windows.devices.input(v=VS.85).aspx

実際のイベント的にはPointerPressed, PointerReleasedで名前が微妙に違う…。
http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.core.corewindow(v=VS.85).aspx

SilverlightやWPFではタッチイベントは別になってたので区別なく扱えるようにしたのかもしれないですね。

2.28

DOM Events周り ― Mutation Events replacement, useCapture, DOM Core

| 21:18

フィードやらメールやらが溜まりすぎていて、ここ数日ざっと読んでるんですがすぐ忘れるので、もうちょっとここに書こうと思います。

新しい情報と古いのが混在してます。

Mutation Events ReplacementとNodelist

Mutation Eventsの代わりになる仕様(できてない)に、John Resigの書いたNodelistのadded(), removed()をpointするとか。採用というよりは、standards trackに上げるのが目的っぽいですね。

ただDOMCharacterDataModifiedに対応できないんじゃっていう話も。

ってかスレッド立ってたんだった。セレクタベースだとパフォーマンスの懸念があるんじゃないかとか、属性の変化で変になるんじゃとかそんな話がでてますね。

useCaptureがoptionalに

上のteleconにもあるんですが、addEventListenerのuseCaptureを省略可能にしたとか。IE9では対応済みだそうで。WebKitはバグなのかよく分かりませんが昔からできたそうです。

jrossi: IE9 updated to make this 3rd parameter optional, in part due to some sites not providing the parameter.

smaug_: Apparently this was a bug in chrome that is now relied on in actual web pages :(

だそうです。悲しい世の中ですね。

対応してない環境ってどうなるんですっけ。省略されるとundefinedになって、それってfalseになるんだっけか。。

追記。Firefoxも6から省略可能になるそうで。

DOM CoreとEvents

AnneがやってるDOM CoreにEventの定義が追加されました。あ、DOM Coreは元Web DOM Coreで、名前が変わりました。DOM3 Eventsと何が違うかはAnneのメールにあります。

"fire"と"dispatch"の用法も区別されたそうです。

For DOM Core Ms2ger and I (and some others on IRC) decided to introduce a subtle distinction between fire and dispatch. Dispatching is actually going through the list of event targets with an initialized event whereas firing is initializing the event and then dispatching it.

“firing is initializing the event and then dispatching it” と。

WDを更新するというCfCが出たんですが、主に「なんでDOM3 Eventsあんのにそんなことするん?」的ないつもの展開になってますね。

ぜえぜえ。

os0xos0x2011/03/01 00:15>対応してない環境ってどうなるんですっけ。
Firefox, OperaはaddEventListenerの第3引数を忘れるとエラーも何も出さずにただ、呼び出しをスルーします。なのでたまに嵌ります…。

vantguardevantguarde2011/03/01 21:37おお……そういえば先日それでOperaで引っかかったような記憶が……ありがとうございます!

12.9

HTML4とXHTML1ではbuttonの中にtableを入れられる

| 21:13

<input type=button><button>の違いはなんだろうという疑問に答えていたら、XHTML1の<button>にはブロック要素やら<table>を入れられることを知りました。なんと。

<!-- button uses %Flow; but excludes a, form and form controls -->

<!ENTITY % button.content
   "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
    table | %special; | %fontstyle; | %phrase; | %misc;)*">

ほんと。あらまあ。

ただHTML5の<button>は内容モデルがphrasing contentなので、ブロックや<table>は入れられません。改悪!(勢いだけ

表やリストをボタンにする意義などは横においといて、<button><table>…</table></button>なんて書いてほんとに意図したDOMが生成されるのか疑問に思って試したら、ふつうにボタンの中に表がでてきてすこしびっくりしました。tableの開始タグが出てきたらbutton要素は終了するのかなあと思ってたので。

ただ、<p><button><table>…</table></button>とかにするとOperaとかでは意図通りというか、tableが外に出ました(HTML5パーサだと引き続きpの孫だった)。ふーむ。

まあ、non-conformingになったし、使い道も思い浮かばないのでいいか……

oogattaoogatta2010/12/21 15:44質問です!。 button って今見ると Flow Content なのですが、やっぱり table 入れたら conform しないのでしょうか…?

oogattaoogatta2010/12/21 16:02失礼しました!。 Category と Content Model を見間違ってました…。

12.2

正統なお尻PとHTML5のDOM構築とWebKitのoverflowと

| 20:17

ふむふむ。

イベントは面白いだろうということでさておいて、気になったのは小久保さんのプロフィールでスクロールバーが出るというのをタイムラインでちらほら見たこと。いまChrome 9で見てるんですが、たしかに出てますね。

ソースはこんな風になってます。

<div class="profile" id="kokubo">
<h4><img … />小久保 浩大郎<span ...></h4>
<p><a href="http://nodot.jp/">nodot</a><br />
フロントエンドアーキテクト</p>
<p>...</p>
<p>...</p>
</ul>
</p>
</div>

最後に</ul></p>なものが入っちゃってるんですね。正統なお尻Pですね。たぶん、高津戸さんのプロフィールをコピーしたときのleftoverなんでしょう。

この</ul></p>がどうなるかですが、HTML5ではin bodyのinsertion modeあたりに書いてあります。</ul>

If the stack of open elements does not have an element in scope with the same tag name as that of the token, then this is a parse error; ignore the token

の条件にマッチするので、無視されます。</p>も基本はparse errorではあるんですが、

If the stack of open elements does not have an element in button scope with the same tag name as that of the token, then this is a parse error; act as if a start tag with the tag name "p" had been seen, then reprocess the current token

なのでこの前に<p>があるものとして解釈され、結果的にp要素が挿入されると。

結果として、</ul></p>のところが<p></p>に置き換わる感じです。なんでこんなトリッキーなことをやってるのかは定かではないですが、たぶんTridentの挙動に合わせたとかそんなんじゃないかなと予想してます。

ふう。で、どうやらこの中身のないpoverflow: autoに反応してるようです。なぜoverflow: autoかけてるのかCSSちゃんと見てないんでよくわかんないんですが、要素を取ったりすると問題ないという。

font-size: 0を与えたり、中にテキストを突っ込むとスクロールバーが出なくなります。overflow: autoの挙動はUA依存なので正しい挙動なんてものはないんですが、テキスト突っ込んだりすると消えたりしますし、WebKitのバグなんですかねえ。ううむ。

4.16

リストの横並びで不思議な空白ができるアレ、をスマートに解決する

| 00:01

まあ全然不思議でもなんでもないんですが。そうそう、これ、一言で説明するマジックワードがほしいですよね。

さてこれ、対処方法として紹介されてるのが、改行しないだとか、コメントを工夫するとか、開始タグや終了タグの書き方を工夫するとかです。「リストをinlineで並べた時の余白」がよくまとまってるかなと思います。

ただ、やっぱりもやもやする人は多いのではないかと。というわけで、ちょっと方法が違ったりしますが、スマートに書ける解決方法を。まあ、別の方向でもやっとしたりするかもしれませんが。

まず、display: inlineではなくてinline-blockを利用します。

li {
  display: inline-block;
 *display: inline;
 *zoom: 1;
}

下のふたつはIE7以下の対策ですね。こちらは「IE 6, IE 7 の inline-block 考察」あたりを読んでいただけるといいかなと。

「Firefox 2.0は?」と思った方。Fx2はいらないこです。目を覚ましてください。

さて、これだけではIE7以下を除いて、空白が(たぶん)できてしまいます。なぜならみなさん、「ふつう」はこう書いてるはずだからです。

<ul>
  <li><a href="foo">foo</a></li>
  <li><a href="bar">bar</a></li>
  <li><a href="baz">baz</a></li>
</ul>

じゃあ、こうしてみましょう。

<ul>
  <li><a href="foo">foo</a>
  <li><a href="bar">bar</a>
  <li><a href="baz">baz</a>
</ul>

liの終了タグを取ってみると。はい、これで空白が消えます。わーわー

理由を説明する前に、今のふたつのDOMツリーを見てみましょう。ついでに今書いたソースの確認も出来ます。

「ふつう」に書いたソースは、次のようなツリーを構成します。

UL
  #text:
  LI
    A href="foo"
      #text: foo
  #text:
  LI
    A href="bar"

</li>のあとにある改行と次の行のインデントからなるテキストノードが、liの兄弟として生成されます。

で、終了タグを取ったほうは、次のようになります。

UL
  #text:
  LI
    A href="foo"
      #text: foo
    #text:
  LI
    A href="bar"

よく見る必要がありますが、さっきの改行とインデントからなるテキストノードが、liの兄弟ではなく、liの子として存在しています。

どのようなことかてきとーに説明すると、終了タグは明示的に要素の終了を表す区切り子です。なので、ブラウザーは終了タグを見つけたら、DOMツリー上で生成された要素ノードを閉じます。次の開始タグ(要素ノードを生成する)までに現れる何かは、要素ノードの兄弟ノードになります。

「ふつう」の例では、終了タグが書かれていたので、終了タグのあとにあった改行と、インデントのスペース二つがテキストノードとして新たに生成され、liの兄弟として存在していました。

<ul>
  <li><a href="foo">foo</a></li>←ここで要素終了|→ここからテキストノード
  ここまで←|こっから要素開始→<li>

さて、終了タグを省略したらどうなるでしょう。ブラウザーは別の方法から、要素ノードの終了を表す区切り子を見つける必要があります。その区切り子とは、この場合liの開始タグになります。

では、aの終了タグの後ろにある、改行とスペース二つはどうなるのでしょうか。さっきと同じくテキストノードにはなりますが、li要素が終了しているとこの時点では見なされてないので、これはliの子として存在するのです。

<ul>
  <li><a href="foo">foo</a>|←ここからテキストノード
  ここまで←|こっから要素開始、なので前の要素終了→<li>

てきとーと書いたわりには思ったより長くなりましたが、そんな感じの理由です(細かいところがいろいろ怪しいですが)。これにinline-blockが加わる事でインラインボックスではなくなり、末尾の空白類が無くなります。それで、変な空白がなくなると。なお、省略の条件とか説明は「HTML や SGML における開始タグ・終了タグの省略」が詳しいです。

今回はliの終了タグが省略可能ということ、またブラウザーの実装がうまい具合になってるので、それを利用して実現したというはなしです。IE7以下だとhasLayoutマジックで良い具合になってくれますが。

securecatsecurecat2009/04/17 14:01かつてはHTML4→XHTMLという時代の趨勢が感じられた時期があって、その頃以降そのように啓蒙されているからではないですか。そんなに不思議がるのとか、くたばれとかって煽る意味がわからないですね。

Contact: @vant / lepetitcroissant@gmail.com.