プロとして、いま必須のあらゆる知識を再整理!
WEB制作テクニックの新標準2010
SESSION 09 Ajax × クラウドKeyword…SaaS、jQuery、スマートフォン、Google Chrome OS
| クラウド時代のWeb制作とAjaxプログラミング |
| クラウドは2009年の流行キーワードのひとつだ。さまざまなデータやサービスを提供し、Web制作やプログラム開発を容易に、そしてパワフルにサポートする。クラウドの進化とAjaxがこれからWeb制作に何をもたらすのかを紹介しよう。 文＝H2O Space. |
ソフトウエアを不要にする「クラウド」とは
PCで作業をするときには、必ずソフトウエアが必要であった。しかし、そのような状況がクラウドによって変わりつつある。クラウドのひとつである「SaaS（Software as a Service）」はソフトウエアをインターネット上で、Webブラウザのみで利用できるようにするサービスのことだ。
代表的なものには、Googleが提供している各Webサービスが挙げられる。電子メールソフトを利用することなく、Webブラウザだけでメールの送受信ができるGmailや、カレンダーサービス「Googleカレンダー」、文書や表計算とプレゼンテーション文書がつくれる「Googleドキュメント」などは、SaaSを代表するサービスと言えるだろう【1】【2】。
【1】Gmailの画面。クラウドサービスの代表的存在といえる
【2】Googleドキュメントでは文書、表計算、プレゼンテーションといったの3つの「オフィスソフト」機能が提供されている
Webクリエイターが制作に生かせるクラウド
Googleが提供する各ツール群は、おもにビジネス全般に活用できるWebサービス、ローカルアプリケーションだが、クリエイティブに特化したクラウドサービスも登場してきている。Adobeが提供する「Photoshop.com」（www.photoshop.com/）は、Adobe Photoshopと同様の画像補正・加工などの編集機能をWebブラウザ上で実現している【3】。拡大縮小や切り抜きなどの加工、明るさやホワイトバランスの調整など簡単な画像補正が可能で、加工した写真画像はダウンロードして利用したり、そのままオンラインアルバムとしてWebページ内に埋め込んだり、Flickrなどのサービスと連携して共有することも可能だ。
また、日本発のWebサービスとして話題になっているのが、オンラインで作図や共同編集ができるドローツール「Cacoo（カクー）」（cacoo.com/）だ【4】。簡単な図形を組み合わせた図版をWebブラウザ上で作成できる。Webページのパーツ類も準備されているため、画面設計（ワイヤーフレーム）やサイト構成図などを描くことも可能だ。「Cacoo」で描いた図形はPNG形式で保存をしたり、埋め込んで利用したりできる。
【3】Photoshopの機能にはまだ及ばないが、簡単な写真補正なら「Photoshop.com」（www.photoshop.com/）を使ってWebブラウザ上で十分行える
【4】現在、βサービス公開中の日本発オンラインドローツール「Cacoo（カクー）」（cacoo.com/）。今後の開発に期待ができる
クラウドがWeb制作の現場にもたらす共有性
では、Web制作者たちは今後、一体どのようにして提供されているクラウドを活用していけるのだろうか。前述したようなWebサービスは確かに便利ではあるが、Webサイト制作現場での作業自体には、まだまだソフトウエアの力が必要だ。たとえば、FTPソフトを用いてWebサーバに接続をし、Webオーサリングソフトやエディタなどでコーディング作業をし、フォトレタッチソフトなどを駆使してWebサイトに使用する素材を準備していくことになる。
しかし、Webデザインと同時に作成されることになるWebサイトの設計書作成には、クラウドサービスが存分に力を発揮する。ここで活用例を示そう。Googleドキュメントを使ってWebサイト全体の文書（仕様）を作成し、前述の「Cacoo」でサイトの画面構成図やワイヤーフレームを書き起こす。書き起こした図をさらにGoogleドキュメントに埋め込んでしまえば、あとから図を編集したときにも、埋め込み直す必要がなく便利だ【5】。クラウドサービスであるGoogleドキュメントはつくった文書を印刷したり、電子メールに添付する必要すらない。メールアドレスを指定して招待すれば、その場で閲覧し、修正できるのだ。この共有性こそがクラウドの真髄と言える部分だろう。
【5】Googleドキュメントと「Cacoo」を組み合わせて書類を作成した例。CSSを調整すれば印刷にも堪えうる
クラウドによってより重要性を増したAjax
ここまで前述してきたクラウドサービスを支えているのが、JavaScriptを高度に活用したプログラミング、いわゆる「Ajax（Asynchronous JavaScript ＋ XML）」だ。GmailやGoogleドキュメントなどは、そのほとんどがAjaxのみで構成されており、快適な操作性と動作の軽快さを実現している。
また、つねにAjaxのライバルと目されているFlashもクラウドサービスを構成している。「Photoshop.com」はすべてFlashで制作されているが、これは米Adobe Systems社ゆえのプロダクトだと言えよう。また「Cacoo」の場合には、図形描画の部分はFlashでつくられ、図形描画以外の部分をAjaxでつくっている。今後は「Cacoo」のようににお互いの良いところを組み合わせて、ひとつのサービスをつくりあげるというのが主流になっていくと思われる。
Ajax開発のスタンダードになった「jQuery」
Ajax開発をするうえでは、ライブラリやフレームワークと呼ばれるものを利用するのが一般的だ。これまで、さまざまなライブラリが登場し、しのぎを削ってきた。しかし、2009年はJavaScriptライブラリ「jQuery」（jquery.com/）によるAjax開発が完全にスタンダードになった年だと位置づけてよいだろう【6】。CSSに似た書式での指定によってプログラマーではない人でも簡単に扱え、豊富なプラグインで本格的なプログラミングにも活用できるjQueryは、Ajaxの世界を飛躍的に進化させた。
【6】「jQuery」をGoogleトレンドで検索した結果。注目度は右肩上がりを続けている
Ajaxの次なるステージはスマートフォンへ
Webでは重要な技術のひとつとなったAjaxだが、次なるステージとして注目されているのがiPhoneやAndroid搭載ケータイなどのスマートフォン向けアプリケーション開発だ【7】。JavaScriptライブラリのひとつ「JQTouch」（www.jqtouch.com/）は、iPhone特有の動作を再現したjQueryプラグインである【8】。これを利用すれば、iPhoneらしい入力エリアの作成、画面が左にスライドしての移動、裏返って別の画面を表示、といった演出を再現できる。現在のところ、iPhone向けのアプリケーションを作成するには、特有のプログラミング言語を習得する必要がある。しかし、JavaScriptを利用すれば、PC向けWebサイト制作のノウハウを利用してiPhone向けのアプリケーションをつくることが可能になる。また、Androidやほかのスマートフォンでも活用できるなど、そのメリットは大きい。
【7】iPhone版Gmailの画面。Ajaxを活用して、快適な操作を提供している
【8】「JQTouch」（www.jqtouch.com/）はiPhone特有のエフェクトを、Ajaxで実現できるライブラリ
「Google Chrome OS」に見るAjaxの未来
「Google Chrome OS」は、2010年後半をめどにGoogleから無償出荷されるオープソースOSで、おもにネットブックへの搭載を予定している【9】。軽量性を重視した「Google Chrome OS」の大きな特徴は、ソフトウエアをインストールできず、Webベースのアプリやツールなどのサービスしか利用できないことだ。そのため「Google Chrome OS」が普及していけば、今後クラウドサービスがますます重要となっていく。これにより、クラウドであらゆる業務を行えるようにしていくことがGoogleの目的だと考えられる。現代のWebの世界が、少なからずGoogleの影響を受けていることを考えれば、Ajaxの重要性はこれからますます上がっていくことは必至だといえる。
【9】「Google Chrome OS」は全体がWebブラウザで構成されるユニークなOSだ
［INDEX］
>>> SESSION 04 画像・色
>>> SESSION 09 Ajax×クラウド
