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のサイトってまだあまりないですね。
今年はこんな視点からもブログを更新できたらと思います。

画像検索をする時にどの検索サイトを利用していますか？？
今日は韓国のポータルサイトのNAVERを紹介します。

韓国では2003年にYahoo!Koreaを検索回数で抜き、国内シェアを60%以上持っています。世界でも5位のシェア率を持っています。サイト自体はとてもシンプルで、アイコン等も統一されて整理されたページになっています。
日本での検索回数はYahoo!とGoogleで90%以上のシャアがあると言われており、ポータルサイトとしてはやはりYahoo!が多いのではないでしょうか。

今日はそんな中でNAVERでの画像検索の紹介です。

[0075 NAVER JAPAN]
http://www.naver.jp/

とにかくこのNAVERでは、表示がキレイで気持ちがよいです。スロールに応じた自動読み込みはBingなどでも行えますが、等幅表示での自由なレイアウトであったり、見ているだけで楽しいです。

NAVERでのツールはダウンロードが必要なものも一部ありますが、WEBアプリとして使えるものもあり、どれもシンプルで使いやすい印象でした。

iphoneも発表されて、ますます盛り上がるappleですが、
appleのサイトにHTML5 and web standards.というコンテンツができました。
＊safariでしか見ることができません

[0074 apple html5]
http://www.apple.com/html5/

ShowcaseとしてHTML5でつくられた、Video,Typography,Galley,Transitions,Audio,360°,VRが紹介されています。それぞれがHTML5,css3,javascriptを利用して作られています。

HTML5と聞いて初めに思うことはやはりHTML5 vs Flash という構図です。
HTML5 vs Flash という構図は当初、開発者内の話のようでしたが、スティーブン・ジョブスさんのapple va adobeという話で大きくなり、特に話題になったように思います。このおかげでHTML5がより広まればと思います。

FlashはHTML5 vs Flash の話を見てて気になるのは、人によって Flash を何と捕らえるかが違うところ。videoタグで不要になるFlashは全体の一部だし、Flash使わなくてもできるようなところは既にHTML+JSに置き換わってる物も多い。

上記のような意見もありました。→
わざわざFlashでしかできなかったことが、プラグインを使わなくてできることが良い点であり。Flashでしかできないこと、Flashに求めることを見極めつつ、使い分けていくことが大切だと思います。

結局HTML5 vs Flash という構図で書いてしまいましたが、HTML5の普及により、また面白いサイトが増えていくと思うので楽しみです。

今日紹介するのはポカリスウェットのサイトです。

[0073 ポカリスウェット]
http://pocarisweat.jp/

マウスの動きと連動したコンテンツの動きが心地よいです。
全体を動かしたときだけではなく、上部のメニューをロールオーバーした際の動きもいいですね。

フラッシュコンテンツを見たときに、もしタッチスクリーンだったらと想像してしまいますが、先日海外の記事の中に、既存サイトをタッチスクリーンで操作した動画が公開されていました。
こちら
動画ではDELLのノートで操作しています。

思ったより、すんなり動いてますよね？？
簡単な動作なら作り変える必要なさそうですね。しかし、iphoneなどのappleのタッチスクリーンと比べられたらキツイんでしょうね。

これから先どんなハードがでてくるのか楽しみだけど、
それにあうUIをしっかりと作っていけるようにしていきたいです。

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

[0072 google]

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

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

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

皆さん140文字でつぶやいていますが、
今日紹介する手旗メールは10文字です。
10文字でなにを伝えましょうか？？

[0071 手旗メール]
http://www.tebata.jp/pc/index.html

サイトでは手旗で文字を伝えてくれる動画を作り、携帯電話向けに送ることができます。
旗を振る人、背景等が設定できます。
すごいデジタルなアナログな感じがします。

試してみたところFlaslite2以上対応らしく見れませんでした。
サイト上ではプレビューすることができます。

どこか味気なく思えてしまうのは、手旗だからでしょうか？
携帯にしか送信できないの残念でした。
UNIQLOのサイトのようにTwitterのアイコンにできる機能とかあったらいいと思いました。

フラッシュコンテンツを送信するとなると、
一度サーバー上でswfファイルをコンパイルしているのでしょうか？？
そこらへんの詳細も気になるところです。

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

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

[0070 MAPfrappe]

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

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

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

電子書籍にはまだ見たことないのですが、
こんな漫画もありかと思うようなサイトです

[0069 NAWLZ]
http://www.nawlz.com/

フラッシュで動きがたくさんで、音付です。
場面の切り替えや、トランジションがいい感じですが、ちょっとどこをどうすれば良いかが分らないですね。
電子書籍の漫画がこのレベルでサクサク動いたら読みたいですね。個人的には。

CS5の発表やipad,HP Slate,HTML5など話題盛りだくさんな最近です。
package for iphoneはやっぱり残念ですね。
今日紹介しますサイトはナイキのコンテンツです。

[0068 Nike Music Shoe]
http://nike.jp/musicshoe/

まずはHIFANAですよね。
ナイキのシューズが楽器になってます。靴にジャックがついてるのがいいですよね。
サイト自体は真ん中にYoutubeのプレーヤーが設置してあるだけのシンプル構成に見えますが、動画を再生してみるとしかけがありました。動画の音に合わせて背景が同期して動きます。どうやってYoutubeの音で同期させているのかが気になります。

見てて楽しいです。
何回か連続で見てしまいました。

最後には本物のシューズは音は出ませんってでます。
やっぱりそうですよね。
でも、ちょっと欲しくなりました。

ますます盛り上がっているTwitterですが、今日紹介するサイトは任意のテキストをTwitterのロゴ風画像に変換してくれるサイトです。
Twitterを使ったサイトのロゴなどに簡単に作れていいのではないでしょうか？

[0067 twitlogo]
http://www.twitlogo.com

使い方は簡単で、変換したいテキストを入力して、サイズと色を変換するだけです。そうすると画像が出来上がります。そのままURLで貼付けれるのかは分かりませんので、ダウンロードするのが無難かと思います。

作ってみたのが↓の画像です。

ちなみにTwitterで使われているPicoというフォントですが、ダウンロードも出来るのでそっちの方が楽かも。。
サイトはこちら