第8回 “CGUI” 消費者が作り出すユーザーインターフェイスの時代

株式会社ピーデー
川俣 晶
2006/5/31

　ハイライト1・“CGUI”消費者が作り出す
　ユーザーインターフェイスの時代

　最近、ブログなどでしばしばCGUIという言葉を目にするようになりました。これは、昔からあるCUI（Character User Interface、コマンド入力等を使う文字によるユーザーインターフェイス）でも、GUI（Graphical User Interface、アイコンやマウスを使った画像によるユーザーインターフェイス）でも、CGI（Common Gateway Interface、Webでサーバサイド処理を行う基本的な技術の1つ）でもありません。とても不思議な名前だと思っていたら、野村総合研究所（NRI）による新しい造語であることが分かりました。上記のリンクから巡ることができるニュースリリースから以下にその部分を引用します。。

NRIでは利用者自らがユーザーインターフェイス（UI）を作り、公開することを「CGUI（Consumer Generated User Interface）」と呼んでいます。

　 物事には、名前を付けることで突然理解が進むという現象があります。これが、Ajaxに関してなかなか的確な理解が進まない問題について、1つの解決策になればと思って取り上げます。

　さて、ここでいう理解が進まない問題とは、システムの構造についての理解です。AjaxはJavaScriptによって動作するということで、JavaScriptプログラム単体の問題であると理解されがちです。しかし、実際には多くのAjaxシステムは、サーバ側にも専用プログラムが配置されており、両者が一致協力して動作します。サーバ側のシステムの背後にデータベースが控えていれば、これはシステムが3つの層から構成される一種の3層システムになることを意味します。ここまでは勉強熱心な方であれば、容易に到達できるでしょう。

　問題はここからです。実は、多くのAjaxシステムは、この3つの層に加えて、外部のサービスが提供するWebサービス（API）を利用しています。例えば、Google Maps APIや、Amazon Web Servicesなどが使われます。これらは、実は3つの層に対して必ず決まった位置にかかわるわけではありません。例えばGoogle Mapsはクライアント側に直接入り込んで地図を描き出すことができますが、セキュリティ的な構造の制約上XMLHttpRequestオブジェクトは別ドメインと通信できないため、クライアント側から接続することができません。つまり、サーバ側のプログラムが通信を行う必要があります。このような相違は、非常に分かりにくく、Ajaxシステムを理解しようとする努力を妨げる場合があります。

　しかし、システムをクライアントやサーバといった「層」の問題としてとらえるのではなく、サービス供給者が提供する機能に対して、利用者側がさまざまなユーザーインターフェイスをカスタムに作り出して使っていく……というイメージでとらえると、すっきりと分かりやすくなります。つまり、Webサービスをサーバから呼び出すかクライアントから呼び出すかは重要な問題ではない……ということです。重要なのは、カスタマーがユーザーインターフェイスをジェネレートしてしまうというニュアンスです。

　ハイライト2・Ajax非互換性データベースプロジェクト
全体が見られる一覧表とRSSを追加

　実は、われわれのAjax非互換性データベースプロジェクトはちょっとしたピンチ状況にあります。直接的にいえば情報登録量の少なさと、読みにくる読者の少なさが問題といえます。さらにいえば、システムそのものにも、不備が多く残っています。例えば、驚くなかれ、Googleの検索機能が用意されてあったにもかかわらず、それによって検索可能だったのは表紙の1ページ目のみだったという驚くべき惨状が放置されていたのです。

　なぜそのような状況に陥ったのかといえば、いくつかの理由があります。1つは、筆者自身、さる単行本の書き下ろしを驚くほど短期間で行う関係上、ほとんど目が行き届いていなかったこと。別に1つは、あまりに不備が多いシステムですから、読者（利用者）からの改善要求がすぐにでも多数出てくるだろうと予想していたにもかかわらず、出てこなかったことです。

　しかし、手をこまねいている訳にはいきませんので、先日、3点ほど機能を追加しました。検索エンジンがすべてのページを認識するための静的リンク、更新を知るためのRSS情報の生成、変化した個所を分かりやすくするためのイエローフェードです。静的なリンクは検索エンジンに見つけてもらうため。RSS情報は継続的に見守る手間がバカにならないので。楽して見守ることができるようにするため。イエローフェードは、ページの一部しか入れ替わっていないのに、ページ間を移動したかのような錯覚を感じてBackボタンを押さないようにする配慮として、です。興味のある方は、RSSリーダに登録してみてください（RSS 1.0）

　しかし、これらの修正によって万全ということはありません。皆さんのご意見をお寄せください。ここが使いにくい、見にくい、情報が足りない、こうした方が良い……といったご意見をお気軽にお寄せください。こんなDBは要らない、という意見でも結構です。ご意見は、編集部あて、あるいは＠ITの掲示板に専用のスレッドを立てて、ご活用していただければと思います。

　ハイライト1・Google Maps API Version 2のリリース
ワークステーション大手のSunも積極的

　ワークステーション大手のSun Microsystems、RDBMS大手のOracleのような、Googleらと比較すると古い世代に属する企業群も、積極的にAjax関連情報の提供を始めています。

　このことは、ある意味で当然といえます。Ajaxといっても、既存技術を組み合わせて成立するものであって、これまで有効だったワークステーションやRDBMSがシステムの中核で活躍できることに変わりはないからです。

　一方で、このような企業群もAjaxというキーワードを積極的に取り上げるようになったということは、Ajaxは一部の前衛的な者たちだけが担ぐブームではなく、まさに業界ぐるみで担ぎ上げる本流となったことを意味すると思います。そのような強い支持が各方面から寄せられているのは、1人のAjax愛好家としては非常にうれしく思います。

　そのほかのみどころ

　Ajaxとそれに関連する話題を紹介します。

LinuxをベースとしたAjax OS

ajaxOS

　Ajaxがカバーする範囲は広がり続けています。Ajaxでワープロが動くというのを見たときは、「ここまでやるのか！」と本当に驚きました。しかし、まだその先がありました。何と、AjaxアプリケーションのためのOSまで生まれるというのです。確かに、WebブラウザがOSの代わりにプラットフォームになるという話はありましたが、Ajaxの都合に合わせてOSまで作ってしまう動きがあるとはびっくりですね。

　これは、Linuxディストリビューションの1つであるLinspireをベースにしたOSのようですが、通常のLinux、あるいはLinspireとして使うというよりも、Ajaxアプリケーションとネットワーク上の仮想ストレージ（記憶領域）を使って運用することを主に想定しているようにも感じられます。それ故に、ベースが同じでも、Linuxとは使い勝手が大きく違ってくるのかもしれません。

画面エフェクト2題

画面を揺らしたり回したりできる

　能書きは要りません。ぜひ試してみてください。ラスタスクロールは画像が左右にゆがんで揺れます。サイコロ回転エフェクトは、画像がサイコロに張り付けられた雰囲気で回転して切り替わります。JavaScriptでも工夫次第で、こういった面白い画面エフェクトを作り出すことができます。

　ちなみに、ラスタスクロールとは、ゲーム機などよく見られる画面効果の方式で、1走査線ごとに表示位置を変更することで、CPUのパワーを消費することなく見かけ上の画像をずらしたりゆがませたりするテクニックをいいます。

Googleの新しいサービス

　本当なら1つ1つが目玉に据えてもいいぐらいの大ネタです。

世界中で何が検索されてるかが分かる

　Google Calendarは、スケジュール管理機能を提供するサービスです。もちろんAjaxの機能を用いて、従来のWebベースのシステムよりも使い勝手が格段に上がっています。しかし、注目すべきは、Gmailと同様にGoogleサーバ側で情報が管理されるシステムであるため、ほかのユーザーとカレンダーを共有できることでしょう。

　Google Notebookは、Webブラウザ上でノートを取るツール……といったらいいのでしょうか。プラグインをWebブラウザにインストールしておくと、閲覧中のページを選択して右クリック＋"Note this"とするだけで、Googleのサーバに選択範囲をノートとして記録していくことができます。ノートにはURLも含まれるため、いつでも元のページを閲覧できるほか、Googleならではの強力な検索機能で集めた自分のノートから必要なものをすぐ取り出すことができます。

　ちなみに、このGoogle Notebookは試してみて「やられた！」と思いました。これは、多数のサイトを登録すると破たんしてしまう（探せなくなってしまう）ブックマーク（お気に入り）の機能を補うために有効ではないかと思います。この機能を使えば、価値のある部分だけをノートに保管することで、検索の確実性が高まります。一方で、過去のノートは検索で引き出すことが前提なので、大量のノートを抱え込んでも探せなくなるという事態にはなりません。

　Google Trendsは、いくつかの検索キーワードが使用された頻度を時間軸に沿ってグラフ化してくれます。例えば、Java, JavaScriptのカウントの推移等を見てみると何をするものか分かるでしょう。ちなみに、グラフに付加される旗のような印は、指定キーワードに関係する出来事をニュース記事からピックアップしたものを示します。これを併せて見ることで、どのような出来事があったときにグラフが上がったのか、あるいは下がったのかを知ることができます。

　ちなみに、Google Calendarはベータ版のサービス、Google NotebookとGoogle Trendsは実験サービスであり、まだ実用サービスではありません。利用に当たっては注意が必要です。

増え過ぎたフレームワーク

Ajaxのツールキットとフレームワークを50個

　毎回ネタが多過ぎて泣く泣く切る話題が多いこの連載ですが、今回は極端です。この話題は、本来ならハイライトのトップに持ってきてしかるべき話題だと断言しましょう。それぐらい重要です。

　さて、このページはAjaxのツールキットとフレームワークを50個集めた一覧表です。そう、50個です。5個でも10個でもありません。驚くべきAjaxの勢いは、これだけのフレームワークを一気に噴出させたといえます。その背景には、あまりのJavaScriptの使いにくさと、参入するための取り組みやすさがあることは間違いないでしょう。

　え、見ただけで目がチカチカして、とても1つ1つじっくり見ていられない？ それでは1つだけヒントを出しましょう。このリストは、主に併用する技術ごとに分類されています。例えばPHPと併用するフレームワークなら、"AJAX PHP Frameworks"という名前で集められています。自分が利用する言語や技術のキーワードを探して、その項目だけ見ていくといいでしょう。それにしても、特にPHP用の数が多いのは印象的ですね。AjaxでのPHPの存在感の大きさは、特筆に値します。

　しかし、これほど多くのフレームワークが本当にこれからも使われ続けるのでしょうか？　おそらく、ある程度淘汰されて数が減ることになると予想します。その際、もしも淘汰され、消えていくフレームワークを選んでいると突然サポートが切れたりして悲しい思いをすることになるかもしれません。

JavaScriptの高速化

　amachangさんがShibuya.jsというイベントで使用したプレゼンテーション資料（PowerPointのファイル）が公開されています。内容はJavaScriptの高速化についてです。見せ方が非常にうまく、見ているだけでも面白い内容です。それだけでなく、個々のテクニックでどの程度高速化するかという具体的な数字が、amachangさんのPCでとは断り書きがあるものの明示されているのが高い価値を持ちます。すべてのJavaScriptプログラマが1回は見ておく価値があると思います。PowerPointを持っていない人は、PowerPoint Viewerをインストールして、それをインストールできないプラットフォームのユーザーはWindowsユーザーをつかまえてPCを借りてでも見るといいと思います。

　ちなみに、Shibuya.jsとは、Perlの技術系イベントであるshibuya.pm (Shibuya Perl Mongers)の流れをくむJavaScriptの技術イベントだそうです。


Ajax解体新書（1）　よりAjaxを深く理解するために、ブラウザ上の「見た目」だけに注目するのではなく、実際に目に見えない舞台裏の通信内容をモニタリングしてみよう
Ajax技術の目に見えない通信内容をのぞいてみよう 2006/2/11

古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2


HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT