jQueryで学ぶ簡単で効果的なAjaxの使い方
連載インデックスへ
 jQueryで学ぶ簡単で効果的なAjaxの使い方（3）

jQueryクライアントとPHPサーバ間をJSONで結ぶには


ヤスダネットワーク
安田 隆次
関川 晶子
2009/5/28
いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ／プロデューサーも必見！

jQueryで、オペレータにクリエイティブな時間を


- PR -

　今回は、前回の「目的を持ってAjaxを使うためにjQueryの文法を知ろう」で使ったテキスト入力を効率化させるプラグイン「jQuery Autocomplete Mod（オートコンプリートプラグイン）」を、自分の手でさらに使いやすくする方法を学んでいきます。ユーザビリティを高めて業務効率化をアップするサンプルを通じて、JavaScript/AjaxによるJSON形式のデータのやり取りの仕方を学びましょう。

　検索サイトの検索キーワード入力欄や携帯電話の予測変換のように、いままで入力した文字列を保存しておいて、その中から利用頻度の高いものを優先して表示するような仕組みがあれば、さらに使いやすくなりますね。このような仕組みを持たせるには、Webサーバの方でプログラムを用意しないといけません。

コラム　「なぜサーバ側までプログラムを作成するの？」
Webブラウザを起動しているパソコン（クライアント）では、いままでやってきたようにJavaScriptというプログラム言語で作って動かすことができます。「だったら、JavaScriptで入力した文字を保存して、利用頻度順に候補を出せばよいのではないか？」と考える人もいるでしょう。

ところが、このような「JavaScriptから自分のパソコンにデータを保存する」機能は、Webブラウザには用意されていません（機能の限定されたCookieはありますが）。

なぜなら、ウイルスなどを自動的にダウンロードさせるWebサイトが簡単に作れるようになるなど、ユーザーにとって不利益を被ることが多いからです。

PHPサーバのデータとやり取りするための準備

　今回は、サーバ側のデータとやり取りをするために以下のものを用意します。

  • PHPが実行できるWebサーバ
  • SQLite（簡単なデータベース）

　実際に実用的なWebサーバを構築する方法は、下記記事を参照してください。

WindowsでもPHP
検証：WindowsでインターネットWebサーバ（2）　PHPやWikiといえばLinuxが常識？　Windows ServerでもPHPやPukiWikiサーバを使いたい。実際にインストールしてみた
「Windows Server Insider」フォーラム 2008/10/30

　AptanaでPHPの開発を行うには、Aptanaのプラグインをインストールする必要があります。 以下の手順で、プラグインをインストールしましょう。

　Aptanaの［Help］→［Software Updates］→［Find and Install…］から、［Aptana: PHP Development Environment］を選択します。

図1　PHP開発プラグインを指定
図1　PHP開発プラグインを指定

　［Next］を選択し、その後指示に従ってプラグインをインストールしてください。PHP開発プラグインの詳細は、下記記事をご参照ください。

　次ページでは、今回のサンプルの概要を本連載でおなじみのサルで図解し、サンプルを作成し始めます。

  1-2-3

　INDEX
jQueryで学ぶ簡単で効果的なAjaxの使い方（3）
jQueryクライアントとPHPサーバ間をJSONで結ぶには
Page1
jQueryで、オペレータにクリエイティブな時間を
コラム　「なぜサーバ側までプログラムを作成するの？」
PHPサーバのデータとやり取りするための準備
  Page2
［サルで図解］JSON通信サンプルの概要
データを作成するPHPプログラムの作成
  Page3
jQueryクライアントをJSONを読み込むように改造
いまさら聞けない「JSON」とは？
文字列をSQLiteデータベースに学習させる
jQueryプラグインに手を加えると、さらに効果的

jQueryで学ぶ簡単で効果的なAjaxの使い方 バックナンバー 連載インデックスへ»


リッチクライアント＆帳票 全記事一覧へ

TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事
  • NFCやLTE対応予定のiPhoneと、先行するAndroid （2012/2/9）
    iPhoneとAndroid、そしてWindows Phoneという3つのOSの今後を占う。それぞれの通信規格とコンセプトは？
  • 家電のUIになるブラウザ （2012/2/3）
    未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか？ 未来のホームネットワークを想像しよう
  • 「汎用のUI技術」として広がるHTML5 （2012/2/2）
    すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする
  • ビヨンド・クールジャパン!? （2012/1/27）
    コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

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

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH