第27回 ゲームから読み解く、俺スクリプト時代の知的な挑戦

株式会社ピーデー
川俣 晶

2007/11/28


 そのほかの見どころ

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

Google OpenSocialで各SNS共通のウィジェットが実現?

OpenSocial のトップページ
OpenSocial のトップページ

 GoogleのOpenSocialは、共通のwidgetが対応SNSのどれでも使用できるようにする標準技術です。これが何を意味するのかは、F.Ko-Jiの「一秒後は未来」というブログの「OpenSocialをどのように捉えるか」で下記のように述べられていて、参考になります。

 「OpenSocialによってmixiがソーシャルなプラットフォームになるとすれば、これからは新たなSNSを作るのではなく、mixiをはじめとするSNSに足りない機能をwidgetで提供するということがポイントになると考えられる。もはや会員を自力で集める必要はない。mixi上にwidgetを提供するだけで、最初から1000万のユーザを相手にすることができるからだ」

 ユーザー側から見れば、使い慣れたSNSから離れることなく追加機能が自由に組み込めるようになれば便利ですね。

編集部注SNSそのものについて詳しく知りたい読者は、Master of IP Network5分でネットがわかるシリーズ第7回、「2006年のネット界を席巻したSNS」をご参照ください。

IEを拡張するJavaScriptデバッガ、DebugBar

 Webブラウザ上のデバッグツールは、IE/Firefoxを問わずいろいろ紹介してきましたが、これはIE用の強力なデバッグツールです。1つでも多くツールを知っているといいことがあるかもしれません。

「リッチクライアント & 帳票」フォーラムTOPページをDebugBarで解析
「リッチクライアント & 帳票」フォーラムTOPページをDebugBarで解析(画像をクリックすると拡大します)

 ちなみに、DebugBarのサイトのHOMEを表示させると英語ではない言語(フランス語?)の文章が交ざって表示されたのが、印象に残ります。どうやらフランスのサイトのようですね。

ページの画面が崩壊! するブックマークレット

 ここに書かれた行をWebブラウザのアドレス欄に入力すると、ページ内容が徐々に崩壊していきます。

崩壊中の「リッチクライアント & 帳票」フォーラムTOPページ
崩壊中の「リッチクライアント & 帳票」フォーラムTOPページ

 Webブラウザ上のJavaScriptで何ができるかを学ぶのに良い題材だと思います。堅苦しい書籍で学ぶのに飽きたら、こういうプログラムの動作を解析すると楽しくさまざまな知識が身に付くと思います。

iTunesのCoverFlowっぽい鏡面反射画像を作るJSライブラリ

 1枚の画像から、鏡面反射的なエフェクトの付いた画面を作り出すライブラリです。

3d image reflection with javascriptのページ
3d image reflection with javascriptのページ

 なぜこれを取り上げたのかというと、容易に調達できる少数の素材だけで、それなりに見栄えの良い効果が得られると役立つからです。通常、「見栄え」が欲しい場合にはまさにそれなりの見栄えを持った画像をPhotoShopなどで作り出すのが早道です。

 プログラムを使って特殊なエフェクトを掛けるのは、手間の掛かる作業です。しかし、このようなライブラリがあれば、逆により少ない手間で見栄えを得られる可能性が出てきます。

 特に、「見栄え」そのものが本来のページの目的ではなく、単なるアクセントにすぎない場合は、こういったプログラムで見栄えを改善できれば助けになります。しかも、プログラムで表示時に生成させるのなら、素材をいつでも差し替えられます。

FlashではなくJavaScriptでゲームを作るという「知的な挑戦」

 JavaScriptだけで書かれたゲームです。ゲームとしての内容はよくあるもので特に目新しいものではありません。しかし、音や動きも含め、すべてJavaScriptで書いてある……という「追求の精神」は注目に値します。

Prototype/Scriptaculous Version of Same Gameのページ
Prototype/Scriptaculous Version of Same Gameのページ

 さて、このゲームを見ていて思い出したのは、パソコン黎明(れいめい)期の状況です。Flashを使えば簡単なのにあえてJavaScriptにこだわる…… という精神が、当時にもあったような気がしました。1980年代初期の8bitパソコン全盛期には、NECのPC-8801シリーズと、富士通のFM-7シリーズが2大人気シリーズとして支持されていました。特に、NECと比べて一般向けパソコンのヒット作に恵まれない富士通にあって、FM-7の高い人気は歴史的に貴重なものではないかと思います。

 とはいえ、セカンドライフの富士通島の歴史コーナーに行くと、3Dモデルで展示されているパソコンはFM-TOWNSだけで、画像データで展示されるパソコンはFM-16πと9450だけという感じであり、もはや当事者の富士通でさえ存在を忘却しつつある感じもありますが……。

 この2つは、高級高価格のPC-8801シリーズと、安価で手軽なFM-7シリーズと市場をすみ分けていましたが、実は性能面では安いFM-7シリーズの方が圧倒的に優れていました。例えば、グラフィック画面の消去を実行すると、FM-7はあっという間に終わるのに、PC-8801は何秒もかかって上からじわじわと消えていく感じでした。

 さて、この状況下で私はPC-8801のプログラミングの仕事をしていました。それは、同じ機能を実現するためにFM-7の何倍もの手間と知恵をつぎ込まねばならないことを意味します。では、その仕事は苦痛であったのか…… といえば、そうではありません。むしろ、面白かった…… とすらいえます。限界を超えるための「知的な挑戦」は刺激があるし、出来上がったプログラムは多数のユーザーが所有するパソコンで実行できたのです。

 そして、あえてJavaScriptにこだわるプログラミングも、これと同じなのだな…… と思いました。「XXなら簡単にできるのに」と思いつつ、あえて「知的な挑戦」を行い、そして勝利すればそれは多くのユーザーが所有するWebブラウザで即座に実行できます。満足感や手応えの大きな挑戦といえるでしょう。

@IT関連記事


いまさら聞けない、“Ajax”とは何なのか?
いまさら聞けないリッチクライアント技術(3)
 
Googleマップで有名になり、もはやWebの定番といっても過言ではないAjax。その生い立ちや仕組み、構成技術について解説
リッチクライアント & 帳票」フ ォーラム 2007/8/23
いまさら聞けないJavaScript入門
いまさら聞けないリッチクライアント技術(2)
 
Ajax技術が注目され大復活を遂げたJavaScript。しかし、復活するまでには数々の悲劇が…… さらに実例や使い方なども解説
リッチクライアント & 帳票」フ ォーラム 2007/7/17
JavaScript開発ツールの本命! FirebugとAptana
どこまでできる? 無料ツールでWebサイト作成(4) JavaScript/Ajax開発で“使える”無料ツールはあるの? そんな疑問を持つ人にはFirebugやAptanaがオススメです
リッチクライアント & 帳票」フォーラム 2007/11/16
低スペックPCでも使える! Webブラウザでサイト作成
どこまでできる? 無料ツールでWebサイト作成(3) Webブラウザのプラグインにもサイト作成に役立つツールが多く存在します。何よりプレビューが正確で動作も軽いです
リッチクライアント & 帳票」フォーラム 2007/10/12





1-2

 INDEX
第27回 ゲームから読み解く、俺スクリプト時代の知的な挑戦
  Page1
実は、マイクロソフトは画像検索やマッシュアップでもすごい!?
プラグイン抜きで新言語を使う「俺スクリプト」の時代
Mozillaの「Prism」に見るデスクトップ回帰
  Page2<そのほかのみどころ> 
Google OpenSocialで各SNS共通のウィジェットが実現?
IEを拡張するJavaScriptデバッガ、DebugBar
ページの画面が崩壊! するブックマークレット
iTunesのCoverFlowっぽい鏡面反射画像を作るJSライブラリ
FlashではなくJavaScriptでゲームを作るという「知的な挑戦」






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

注目のテーマ

HTML5+UX 記事ランキング

本日 月間