今回はThe Shodo注1)で活用している技術の中から、CanvasとCSS3の活用例を紹介します。これまでできなかった表現や装飾を実装したり、これまでできたことをより簡単に行ったりするのに役立ちます。

Canvas:ブラウザ上で描画する

 Canvasは、HTML5で新たに追加される要素の一つです。HTML内にcanvas要素のタグを記述し、width(幅)やheigt(高さ)などの属性を指定するだけで、ブラウザ上で描画できるようになります。

 The Shodoでは2カ所でCanvasを利用しています。一つはWriteページで「書」を書くために、もう一つはGalleryページの作品を一覧するために利用しています。WriteとGalleryでの実際の利用方法を具体的に解説します。

 まずはThe Shodoの肝とも言える「書」を書くWriteと呼ぶページです(画面1)。半紙の部分をマウスやタッチでドラッグすることで思い思いの文字を書くことができるようになっています。Writeでは「Canvasがあることでユーザーができるようになること」を体験できるようにしました。

画面1●書を半紙に書くことのできるWriteページ
[画像のクリックで拡大表示]

 一方、GalleryはユーザーがWriteで書いた「書」を閲覧するページです。Galleryの作品一覧でもCanvasは主役としての位置づけであり、見所は多くのサムネイルが並ぶ滑らかなアニメーションです(画面2)。これまでもHTMLとJavaScriptを組み合わせればアニメーションは可能でしたが、Canvasを使うことでより滑らかでダイナミックなアニメーションを実現できるようになりました。

画面2●並び替えのアニメーション
[画像のクリックで拡大表示]

 Galleryの右上にある並べ替えのラジオボタンを選択して切り替えることで、パラパラと落ちてすっと降ってくるアニメーションを見ることができます。Galleryでは「Canvasを使うことでブラウザ上での表現の幅が広がる」ことを体験できるようにしました。

 Canvasは、従来のブラウザでは難しかった表現を可能にし、JavaScriptとHTMLでの可能性を大きく広げるものです。インタラクティブなコンテンツには欠かせないものになると期待されます。