web creators特別号 |
いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア |
HTML5&CSS3 4-01
canvasを使ってJPEG画像を透過させる
![canvasを使ってJPEG画像を透過させる](attach/images/201303/Webcre/04_html/01/0.jpg)
canvasを使って、JPEG画像を透過表示する方法を紹介する。通常、透過表示するにはPNG形式の画像を使用するが、これをJPEGに置き換えることで、ファイルサイズを抑えることが可能になる。
制作・文/佐藤とも子・サチコ(螺旋デザイン)
BROWSER iOS…5over Android…1.6over IE…9over Firefox…3.5over Safari…3over Chrome…2over
01
それでは早速、JPEGの背景を透過させてみよう。方法を一言で説明すれば、canvasを利用してJPEGとアルファ付のPNGを合成する【1-1】【1-2】、という手順となる。
透過PNGを使うと普通にimgで配置するだけでいいのだが、canvasを使用することで、ファイルサイズが圧倒的に軽くなるという利点がある。
今回のケースでは、単純にPNG 形式の画像を使用するよりも、JPEG 形式の画像をcanvasで合成した方が、3 分の1ほどファイルサイズを小さくすることができる。
製品一覧ページのように、数十枚の画像を掲載しなければならないケースでは、かなりの差となるだろう。
![【1-1】canvasを利用している部分のHTML。ソースはimgでJPEGを配置している。この部分を後ほどJavaScriptでcanvas にする。](attach/images/201303/Webcre/04_html/01/1-1.jpg)
【1-1】canvasを利用している部分のHTML。ソースはimgでJPEGを配置している。この部分を後ほどJavaScriptでcanvas にする。
![【1-2】HTML のコード上はJPEGだが、背景が透過されている。](attach/images/201303/Webcre/04_html/01/1-2.jpg)
【1-2】HTML のコード上はJPEGだが、背景が透過されている。
![【1-3】ファイルサイズの比較。](attach/images/201303/Webcre/04_html/01/1-3.jpg)
【1-3】ファイルサイズの比較。
02
次に、具体的な手順について説明する。今回、使用しているファイルはメインのJPEG 画像、マスク用の透過PNG 画像、外部JavaScriptファイルの3 つとなる【2-1】。マスク用の画像は、べた塗り+JPEGで表示する部分を透過したPNG画像を使用する。
ファイルの書き出しは、Photoshop の場合はPNG24+透過で、Fireworks の場合はPNG32でおこなおう【2-2】。
![【2-1】ファイル構成の概要。](attach/images/201303/Webcre/04_html/01/2-1.jpg)
【2-1】ファイル構成の概要。
![【2-2】白黒の画像では無く、アルファ付の画像でPNGを作成。](attach/images/201303/Webcre/04_html/01/2-2.jpg)
【2-2】白黒の画像では無く、アルファ付の画像でPNGを作成。
03
スクリプトは「canvasAlpha.js」に書き込む。書き込む内容は、JPEGとマスク画像を読み込んだ後にcanvasを用いて合成する【3-1】となる。
canvasAlpha.js へのリンクはbodyタグを閉じる直前に書こう【3-2】。
![【3-1】canvasAlpha.js。jQuery には依存していない。](attach/images/201303/Webcre/04_html/01/3-1.jpg)
【3-1】canvasAlpha.js。jQuery には依存していない。
![【3-2】bodyタグで閉じる直前にcanvasAlpha.js へのリンクを記述。](attach/images/201303/Webcre/04_html/01/3-2.jpg)
【3-2】bodyタグで閉じる直前にcanvasAlpha.js へのリンクを記述。
04
canvas で画像を表示する部分のHTMLは、imgタグで画像を配置し、srcでJPEG 画像、data-alpha-srcでマスク画像を指定する【4-1】。これだけでJPEG 画像を透過風に合成することができる。
![【4-1】ごく普通のimgタグに「data-alpha-src」がついている。](attach/images/201303/Webcre/04_html/01/4-1.jpg)
【4-1】ごく普通のimgタグに「data-alpha-src」がついている。
05
画像部分は、今後のことも考えるとRetina 対応をしておきたい。そこで、画像の実寸サイズの半分の値をwidthとheigthに指定しておこう。ただし、通常の画像はこれでいいが、canvas に2 分の1 のサイズを指定してもRetina 用 のクッキリとした表示にならない。
この対応はCSSでサイズ指定をする【5-1】。 これで完成だ【5-2】。
![【5-1】308px×298pxの画像を使用し、2分の1 の値でサイズ指定をCSSで行う。](attach/images/201303/Webcre/04_html/01/5-1.jpg)
【5-1】308px×298pxの画像を使用し、2分の1 の値でサイズ指定をCSSで行う。
![【5-2】サンプルはiPhone などのスマートフォン向けのものとなっているが、パソコン用のChromeやFireFox、IE9などでも動作する。](attach/images/201303/Webcre/04_html/01/5-2.jpg)
【5-2】サンプルはiPhone などのスマートフォン向けのものとなっているが、パソコン用のChromeやFireFox、IE9などでも動作する。
06
2012年11月現在、canvasに直接widthとheightの指定をすることでRetina対応が可能なブラウザは、MacOSおよびiOS用のSafari6 以降のみとなっている。残念ながら、そのほかのOSやブラウザでは使用することができない(記事の対応ブラウザ表記はRetina対応を除いている)。
しかし、今後その他のブラウザでも実装されるようになれば、canvasAlpha.js の幅指定のソース部分「image.width」と「image.height」を「image.width/2」と「image.height/2」に変更するだけで Retina対応が可能となるので、作業が楽になる。
[目次に戻る]
【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン 仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。