佐祐理ブログ: html

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

2017年2月5日日曜日

cross browserでのタッチ操作

Webサイトをタッチ操作に対応させようとしたところ、非常に苦労したため、得られた成果をまとめておこうと思います。
目指すゴールは手持ちのデバイスでドラッグ・スライドを実現することです。Webでは変化が目まぐるしいのでこの記事が対象とする現時点での環境を挙げておきます。

SurfacePro / Windows 10 / mouse, touch, pen

Internet Explorer 11
Edge 14
Chrome 56
Firefox 51

MacBook Air / OS X / mouse

Safari
Chrome 56

iPhone SE / iOS 10.2 / touch

Safari

Xperia / Android 4.1.2 / touch, mouse

Chrome
Firefox

Fire HD 8 / Fire OS 5.3.2.1 / touch, mouse

Chrome
Firefox

ブラウザーは従来よりMouse Eventsを提供していましたが、最近はmouse・touch・pen等を統一的に扱えるPointer Eventsが提供されています。ただし対応状況としてはIE11 / Edge / Chromeが対応、Firefox / Safariが未対応のようです。これとは別にTouch Eventsが提供されていますが、こちらはChrome / iOS / Androidが対応、IE11 / Edge / Firefoxが未対応のようです。総合すると

Pointer Eventsに対応ならPointer Eventsのみ
Pointer Eventsに未対応でTouch Eventsに対応ならTouch EventsとMouse Eventsの両方
Pointer EventsとTouch Eventsに未対応ならMouse Eventsのみ

と分岐しつつ複数を併用する必要がありそうです。

さてイベントの登録・削除は従来はIEに制限がありましたがIE9以降はaddEventListenerのみで実現できます。しばしば第３引数useCaptureにfalseが渡されますが、対応していなかったのはFirefox 6未満のようですので省略して構わないでしょう。

タッチ操作の場合、ページのスクロールなどブラウザー側の処理と競合します。この問題についてはtouch-actionというCSSプロパティが用意されています。対応状況としてはIE11 / Edge / Chromeが対応、Firefoxが次バージョンで対応、Safariが一部のみ対応ということで、これとは別の対策も必要です。実のところSafariではpreventDefault()メソッドを使って抑止することになっています。

ブラウザー側の処理にはこれ以外もあり、Pointer EventsやTouch Eventsが処理されなかった場合は互換のためにMouse Eventsが呼ばれることになっています。これらについてもpreventDefault()メソッドで抑止できることになっています。

以上を踏まえて書いたコードがこちら

2012年6月4日月曜日

CSS Media Queries Hacks

スタイルシートは認識するセレクター・プロパティにだけ適用されればそれで済むはずと考えていたこともありました。しかし、CSS animationのできるブラウザーではCSS Sprite画像を読み込んだ上でアニメーション、そうでないブラウザーではアニメーションGIF画像を読み込む、なんてことをする場合、どちらのブラウザーでもbackground-imageプロパティは認識されてしまうため、ブラウザーに応じて動作を変えることができません。

そこで目を付けたのがCSS Media Queriesという機能です。この機能を使うとブラウザーのサイズなどに応じてスタイルシートを変更することができます。
各種ブラウザーには独自の拡張機能がありこれを利用するとブラウザーごとに異なるスタイルを適用することができます。昔あったスターハックの合法版といったところでしょうか。

これを組み合わせるとこんな風に書けます。

@media (-moz-touch-enabled:0), (-moz-touch-enabled:1){ /* Gecko 1.9.2 (Firefox 3.6)以降に適用 */ } @media (-moz-device-pixel-ratio){ /* Gecko 2.0 (Firefox 4)以降に適用 */ } @media (-ms-high-contrast: none){ /* Internet Explorer 10に適用 */ } @media (-webkit-animation){ /* Webkit (Safari4以降 or Chrome)に適用 */ }

簡単ですが動作サンプルを。

2012年3月3日土曜日

IMG要素のonloadイベントについて

ふと見かけたので正しいのかわかりませんが、書き留めておきます。 IMG要素のonloadイベントがIE系でうまくいかないときの対処とかやっぱりIE9でもキャッシュ有効時のimg要素はonloadを無視する件とか見つけました。しかし、onload eventを読むと

To ensure that an event handler receives the onload event for these objects, place the script object that defines the event handler before the object and use the onload attribute in the object to set the handler.

と

You need to set the image.onload before you set the image.src.

書かれています。つまり、

IMGタグよりも前にイベント内容を含むSCRIPTタグを配置する
src属性を設定する前にonloadイベントを設定する

ですかねぇ。

2010年2月14日日曜日

Dojo基礎文法最速マスター～HTML編～

Dojoにはdojo.parserという機能があり、これがhtmlを編集してくれます。ページ読み込み時にdojo.parserを動作させるには

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djconfig="parseOnLoad: true"> </script>

と読み込み時に設定するだけ。

dojo.parserはdojotype属性に反応します。

<input dojotype="dijit.form.TextBox" jsid="textbox1" type="text" name="textbox" value="てきすと" />

これで、このtextboxにはdojoの追加機能が付与されます。dojoにはこのinputに対応するJavaScriptオブジェクトがあるわけですがjsid="textbox1"と指定されていた場合、JavaScriptのtextbox1という変数に割り当てられます。
よくdocument.getElementById()で毎回検索しているコードを見かけますが、変数に割り当てられているので必要な時はいつでも簡単にアクセスできます。

dojo.parserは入れ子にも対応していて

<form dojotype="dijit.form.Form" jsid="form1"> <input dojotype="dijit.form.TextBox" type="text" name="textbox1" value="てきすと１" /> <input dojotype="dijit.form.TextBox" type="text" name="textbox2" value="てきすと２" /> </form>

今度はformを拡張してJavaScript変数のform1に割り当てています。
どんな機能があるかというと、form1.attr('value')とやると{textbox1:"てきすと１",textbox2:"てきすと２"}が返ってきたり。逆にform1.attr('value', {textbox1:"ほえほえ",textbox2:"はにゃ～ん"})と値を初期化できたり。

クラスはたくさんあって、それぞれ機能が違うのでそこは調べてください☆

2009年11月27日金曜日

CSS Animations Module Level 3 と CSS Sprite

CSS3のAnimation Moduleに失望しました。

GIF Animationは広く使われているものの、色数がおおよそ256色、半透明の未サポート、ファイルサイズが大きくなりやすい、などなど、欠点があるので、他の方法を模索していました。

今のところ、JavaScriptを使ってちまちまと書き換えする方法を採っています。

そこでCSS SpriteとCSS3のAnimationを組み合わせることで、GIF Animationの代わりにならないかという案を思いつきました。
CSS Animationはkeyframeでstyleを指定するとタイムラインに従ってstyleが変化するというもの。つまり、background-positionを指定すればアニメーションする！と思ったわけです。

１つ目の問題点はbackground-positionはxとyを同時に指定してしまう点。片方だけを指定してもう片方をinheritすることはできません。これは案外痛いです。
もう１つが致命的。background-positionがlinear変化する点。linearでなくてもベジエ曲線で定義することはできるものの、CSS Spriteで求められているのはstepというか、keyframeで指定した値に直接変化すること。おかげで、にょろにょろにょろとCSS Sprite画像がスムーズにスクロールしてしまいます。

まさにどうしてこうなった状態。

2009年9月7日月曜日

IE6 CSSのclass selectorの酷さ

IE6の酷いところはいろいろ言われていますが、今更ながらこんなことではまるとは。と言うことで書き留めておきます。

<style type="text/css">
.a.c {
color: red;
}
.b.c {
color: blue;
}
</style>

何の変哲もないスタイルです。classにa cが同時に含まれていれば赤く、b cが同時に含まれていれば青くなります。
そうこんな感じ

<div class="a c">
color: red;
</div>

…ところが、IE6はclassにbが含まれていないのに青くなります。いやマジで。

追記：
間違ってました。IE6はCSS1しかサポートしておらず、CSS1ではclass selectorのネストを許していませんでした。

2009年2月22日日曜日

PNGの再圧縮

GDI+で作成したPNGファイルをGIMPで開いて保存し直したところ結構ファイルサイズが大きくなってびっくり。そういえば色形式も色々ありましたっけ。
調べたところ、OptiPNGとか他にもいろいろ再圧縮ツールがあるそうで。
手元のWebページの画像7,433ファイルをこのツールにかけたところ82MB→65MBと削減できました。

2008年8月31日日曜日

IEでのinherit

ググったけど話題になっていなかったので。CSSには親要素から値を継承するinherit値がありますが、実はIEではこれがあまり動作しません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
body{ font-weight: normal; }
span{ font-weight: bold; }
span{ font-weight: inherit; }
</style>
</head>
<body>
<span>normalが継承される</span>
</body>
</html>

spanはbold指定を打ち消し、bodyからnormalを継承しなければなりませんが、IE7ではinherit行自体が指定されていなかったものと見なし、boldで表示されてしまいます。

ちなみにIE8 beta2で確認したところ、こちらは正しくnormalで表示されていました。

登録: 投稿 (Atom)

佐祐理ブログ