WEBページを作っているとレスポンシブデザインが当たり前になってきました。
PC、スマホ、タブレット・・・他にもゲームハードやいろいろな家電に使われているブラウザ端末など様々なサイズが存在するために、レスポンシブという手法を取らざるを得ませんが、
個人的に気になっている点として、「スマートフォンやタブレットは、ブラウザのサイズは一定だが、PCはスマホよりも小さくもできるから・・・」という点です。
デスクトップ上のアプリケーションは自由にサイズを変更でき、限りなく小さくしているとスマートフォンよりも小さくなってしまい、端末判定するやり方よりも、サイズ判定をするレスポンシブやり方のほうが有効なことがよくわかります。
ここでの技術はcssの@mediaクエリが活躍していることは言うまでもありませんが、javascriptではwindow.resizeをいろいろなシステムで多様化していることは、プログラマーはみなさん知っているはずです。
ここで、今回、windowではなく、ページ内の個別エレメントのresizeをイベント化する事になり、ググってみたところ、""ResizeObserver"を使うのが適切という事がわかり、メモがてらブログ化しておくことにしました。
resize監視はタイヘンという話
これまで、ページ内のエレメントの個別監視は、click,mouseover,mouseout,mousedown...などなどマウス操作系は、標準onイベントとして簡単に利用することができたんですが、resizeイベントは何故かwindowでしか使えませんでした。
苦肉の策として、setIntervalなどで、offsetWidth値などを監視するしか無かったのだが、想像通り都度監視すると、非常にCPUパワーを食われる。
さらに、interval関数での監視タイミングを遅くすると、操作感がもたつく為、モバイルなどで使うと非力な端末ではハングアップする事も経験した。
そこで以前にブログで書いたことの有る「MutationObserver」というのがあるが、
関連記事 :
ページ内のDOM構造変化をリアルタイムに取得する「MutationObserver」
今回は、それを更にresizeだけに行える「ResizeObserver」という機能を使ってみることにした。
ResizeObserverについて
まず"Can I use"で利用できるブラウザバージョンを確認してみましょう。
なんという事でしょう。Chromeとopera以外はほぼ全滅じゃないですか！！！
う〜ん、こりゃいかんな、正直使い物にならん・・・
とりあえず、簡単に使えるのでソースコードを掲載しておくが、mutationObserverで再構築しておくことにする・・・orz
ソースコード
<html>
<head>
<style type="text/css">
#resize{
width:100px;
height:100px;
background-color:red;
cursor:pointer;
}
#resize:hover{
width:150px;
height:150px;
background-color:blue;
}
</style>
</head>
<body>
<h1>ResizeObserver</h1>
<div id="resize">
</div>
<script>
var ro = new ResizeObserver(function(mutationRecords){
console.dir(mutationRecords);
});
ro.observe( document.getElementById("resize"));
</script>
</body>
</html>
簡単解説
body下部にあるscriptタグのみで実行していますが、設置の仕方はMutationObserverをより簡易にした感じです。
"mutationRecords"で受け取っている内容は、配列内にオブジェクトの"contentRect"情報が含まれています。
おそらくMutationObserverを便利に使いたいというエンジニアの要望に答えた結果なのかもしれませんね。
resize以外にも、他の監視も便利関数を作ってくれていればよかったのに、resizeだけじゃねえ・・・・
とりあえず、使いたい人は使ってもらってもいいですが、MutationObserverで構築されることをおすすめします・・・orz
0 件のコメント:
コメントを投稿