連載：Ajaxで作るインタラクティブWebアプリケーション
（1）
Ajaxフォトアルバムのフェードイン画像フレームを作ろう
田中 孝太郎
dotimpac.to
2005/11/11
|
本連載では、Ajaxを活用したインタラクティブなWebアプリケーションを、ゼロから開発する。3回の連載で、簡単なWebフォトアルバムを完成させる予定だ。完結した機能を持ったAjaxアプリケーションを作り上げるステップを、具体的に解説していきたい。 |
 |
Ajaxを実感しよう |
JavaScriptと非同期データ送受信を組み合わせた、Webアプリケーション開発スタイルである「Ajax」は、このキーワードが発表されたのが今年初めのことだとは思えないほどの発展を遂げており、日々新しい実験や、それを組み込んだサービスが発表されている。
そろそろ実際にAjaxを活用したWebアプリケーションを開発してみようか、と考えている開発者も多いことだろうが、ではAjaxで何をどう作ったらいいんだろう？ という部分で立ち止まってしまってしまっているのではないだろうか。
そこで本連載では、単なるサンプルではなく、完結した機能を持ったAjaxアプリケーションを作り上げるステップを、なるべく具体的に解説していきたい。それぞれのステップで登場する「JavaScriptの考え方」や「Ajaxの考え方」を実感してもらえればと思う。
| 目次 ページ内の項目をクリックするとスクロールします。 ページ内リンクでスムーススクロール＠ZEROBASE CASTを使用しています |
| Ajaxで作るインタラクティブWebアプリケーション JavaScriptライブラリによるAjaxフレームワーク Hello Ajax! フェードイン表示される画像フレームをつくる |
|
最も手軽なインタラクティブアプリ開発環境としてのAjax |
JavaScriptで開発するAjaxの利点はさまざまに挙げられると思うが、筆者が特に関心があるのはそれが「最も手軽なインタラクティブアプリケーション開発環境である」という部分だ。
高度なインタラクションのある、リッチなユーザーインターフェイスを持ったアプリケーションの開発というのは、従来さまざまな点で困難があった。専用の開発環境をインストールして、独自のオーサリングツールや言語の使い方を新たに覚えたり、あるいはAPIを熟知したうえでエンジンから作らなければならないような開発は、かなりの時間と根気と技術投資が必要であり、またそこで必要なインターフェイスの設計にも、ノウハウやデザイン能力が必要になる。それを専門とする開発者ならともかく、バックエンドの技術をプレゼンテーションしたり、ネット上で軽快に動くアプリケーションを作りたいと思っているような開発者にとっては、最も先に手を抜いてしまう部分ではないだろうか。
その点、AjaxがインフラとするJavaScriptやDHTML、XMLといった技術はすでに年月を経て確立され、多くの開発者になじみのあるものであり、特別なソフトをインストールしたり、新たに多くのことを習得する必要はない。また基礎となる部分はHTMLやスタイルシートでデザインしてしまえる点も重要だ。つまり、Ajaxでは「最低限必要な部分を作るだけで、インタラクティブなインターフェイスを実現することができる」のだ。従来式のWebページやWebアプリケーションに、作り込みたい部分だけインタラクティブな機能を埋め込める。これがAjaxの画期的な「手軽さ」だろう。
もちろん、AjaxのインターフェイスにはHTMLとは別のノウハウが必要であるし、ブラウザごとの挙動の違いという特有の問題も生じるが、このような部分は現在急速に開発が進んでいるAjax用のjavascriptツールキットやフレームワークを使用することで多くは解決することができる。次のセクションでは、筆者が開発したAjaxアプリケーションを紹介しながら、Prototypeやscript.aculo.usといったJavaScriptライブラリの効果を見ていきたい。
| 1/3 |  |
|
INDEX |
||
| Ajaxフォトアルバムのフェードイン画像フレームを作ろう | ||
 |
Page1＜Ajaxを実感しよう＞ 最も手軽なインタラクティブアプリ開発環境としてのAjax |
|
| Page2＜JavaScriptライブラリによるAjaxフレームワーク＞
Piccy: Ajax Photo Album |
||
| Page3＜Hello
Ajax! フェードイン表示される画像フレームを作る＞ ライブラリをダウンロードする／Prototypeのクラススタイル文法／DOM操作とフェードインエフェクト／イベントの管理／ユーザーの操作に対するリアクション |
||
 |
古くて新しいAjaxの真実を見極める 「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう 最終更新 2005/8/2
|
|
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 （2017/7/12）
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET／POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 （2017/7/10）
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文＆ループ脱出のbreak/スキップのcontinue【更新】 （2017/6/26）
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート （2017/6/12）
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
 |
|
|
|
|
