今回は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での可能性を大きく広げるものです。インタラクティブなコンテンツには欠かせないものになると期待されます。

この先は会員の登録が必要です。今なら有料会員(月額プラン)が2020年1月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら