Flashじゃないのにぬるぬる動くサイト7つ

別にアンチFlashというわけではないのですが、最近見かけるサイトがやたらとJavaScriptでぬるぬる動いてるのでちょっとまとめてみました。７つ。 株式会社マーナ

キッチン用品やお掃除用品の140年の老舗メーカー。サイトのデザインもすっきりしてますが、製品のデザインもかなり良いです。世界三大デザイン賞の一つ、ドイツのRedDotを取ったピーラーとか。

Air Jordan2012

スクロールに応じてソールや中敷が兵器をモチーフにアニメーション。ナビゲーションのロールも芸が細かい。スマートフォンにも対応してますね。

三村仁司(みむらひとし)

元アシックス、現アディダス専属アドバイザーのシューズ職人のサイト。コンテンツ全てを１ページに詰め込まれてます。サイドナビが上手く構成されてる。

東京タワーズ

朝、宵、赤、青といったテーマごとに撮られた東京タワーの写真と、テーマに沿ったTwitterのメッセージが流れる。心地いい。スマートフォンにも対応。

ippo(イッポ)｜トンボ鉛筆

トンボ鉛筆の学童用ブランド「ippo[イッポ]」のサイト。手書き絵のアニメーションが楽しい。
最初のローディングから登場までのイントロはjpeg120枚のパラパラアニメーションになってる。まさに鉛筆が成す技。

IKIJI

アパレルブランドのサイト。色使いやレイアウトが潔いというか、スクロールでチラ見えするブランドマークがまさに粋。

doppo

デザイン会社のポートフォリオサイト。マガジンスタイルのレイアウト。
ウィンドウサイズでレイアウトが変化。写真、動画などがたくさん配置されてる。

まだまだ処理の重さとかはあるけど、まぁこの辺もマシンスペックとかが解決して行くでしょうね。
スマートフォンとかタブレットでも見れたりするし、ユーザーもすごい勢いで増えてるので今後こういったサイトが増えて行くのは確実かと思います。ただ、色々動くサイトが全てJavaScriptになってFlashが無くなる・・・とかではなく、もっとダイナミックに動いたりするリッチコンテンツの場合はまだまだFlashが強いので、その辺は使い分けなのかなと思います。

【Ajax】Sony Japan | ソニーグループポータルサイト

Sony Japan | ソニーグループポータルサイト
動き的にFlashっぽいけど、完全にJavaScriptで構成されてる。ナビゲーションにマウスオンしたときのサムネイル表示とか、メインビジュアルの切り替えボタン、時間差の切り替え。すげぇ。
新着情報とか音楽のDLランキングとか、全体的にJSを切ってると表示されないようになってる。外部読み込みにしてるって事かな。

多分Flashで作ったほうが構築が楽だろうけど、あえてAjax仕様にしているって所に何かしらの意図と今後の動きが気になるところ。

【JavaScript】フォームをちょこっとだけ使いやすくする小技いろいろ | IDEA*IDEA

フォームをちょこっとだけ使いやすくする小技いろいろ | IDEA*IDEA
ちょっとした事なんですが、そーゆーちょっとした事でユーザーの迷子が無くなるなら率先して使わなきゃですね。

【技術メモ】フォームのフリガナを自動入力

コレめっちゃ便利！
prototypeを使ってるのが基本になりますが、名前入力してんのにイチイチ同じ名前を入力(打ち変えとも言うべきか)するのが面倒くさいったらありゃしないのですもの。
フォームのフリガナを自動入力させるAutoRuby.js

【Ajax】jQueryの魔法 - [JavaScript] All About

jQueryの魔法 - [JavaScript] All About
名前は聞いてたけどあんまり詳しく調べてなくて、たまたま見かけたブログから検索して見かけました。jQueryについて分りやすくまとめてあります。特定のクラスの文字色を変えたり、アニメーションで拡大させたり隠したりする事を簡単にすることができます。
ちょっとコーフンしたのでメモ。

【Blog】PUBLICROOTS | mtFlash

PUBLICROOTS | mtFlash
いつも参考にさせていただいて助かっています。Flashコンテンツ構築で「ああ、このネタ使える！」というモノが満載。SWFAddressを知ってからというもの、Flash構築においてJavaScriptとの連携が不可欠になってきたなぁと思う今日この頃。もっと勉強してもっとオモシロイもの作れるようになっとかなきゃ。

【Flash+JavaScript】Asual | SWFAddress - Deep linking for Flash and Ajax

Asual | SWFAddress - Deep linking for Flash and Ajax
あるクライアントのサイトで、階層のあるFlashコンテンツを作った。Flashコンテンツでよくある、コンテンツの下層へダイレクトにアクセスできないというパーマリンク問題。通常のFlashコンテンツでは「トップ→第一階層→第二階層」というツリー構造での遷移が基本になってしまい、下層の商品詳細などへのダイレクトにリンクする、という事ができず、SEO的にもよろしくなくなってしまう事が多かった。
これが何とかならんのか、って思っていらっしゃる方はやはり大勢いるようで、最近のFlashコンテンツ事例から探りながら、自前でJavaScriptを連携さたりテストしてたが、IEでタイトルタグが面白いことになって壁にぶち当たっていたところで、実装してるサイトのjsを探ってたら発見。

ソースを見たらこことかこことかこことかもこの技術(ちょっとバージョンとか違うかも)を使ってますね。現在の最新バージョンは2.1。ASも1.0〜3.0版が入ってて、サンプルページとかfla(8)とかも一式入ってます。

３〜４時間ほど読み込んだら、ある程度AS使える人ならすぐに使えます。で、実装してみようと試みてますがこのスクリプトを組み込む事を前提に作っていなかったので、タイムラインのズレとかで挙動がおかしくなる部分がチラホラ・・・。あと、色々メソッドが用意されてるっぽいけど使い方と機能がわかんない。NothPerkInglisyuです。パイロット版はできたけど、ロンチまでにはもうちょっと時間かかりそう。

【技術メモ】FlashからJavaScriptの関数を実行＋JavaScriptからFlash関数を実行

ネタ元：第35回　FlashムービーとJavaScriptを連携させてみよう
以前の投稿ネタ、スパイスボックスのウェブサイトでも紹介したけど、FlashからExternalInterfaceクラスを使用してJavaScriptを動かし、表示URLを取得する方法。さくっと実験して実現できた。
で、これを応用してFlash側で入力した値をHTMLのJavaScriptに定義したlocation.hrefを使ってアドレスに変数を加えることもできた。この２つを応用すれば、Flashコンテンツの深い階層へのダイレクトアクセスもブックマークも可能。しかもこれの面白いところは、location.hrefでアドレスバーに変数を渡すとき、「#/aaa」という感じで"#"を入れるとリロードせずにアドレスが変わり、しかもブラウザバックが適応されるという点。
面白くてゲー出そう。