Html5の恩恵をひも解く　～Canvas 編～

前回、2011/09/08『HTML5でマルチデバイス対応アプリを実現』というテーマでコラムを配信していますが、こちらのコラムではHtml5によって既成のアプリケーションという概念が変わっていき、それにより開発や運用の姿も変化を遂げるでしょう、というお話をさせていただきました。

今回は、Html5の中でも画期的な仕様である『Canvas』について触れてみたいと思います。 本コラムも、前回同様、技術者の方以上にマーケティングやWebに関連した事業を統括されている方々に読んでいただけたらという内容になっています。

『なぜ、今Html5が重要視されているのか』おさらい。

本題の「Canvas」についてお話しする前に、少し長くなりますが書いておきたい前置きがあります。 これまでのWebというのは表現力に制限が多く、なかなか実現出来る事が少ないという事情がありました。それは、元々Webやブラウザがインターネット上の数字や文章を読み取り表示するもの、という原点があり、つい数年前まではWebはそこの延長線上にいた為です。通信やハードの進化に伴い表現できる事が増えていく中で様々な技術やアプリケーションは登場してきた訳ですが、図や写真を表示するにもGIFやJPEGといったフォーマットの画像を用意する必要がありますし、それらを思うように動かしたりアニメーションを作成するにはHtmlとは異なるFlashやjavaなどのプラグインを利用する必要がありました。動画や音声もしかりです。

一見すると、ユーザーからはあまり変化がないように感じます。現在でも十分リッチな表現がインターネット上ではなされており、動画の閲覧やモノを購入することもたやすい訳で、これを読んでいる企業担当者様の中にも技術的な事以外に、その凄さが一体何なのか、いまいちピンとこない方も多いかもしれません。ところが、全ての企業にとって実はそうは言ってられない程Html5とは革新的なものです。

HTML5は今までの不可能を可能にする画期的なテクノロジー

というのも、これまではWebサイト一つ作るにも様々な工程を経て様々な専門職の人間が多くの工数を割いてWebサイトを構築する訳ですが、プラグインなしでリッチな表現やアプリケーションまでもHtmlベースで構築出来てしまうので、まず一つとして制作や開発工数が大幅に削減することが可能となってきます。

特に従来のアプリケーションなどはOSやデバイスへの依存度が高いので、仮にアプリケーションを一つ開発するにもPCのOSであればWindows、MacOS、UNIX、Linux、モバイル端末は最近の主流のものでもiOS、Androidなどが挙げられます。国内のガラケーと呼ばれる携帯電話ではキャリアが独自にOSをカスタマイズしているのでキャリア毎に対応を検討しなくてはなりません。またデバイスに関してもWebだけでもPCやガラケー携帯、スマートフォン、タブレットPCなどがありますが特にモバイル端末系に関しては機種毎に各メーカーが独自の仕様を搭載している為、機種に依存した作り込みも行う必要があります。

こうなりますと、当然企業が一つのWebサービスやアプリケーションを考える上で対応しなくてはならない範囲が膨大に増えていきます。それと連動し、コストは果てしなく膨れていく訳です。逆に、それを何とか抑える為に出来る限りの範囲で行おうとすると、ターゲットが絞られたり思うような機能を搭載できず品質の維持が難しくなったりします。 しかも一度作って終わりではありません。その後も延々と続くバージョンアップや新たに登場するデバイス・機種に対応しつづけなくてはならない為、運用面の計算もなかなか読むことができず後々になってコストが追いつかず上手く回らなくなる・・というような事態に陥る事も少なくないのではないでしょうか。アプリケーションだけでなく、Webサイト・モバイルサイトを構築する場合も全く同様です。

またもう一つに、世の中がクラウド時代へ突入していくという背景も大きいです。クラウド時代ではアプリケーションやOSまでもが全てクラウド上で管理されていく時代になります。これまではPCで作業を行う為にインフラ含めて様々なものを用意（購入）し準備をする必要がありましたが、クラウド時代ではそういったものは全てクラウドを通じてサービスとして利用する、という時代になります。これは一般消費者も同じです。クラウド型のプロダクトやサービスがもっと世の中に溢れてきて、どこにいてもどこからでもインターネットにつなぐ環境さえあればITを介したサービスが授与される訳です。そうなった場合、企業側のサービスや業態も変化が著しくなり、よりインターネットをベースとしたサービスやプロダクト発想が重要度を高めていきます。

こんな状況なので、世の中がテクノロジーだ、Webサービスだと期待値があがったところで、企業が二の足を踏むのも分かる気がします。Webに関してはアプリ一つ作るにも検討しなくてはならない事項とコストが膨大だからです。きっと、アイデアは優れていたのに色々な事情でお蔵入りになってしまったWebコンテンツやサービス、アプリも多いことでしょう。

一言で言いますと、Html5とは今まで実現が難しかった事を多方面にわたり実現可能にさせる画期的なテクノロジーの一つだと言えます。上記の事象がHtml5によって多く緩和されるからです。

～Canvasによってこんな事まで出来てしまう～

今回なぜ『Canvas』なのか？というと、単純にHtml5の先進性が分かり易いから、という理由だけです。ただ、安易な発想ではありますが、Html5について漠然と革新性を感じるよりも、実際どういうものなのか見て感じてもらうのが一番早い気がしています。

Canvasとはブラウザ上に図を描くために策定された仕様です。ちなみにCanvasとはHtmlの要素の事なので実際はJavaScriptで記述をしていきます。これにより、FlashやJava Appletのようにプラグインを使わずに、リッチな表現を可能にする技術です。 Canvasで出来る事・出来ない事ももちろんあって、本当にリッチでインタラクティブなコンテンツを作る場合はやはりFlashが優れている場合もあります。ただし、比較的難易度の高くないアニメーションやグラフィカルな図、またアプリケーションなどは「こんな事までHtmlで記述できてしまうのだ」と驚く事も多いです。 以下にいくつか例を挙げようと思います。

アプリケーション事例

まずは簡単なペイントツールから。

• Sketchpad
  簡単な機能ですが、デザイナーの方であればこれでもある程度リッチな絵を描く事が出来そうです。こんなものがHtmlによって作られているというのは、とても画期的な事なのです。

  次のアプリケーションはもっと凄いです。

• 280slide.com
  いわゆるマイクロソフトのPowerPointのようなプレゼンテーションソフトです。このアプリは、他の同様のアプリケーションとほぼ変わらない、文字の配置や大きさの指定、加工、グラフィックの貼り付けや拡大縮小、回転などの機能を揃えています。
  かつ、ファイルの保存などクラウド上で管理されるのでいつでもどこでもインターネットに接続する環境さえあればブラウザ上でファイルの取りだしや編集が可能になります。作成したファイルをダウンロードしローカルで管理することも、pptファイルとの互換性もちゃんとあるのでマイクロソフトのPowerPointで開いて編集することも可能です。
  なんて素晴らしいアプリケーションなのでしょうか。驚くべきは、これがHtml5のCanvasベースで全面的に作られているということです。逆に言うとHtml5によってこのようなブラウザベースでも高性能のアプリケーションを搭載でき、それによって私たちはいつでもどこでも仕事を進める事が可能になる訳です。

  ※残念ながら、日本語対応はしていません。

• Canvas Photo
  これは、デモアプリケーションなのでサービスとして一般配布されている訳ではないですが、もちろんインターネットがあればどなたでもアクセス可能です。写真を自由に編集できますね。PNGファイルにも変換してくれるようです。

Canvasによって作られたコンテンツ例

• HTML5 Love
  こんなものまでもコンテンツとして作成できます。これは、Twitterと連携していてCanvasについて書かれているツイートを読み込んできつつ、後ろではその一つ一つのツイートがまとまって浮遊したりハートを描いたりなどアニメーションの動きをとります。
• Color Cycling
  こちらもデモコンテンツです。Canvasではこのような色彩豊富なグラフィカルな絵やそれを用いた視覚効果を表現することが可能です。以下は静止画像ですが実際にサイトへアクセスしてみると波打つ海の画像や3Dグラフィックのような立体感のあるアニメーション付の画を見ることが出来ます。
• Tunneler
  こちらは、マウスの動きに合わせてアニメーションが可変します。
• Canvas in 3D
  こちらは、画像のサムネイルが3Dとなって動作するコンテンツ例です。Canvasだけで３Dの表現も実現できます。ちなみに画像はflickrから読み込んできているようです。

　
　
コンテンツに関しては、Canvasの要素を自在に操れる技術力があって初めて驚くような素晴らしい表現を可能にしてくれますので、決して容易な訳ではありません。ただ、その技術力さえあれば（センスにも近いかもしれませんが）、Html5でここまでの表現が可能になる訳です。なによりも、余計なプラグインを必要としたり、そのプラグインが対応していないデバイスではコンテンツが見れなかったり、ローカル管理により特定の場所やデバイスでなければ見れないモノというのが圧倒的に減るので、実は分かりにくいようでも企業のターゲットとなるユーザー側のメリットも大きくなるはずです。

企業担当者の方は、是非これに相乗って下さい。今まで難儀だったWebコンテンツやアプリケーション、またはそれを軸としたWebサービス（商品）などの創造は確実にハードルが下がり実現出来る事が増えていくと思われます。

■本コラムの元記事はこちら
Html5の恩恵をひも解く　～Canvas 編～

Webやアプリに関するコラムを配信しています！

■株式会社マイクロウェーブ

株式会社マイクロウェーブは、Webを活用した事業戦略立案、マーケティング、
Webサイト構築、Webシステム開発から、スマートフォン/タブレット用アプリ
ケーションの開発等を行っています。

HP： http://www.micro-wave.net/