2012年1月31日(火曜日)

飲食店での受動喫煙はどうしたら避けられる?

公開: 2012年2月12日17時40分頃

「受動喫煙削減へ数値目標設定　「飲食店で被害」１５％へ (www.asahi.com)」。

厚生労働省は３１日、がん予防や健康対策として、２０２２年度までに受動喫煙を削減する数値目標を初めて決めた。飲食店で月に１回以上、受動喫煙をしたと回答した成人の割合は現在、５０．１％で、１５％に減らすことをめざす。

受動喫煙が嫌ならその店に入らなければ良い、というコメントもありそうですが、実際その通りなので、私は入らないようにしています。私の場合、喫煙されると単に飯がまずいだけではなく、頭痛、吐き気、目の痛みといった症状が出ることがあるので、そこはかなり気を遣っています。

しかし、始めての店だと分からないのですよね。今日も初めての店で隣のテーブルの客が私の許しを得ることなく煙草に火を付けたので、残っていた豚汁を一気飲みしてあわてて出てきました。

あと、昔禁煙だったはずの店が、いつのまにか喫煙可能になっているというショックなパターンもあって、お気に入りの店だったりすると本当にショックです。

「分煙」というのも曲者で、低いパーティションで喫煙席と区切られている禁煙席とか意味がないので勘弁してください。

とりあえず、喫煙可能な店はその旨をはっきり表示することを義務づけてほしいです……。

「飲食店での受動喫煙はどうしたら避けられる?」にコメントを書く

SVGをobject要素で活用する

更新: 2012年2月24日23時20分頃

SVGというものはずっと昔からありました。かつてはブラウザ側の対応がいまいちで、プラグインを入れたりしないと表示できなかったりもしており、あまり使われていませんでした。しかしIE9がSVGに対応したことで、かなり使えるようになってきた印象があります。最近では仕事でもガチでSVGを使うことが増えてきています。

SVGの特長のひとつは、ベクターグラフィックなので伸び縮みに強いという点です。サイズ可変の領域にうまい具合に背景を敷きたいときには便利です。そして、最近はサイトのコンテンツ全体がサイズ可変ということも増えてきました。というか元々可変ではあると思うのですが、Media Queries (www.w3.org)を使った派手な変更を伴うパターンが増えてきて、画像のサイズを大幅に変更したいケースが増えてきています。

写真などはJPEG画像を拡大・縮小してもそれほど違和感はないのですが、細い線で構成された図や、エッジのはっきりしている幾何学的な図形などは、GIFやPNGを拡大・縮小すると線がぼやけてしまい、はっきりと劣化が分かってしまいます。特に、CIやVI (企業のロゴやシンボルマークなど) はぼやけてしまうとよろしくありません。そこで、このような画像もSVGにしたい、というニーズが出てきます。

しかし、SVGにはIE6～8が対応していないという問題があります。背景に使う分には、画像が見えなくてもたいして問題はありません (というか、画像が見えなくても問題ないように作っています)。しかし、画像無効環境でもないのにロゴが見えないとなると、これは厳しすぎます。

※本当はIE9にしろと言いたいところですが、Windows XPにはIE9が入りませんし、社内にActiveXやVBScriptに依存したどうしようもないアプリがあってIE6が捨てられないというどうしようもない企業もあります。

そこで、ロゴとしてSVG画像を貼りつつ、SVGに対応していない環境ではPNG画像を表示させる、ということがやりたくなるわけです。

仕様的にはこれは簡単です。object要素を使ってSVG画像を貼り、その中でimg要素を使って代替のPNG画像を指定すれば良いのです。この方法は14年前(!)のHTML4.0からあったやり方です (HTML4.0 13.3.1 Rules for rendering objects (www.w3.org))。昔はobject要素への対応がおかしいブラウザもありましたが、最近のブラウザなら大丈夫なはず……。

実際にやってみると割と大丈夫……と思いきや、リンクがうまく行かないという問題が発覚。ロゴ画像はトップページへのリンクにしたいのですが、a要素の中に入れてもクリックできません。どうもobject要素の方が前面に出ていて、クリックイベントが後ろのアンカーに伝わらないようなのですね。iframeと同様、z-indexとかそういうレベルではない何かで前面扱いになるようです。

そこで出たアイデアが、「SVG画像自体にリンクを設置する」というもの。SVGにもa要素 (www.w3.org)があり、xlink:href属性でリンク先のURLを指定すると、HTMLのa要素と同じように働きます。で、試してみたら……なんと、object要素の中にリンク先のサイトが表示されて大爆笑。これは予想外でした。まあ、HTMLをobject要素で埋め込んだらそういう挙動になるでしょうから、分からないでもないのですが。

いちおうtarget属性 (www.w3.org)もあるのですが、そもそも、画像自体にリンクがついているのはあまり望ましくありません。同じ画像を使いつつ、リンクさせたくないという場合もあるからです。また、ロゴ画像のSVGはIliustratorからの書き出しで、XMLを手動で直すのは避けたいという事情もありました。

結局、pointer-events (www.w3.org)をnoneに設定すると背後のアンカーにイベントが渡るということで、object要素に style="pointer-events:none;" を設定して解決。また、ポインタが手の形にならない問題もあったりして、それはスクリプトで解決したり。

とまあ、いろいろ面白いことがあった訳ですが、何とか解決。SVGも、もう業務で使えるレベルになってきていると思います。

※あわせて読みたい: SVGをobject要素で表示してリンクにする (subtech.g.hatena.ne.jp)

「SVGをobject要素で活用する」にコメントを書く