第27回 ゲームから読み解く、俺スクリプト時代の知的な挑戦
株式会社ピーデー
川俣 晶
2007/11/28
そのほかの見どころ
Ajaxとそれに関連する話題を紹介します。
■ Google OpenSocialで各SNS共通のウィジェットが実現?
OpenSocial のトップページ |
GoogleのOpenSocialは、共通のwidgetが対応SNSのどれでも使用できるようにする標準技術です。これが何を意味するのかは、F.Ko-Jiの「一秒後は未来」というブログの「OpenSocialをどのように捉えるか」で下記のように述べられていて、参考になります。
「OpenSocialによってmixiがソーシャルなプラットフォームになるとすれば、これからは新たなSNSを作るのではなく、mixiをはじめとするSNSに足りない機能をwidgetで提供するということがポイントになると考えられる。もはや会員を自力で集める必要はない。mixi上にwidgetを提供するだけで、最初から1000万のユーザを相手にすることができるからだ」
ユーザー側から見れば、使い慣れたSNSから離れることなく追加機能が自由に組み込めるようになれば便利ですね。
編集部注:SNSそのものについて詳しく知りたい読者は、Master of IP Networkの5分でネットがわかるシリーズ第7回、「2006年のネット界を席巻したSNS」をご参照ください。
■ IEを拡張するJavaScriptデバッガ、DebugBar
Webブラウザ上のデバッグツールは、IE/Firefoxを問わずいろいろ紹介してきましたが、これはIE用の強力なデバッグツールです。1つでも多くツールを知っているといいことがあるかもしれません。
「リッチクライアント & 帳票」フォーラムTOPページをDebugBarで解析(画像をクリックすると拡大します) |
ちなみに、DebugBarのサイトのHOMEを表示させると英語ではない言語(フランス語?)の文章が交ざって表示されたのが、印象に残ります。どうやらフランスのサイトのようですね。
■ ページの画面が崩壊! するブックマークレット
ここに書かれた行をWebブラウザのアドレス欄に入力すると、ページ内容が徐々に崩壊していきます。
崩壊中の「リッチクライアント & 帳票」フォーラムTOPページ |
Webブラウザ上のJavaScriptで何ができるかを学ぶのに良い題材だと思います。堅苦しい書籍で学ぶのに飽きたら、こういうプログラムの動作を解析すると楽しくさまざまな知識が身に付くと思います。
■ iTunesのCoverFlowっぽい鏡面反射画像を作るJSライブラリ
1枚の画像から、鏡面反射的なエフェクトの付いた画面を作り出すライブラリです。
3d image reflection with javascriptのページ |
なぜこれを取り上げたのかというと、容易に調達できる少数の素材だけで、それなりに見栄えの良い効果が得られると役立つからです。通常、「見栄え」が欲しい場合にはまさにそれなりの見栄えを持った画像をPhotoShopなどで作り出すのが早道です。
プログラムを使って特殊なエフェクトを掛けるのは、手間の掛かる作業です。しかし、このようなライブラリがあれば、逆により少ない手間で見栄えを得られる可能性が出てきます。
特に、「見栄え」そのものが本来のページの目的ではなく、単なるアクセントにすぎない場合は、こういったプログラムで見栄えを改善できれば助けになります。しかも、プログラムで表示時に生成させるのなら、素材をいつでも差し替えられます。
■ FlashではなくJavaScriptでゲームを作るという「知的な挑戦」
JavaScriptだけで書かれたゲームです。ゲームとしての内容はよくあるもので特に目新しいものではありません。しかし、音や動きも含め、すべてJavaScriptで書いてある……という「追求の精神」は注目に値します。
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でゲームを作るという「知的な挑戦」 |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|