「気になった装飾系Ajax」

デザイン好きです。
Ajax大好きです。
Takumaです。
　

【装飾】
［名］(スル)飾ること。美しく装うこと。また、その装い・飾り。「店内を―する」
(by Yahoo!辞書)


最近に珍しく忙しい今日この頃。
部のサービス整理から予算獲得のお偉方予算獲得資料まで、おおよそ「Webデザイナー」という名刺の肩書きがギャグになり始めています。Takumaです。


さてさて、そんな事をいっても
「コーディング」は一線から身を引いても「デザイン」は現役。

装飾系のAjaxを見ると試してみたくてウズウズしています。
今回は、そんな気になったAjaxライブラリ達をご紹介。




■■■■■■■■■■■■■■■■■■■■■■■■■


▼CSS Decorative Gallery / Demos ▼

http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html


クリップや、映像マーク、セロハンテープ、光沢など、様々な装飾が可能というコレ系はもうこのライブラリで良くない？という感じの素敵なもの。

⇒ダウンロード

⇒日本語解説ページ


■■■■■■■■■■■■■■■■■■■■■■■■■


▼wrapScroll version 0.9.6▼

http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index.html


画面の上下スクロールに対して、アイコンが追いついてくるスクリプト。
一見たしかに、イライラしそうなのですが(広告だと特に・・・)

ブログのようなページ遷移あまりしない(毎日、トップの記事だけみてサヨナラ)という導線があたりまえのようなコンテンツにはリピーター獲得の手段として「RSSマーク」のおっかけっこをさせて気づいてもらってもいいのかも？と思ったりしています。

意外とRSS自体、一般ユーザーには利用されてないしね。

⇒ダウンロード

⇒日本語解説ページ

■■■■■■■■■■■■■■■■■■■■■■■■■


▼http://www.glassbox-js.com/#Home▼

http://www.glassbox-js.com/#Home


ガラスのように透明感のあるデザインをコンテンツに適用してくれるのがglassbox.js。
1Gのメモリしか積んでいないWindowVistaマシンが他の処理を遅延させてでも表示させている、あのエフェクトです。

igoogleとか見たいなレイヤー情報を取得してオブジェクトを重ねられるAjaxを併用実装するとWindowsVistaのデスクトップみたいな感じになるかもですね。

⇒ダウンロード

⇒日本語解説ページ

■■■■■■■■■■■■■■■■■■■■■■■■■


▼MooTools 1.2 Image Protector▼
http://davidwalsh.name/mootools-12-image-protector-dwprotector


ちょっと、装飾ではないけれどもご紹介。

・右クリックで「別名で画像を保存」
・デスクトップに画像をドラッグ
・右クリックで「背景として画像を保存」
・右クリックで「デスクトップの背景に設定」

というのを実行してくれるスクリプト。よくギャラリーサイトが使っているやつですね。個人の作品を高画質で公開していたりするときに必要なのかも。

ちなみに、お察しのとおりmootools利用です。

⇒ダウンロード

⇒日本語解説ページ


■■■■■■■■■■■■■■■■■■■■■■■■■


あ〜試してみたいのが、いっぱいだ〜♪

「WEBサイト開発手段のこれから」

Flash好きです。
Ajax大好きです。
Takumaです。
　

【開発】
１ 土地・鉱産物・水力などの天然資源を活用して、農場・工場・住宅などをつくり、その地域の産業や交通を盛んにすること。「農地を―する」「未―」
２ 新しい技術や製品を実用化すること。「新製品を―する」
３ 知恵や能力などを導きだし、活用させること。「子供の情操を―する」→注入》(by Yahoo!辞書)

「HTML」に＋「Flash」＋「Ajax(javascript×XML)」＋新鋭：「Silverlight」

WEBサイトを構成する技術/言語＆ソフト(製作側面：システムとはちょっと別の話)は、リッチ表現という市場の中で戦国時代を迎えています。
(※今までもずっとあったのだけど、ここにきてまた激化している)

そんな、最近の事情を以下で解説している。

▼Flash、HTML、AJAX：ウェブアプリ戦争に勝利するのは ▼

http://builder.japan.zdnet.com/news/story/0,3800079086,20378869,00.htm


こんかいは、この記事に準えてお勉強したいなと思います。

■基本的にHTMLと仲良しはJavaScript■■■■■■■■

大昔といっても1990年代のブラウザ戦争から暫くは、そのブラウザのオリジナリティーの差別化の為に、CSSも含めJavaScriptも完全に同期した動作をすることは無かった。

近年。Ajaxが(基本的に新しい技術でないのに)はやり始めたのは、上記が改善されてきた点と高速通信のインフラが整ったことが要因であるといわれている。

というわけで、トップシェアであるIEの次期最新バージョン8でもデフォルトで標準に準拠している点からも、もう数年はこの業界認識とスタンダードは変わらないと考えるのが順当だろう。


■音声とか映像はFlashでしょ・・・3Dも！？■■■■

そもそも、リッチ表現というバックリとした言葉だが、掻い摘んでいうと「なくてもサイトとして成立する要素」という感じである。

音なら無くても・・・サイト見れるジャン。(どーにかなる)
映像無くても・・・サイト見れるジャン。(どーにかなる)
HTML無くても・・・！？ 何も写らないジャン。(どーにもならん！！)

という感じである。

でも、WEBという表現インフラと広告媒体が、一定の作業をこなす事で、その表現の可能性を広げられるならパフォーマンスを最大活用すべきというFlashやSilverlightのポジショニングも納得いく。

その「一定の作業をこなす事」が「プラグインのインストール」である。
つまりは新しいソフトを導入しないと、写らないのである。


■もっと広がるリッチ表現の可能性 ■■■■■■■■

さてさて、ここまではエンドユーザから見た際のお話でした。
エンドユーザーから見れば、簡単にストレス無く見れれば・・・

「Ajaxでメインイメージのアコーディオンスライド」しようが
「Flashでメインイメージのアコーディオンスライド」しようが
関係ないのが実情です。

⇒Ajaxサンプル
数年前までFlashでしかされてこなかった、動的表現は直線的なものであればAjaxで可能となっている良い例である。

それでも、エンドユーザーにより上質な「ユーザエクスペリエンス」を提供する為というハードルを考慮した上で、FlashやSilverlightを利用すると決めた場合。

そこについて両陣営は以後、このような表現を開発していると表明している。

AdobeのFlash Playerの新バージョンであるバージョン10では、並はずれた改善が行われている。3Dグラフィック処理、特殊効果、ビデオストリーミングの改善、ハードウェアアクセレレーションを利用したグラフィック、文字列処理などの機能がそれだそうです。


■開発はSilverlightに乗り換えるのか■■■■■■■

Silverlightは音声や動画ストリーミングのサポートなど、いくつかの切実に必要とされる機能を備えているが、Flash陣営からシェアを奪う為には、「3D技術を最初に扱えるようになれば、開発者がSilverlightを使う大きな理由ができるだろう」という専門家の意見を掲載している。

つまりは、「乗り換え」がされるだけのパフォーマンスと理由がSilverlightにないと、行われないわけである。

以前、このブログで紹介した以下の記事に通じる「乗り換え心情」が伺える。


▼Takumart.net：「9倍すごくないと・・・」▼

http://www.takumart.net/wordpress/archives/447


んで、それぞれの陣営がアピールしているメリットを紹介。

▼Silverlightの利点(※一部抜粋)▼
　MicrosoftのSilverlightの売り文句の中で重要なのは、プログラマーの生産性だ。SilverlightはMicrosoftの. NETプログラミング技術で使われているのと同じC#やVB.netに基づいているため、多くのプログラマーは有利なスタートを切ることができ、 Microsoftの評価の高いプログラミングツールも利用することができる。

▼Flashの利点(※一部抜粋)▼
　Flashも豊富なプログラミングツールを持っており、もちろんアプリケーションのデザインに役立つPhotoshopやIllustratorなどのツールとも緊密に連携している。また、インターネットユーザーは比較的迅速にFlashのソフトウェアを最新バージョンにアップデートするため、安定しており一貫性のあるプログラミング基盤となっている。


■ぼやき兼まとめ■■■■■■■■■■■■■■■■■

少なくともここしばらくは、1つの技術が支配的になることはないだろうことは明らかだ。各陣営の支持者は、ライバルの利点を指摘しているという風に記事では、まとめられているが、同感である。

人間、次から次へと欲はでてくるし、他社の技術との差別化ポイントを打ち出していく限り、この状況は変わらないと考えられる。

しかし、新しい参入技術が既存技術に食いつぶされていくことも容易に想像できるが、Silverlightに関しては、バックボーンがでかいので、数年は細々と生き残っていくのでは無いだろうか。

セカンドライフのような話題性が無い限りは、バズ効果をねらった開発は行われないと感じているのがTakumaの率直な印象です。


■＋α：その他のきになったキーワード■■■■■■■


・Canvas：ブラウザ上に図を描くために策定された仕様
⇒解説ページリンク


・SVG：XMLベースの2Dベクター画像記述言語
⇒解説ページリンク


・Gears：Webアプリケーションをオフライン状態でも使用可能なブラウザ拡張機能
⇒解説ページリンク


・BrowserPlus：Gearsに対し"繋がっている”ことが前提であるシステム
⇒解説ページリンク

「Firefox後継製品のアイデアはOSを超える」

ネット好きです。
クラウド技術にドキドキです。
Takumaです。
　

【クラウドコンピューティング】
クラウドコンピューティング（cloud computing）とは、コンピュータ処理の１形態、またはパラダイムである。ネットワーク（特にインターネット）という「雲 = クラウド」の向こう側に、サービスを提供するサーバなどがあるが、ユーザーからはもはやサーバの場所も台数も構成も認識できず、単にサービスを受け取っているようなイメージといえる。

従来より「コンピュータ・システムのイメージ図」などでは、ネットワークを「雲 = クラウド」で表す場合が多く、それが出典であると言われている。(by ウィキペディア辞書)

「Firefox」を出している「Mozillaの研究部門であるMozilla Labs」が「Firefox」の後継製品のコンセプトを募るキャスティングコールプロジェクト「Concept Series」を開始したみたいです。

でも、「便利なブラウザってどんなのだと思う〜♪」とかいう次元でなく「クラウドコンピューティング」のエンドユーザー向けソフトをブラウザで先駆けて技術開発するためのアプローチといえると思います。

詳しくは以下の記事を参照。

▼モジラ、「Firefox」後継製品のアイデアを一般から募集--ブラウザのOS化は進むか▼


http://builder.japan.zdnet.com/news/story/
0,3800079086,20378496,00.htm?ref=rss


んで、そのイメージサンプルがこちら



・OSをベースにしたインターフェース
・複数のデータ参照間でのデータ連携作業
　(※OSならコピペやドラッグ＆ドロップに近い)
・マシンorデータ参照元でなくユーザ側面でみたデータグルーピング
　(※レコメンドに近い考え方か？)
・指紋認証技術

一部、先進技術等の個人認証側面の実装イメージも含まれているが、その他はブラウザが持つネットワーク機能とOSが持つローカルでの利便性をブラウザ側で吸収してしまうという表現が正しいのではないでしょうか。

当然、複数のデータ参照元は一定のデータ規格を守った上で(XMLの汎用性強化したものとか？)をアップしておく事が必要になるとは思うのですが・・・

デスクトップ上での入力技術が現在のものと大差がなかったのは、それだけ近いうちにMozillaがこのクラウトOSをインフラ同様に実現するという意気込みでしょうか。

ネットという諸刃の剣が魔法の杖にかわる具体的なイメージはでき初めては、いるとは思うのですが・・・この以降(パラダイムシフト)に伴うバランスを開発者が正確に理解するのと、アウトプットとしてエンドユーザに違和感を覚えさせないものをするのは実に大変になると思うのですが。

ドキドキ。

「セキュリティとサイト設計」

サイト構築好きです。
サイト設計大好きです。
Takumaです。
　

【セキュリティ】
安全。また、保安。防犯。防犯装置。「―システム」(by Yahoo辞書)


EC設計やシステムの絡むサービスサイトの設計を過去も最近もやっている中。
こんな記事を見っけて「あ〜あ的なモチベーション」になっています。Takumaです。

んで、それが何かというと・・・
「銀行サイトの75％に設計の問題あり」。
はい。設計は難しいですよね。

今のところ、ECどまりで銀行サイトまでの設計＆デザインはやった事はないのですが、なかなか根深い問題です。

・ログイン用のボックスをセキュアでないWebページに置く（47％）

・連絡先情報とセキュリティ上の注意事項をセキュアでない
　Webページに掲載する（55％）

・取引中に銀行のドメイン外の別サイトにユーザーをリダイレクトする（30％）

・社会保障番号や電子メールアドレスなど他人に推定されやすい情報を
　ユーザーIDとして使わせる（28％）

・パスワードや利用明細などの重要な情報を電子メールで送信する（31％）


詳しくはこちら↓

▼銀行サイトの75％に設計の問題あり - ITmedia News▼

http://www.itmedia.co.jp/news/articles/0807/24/news029.html


デザイン時に行う設計で解決できる側面と、システム組み込みの際に注意すべき側面と両方ありますな。セキュリティ上、危険といわれても一般ユーザーからしてみると、ないと不便なものまでありまする。

なやむよね〜。ビジネスモデルとユーザビリティとセキュリティ。
完璧に各側面をパーフェクトに満たす物はないだろうけど・・・
っま。バランスですよね。

銀行サイトの設計ぐらいならセキュリティコンサルがつくだろうから
そんな案件が将来きたら頑張ろうｗ

「最新くるくるAjax」

WBE好きです。
3D Ajax大好きです。
Takumaです。
　

【くるくる】
１ 物が軽く続いて回るさま。「―（と）回る風車」
２ いく重にも巻きつけるさま。また、まるめるさま。「包帯を―（と）巻く」
３ 丸くて愛らしいさま。くりくり。「目が―（と）してかわいい」
４ 休まないで身軽に働くさま。「一日中―（と）働く」
５ 方針や考えなどが定まらないさま。「―（と）変わる当局の答弁」
６ 滞ることなく物事が行われるさま。すらすら。(by Yahoo辞書)


最近、Ajaxの表現性の向上が顕著に見て取れるレベルになってきました。
「仮想3D描画」＋「鏡面反射」＋「平行モーション」確かに、最近の見せ方的Ajaxだとそれぞれ個別にライブラリ提供されている要素です。

あんなこといいな♪ (Flashみたいな動き)
できたらいいな♪ (Ajaxで簡単にできたら)
あんな夢 (鏡面反射付の3D描画)
こんな夢 (Flash見たいなページ遷移)
いっぱいあるけど〜 (んなものないよね〜)

ドラ●もん！！



▼carousel.us▼
http://www.piksite.com/carousel.us/

でも・・・処理が重い！！
(リアルタイム演算だからしかたないか〜)

補足-------------------------------------------------------

Carousel.us is a Javascript 3D carousel, using the prototype.js and scriptaculous.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

ということで、「prototype.js」「scriptaculous.js」と「PHP Easy Reflections v3」が使われているそうです。

ライブラリの利用をうまくするだけで、驚くほど簡単に導入できる時代になりましたね。こわい時代だ・・・

-----------------------------------------------------------