RIAブログ

ひさしぶりな投稿になってしまいました。
去年紹介したサイトはフラッシュなサイトが多かった気がしますが、ことしはどうなっていくのでしょうか？？

そんなことで、今回はフルフラッシュとフルジャバスクリプト（こんな言葉があるかは分りません。ググってもでできませんね）のサイトを作る上での個人的な感覚をまとめておきます。

・各ブラウザ対応

なんといってもまずはここからです。

Flash
取りあえず最新版のフラッシュプレーヤーが入っていればOK。iphone等で見れないの気にしなければ、特にブラウザによって異なることはほとんどない。WINとMacでデバイスフォントが異なるぐらいかな？
swfobject,swffitなどJavascriptと連動するライブラリを使う場合や、IE等で読み込み時にstageの幅が取れない等の問題はswfで回避しておく。
JavaScript
現段階ではブラウザによって違いがありすぎて、把握できないので取りあえずFrameworkを使う。Frameworkを使うことによってブラウザ間の違いを吸収してくれ、同じプロパティ、メソッドで操作が可能になる。
代表的なものにJquery(71kB),Ext.core(84KB),Prototype(159KB),Goole Closure Library（44.8KB）等があります。Prototypeのファイルサイズが大きいですが、Prototypeは短縮したものが配布されていないため、各種ツールを使い短縮することにより20KB程度まで圧縮できるそうです。
ネットで見てる分にはJqueryの人気が高いようです。ライブラリも多くあり、jsのサンプルのほとんどがJqueryだったりします。しかし基本的なDOM操作はどのライブラリでも使えるので、上位の使いたいライブラリにコアライブラリを合わせておくのが無難かとを思います。Ext.coreとJqueryの併用もできますが、そのぶん読み込みのロード時間がかかってしまいます。

・コンテンツの表示

Flash
左上から順番に重なっていきます。基本全てが絶対座標で表示されます。なので、フルフラッシュの場合はフラッシュ自体を画面に合わせて、縮尺を変更する場合以外は、ステージのリサイズイベントで各コンテンツの位置を調整します。
JavaScript
HTML,CSSにしたがって表示されます。ここが最大のポイントです。
各ライブラリをつかって生成すしたオブジェクト、または最初からHTMLに書いてあったものは、HTMLのタグ、cssによってレイアウトされます。webページとして考えると普通なことですが、フラッシュの感覚で作るとこの点が一番意識する点です。
なので単純にmarginをautoにするだけで常に真ん中にコンテンツを表示することが出来ます。普通ですよね。
なのであくまでもHTML,CSSでることを考えるとつくりやすい。なのでpostionを全部absoluteにして書くとフラッシュのように構成できるけど、なんかもったいない気がする。
canvas,svgはフラッシュと同じ感覚だけどここでは割愛！

・コード

文法的にはほとんど同じ。As2.0の感覚とjavascriptが似ている。
Flash
Aｓ2.0.As3.０で書く。
タイムラインスクリプトなどもかけてアニメーションにはやっぱまだフラッシュかな？
JavaScript
As2のようにObjectにどんどんプロパティを追加しても大丈夫。随時FFのFirebugや開発ツールでパラメータを確認できるのがJs開発の良いところ。フラッシュもdumpしたり出来るけど、何かとややこしい。

かといってもクロスブラウザー対応のJSのサイトってまだあまりないですね。
今年はこんな視点からもブログを更新できたらと思います。

既にプレイしてみた人も多くいると思います、
グーグルのトップのロゴがパックマンになっています。
パックマン30周年を記念したものです。
今まで色々なロゴが出現して来ましたが、遊べるのは初めてではないでしょうか？？

[0072 google]

ちゃんとgoogleと読めますね。
Incert Coinボタンでゲームを開始できます。もう一度押すと対戦モードになります。

ただ単にパックマンが出来るだけなら紹介はしませんでしたが、
このパックマンはフラッシュで動いていません。Javascriptで作られています。
マウスでの操作、キーボード操作、サウンドまでしっかりできており凄いです。

256面まであるそうですので挑戦してみてはいかがでしょうか？
残念ながら期間限定です。

googlemapsを使ったコンテンツの紹介です。
世界の縮尺をいろいろと手を動かしながら見れるコンテンツです。

鹿児島から北海道までの2倍とか例えられても、
よく理解できなかったりしますが、そんな時に便利そうです。

[0070 MAPfrappe]

使い方は簡単で、上のマップにかいた図形が下のマップに表示されます。
下のマップの図形は固定なので、自由にマップを移動して大きさを比較することができます。

日本をヨーロッパに持っていくと、意外と大きいことが分ります。
これで北海道4つ分と言われた時にピンとくる力が養えると思います。

このマップはjavascriptで作られており、図形の描写にはcanvasタグが使われています。
jsとflashでできることの共通点がどんどん増えてきました。それぞれの利点をいかしたコンテンツ作りに励もうと思います。このサイトのjsでのオブジェクトの座標管理などは参考になりそうです。

最近勝手に横スクロークサイトに注目していますが、今日はそんな横スクロールなサイトを作るためのjavascriptライブラリを紹介します。

[0030 bookreader.js]
http://bookreader.cognitom.com/

bookreader.js

ヘッダーで読み込んで、divで囲むだけでページが横レイアウトになるものです。エッセーなど読ませるコンテンツとしてはなかなかいいんじゃないでしょうか？？本みたいになります。

またキーボードの左右の矢印でページの送りができます。プレゼンテーションの資料としても使えそうですね。
テーマもいくつか選べたりします。詳しくはリンク先でどうぞ。
ライセンスはAPL2だそううです。

最近はワイドの画面を使っている人も多くなっており、ますます気になる横スクロールですね。
また面白い横長コンテンツがありましたら紹介したいと思います。