【3/18〜】Amazon、VMwareが語る『クラウドの未来』 スラッシュドット    はてなブックマーク  Yahoo!ブックマークに登録  印刷


連載：Ajaxで作るインタラクティブWebアプリケーション （2）

ズーミングできるWebフォトアルバムウィンドウを作ろう


田中 孝太郎
dotimpac.to
2006/2/1

本連載では、Ajaxを活用したインタラクティブなWebアプリケーション開発のポイントを、フォトアルバムを題材に解説する。全3回の連載のうち、今回はその中篇に当たる。

　前回作った部品をフォトアルバムに拡張しよう
- PR -

　本連載第1回「Ajaxフォトアルバムのフェードイン画像フレームを作ろう」では、Ajaxで動作するWebフォトアルバムを開発する最初のステップとして、フェードインする画像フレームの開発について触れた。今回はその部品を使って、さらにフォトアルバムらしい機能を追加していこう。

具体的には、
  • 画像の一覧をサムネイル表示
  • 選択された画像を大きく表示
  • 画像をズームスライダーで拡大
といった機能を実装していく。

目次
ページ内の項目をクリックするとスクロールします。
ページ内リンクでスムーススクロール＠ZEROBASE CASTを使用しています
前回作った部品をフォトアルバムに拡張しよう
JavaScriptライブラリの状況補足
フォトアルバムウィンドウ　サンプルデモ
イベントの解除とフェードアウト
指定要素の位置まで画面をスクロールするエフェクト
ズームスライダーを追加する
Prototypeでのクラス継承
スライダーをアルバムウィンドウへ追加


　JavaScriptライブラリの状況補足

　前回の連載では、Ajaxアプリケーションの開発を支援するJavaScriptライブラリを紹介し、Prototypeとscript.aculo.usを使用して実例を詳しく解説したが、JavaScriptライブラリに関するその後の状況について、今回の内容に入る前に補足しておこう。

　現状で最もポピュラーなライブラリとなりつつあるPrototypeとscript.aculo.usについては国内での注目も高く、日本語で読める詳細資料や新機能の紹介などが活発だ。以下のサイトは網羅的で資料性も高く、Prototypeやscript.aculo.usで開発を始めるには非常に参考になる。

　　また、Prototypeは1.4.0に、とscript.aculo.usは1.5.1へとそれぞれバージョンアップしている。Prototypeについては従来の1.3.1から1.4.0の間に大幅な機能追加や若干の仕様変更があるため注意が必要だ。 このように、Protytpeやscript.aculo.usは開発自体も現在進行形にあり、ドキュメントにまとまっていない機能の追加や仕様変更も頻繁な状態だ。上記の資料などで基本的な知識を押さえてから、本体のソースをある程度読解することをお勧めしたい。Prototypeやscript.aculo.usは、オブジェクトの構成やJavaScriptのコーディングが非常に洗練されている。Ajaxに限らずJavaScriptでの開発のための大きなヒントになるはずだ。

　またほかにも、AjaxやJavaScriptでのビジュアルエフェクトを扱うライブラリが登場しているようだ。moo.fxはPrototypeベースのJavaScriptエフェクトライブラリで、フェードイン／アウトはリサイズアニメーションなどごく基本的なエフェクトのみが提供される、ちょうどscript.aculo.usのサブセットのような構成になっている。ファイルサイズが全体で3KBと非常に小さいのが特徴で、ドラッグ＆ドロップのような、よりリッチな機能を使わないのであれば、コンパクトなmoo.fxを選択する意味もあるだろう。

　このように、Ajaxをめぐる状況はいまだ流動的で、しかも刻一刻と変化している。先物買いや一点張りが常に正しいわけではないのは当然だが、Ajaxというキーワードに世界中の開発者が反応していることは事実で、エキサイティングだ。例えばソーシャルブックマークサービスdel.icio.usのajaxタグやjavascriptタグにエントリーされたサイトを見ることで、そうした世界中の開発者の意気込みを感じることができるだろう。

 1/3

　INDEX

Ajaxフォトアルバムのフェードイン画像フレームを作ろう
Page1＜前回作った部品をフォトアルバムに拡張しよう＞
JavaScriptライブラリの状況補足
  Page2＜フォトアルバムウィンドウ　サンプルデモ＞
ファイル構成／イベントの解除とフェードアウト／指定要素の位置まで画面をスクロールするエフェクト
　 Page3＜ズームスライダーを追加する＞
ファイル構成／Prototypeでのクラス継承／スライダーをアルバムウィンドウへ追加

AjaxでつくるインタラクティブWebアプリケーション バックナンバー

AjaxとPHPでリッチクライアント

Ajaxを扱うためのサーバーサイドのPHPライブラリを紹介する。リリースされたライブラリ、AjaxACを活用して好みの検索窓に改造してみよう

最終更新 2006/4/29

Ajax うきうき Watch

Ajaxという流行技術の定義を明確にしながら、Ajaxの動向からうきうきするような面白いもの、確実に押さえておきたいものを厳選してお届けしていく

最終更新 2008/5/26

古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2

ホワイトペーパー（TechTargetジャパン）

リッチクライアント & 帳票 フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

スキルアップ／キャリアアップ（JOB@IT）

＠IT Special -PR-
仮想環境の構築とデータ保護の特効薬？！
実績と信頼性の高いパッケージで安心運用
New！
仮想環境のバックアップもこれまでどおり
「まるごと取ってまるごと戻す」簡単運用
おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？
美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
.NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

→＠IT Special ヘ

お勧め求人情報

キャリアアップ　〜JOB＠IT
＠IT Special -PR-
◆ 　 おばかアプリ選手権、第４弾開催中！！
ムダにカッコよくてくだらない作品求ム！
◆ 　 社内ファイルサーバを“クラウド”に統合
VPN直結「クラウド型ストレージ」を紹介
◆ 　 Twitterのアカウントはなぜ突破された？
メールによる新手の攻撃手法とその対策

◆ 　 もう仮想化のお試しフェイズは終わりだ！
Hyper-V 2.0が基幹システムも仮想化
◆ 　 美人!? まあまあ？ 気になる いやし系!!
PV急増で「美人時計」がとった手段とは？
◆ 　 クライアント企業から求められる人材
⇒IT技術と経営戦略を併せ持つ「戦略家」

◆ 　 .NET編集長が実践する「技術情報検索術」
サンプル・コードを簡単に探す“技”は？
◆ 　 業務効率と情報セキュリティ対策を両立！
手間なく確実に機密情報を守る方法とは？
◆ 　 直属上司が海外にいるのエンジニアに見る
【実例】場所に捉われないワークスタイル

◆ 　 「仮想化工房」のマイスターが選んだのは
VMware、Hyper-V、そしてVirtageだった！
◆ 　 進化を続ける富士通ストレージETERNUS DX
製品開発者の自信を裏付けるものとは何か
◆ 　 運用管理の課題を“2つの観点”から分析
ユーザー満足度の高い「仮想環境」とは？

◆ 　 【CTC事例】約30の基幹システムを統合！
膨大なバッジジョブを制御した方法は？
◆ 　 仮想化すればコストは削減できるか？
仮想化に必要な「3つの視点」を解説する
◆ 　 その数、なんと400台以上！ グループ内
サーバの「統合管理」によるメリットは？

→＠IT Special ヘ