BeneDict 地球歴史館

BeneDict 地球歴史館
menu

週刊スモールトーク (第157話) すべてのコンテンツはウェブへ ~HTML5の衝撃~

カテゴリ : 社会科学

2011.07.10

すべてのコンテンツはウェブへ ~HTML5の衝撃~

■デスクトップからウェブへ

昔は良かった。パソコンといえば、Wordで文書を作り、Excelで表計算し、気晴らしにゲーム・・・何をするにも机の上のパソコンで完結できた。これが、デスクトップコンピューティング

ところが・・・

月日は流れ、時代はウェブコンピューティングへ。PC(パソコン)はネットワークにつないで使うのが大前提になった。何をするにも、クライアント(ユーザーPC)からサーバー(インターネット上のPC)に指示を送り、サーバーで処理し、結果をクライアントに返信する。ネットワークがないと何もできないわけだ。

そこで、飛行機、地下鉄、未開の地で、大忙しのビジネスマンたちはネットワークがないと仕事ができん!と不満をもらすようになった。さらに、ムダに世界を救うのに忙しいゲーマーたちは「ブラウザゲーム」は遅すぎて重要なミッションがこなせん、と真顔で訴えた。「ブラウザゲーム」とはブラウザ(Explorer等)で動作するゲームのことで、基本、クライアントのメモリもストレージも使わない。すべてサーバーが処理するわけで、レスポンスが悪いのはあたりまえ。

そんなこんなで、”熱い”ビジネスマンやゲーマーの要望に応えようと、新しい仕掛けが登場した。それが、
ネットワークがなくても使えるウェブコンピューティング
え?矛盾してないか?と思う人はまともである。そもそも、「ウェブ」はネットワークが大前提なのだから。

この矛盾を解決したのが「HTML5」である(本質的に解決したわけではない)。HTML5は、これまでウェブを支えてきた「HTML4.01」の進化バージョンで、2012年2月に仕様が策定される予定だ。かなり大がかりなバージョンアップで、10年に一度の革命といっていい。

■HTML5の衝撃

「HTML5」には新しい機能が追加されたが、その多くは「ネットワークなしで使う」に関与している。先の矛盾は気になるところだが、まずは追加された機能をみていこう。

【オフラインウェブ】
オフライン、つまり、ネットワークがなくてもウェブアプリ(ソフト)が使える機能。これで、飛行機や地下鉄や未開の地でもソフトが使える、というだけでなく、レスポンスも大きく改善される。仕掛けは簡単。ウェブアプリを起動したら、必要なものをサーバーから読み込み、クライアント(ユーザーPC)に保存しておくのである。そうすれば、次からは、サーバーから読み込まなくても、クライアントだけで処理できる。つまり、デスクトップコピューティング。当然、通信がないので、高速だし、バッテリーの消耗も少ない。この仕組みのことを、「アプリケーション・キャッシュ」とよんでいる。

ところで、サーバー側でデータやプログラムが更新されたらどうする?クライアントの古いデータとプログラムで処理すれば、整合性がとれなり、一大事だ。これが「同期」の問題。もちろん、解決方法はある。ただし、このへんはプログラマの領域なので割愛する。

【WebStorage】

クライアント(ユーザーPC)のディスク上にデータを保存する機能。え、そんなの当たり前では?いえいえ、これまではウェブアプリは、自分のPCにデータを保存できなかったのある。

ちょっとまて、そう言うけど、Amazonにアクセスすると
「○○さん、Amazon.co.jpへようこそ」
とフツーに表示される。なんで僕・私の名前を知っているのだ?

それに、

「お客様への本日のおすすめ商品・・・」

なんで僕・私の好みが分かるのだ?

さては、僕・私の個人情報をPCに保存しているのでは?あなたは鋭い。じつは、Amazonに登録すると、「個人情報」をクライアント(ユーザーPC)に保存しているのだ。そのため、Amazonにアクセスすると、クライアントに保存された「個人情報」がAmazonに送信され、Amazon側はあなたが誰で、何を買ったのかわかるわけだ。この仕組みは、「Cookie:クッキー」とよばれ、古くから使われている。では、なんで今さら「WebStrage」?

じつは、Cookieはデータのサイズや保存期間に制限がある。ところが、WebStrageにはそれがない。さらに、Cookieはサーバーに送信されるが、WebStrageは送信されない。つまり、純粋にローカルなディスクとして使えるわけだ。なので、オフラインのウェブアプリ(ソフト)には欠かせない。

【WebSQLDatabase】

サーバーなしで使えるデータベース(Database)。データベースとは、顧客データのような大量のデータを扱うためのツールである。たとえば、顧客の項目が名前・年齢・住所で、顧客の数が1万人とする。この場合、名前・年齢・住所を「フィールド」、1顧客分のデータを「レコード」とよぶ。この場合、レコード数は1万件だ。このように、データをフィールドとレコードで管理するのがデータベース(ちょっとアバウトかな)。

「WebSQLDatabase」は、名前のとおり「SQL」が使える。「SQL」とはデータベースを操作するための標準言語。だから、使い勝手はいい(と思う)。また、前述したように「サーバーなしで使えるデーターベース」なので、データをクライアントのディスクに保存することができる。データをクライアントで保存する?では、先の「WebStrage」とどこが違うのだ?ザックリ言えば、「WebStrage」はメモ程度、「WebSQLDatabase」は複雑で大容量のデータ、という棲み分け。

ところで、「クライアントだけで利用できるデータベース」にどんなメリットがあるのだろう?実例をあげて説明しよう。ここにソーラーパネルを販売する会社があるとする。ある日、顧客から修理の依頼が入る。さっそく、修理員が現地に入ったが、とんでもない山奥だった・・・電気はないし、電話も通じない。さて、この顧客の情報だが、本社のサーバーにしかない。ところがネットワークがないので、顧客データを引き出せない。これは困った。

さらに・・・

修理が終って、報告書を作成するため、本社のデーターべースにアクセスしたいがそれも×。そのため、一旦、修理内容をメモしておき、会社に帰った後、データベースに入力するしかない。ところが、修理件数が多いと、二度手間が増えてメンドー。何か良い方法はないものか?そこで出番となるのが、サーバーなしで使える「WebSQLDatabase」だ。

普通のデータベースでは、データはすべてサーバーで一元管理されるので、クライアントでデータを保存することはない。一方、「WebSQLDatabase」では、ユーザーの操作をクライアントに保存しておき、後でサーバーにつないだ時、その内容に従って、サーバーのデータを更新する(同期を取る)。これを先の修理員の例で説明しよう。

修理員は、あらかじめ、顧客データをクライアントに保存しておき、現地(山奥)に行く。そこで、顧客データを参照して修理。修理が終わったら、クライアントで報告書を書く。その時点で、報告書は本社データベースにとどかないが、その処理内容はクライアントに保存されている。その後、会社に帰って、クライアントをサーバーつないだ瞬間、先の報告書がデータベースに反映される、というわけだ。けっこう簡単(ややこしい部分は割愛したので)。

【WebWorker】

コンピュータの処理は2つに大別できる。ユーザーとの対話処理(フォアグラウンド)と、その裏側の処理(バックグラウンド)である。もし、裏側の処理が重いと、対話処理に手が回らなくなり、入出力のレスポンスは悪化、最悪フリーズしたように見える。そこで、対話処理を優先し、空いた時間に裏側の処理をさせる、その仕掛けが「WebWorker」だ。一般には「マルチタスク」とよばれている。

じつは、文字を打ち込んでいるだけで、PCはアンチウィルスソフト、メーラーなど何百ものプログラムが動いている。だから、まともなコンピュータには「WebWorker」は欠かせない。

【WebSocket】

クライアントとサーバーで、全二重通信(fullduplex)を実現する機能。電話のように、双方に同時にデータを送受信できる

本来、インターネットの通信は、「HTTP」というプロトコル(通信手順)が使われている。クライアントがサーバーに問い合わせ、それにサーバーが応える、という方法。この場合、

1.クライアント→サーバー

2.サーバー→クライアント

と双方向の通信が可能だが、それを同時に行うことはできない。言ってしまえば、トランシーバー。これを「半二重通信(halfduplex)」とよんでいる。

ところが、「WebSocket」を使えば、電話のように全二重通信が可能になる。一度、webSocketの通信が確立すると、クライアントとサーバーのどちらからでも、いつでもメッセージを送信できる。確かに凄いが、ちょっとコワイかも。ウェブサイトに接続した瞬間、ウェブサイト側からクライアント側に自由にデータを送信できるから。とはいえ、これまでにないアプリケーションやサービスが生まれる可能性もある。期待に胸が膨らんだが、最近、話を聞かなくなった。一体、何があった?

【マルチメディア】

2Dグラフィック(将来は3Dも)、Video、Audioの再生機能がサポートされる。現在、ムービー(Video)を再生するにはFlashなどのプラグインソフトが必要だが、それが不要になる。たとえば、ムービー「http://benedict.co.jp/movie.mov」をウェブサイトに表示するには、
<videosrc=”http://benedict.co.jp/movie.mov”controlsloopautoplay></video>
の一行を追加するだけ。簡単すぎる!

とはいえ、今でもプラグインで実現できるので、世間で騒ぐほどのものではない。HTML5にとって、おまけみたいなもの。

さて、以上の新機能をみると、HTML5が目指しているのは、

1.ネットワークなしでも使える

2.デスクトップ並みの高機能で高速なアプリ

に帰着する。

本来、ウェブアプリは、クライアントではなくサーバーで処理するものなのに、HTML5はその逆を目指している。論理が矛盾しているからダメ、便利ならそれでいいじゃん、どっちをとるかは人による。言ってしまえば、
「信仰かパンか?」
ほとんどの人は「パン」をとるだろうから、今後は、デスクトップアプリはウェブアプリに置き換わっていくだろう。もちろん、ゲームも例外ではない。

■JavaScriptの復活

売り物になるゲームなら、見映えのいいユーザーインターフェイス、スムースなアニメーション、ハラハラドキドキのストーリーは欠かせない。それを実現するには、HTML言語ではムリ。そもそも、HTMLはウェブサイトを作るための言語で、厳密にはプログラミング言語ではない。そこで、登場したのが「JavaScript」言語である。

「JavaScript」はブラウザ環境のウェブアプリを書くための言語で、デスクトップアプリ並みのゲーム(ブラウザゲーム)が作れる、というフレコミだった。ところが、ふたを開けてみると、標準化が甘く、ブラウザ間の互換もない。たとえば、Explorerなら動くけど、他はダメとか(意外に多い)。さらに実行速度も極端に遅い。というわけで、本格的ゲームはムリ、テーブルゲームぐらいならなんとか・・・ダメじゃん。

という現実と理想のはざまで、JavaScriptの評判は地に落ちてしまった。ところが最近、JavaScriptの復権がめざましい。機能が強化され、実行速度も劇的に向上したのだ。こんな進化の速い言語は見たことがない。もっとも、仕様がコロコロ変わるので、プログラマーにとっては迷惑だろうが。

■次世代ウェブ

というわけで、ここで、ウェブアプリを整理しよう。

まずはじめに、

1.基本言語は「HTML」。

2.クライアントとサーバーの通信手順は「HTTP」。

これを「HTML5」にバージョンアップし、

3.ネットワークがなくても使える。

4.Video、Audio、2D・3D描画が標準で使える。

さらに、JavaScriptを組み合わせれば、

5.デスクトップアプリなみの高機能・高速のアプリが作れる。
(目もくらむようなリアルタイム3Dゲームは当分ムリだが)

そして、ここが肝心、
6.ブラウザさえあればどんなハード(デバイス)でも動く

ん~、いいことずくめだが・・・それで何ができる?
何ができるかって?そんなミミッチイ話じゃないぞ。全く新しいメディアが生まれる可能性があるのだ。

■すべてのコンテンツはウェブへ

概念を説明する前に、まず、メディアの歴史を整理しよう。

地球最古のベストセラーは「ギルガメシュ叙事詩」である(旧約聖書に非ず)。ギルガメシュ叙事詩には複数のバージョンがあり、現存する最古のものは「古バビロニア版」。成立時期はおそらく、紀元前1900年~紀元前1400年だろう。物語の主人公は、1/3が人間、2/3が神のギルガメシュ王。血わき肉おどる大冒険と、
「我々はどこから来てどこへ行くのか」
的深淵な哲学の2本仕立て。

一方、メディアとして見たとき、ギルガメシュ叙事詩は「テキスト+粘土板」どまり。その後、絵や写真も扱える紙媒体が生まれ、活版印刷術により量産も可能になった。そして今では、電子書籍が紙媒体に取って代わろうとしている。だが、あらゆる面でウェブ書籍が上なので、最終的には、電子書籍は、ウェブ書籍に取って代わられるだろう。

一方、アニメや実写などのムービーは、映画、TVが主流だったが、今後はPCやスマートフォン、タブレットPCに向かうだろう。つまり、メディアは電子デバイス、より具体的にはウェブへ。

さらに、コンピュータゲームのようなインタラクティブなメディアも、PCやゲーム専用機からスマートフォン、タブレットPCにシフトしつつある。つまり、メディアは電子デバイス、より具体的にはウェブ。

どう考えても・・・あらゆるコンテンツはウェブに向かっている

そして、次世代のウェブには究極の機能も備わっている。PCやゲーム機のようにプログラム可能なこと。そのため、個々のコンテンツ、さらに、その構造さえリアルタイムに変えることができるのだ。それを可能にする仕掛けが、先の「JavaScript」。具体的には、ウェブサイトの骨組みをHTML5で構築し、JavaScriptで動的な仕掛けを組み込む。つまり、

「HTML5+JavaScript→プログラマブルウェブ→次世代ウェブ」

具体例をあげよう。たとえば、シミュレーション型ウェブ書籍。現在のウェブ書籍は、ウェブサイト上の「テキスト+静止画」に過ぎないが、これに、時間軸と空間軸を追加する。ウェブ書籍のように、ページをめくりながらストーリーが進むが、すべての時間と空間に人や物が存在する。そのため、ストーリーの進行にかかわらず、好きな時間と空間の様子を見ることができる。さらに、小説に登場する人物、アイテムをサイトの他のコンテンツ、さらに、販売ページとリンクしたら?これまでにないメディアが生まれる。

さらに・・・

当ウェブサイト「ベネディクト地球歴史館」と、デスクトップアプリ「ガイアチャンネル~3D地球儀で眺める世界史~」を次世代ウェブで統合したら・・・全く新しいサービスが生まれる。たとえば・・・おっと、あやうく守秘義務違反。昔から、口が軽いのが災いした、ナイショ、ナイショ。ということで、一刻も早く作りたいのだが・・・

お金はどこだ?

さて、現実の仕事にもどるとするか。明日も忙しいぞぉ~。

by R.B

関連情報