Ajax初心者入門講座 http://ajax.pgtop.net/ Ajaxの基礎からはじまり、高機能なJavaScriptデバッガを備えているFirebugの使い方、フレームワークであるPrototype.jsを使ったサンプルまでを、初心者向けに図を使って詳しく解説しています。 ja http://blogs.law.harvard.edu/tech/rss Ajaxの基礎からはじまり、高機能なJavaScriptデバッガを備えているFirebugの使い方、フレームワークであるPrototype.jsを使ったサンプルまでを、初心者向けに図を使って詳しく解説しています。 Ajax,php,サンプル,初心者,入門,Prototype,基礎,Firebug Ajax入門 no http://ajax.pgtop.net/article/445775914.html AjaxでjQueryのreadyを使ってみる。 Tue, 10 Jan 2017 13:27:57 +0900 AjaxのプログラムでjQueryのreadyを使ってみましょう。jQueryとはJavaScriptライブラリの一種で、今やデファクトスタンダードと言われるくらい人気です。前回はわざとJavaScriptのプログラムの中で、jQueryの機能を呼び出していました。何故なら、最初はできるだけ元のプログラムを変更せずに、最小限の修正だけで動くようにしたかったからです。でもjQueryっぽい書き方というか、本来ならjQueryのイベントやメソッドを使った書き方があります。そこで今.. ]]> AjaxのプログラムでjQueryのreadyを使ってみましょう。

jQueryとはJavaScriptライブラリの一種で、今やデファクトスタンダードと言われるくらい人気です。

前回はわざとJavaScriptのプログラムの中で、jQueryの機能を呼び出していました。

何故なら、最初はできるだけ元のプログラムを変更せずに、
最小限の修正だけで動くようにしたかったからです。

でもjQueryっぽい書き方というか、
本来ならjQueryのイベントやメソッドを使った書き方があります。

そこで今回は、前のプログラムを、jQueryを主体として書き換えてみます。

早速、やってみましょう。

【1】前回に作成したsample002jq フォルダをコピーして sample002jq-2 フォルダを作成します。


【2】今回は以下のようなファイルの構成になります。

・test.js を少しだけ変更します。
・test.html とtest.css は同じものなので、ソースコードは省略します。

＊「\」はWindowsではエンマークのことです。

保存先　C:\ajax\sample002jq-2
ファイル名　test.js

var result;

$(document).ready(function(){
  result = $('#result');
  calc();
});

function calc() {
  var a = 1;
  var b = 2;
  var c = a + b;
  result.text('a + b = ' + c);
}


＊文字コードは必ず UTF-8 で保存してください。

保存したら各Webブラウザで動作を確認してみましょう。


【3】sample002jq-2 の「test.html」を開き、動作を確認します。

前回のsample002jqの時と同じように表示されれば成功です。

きっと同じように動作するはずです。


【解説】
前回と説明が重なりますが、jQueryを使う方法は、とても簡単です。

今回もjQueryをロードするため、WebページのHTMLのheadタグ部分に、1行加えています。


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


この方法は、インターネットに接続していることが前提ですが、
今やほとんどのパソコンがネット接続されているので問題ないでしょう。

それでは前回のプログラムと比較してみましょう。

ファイル名　test.js

onload = init;
var result;

function init() {
  result = $('#result');
  calc();
}

function calc() {
  var a = 1;
  var b = 2;
  var c = a + b;
  result.text("a + b = " + c);
}


違いが分かりましたか？

onload = init;
と
function init() {
の部分が、

以下のようになっているだけです。
$(document).ready(function(){

onloadはJavaScriptが元々持つ機能です。

initはユーザーが定義した関数なので、ここでは大事ではありません。

そしてここからが大事！

readyはjQueryの機能です。

jQueryはHTMLの要素に対して操作します。

だから各要素が全て読み込まれ、準備が整ってから、
プログラムを実行したいので、このように書くわけです。

これで全てがjQueryを使って書けていることになるので、
プログラムがスッキリしましたね。

jQueryを使うとプログラミングが楽になります。

また多機能なので、使いこなすと面白いですよ。

]]> jQueryのready Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/445775914 http://ajax.pgtop.net/article/432343551.html AjaxでjQueryを使用する方法について。 Sat, 09 Jan 2016 20:03:32 +0900 Ajaxのプログラミングでは、JavaScriptライブラリの一種であるjQueryがよく使われます。jQueryは、Ajaxプログラミングのデファクトスタンダードとなっているほど人気があります。参考になる書籍やインターネット上の情報も豊富です。これまでのプログラミングでは、軽量タイプのフレームワークであるprototype.jsを使っていましたが、今回はそのプログラムをjQueryで書き換えてみましょう。jQueryを入手する方法は、とても簡単です。prototype.js.. ]]> Ajaxのプログラミングでは、JavaScriptライブラリの一種であるjQueryがよく使われます。

jQueryは、Ajaxプログラミングのデファクトスタンダードとなっているほど人気があります。

参考になる書籍やインターネット上の情報も豊富です。

これまでのプログラミングでは、軽量タイプのフレームワークであるprototype.jsを使っていましたが、

今回はそのプログラムをjQueryで書き換えてみましょう。

jQueryを入手する方法は、とても簡単です。

prototype.jsと同じように、ダウンロードしてサーバーに配置してもよいのですが、

もっと簡単に利用できる方法があります。

それは使いたいWebページのHTMLのheadタグ部分に、1行加えるだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

たったこれだけで、jQueryをロードすることができるのです！

凄い、便利ですよねー

ただしこの方法は、インターネットに接続していることが前提です。
jQueryをロードする必要があるからです。

それでは早速、使ってみましょう。

本来ならjQueryのイベントやメソッドに適した書き方がありますが、

今回はできるだけ元のプログラムを変更せずに、
最小限の修正だけで動くようにしてみましょう。

そこで最もシンプルなsample002を使います。

【1】以前に作成したsample002 フォルダをコピーして sample002jq フォルダを作成します。


【2】今回は以下のようなファイルの構成になります。

・test.html と test.js を少しだけ変更します。
・test.css は同じものなので、ソースコードは省略します。

＊「\」はWindowsではエンマークのことです。

保存先　C:\ajax\sample002jq
ファイル名　test.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css">    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <title>test</title>
  </head>
  <body>
    <div id="result"></div>
  </body>
</html>


保存先　C:\ajax\sample002jq
ファイル名　test.js

onload = init;
var result;

function init() {
  result = $('#result');
  calc();
}

function calc() {
  var a = 1;
  var b = 2;
  var c = a + b;
  result.text("a + b = " + c);
}


＊文字コードは必ず UTF-8 で保存してください。

保存したら各Webブラウザで動作を確認してみましょう。


【3】sample002jq の「test.html」を開き、動作を確認します。

sample002の時と同じように表示されれば成功です。

本来のjQueryっぽい書き方ではありませんでしたが、
とりあえずは動作できましたね。


【解説】
(1)test.htmlのheadタグでは、念のためCSS、jQuery、jsファイルの順で読み込むようにしています。

準備が整ってから、プログラムを実行したいからです。

(2)jQueryでセレクタ(要素)を取得し、変数に代入している部分です。
result = $('#result');

jQueryでは、id要素は先頭に#(シャープ)を付ける決まりがあります。

ちなみにclass要素は先頭に.(ピリオド)を付けます。

(3)要素にjQueryのメソッドで、テキストをセットしている部分です。
result.text("a + b = " + c);

これと同じ意味。
$('#result').text("a + b = " + c);

どうでしたか？
意外と簡単にjQueryが使えましたね。

一番初歩的なjQueryの使い方を紹介しましたが、
実に高機能なJavaScriptライブラリなので、
興味がある方は詳しく調べてみると良いでしょう。

Webページに、様々な効果を加えることができますよ。

]]> jQueryを使ってみる Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/432343551 http://ajax.pgtop.net/article/412111564.html Ajaxプログラミングに便利なフレームワークの種類について。 Sat, 10 Jan 2015 13:24:24 +0900 Ajaxのプログラミングでは、フレームワークを使うのが一般的です。Ajaxの中核技術は、JavaScriptです。しかしJavaScriptだけだと、Webブラウザ間で少し違いがあるため、主要なWebブラウザに対応するだけでも、プログラミングが複雑になります。そこで便利なのが、Ajaxフレームワークなのです。Ajaxフレームワークを使うことで、Webブラウザ間の違いを吸収してくれます。するとプログラマーは、簡単にプログラミングができ、目的の処理に集中できるメリットもあります。.. ]]> Ajaxのプログラミングでは、フレームワークを使うのが一般的です。

Ajaxの中核技術は、JavaScriptです。

しかしJavaScriptだけだと、Webブラウザ間で少し違いがあるため、

主要なWebブラウザに対応するだけでも、プログラミングが複雑になります。

そこで便利なのが、Ajaxフレームワークなのです。

Ajaxフレームワークを使うことで、Webブラウザ間の違いを吸収してくれます。

するとプログラマーは、簡単にプログラミングができ、

目的の処理に集中できるメリットもあります。

そんな便利なAjaxフレームワークですが、種類がいろいろあります。

この入門講座でも使っている prototype.js をはじめ、

高機能なフレームワークが沢山あります。

そこで今回は、Ajaxフレームワークをいくつか紹介します。

・prototype.js
Ajaxフレームワークの中でも人気のツールです。

Webブラウザ間の違いを吸収してくれる、クロスブラウザ対応はもちろん、

JavaScriptのプログラムを簡単に記述できる機能もあります。

Ajaxプログラミング関連の書籍でも、例として取り上げられていることが多いので、

参考にできるプログラムの情報が、たくさんあります。

・Yahoo!UIライブラリ
何といっても、リッチクライアントを実現することができます。

エフェクト(効果)や、ドラッグ&ドロップなど、高度なユーザーインターフェースが使えます。

アニメーションや、要素の移動、カレンダー、スライダー、ツリー構造など、便利な機能が豊富です。

・jQuery(ジェイクエリー)
人気の軽量タイプのAjaxフレームワークです。

参考になる書籍も豊富です。

最近では、Ajaxプログラミングのデファクトスタンダードとなっているほどです。

ps:
その他にも、Java言語を使って開発できるGoogle Web Toolkit(GWT)なども有名です。

実現したい目的によって、Ajaxフレームワークを選ぶと良いでしょう。

]]> Ajaxのフレームワーク Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/412111564 http://ajax.pgtop.net/article/86894834.html Ajax sample011で使用したプログラムの解説。 Sun, 24 Feb 2008 21:38:15 +0900 今回は sample011 で使用した Ajax プログラムについて、解説します。実際にプログラムを動かしながら解説を読むと理解が深まります。DOM を使って要素数を調べて、子要素を削除しているところがポイントです。■index.html側(1)新しい JavaScript の外部ファイルを読み込む部分を追加しました。&lt;script type="text/javascript" src="city.js"&gt;&lt;/script&gt;(2)タイトルを変えました。.. ajax-342.gif pref.js でコメントにすると確認できます。 //clearCity(); ■pref.php側 pref.phpに変更はありません。 ■city.php側 (1) city.phpでは、GETメソッドで値を受け取った場合は、さらに「GetCity.php」を呼び出し、XMLとして出力します。値を受け取らなかった場合は、HTMLとしてメッセージを出力します。 <?php   if (isset($_GET["prefCd"])){     header("Content-type: application/xml");     $prefCd = $_GET["prefCd"];     $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;     readfile($url);   }else{     header("Content-type: text/html");     print "パラメータに prefCd を含めてください。";   } ?> (2)if文を使って、GETメソッドで値を受け取ったかどうかで、処理を分岐しています。 if (isset($_GET["prefCd"])){   省略 }else{   省略 } (3)XMLで出力することをブラウザに送信する処理です。 header("Content-type: application/xml"); (4)受け取った値を変数に代入している部分です。 $prefCd = $_GET["prefCd"]; (5)受け取った値を、さらに外部ドメインのプログラムへのパラメータとして組み立てている部分です。 $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd; (6)実際に外部のドメインにあるファイルを開いているのは、readfile()関数を使っているこの1行です。 readfile($url); (7)HTMLで出力することをブラウザに送信する処理です。 header("Content-type: text/html"); ■index.css側 (1)div 要素(result2)を追加したので、CSSにも追加しました。 #result2 {   省略 } (2)選択リストボックスを横に並べるため、要素を回り込ませています。 float:left; ・floatを指定しなかった場合は、下に表示されます。 ajax-343.gif (3)div 要素の間を広げています。 margin-right:10px; ajax-344.gif (4)選択リストボックスで、フォントサイズは効果がないので不要です。 font-size:14px; これは以前に、ブラウザの画面に div 要素として、直接出力していた時の名残です。削除してかまいません。 ]]> Ajax プログラムについて、解説します。実際にプログラムを動かしながら解説を読むと理解が深まります。

DOM を使って要素数を調べて、子要素を削除しているところがポイントです。


■index.html側

(1)新しい JavaScript の外部ファイルを読み込む部分を追加しました。
<script type="text/javascript" src="city.js"></script>


(2)タイトルを変えました。
<title>pref・city</title>

(3)新しい div 要素(result2)を追加しました。
<div id="result2"></div>


■index.js側

(1)変数を追加しました。
var result2;

(2)変数で div 要素(result2)を参照できるようにしている部分です。
result2 = $('result2');

(3)関数 clearDisp() は使わないので、削除しました。


■pref.js側

(1)都道府県の選択リストボックスを切り替えた時に、呼び出される関数 prefChange() の中に、市町村をクリアする関数 clearCity() と、市町村を表示する関数 cityDisp() を加えました。

function prefChange(obj) {
    省略

    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }
}

(2)関数 cityDisp() は、取得した値(value)を引数にしているところがポイントです。
cityDisp(prefCd);

＊prefCd は市町村の抽出条件に使われます。


■city.js側

(1)city.js は、ほどんと pref.js と同じです。大きな違いは関数 clearCity() だけです。

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}

(2)div 要素(result2)の子要素を取得している部分です。
var sel = result2.childNodes;

・div 要素(result2)からみると、select要素が子要素になります。
・childNodes の戻り値は配列になります。


(3)子要素がある場合(すでにselect要素がある)は、削除しています。
result2.removeChild(sel[0]);

・1回目は子要素が無いので何もしません。
・selは配列です。子要素は1個しかないので、[0]番目を指定しています。
　(配列は0から始まるため)


(4)clearCity()を呼び出さないと、以下のようにselect要素がどんどん増えます。

ajax-342.gif

pref.js でコメントにすると確認できます。
//clearCity();


■pref.php側
pref.phpに変更はありません。


■city.php側

(1) city.phpでは、GETメソッドで値を受け取った場合は、さらに「GetCity.php」を呼び出し、XMLとして出力します。値を受け取らなかった場合は、HTMLとしてメッセージを出力します。

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


(2)if文を使って、GETメソッドで値を受け取ったかどうかで、処理を分岐しています。

if (isset($_GET["prefCd"])){
  省略
}else{
  省略
}


(3)XMLで出力することをブラウザに送信する処理です。
header("Content-type: application/xml");


(4)受け取った値を変数に代入している部分です。
$prefCd = $_GET["prefCd"];


(5)受け取った値を、さらに外部ドメインのプログラムへのパラメータとして組み立てている部分です。
$url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;


(6)実際に外部のドメインにあるファイルを開いているのは、readfile()関数を使っているこの1行です。

readfile($url);


(7)HTMLで出力することをブラウザに送信する処理です。
header("Content-type: text/html");


■index.css側

(1)div 要素(result2)を追加したので、CSSにも追加しました。

#result2 {
  省略
}


(2)選択リストボックスを横に並べるため、要素を回り込ませています。
float:left;

・floatを指定しなかった場合は、下に表示されます。
ajax-343.gif


(3)div 要素の間を広げています。
margin-right:10px;

ajax-344.gif


(4)選択リストボックスで、フォントサイズは効果がないので不要です。
font-size:14px;

これは以前に、ブラウザの画面に div 要素として、直接出力していた時の名残です。削除してかまいません。


]]> Step21・sample011の解説 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/86894834 http://ajax.pgtop.net/article/86762251.html Ajax sample011の動作確認をしてみる。 Sun, 24 Feb 2008 17:09:58 +0900 前回に作成した Ajax プログラムの動作を確認してみましょう。このプログラムは、都道府県を切り替えたら、自動的に市町村が変わるというものです。使い方をマスターすれば、いろいろ応用範囲が広がります。プログラムがまだの方は一つ前のステップをご覧ください。プログラムの準備ができたら、Webサーバーを起動して動作を確認します。【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。【2】まずは「city.. ajax-166.gif 【2】まずは「city.php」がちゃんと動くか確認します。 http://localhost/ajax/sample011/city.php?prefCd=1 ajax-330.gif ＊city.php の確認は非常に重要です。 city.php で XML が表示されなければ、city.js のプログラムも動きません。city.php は別ドメインにある「GetCity.php」を、同一ドメイン(localhost)にするための、中継プログラムです。 【3】今度はわざとパラメータを含めないで動かしてみます。パラメータを含めない場合は、メッセージが表示されます。 http://localhost/ajax/sample011/city.php ajax-331.gif 次はいよいよ Ajax プログラムの動作確認です。 【4】Firefox を起動して、動作を確認します。 http://localhost/ajax/sample0011/ ajax-333.gif 【5】どれか都道府県を選択してください。 ajax-334.gif 【6】新たに選択リストボックスが表示されました。 ajax-335.gif 新しい選択リストボックスには、選択した都道府県に対応する市町村のリストが表示されます。 【7】どれか市町村を選択してください。 ajax-336.gif 【8】選択した市町村の値が、メッセージとして表示されました。 ajax-337.gif 【9】他の都道府県に切り替えてみましょう。 ajax-338.gif 【10】都道府県を切り替えると、市町村がリセットされます。 ajax-339.gif 【11】選択した都道府県に対応する市町村のリストに変わりました。 ajax-340.gif 【12】他の都道府県や市町村でも試してください。 【13】同様に Internet Explorer でも動作を確認してください。 ・Internet Explorer の場合 ajax-341.gif 【ワンポイント】 市町村の選択リストボックスを切り替えたときに、取得した値を使って、次のプログラムを呼び出す条件にすれば、 全国の特産品検索 のような使い方ができます。 (Internet Explorer で確認) ]]> Ajax プログラムの動作を確認してみましょう。

このプログラムは、都道府県を切り替えたら、自動的に市町村が変わるというものです。使い方をマスターすれば、いろいろ応用範囲が広がります。

プログラムがまだの方は一つ前のステップをご覧ください。

プログラムの準備ができたら、Webサーバーを起動して動作を確認します。

【1】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【2】まずは「city.php」がちゃんと動くか確認します。

http://localhost/ajax/sample011/city.php?prefCd=1

ajax-330.gif

＊city.php の確認は非常に重要です。

city.php で XML が表示されなければ、city.js のプログラムも動きません。city.php は別ドメインにある「GetCity.php」を、同一ドメイン(localhost)にするための、中継プログラムです。


【3】今度はわざとパラメータを含めないで動かしてみます。パラメータを含めない場合は、メッセージが表示されます。

http://localhost/ajax/sample011/city.php

ajax-331.gif


次はいよいよ Ajax プログラムの動作確認です。

【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0011/

ajax-333.gif


【5】どれか都道府県を選択してください。

ajax-334.gif


【6】新たに選択リストボックスが表示されました。

ajax-335.gif

新しい選択リストボックスには、選択した都道府県に対応する市町村のリストが表示されます。


【7】どれか市町村を選択してください。

ajax-336.gif


【8】選択した市町村の値が、メッセージとして表示されました。

ajax-337.gif


【9】他の都道府県に切り替えてみましょう。

ajax-338.gif


【10】都道府県を切り替えると、市町村がリセットされます。

ajax-339.gif


【11】選択した都道府県に対応する市町村のリストに変わりました。

ajax-340.gif


【12】他の都道府県や市町村でも試してください。


【13】同様に Internet Explorer でも動作を確認してください。

・Internet Explorer の場合
ajax-341.gif


【ワンポイント】

市町村の選択リストボックスを切り替えたときに、取得した値を使って、次のプログラムを呼び出す条件にすれば、 全国の特産品検索 のような使い方ができます。
(Internet Explorer で確認)


]]> Step20・sample011の動作確認 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/86762251 http://ajax.pgtop.net/article/86683151.html Ajax 都道府県から市町村を絞り込んで表示する方法。 Sun, 24 Feb 2008 15:24:36 +0900 今回は都道府県を選択すると、該当する市町村の一覧が表示できる Ajax プログラムについて説明します。全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。http://ws.bzen.net/pgtop/GetCity.php?prefCd=1prefCd=1 の数字を 1〜47 の範囲で変更すると、XML.. ajax-332.gif prefCd=1 の数字を 1〜47 の範囲で変更すると、XMLのデータが変わります。 このWebサービスを Ajax のプログラムから利用することで、都道府県を切り替えるごとに市町村が変わるフォーム部品が作れます。 ＊上記のWebサービスは、サーバーに付加がかかるため、この講座の学習目的でのみ利用できます。その他の目的での利用は禁止します。 今回はプログラムが長いので、プログラミング、動作確認、プログラムの解説、というステップに分けて解説します。まずはプログラミングから行ないましょう。 【1】sample010 フォルダをコピーして sample011 フォルダを作成します。 ajax-328.gif 【2】今回は最終的に以下のようなファイルの構成になります。 ajax-329.gif ・city.js と city.php は新たに作成します。 ・pref.php と city.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。 ・変更点があるのは index.html、index.js、pref.js、index.css です。 ・pref.php に変更はありませんので省略します。 ＊「\」はWindowsでは円記号のことです。 保存先　C:\phpdev\www\ajax\sample011 ファイル名　index.html <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <script type="text/javascript" src="../lib/prototype.js"></script>     <script type="text/javascript" src="index.js"></script>     <script type="text/javascript" src="pref.js"></script>     <script type="text/javascript" src="city.js"></script>     <link href="index.css" rel="stylesheet" type="text/css">     <title>pref・city</title>   </head>   <body>     <div id="state"></div>     <div id="result"></div>     <div id="result2"></div>   </body> </html> 保存先　C:\phpdev\www\ajax\sample011 ファイル名　index.js onload = init; var state; var result; var result2; function init() {   state = $('state');   result = $('result');   result2 = $('result2');   prefDisp(); } 保存先　C:\phpdev\www\ajax\sample011 ファイル名　pref.js function prefDisp() {   state.innerHTML = "処理中です・・・<br />\n";   var url = "pref.php";   var paramList = "";   new Ajax.Request(url,     {       method: 'get',       onSuccess: getData,       onFailure: showErrMsg,       parameters: paramList   });   function getData(data){     var response = data.responseXML.getElementsByTagName('Response');     var item = response[0].getElementsByTagName('Item');     //select作成     var sel = document.createElement('select');     sel.setAttribute('id', 'selectPref');     //1行目のオプション     var opt = document.createElement('option');     opt.setAttribute('value', 0);     var text = document.createTextNode('選択してください。');     opt.appendChild(text);     sel.appendChild(opt);     //2行目以降のオプション     for(i = 0; i < item.length; i++){       var prefCd = item[i].getElementsByTagName('PREF_CD');       var prefCdValue = prefCd[0].firstChild.nodeValue;       var prefName = item[i].getElementsByTagName('PREF_NAME');       var prefNameValue = prefName[0].firstChild.nodeValue;       var opt = document.createElement('option');       opt.setAttribute('value', prefCdValue);       var text = document.createTextNode(prefNameValue);       opt.appendChild(text);       sel.appendChild(opt);     }     //selectをresult要素に追加     result.appendChild(sel);     //イベントハンドラの設定     $('selectPref').onchange = function (){prefChange(this);}     state.innerHTML = "データを取得しました。<br />\n";   }   function showErrMsg(){     clearDisp();     state.innerHTML = "データを取得できませんでした。<br />\n";   } } function prefChange(obj) {   var prefCd = Number(obj.value);   if (prefCd == 0) {     state.innerHTML = "都道府県が選択されていません。<br />\n";   } else {     var prefName = obj.options[obj.selectedIndex].text;     state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";     //市町村をクリア     clearCity();     //市町村を表示     cityDisp(prefCd);   } } 保存先　C:\phpdev\www\ajax\sample011 ファイル名　city.js function cityDisp(prefCd) {   state.innerHTML = "処理中です・・・<br />\n";   var url = "city.php";   var paramList = "prefCd=" + prefCd;   new Ajax.Request(url,     {       method: 'get',       onSuccess: getData,       onFailure: showErrMsg,       parameters: paramList   });   function getData(data){     var response = data.responseXML.getElementsByTagName('Response');     var item = response[0].getElementsByTagName('Item');     //select作成     var sel = document.createElement('select');     sel.setAttribute('id', 'selectCity');     //1行目のオプション     var opt = document.createElement('option');     opt.setAttribute('value', 0);     var text = document.createTextNode('選択してください。');     opt.appendChild(text);     sel.appendChild(opt);     //2行目以降のオプション     for(i = 0; i < item.length; i++){       var cityCd = item[i].getElementsByTagName('CITY_CD');       var cityCdValue = cityCd[0].firstChild.nodeValue;       var cityName = item[i].getElementsByTagName('CITY_NAME');       var cityNameValue = cityName[0].firstChild.nodeValue;       var opt = document.createElement('option');       opt.setAttribute('value', cityCdValue);       var text = document.createTextNode(cityNameValue);       opt.appendChild(text);       sel.appendChild(opt);     }     //selectをresult2要素に追加     result2.appendChild(sel);     //イベントハンドラの設定     $('selectCity').onchange = function (){cityChange(this);}     state.innerHTML = "データを取得しました。<br />\n";   }   function showErrMsg(){     clearDisp();     state.innerHTML = "データを取得できませんでした。<br />\n";   } } function cityChange(obj) {   var cityCd = Number(obj.value);   if (cityCd == 0) {     state.innerHTML = "市町村が選択されていません。<br />\n";   } else {     var cityName = obj.options[obj.selectedIndex].text;     state.innerHTML = cityCd + "：" + cityName + " を選択しました。<br />\n";   } } function clearCity() {   //result2の子要素を取得   var sel = result2.childNodes;   //既に子要素がある場合は削除   if (sel.length >= 1) {     result2.removeChild(sel[0]);   } } 保存先　C:\phpdev\www\ajax\sample011 ファイル名　index.css #state {   font-size:16px;   color:#0000cc;   margin-top:10px;   margin-bottom:10px; } #result {   float:left;   margin-right:10px;   font-size:14px;   color:#000000; } #result2 {   font-size:14px;   color:#000000; } 保存先　C:\phpdev\www\ajax\sample011 ファイル名　city.php <?php   if (isset($_GET["prefCd"])){     header("Content-type: application/xml");     $prefCd = $_GET["prefCd"];     $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;     readfile($url);   }else{     header("Content-type: text/html");     print "パラメータに prefCd を含めてください。";   } ?> pref.php を含めると、必要なファイルは全部で 7つ です。 変更点のある index.html、index.js、pref.js、index.css については、それほど大きな変更ではありません。また新たに作成した city.js と city.php も、 pref.js と pref.php を少し改良しただけです。 ファイル数が増え、プログラムも長くなったように感じるかもしれませんが、中身は今までとほとんど同じで、新しいことは少しだけです。 これまでのステップを順番に学んできた方は、詳しい説明がなくても、大体意味がつかめる力が身に付いていると思います。 プログラムの動作確認は次回に行ないます。 ]]> Ajax プログラムについて説明します。

全国に都道府県は 47 しかありませんが、市町村は 1900 を超えます。レコードを全件表示していては大変です。

そこで「URLにパラメータを渡すと、該当する市町村のリストをXMLで返す」というWebサービスを私が作りました。

http://ws.bzen.net/pgtop/GetCity.php?prefCd=1

ajax-332.gif

prefCd=1 の数字を 1〜47 の範囲で変更すると、XMLのデータが変わります。

このWebサービスを Ajax のプログラムから利用することで、都道府県を切り替えるごとに市町村が変わるフォーム部品が作れます。

＊上記のWebサービスは、サーバーに付加がかかるため、この講座の学習目的でのみ利用できます。その他の目的での利用は禁止します。

今回はプログラムが長いので、プログラミング、動作確認、プログラムの解説、というステップに分けて解説します。まずはプログラミングから行ないましょう。


【1】sample010 フォルダをコピーして sample011 フォルダを作成します。

ajax-328.gif


【2】今回は最終的に以下のようなファイルの構成になります。

ajax-329.gif

・city.js と city.php は新たに作成します。
・pref.php と city.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
・変更点があるのは index.html、index.js、pref.js、index.css です。
・pref.php に変更はありませんので省略します。

＊「\」はWindowsでは円記号のことです。

保存先　C:\phpdev\www\ajax\sample011
ファイル名　index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="pref.js"></script>
    <script type="text/javascript" src="city.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref・city</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
    <div id="result2"></div>
  </body>
</html>


保存先　C:\phpdev\www\ajax\sample011
ファイル名　index.js

onload = init;
var state;
var result;
var result2;

function init() {
  state = $('state');
  result = $('result');
  result2 = $('result2');
  prefDisp();
}


保存先　C:\phpdev\www\ajax\sample011
ファイル名　pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');
    var item = response[0].getElementsByTagName('Item');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var prefCd = item[i].getElementsByTagName('PREF_CD');
      var prefCdValue = prefCd[0].firstChild.nodeValue;

      var prefName = item[i].getElementsByTagName('PREF_NAME');
      var prefNameValue = prefName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";
    //市町村をクリア
    clearCity();
    //市町村を表示
    cityDisp(prefCd);
  }

}


保存先　C:\phpdev\www\ajax\sample011
ファイル名　city.js

function cityDisp(prefCd) {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "city.php";
  var paramList = "prefCd=" + prefCd;

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');
    var item = response[0].getElementsByTagName('Item');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectCity');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var cityCd = item[i].getElementsByTagName('CITY_CD');
      var cityCdValue = cityCd[0].firstChild.nodeValue;

      var cityName = item[i].getElementsByTagName('CITY_NAME');
      var cityNameValue = cityName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', cityCdValue);
      var text = document.createTextNode(cityNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult2要素に追加
    result2.appendChild(sel);
    //イベントハンドラの設定
    $('selectCity').onchange = function (){cityChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}

function cityChange(obj) {
  var cityCd = Number(obj.value);

  if (cityCd == 0) {
    state.innerHTML = "市町村が選択されていません。<br />\n";
  } else {
    var cityName = obj.options[obj.selectedIndex].text;
    state.innerHTML = cityCd + "：" + cityName + " を選択しました。<br />\n";
  }

}

function clearCity() {
  //result2の子要素を取得
  var sel = result2.childNodes;

  //既に子要素がある場合は削除
  if (sel.length >= 1) {
    result2.removeChild(sel[0]);
  }

}


保存先　C:\phpdev\www\ajax\sample011
ファイル名　index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  float:left;
  margin-right:10px;
  font-size:14px;
  color:#000000;
}

#result2 {
  font-size:14px;
  color:#000000;
}


保存先　C:\phpdev\www\ajax\sample011
ファイル名　city.php

<?php
  if (isset($_GET["prefCd"])){
    header("Content-type: application/xml");
    $prefCd = $_GET["prefCd"];
    $url = "http://ws.bzen.net/pgtop/GetCity.php?prefCd=".$prefCd;
    readfile($url);
  }else{
    header("Content-type: text/html");
    print "パラメータに prefCd を含めてください。";
  }
?>


pref.php を含めると、必要なファイルは全部で 7つ です。

変更点のある index.html、index.js、pref.js、index.css については、それほど大きな変更ではありません。また新たに作成した city.js と city.php も、 pref.js と pref.php を少し改良しただけです。

ファイル数が増え、プログラムも長くなったように感じるかもしれませんが、中身は今までとほとんど同じで、新しいことは少しだけです。

これまでのステップを順番に学んできた方は、詳しい説明がなくても、大体意味がつかめる力が身に付いていると思います。

プログラムの動作確認は次回に行ないます。


]]> Step19・市町村を絞り込んで表示する Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/86683151 http://ajax.pgtop.net/article/86203279.html Ajax sample010で使用したプログラムの解説。 Sat, 23 Feb 2008 23:14:06 +0900 今回は sample010 で使用した Ajax のプログラムについて、詳しく解説します。 DOM(ドム:Document Object Model) を使っている部分を重点的に説明します。「.innerHTML」を使った時と「DOM」を使った時で、どのように変わるのか考えながら読んでみてください。■index.html側HTMLには div 要素に id 名を付けているだけで、中身は空です。&lt;div id="result"&gt;&lt;/div&gt;■pref.j.. ]]> Ajax のプログラムについて、詳しく解説します。 DOM(ドム:Document Object Model) を使っている部分を重点的に説明します。

「.innerHTML」を使った時と「DOM」を使った時で、どのように変わるのか考えながら読んでみてください。


■index.html側
HTMLには div 要素に id 名を付けているだけで、中身は空です。

<div id="result"></div>


■pref.js側

(1)select要素を作成している部分です。
var sel = document.createElement('select');

イメージ
<select></select>

＊新しい要素を作成するには、createElementメソッドを使います。


(2)select要素に id 名を付けている部分です。
sel.setAttribute('id', 'selectPref');

イメージ
<select id="selectPref"></select>


(3)1行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(4)option 要素に値をセットしている部分です。
opt.setAttribute('value', 0);

<option value="0"></option>


(5)option 要素内に項目をセットしている部分です。
var text = document.createTextNode('選択してください。');
opt.appendChild(text);

<option value="0">選択してください。</option>

＊要素内に文字列を使う場合は、createTextNode で「テキストノード」を作成する必要があります。文字列を直接使うことはできないので注意してください。

＊要素を親要素に追加するには、appendChildメソッドを使います。


(6)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
</select>


(7)2行目以降の option 要素は、for文の中で作成します。レコード件数分だけ繰り返されます。

for(i = 0; i < item.length; i++){
  省略
}


(8)2行目の option 要素を作成している部分です。
var opt = document.createElement('option');

<option></option>


(9)option 要素に値をセットしている部分です。
opt.setAttribute('value', prefCdValue);

<option value="1"></option>


(10)option 要素内に項目をセットしている部分です。
var text = document.createTextNode(prefNameValue);
opt.appendChild(text);

<option value="1">北海道</option>


(11)select要素に option 要素を追加している部分です。
sel.appendChild(opt);

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
</select>


(12)もう一度for文が繰り返されると、以下のようになります。

<select id="selectPref">
  <option value="0">選択してください。</option>
  <option value="1">北海道</option>
  <option value="2">青森県</option>
</select>

これがどんどん繰り返されます。


(13)select要素を div 要素(result)に追加している部分です。
result.appendChild(sel);

<div id="result">
  <select id="selectPref">
    <option value="0">選択してください。</option>
    <option value="1">北海道</option>
    <option value="2">青森県</option>
  </select>
</div>

＊ここではじめて画面に表示されます。


(14)select要素にイベントハンドラを設定している部分です。
$('selectPref').onchange = function (){prefChange(this);}

＊thisは選択リストボックス自身です。

＊select要素を作成した後でないと、イベントハンドラを設定できないため、この位置に書いています。


(15)イベントハンドラを設定したので、都道府県を切り替えた時には、関数 prefChange() が呼び出されます。

function prefChange(obj) {
  省略
}

＊引数の obj は選択リストボックス自身を参照しています。


(16)選択リストボックスで、選択したオプションの値(value)を数値にして、変数に代入している部分です。
var prefCd = Number(obj.value);

＊この値は市町村を絞り込む時の抽出条件に使うことができます。


(17)if文で選択リストボックスの値が、0の時(1行目)とそれ以外の時で、処理を分けています。

if (prefCd == 0) {
  state.innerHTML = "都道府県が選択されていません。<br />\n";
} else {
  var prefName = obj.options[obj.selectedIndex].text;
  state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";
}

＊選択リストボックスで、選択したオプションの項目(テキスト)は、以下のように取得できます。
obj.options[obj.selectedIndex].text;


今回のように DOM を使った方法では、要素の種類(select、option、li、a、img など)や目的によって、使うメソッドがいろいろありますので、慣れが必要です。

HTMLタグを直接代入できる「.innerHTML」の簡単さがわかったのではないでしょうか。


【ワンポイント】

index.html側で、select要素と1行目のオプションまでは書いておいて、プログラムでは2行目の option 要素から作成する方法もあります。もちろん1行目は書かなくて、空の select要素だけでもかまいません。

<select id="selectPref">
  <option value='0' selected>選択してください。</option>
</select>

動的に作成したフォーム部品が、どうしても上手く動作しないときには、あらかじめ親要素だけは書いておくと有効です。

その場合、最初から要素が存在するので、index.js側でイベントハンドラを設定することができます。


]]> Step18・sample010の解説 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/86203279 http://ajax.pgtop.net/article/86108855.html Ajax DOMを使って選択リストボックスを書き換える方法。 Sat, 23 Feb 2008 16:37:03 +0900 前回の最後に少し説明した通り、 Ajax で「.innerHTML」を使って、動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。【1】sample009 フォルダをコピーして sample010 フォルダを作成します。【2】今回は最終.. ajax-319.gif 【2】今回は最終的に以下のようなファイルの構成になります。 ajax-320.gif ＊「\」はWindowsでは円記号のことです。 変更は pref.js だけです。 index.html、index.js、pref.php、index.css に変更はありませんので省略します。 保存先　C:\phpdev\www\ajax\sample010 ファイル名　pref.js function prefDisp() {   state.innerHTML = "処理中です・・・<br />\n";   var url = "pref.php";   var paramList = "";   new Ajax.Request(url,     {       method: 'get',       onSuccess: getData,       onFailure: showErrMsg,       parameters: paramList   });   function getData(data){     var response = data.responseXML.getElementsByTagName('Response');     var item = response[0].getElementsByTagName('Item');     //select作成     var sel = document.createElement('select');     sel.setAttribute('id', 'selectPref');     //1行目のオプション     var opt = document.createElement('option');     opt.setAttribute('value', 0);     var text = document.createTextNode('選択してください。');     opt.appendChild(text);     sel.appendChild(opt);     //2行目以降のオプション     for(i = 0; i < item.length; i++){       var prefCd = item[i].getElementsByTagName('PREF_CD');       var prefCdValue = prefCd[0].firstChild.nodeValue;       var prefName = item[i].getElementsByTagName('PREF_NAME');       var prefNameValue = prefName[0].firstChild.nodeValue;       var opt = document.createElement('option');       opt.setAttribute('value', prefCdValue);       var text = document.createTextNode(prefNameValue);       opt.appendChild(text);       sel.appendChild(opt);     }     //selectをresult要素に追加     result.appendChild(sel);     //イベントハンドラの設定     $('selectPref').onchange = function (){prefChange(this);}     state.innerHTML = "データを取得しました。<br />\n";   }   function showErrMsg(){     clearDisp();     state.innerHTML = "データを取得できませんでした。<br />\n";   } } function prefChange(obj) {   var prefCd = Number(obj.value);   if (prefCd == 0) {     state.innerHTML = "都道府県が選択されていません。<br />\n";   } else {     var prefName = obj.options[obj.selectedIndex].text;     state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";   } } 準備ができたら、Webサーバーを起動して動作を確認してみましょう。 【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。 ajax-166.gif 【4】Firefox を起動して、動作を確認します。 http://localhost/ajax/sample0010/ ajax-321.gif 【5】どれか都道府県を選択してください。 ajax-322.gif 【6】都道府県が選択され、上にメッセージが表示されました。 ajax-323.gif ＊選択したオプションの値と項目が表示できるということは、プログラムの中で値を活用できるということです。(例えば市町村を絞り込む検索条件にしたり) 【7】他の都道府県でも試してください。 ajax-326.gif 【8】今度はわざと一番上の「選択してください。」を選択します。 ajax-324.gif 【9】「都道府県が選択されていません。」というメッセージが表示されました。 ajax-325.gif 【10】同様に Internet Explorer でも動作を確認してください。 ajax-327.gif 選択リストボックスは、前回と同じように動作することが確認できると思います。 【ワンポイント】 今回の sample010 と同じように、都道府県を切り替えた時にメッセージを表示する機能を、「.innerHTML」を使っている sample009 に組み込んだ場合、 Internet Explorer では動くのですが、Firefox では上手く動きませんでした。 やはり DOM を使った方法のほうがよさそうです。 DOM のプログラム部分については次回に詳しく解説します。 ]]> Ajax で「.innerHTML」を使って、動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。

そこで今回は DOM(ドム:Document Object Model) を使った方法に書き換えてみます。DOM は慣れるまで少し難しく感じると思いますが、今回はとりあえず動かしてみることに専念してください。


【1】sample009 フォルダをコピーして sample010 フォルダを作成します。

ajax-319.gif


【2】今回は最終的に以下のようなファイルの構成になります。

ajax-320.gif

＊「\」はWindowsでは円記号のことです。

変更は pref.js だけです。 index.html、index.js、pref.php、index.css に変更はありませんので省略します。

保存先　C:\phpdev\www\ajax\sample010
ファイル名　pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');
    var item = response[0].getElementsByTagName('Item');

    //select作成
    var sel = document.createElement('select');
    sel.setAttribute('id', 'selectPref');

    //1行目のオプション
    var opt = document.createElement('option');
    opt.setAttribute('value', 0);
    var text = document.createTextNode('選択してください。');
    opt.appendChild(text);
    sel.appendChild(opt);

    //2行目以降のオプション
    for(i = 0; i < item.length; i++){
      var prefCd = item[i].getElementsByTagName('PREF_CD');
      var prefCdValue = prefCd[0].firstChild.nodeValue;

      var prefName = item[i].getElementsByTagName('PREF_NAME');
      var prefNameValue = prefName[0].firstChild.nodeValue;

      var opt = document.createElement('option');
      opt.setAttribute('value', prefCdValue);
      var text = document.createTextNode(prefNameValue);
      opt.appendChild(text);
      sel.appendChild(opt);

    }

    //selectをresult要素に追加
    result.appendChild(sel);
    //イベントハンドラの設定
    $('selectPref').onchange = function (){prefChange(this);}
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}

function prefChange(obj) {
  var prefCd = Number(obj.value);

  if (prefCd == 0) {
    state.innerHTML = "都道府県が選択されていません。<br />\n";
  } else {
    var prefName = obj.options[obj.selectedIndex].text;
    state.innerHTML = prefCd + "：" + prefName + " を選択しました。<br />\n";
  }

}



準備ができたら、Webサーバーを起動して動作を確認してみましょう。

【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【4】Firefox を起動して、動作を確認します。

http://localhost/ajax/sample0010/

ajax-321.gif


【5】どれか都道府県を選択してください。

ajax-322.gif


【6】都道府県が選択され、上にメッセージが表示されました。

ajax-323.gif

＊選択したオプションの値と項目が表示できるということは、プログラムの中で値を活用できるということです。(例えば市町村を絞り込む検索条件にしたり)


【7】他の都道府県でも試してください。

ajax-326.gif


【8】今度はわざと一番上の「選択してください。」を選択します。

ajax-324.gif


【9】「都道府県が選択されていません。」というメッセージが表示されました。

ajax-325.gif


【10】同様に Internet Explorer でも動作を確認してください。

ajax-327.gif

選択リストボックスは、前回と同じように動作することが確認できると思います。


【ワンポイント】

今回の sample010 と同じように、都道府県を切り替えた時にメッセージを表示する機能を、「.innerHTML」を使っている sample009 に組み込んだ場合、 Internet Explorer では動くのですが、Firefox では上手く動きませんでした。

やはり DOM を使った方法のほうがよさそうです。


DOM のプログラム部分については次回に詳しく解説します。


]]> Step17・DOMを使って書き換える Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/86108855 http://ajax.pgtop.net/article/85790665.html Ajax sample009で使用したプログラムの解説。 Fri, 22 Feb 2008 23:16:51 +0900 今回は sample009 で使用した Ajax のプログラムについて、詳しく解説します。これまでとほとんど同じプログラムなので、選択リストボックスを動的に作成するところ以外は簡単だと思います。Ajax で非同期通信することで、XML形式のデータを、フォーム部品の値として表示する方法をつかんでください。選択リストボックスは、「オプションメニュー」や「セレクトボックス」という場合もあります。■index.html側sample005と比べると、ボタンを除いただけです。■inde.. ]]> Ajax のプログラムについて、詳しく解説します。

これまでとほとんど同じプログラムなので、選択リストボックスを動的に作成するところ以外は簡単だと思います。

Ajax で非同期通信することで、XML形式のデータを、フォーム部品の値として表示する方法をつかんでください。

選択リストボックスは、「オプションメニュー」や「セレクトボックス」という場合もあります。


■index.html側
sample005と比べると、ボタンを除いただけです。


■index.js側
ページを読み込んだ直後に、すぐ選択リストボックスを表示するため、関数 init() の中で関数 prefDisp() を呼び出すようにしました。

function init() {
  省略
  prefDisp();
}


■pref.js側

(1)選択リストボックスの開始タグを、変数に代入している部分です。
tmpHtml += "<form><select name='selectPref'>";


(2)選択リストボックスの最初のオプション(1行目)を作成している部分です。
tmpHtml += "<option value='0' selected>選択してください。</option>";


(3)for文で、選択リストボックスのオプション(2行目以降)を、レコード件数分だけ連結している部分です。

<option value='1'>北海道</option> のような値と項目になります。

for(i = 0; i < item.length; i++){
  var prefCd = item[i].getElementsByTagName('PREF_CD');
  var prefCdValue = prefCd[0].firstChild.nodeValue;

  var prefName = item[i].getElementsByTagName('PREF_NAME');
  var prefNameValue = prefName[0].firstChild.nodeValue;

  tmpHtml +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";
}


(4)選択リストボックスの終了タグを、変数に代入している部分です。
tmpHtml += "</select></form>";


(5)プログラムで組み立てた選択リストボックスを、ブラウザの画面に表示している部分です。
result.innerHTML = tmpHtml;


■pref.php側
sample005では静的な XML を使っていましたが、sample009では動的な XML に変更してみました。

・静的なXML
http://ws.bzen.net/pgtop/pref.xml
↓
・動的なXML
http://ws.bzen.net/pgtop/GetPref.php

どちらを使っても結果は同じです。

動的な GetPref.php は、データベースのレコードを XML 形式に加工して出力するプログラムです。一種のWebサービスだと考えると、GetPref.php プログラムの中身はブラックボックスでかまいません。

Webサービスは、使い方さえわかれば、プログラムの中でどういった処理が行われているのか、考慮しなくても大丈夫です。(楽天や Amazon の Web サービスでも同じ)

＊GetPref.php はサーバーに負荷がかかるため、学習目的でのみお使いください。その他の利用は禁止します。


【ワンポイント】

今回、選択リストボックスの表示に「.innerHTML」プロパティを使いました。この方法が一番簡単だからです。innerHTML は HTML タグや文字列を直接代入できるため、わかりやすいというメリットがあります。

しかし動的に生成したフォーム部品に、イベントハンドラを設定すると、不具合が出ることがあります。したがって、「.innerHTML」ではなく DOM(ドム:Document Object Model) を使ったほうがよいと言われています。

DOM を使う方法については、次回に説明します。


]]> Step16・sample009の解説 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/85790665 http://ajax.pgtop.net/article/85612789.html Ajax 選択リストボックスを動的に作成する方法 Fri, 22 Feb 2008 16:50:11 +0900 今回は Ajax を使って、非同期通信で取得した XML データを、「選択リストボックス」にしてみましょう。選択リストボックスは Web サイトでよく使われています。選択リストボックスを使うと、一覧から入力できるようになります。しかもデータベースに連動して動的に変化させる方法を覚えておくと、用途がとても広がります。【1】sample005 フォルダをコピーして sample009 フォルダを作成します。【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部.. ajax-312.gif 【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部変更します。 ajax-313.gif ＊index.css に変更はありません。 ＊「\」はWindowsでは円記号のことです。 保存先　C:\phpdev\www\ajax\sample009 ファイル名　index.html <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <script type="text/javascript" src="../lib/prototype.js"></script>     <script type="text/javascript" src="index.js"></script>     <script type="text/javascript" src="pref.js"></script>     <link href="index.css" rel="stylesheet" type="text/css">     <title>pref</title>   </head>   <body>     <div id="state"></div>     <div id="result"></div>   </body> </html> 保存先　C:\phpdev\www\ajax\sample009 ファイル名　index.js onload = init; var state; var result; function init() {   state = $('state');   result = $('result');   prefDisp(); } function clearDisp() {   state.innerHTML = "";   result.innerHTML = ""; } 保存先　C:\phpdev\www\ajax\sample009 ファイル名　pref.js function prefDisp() {   state.innerHTML = "処理中です・・・<br />\n";   var url = "pref.php";   var paramList = "";   new Ajax.Request(url,     {       method: 'get',       onSuccess: getData,       onFailure: showErrMsg,       parameters: paramList   });   function getData(data){     var response = data.responseXML.getElementsByTagName('Response');     var item = response[0].getElementsByTagName('Item');     var tmpHtml="";     tmpHtml += "<form><select name='selectPref'>";     tmpHtml += "<option value='0' selected>選択してください。</option>";     for(i = 0; i < item.length; i++){       var prefCd = item[i].getElementsByTagName('PREF_CD');       var prefCdValue = prefCd[0].firstChild.nodeValue;       var prefName = item[i].getElementsByTagName('PREF_NAME');       var prefNameValue = prefName[0].firstChild.nodeValue;       tmpHtml +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";     }     tmpHtml += "</select></form>";     result.innerHTML = tmpHtml;     state.innerHTML = "データを取得しました。<br />\n";   }   function showErrMsg(){     clearDisp();     state.innerHTML = "データを取得できませんでした。<br />\n";   } } 保存先　C:\phpdev\www\ajax\sample009 ファイル名　pref.php <?php   header("Content-type: application/xml");   $url = "http://ws.bzen.net/pgtop/GetPref.php";   readfile($url); ?> 保存先　C:\phpdev\www\ajax\sample009 ファイル名　index.css #state {   font-size:16px;   color:#0000cc;   margin-top:10px;   margin-bottom:10px; } #result {   font-size:14px;   color:#000000; } 準備ができたら、Webサーバーを起動して動作を確認してみましょう。 【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。 ajax-166.gif 【4】Firefox を起動して、動作を確認してみましょう。 http://localhost/ajax/sample009/ ajax-315.gif ＊ページを読み込んだ直後にプログラムが動きます。 【5】「選択リストボックス」をクリックします。 ajax-316.gif 【6】都道府県のリストが表示されるので、好きなものを選択してください。 ajax-317.gif 【7】都道府県が選択できました。 ajax-318.gif 【8】同様に Internet Explorer でも動作を確認してください。 ajax-314.gif 【解説】 (1)元になる XML のデータは Web 上のデータベースにあります。 まずデータベースのレコードを GetPref.php で XML 形式に加工して出力しています。 http://ws.bzen.net/pgtop/GetPref.php それを中継プログラムの pref.php で同一ドメイン内にします。そして Ajax の非同期通信で取り込み、JavaScript のプログラムで選択リストボックスを組み立てる仕組みです。 データベース → GetPref.php(XML出力) → pref.php(中継) → 選択リストボックス組み立て → 画面に表示 この方法のメリットは、データベースのデータが変われば、自動的に選択リストボックスの値にも反映されることです。 ＊GetPref.php は pref.php の中で呼び出しています。 ＊サーバーに負荷がかかるため、 GetPref.php は学習目的でのみお使いください。 (2)選択リストボックスの用途について 例えば選択リストボックスをチェンジした時に、イベントハンドラを設定すれば、都道府県を切り替えた瞬間に、該当する市町村だけを表示するような応用ができます。 ↓このような使い方( Internet Explorer で確認) 全国の特産品検索 またはネットショップの注文画面で、顧客に住所を入力してもらうときに使うことができます。 プログラムの変更点については、次回に詳しく解説します。 ]]> Ajax を使って、非同期通信で取得した XML データを、「選択リストボックス」にしてみましょう。

選択リストボックスは Web サイトでよく使われています。選択リストボックスを使うと、一覧から入力できるようになります。

しかもデータベースに連動して動的に変化させる方法を覚えておくと、用途がとても広がります。


【1】sample005 フォルダをコピーして sample009 フォルダを作成します。

ajax-312.gif


【2】今回は最終的に以下のようなファイルの構成になります。プログラムを一部変更します。

ajax-313.gif

＊index.css に変更はありません。
＊「\」はWindowsでは円記号のことです。

保存先　C:\phpdev\www\ajax\sample009
ファイル名　index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="pref.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>pref</title>
  </head>
  <body>
    <div id="state"></div>
    <div id="result"></div>
  </body>
</html>


保存先　C:\phpdev\www\ajax\sample009
ファイル名　index.js

onload = init;
var state;
var result;

function init() {
  state = $('state');
  result = $('result');
  prefDisp();
}

function clearDisp() {
  state.innerHTML = "";
  result.innerHTML = "";
}


保存先　C:\phpdev\www\ajax\sample009
ファイル名　pref.js

function prefDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "pref.php";
  var paramList = "";

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var response = data.responseXML.getElementsByTagName('Response');

    var item = response[0].getElementsByTagName('Item');
    var tmpHtml="";
    tmpHtml += "<form><select name='selectPref'>";
    tmpHtml += "<option value='0' selected>選択してください。</option>";

    for(i = 0; i < item.length; i++){
      var prefCd = item[i].getElementsByTagName('PREF_CD');
      var prefCdValue = prefCd[0].firstChild.nodeValue;

      var prefName = item[i].getElementsByTagName('PREF_NAME');
      var prefNameValue = prefName[0].firstChild.nodeValue;

      tmpHtml +="<option value='" + prefCdValue + "'>" + prefNameValue + "</option>\n";
    }

    tmpHtml += "</select></form>";

    result.innerHTML = tmpHtml;
    state.innerHTML = "データを取得しました。<br />\n";
  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}


保存先　C:\phpdev\www\ajax\sample009
ファイル名　pref.php

<?php
  header("Content-type: application/xml");
  $url = "http://ws.bzen.net/pgtop/GetPref.php";
  readfile($url);
?>


保存先　C:\phpdev\www\ajax\sample009
ファイル名　index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result {
  font-size:14px;
  color:#000000;
}



準備ができたら、Webサーバーを起動して動作を確認してみましょう。

【3】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【4】Firefox を起動して、動作を確認してみましょう。

http://localhost/ajax/sample009/

ajax-315.gif

＊ページを読み込んだ直後にプログラムが動きます。


【5】「選択リストボックス」をクリックします。

ajax-316.gif


【6】都道府県のリストが表示されるので、好きなものを選択してください。

ajax-317.gif


【7】都道府県が選択できました。

ajax-318.gif


【8】同様に Internet Explorer でも動作を確認してください。

ajax-314.gif


【解説】

(1)元になる XML のデータは Web 上のデータベースにあります。

まずデータベースのレコードを GetPref.php で XML 形式に加工して出力しています。
http://ws.bzen.net/pgtop/GetPref.php

それを中継プログラムの pref.php で同一ドメイン内にします。そして Ajax の非同期通信で取り込み、JavaScript のプログラムで選択リストボックスを組み立てる仕組みです。

データベース → GetPref.php(XML出力) → pref.php(中継) → 選択リストボックス組み立て → 画面に表示

この方法のメリットは、データベースのデータが変われば、自動的に選択リストボックスの値にも反映されることです。

＊GetPref.php は pref.php の中で呼び出しています。
＊サーバーに負荷がかかるため、 GetPref.php は学習目的でのみお使いください。


(2)選択リストボックスの用途について

例えば選択リストボックスをチェンジした時に、イベントハンドラを設定すれば、都道府県を切り替えた瞬間に、該当する市町村だけを表示するような応用ができます。

↓このような使い方( Internet Explorer で確認)
全国の特産品検索

またはネットショップの注文画面で、顧客に住所を入力してもらうときに使うことができます。


プログラムの変更点については、次回に詳しく解説します。


]]> Step15・選択リストボックスを作成 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/85612789 http://ajax.pgtop.net/article/80068454.html Ajax 動的なXMLの具体例について Tue, 22 Jan 2008 15:16:10 +0900 今回は Ajax でよく使われる、動的なXMLを使った実用的でわかりやすい例を説明します。全国の市町村は 1900 以上あるのですが、データを一度に全て表示しようとすると、多すぎて大変です。そこで各都道府県ごとの市町村だけを表示できたら便利です。その場合、静的なXMLだと都道府県別に 47 のファイルを用意しなければなりません。しかし動的なXMLなら、プログラミング言語を使い、データベースから条件に合った市町村のみを取得して表示することができます。そのためファイルは1つで済み.. ajax-309.gif 北海道の市町村だけが表示されました。 【2】次は Webブラウザのアドレスで、URLのパラメータを「8」に変更し、「移動」ボタンをクリックします。 ajax-311.gif 【3】今度は東京都の市町村が表示されました。 ajax-310.gif 【4】パラメータの数値を 1〜47 の範囲で変え、他の都道府県の市町村も表示してみてください。 【解説】 (1)Webブラウザのアドレスから、URLを入力して表示した場合は、GETメソッドとなります。リンクをクリックして表示した場合もGETメソッドです。 (2)「GetCity.php」はプログラミング言語のPHPで書かれています。このプログラムは、GETメソッドでリクエストされると、「prefCd」という名前のパラメータで指定した数値(都道府県)の市町村をデータベースから検索して、XML形式で出力するようになっています。 これも簡単なWebサービスと言えます。都道府県を指定すると、市町村データが取得できるサービスです。 この仕組みを Ajax のプログラムで利用したのが、最初に紹介したWebサイトです。 全国の特産品検索 (3)GETメソッドを使うメリットは、特にプログラムを書くことなく、URLだけで取得するデータを変化させられることです。POSTメソッドならある程度プログラムを書かなければなりません。 楽天Webサービスなどでも、パラメータの数が増えるだけで、GETメソッドの使い方は同じです。そのため初心者のうちはGETメソッドが何かと便利なのです。 ただしGETメソッドでは、送信できる情報量に制限があることや、URLに情報が表示されてしまうため、重要な情報のやり取りには向きません。その場合はPOSTメソッドが適しています。 (4)Webサービスを利用するだけなら、それほど深い知識はいりません。しかしWebサービスを自分で公開する場合は、データベースとサーバーサイドで動くプログラミング言語の知識が必要です。よく使われているのが、PHPとMySQLの組み合わせです。 詳しくは PHP初心者入門講座 をご覧ください。基本的なことが学べます。 ]]> Ajax でよく使われる、動的なXMLを使った実用的でわかりやすい例を説明します。

全国の市町村は 1900 以上あるのですが、データを一度に全て表示しようとすると、多すぎて大変です。そこで各都道府県ごとの市町村だけを表示できたら便利です。

その場合、静的なXMLだと都道府県別に 47 のファイルを用意しなければなりません。

しかし動的なXMLなら、プログラミング言語を使い、データベースから条件に合った市町村のみを取得して表示することができます。そのためファイルは1つで済みます。

イメージし難いかもしれませんが、実際に見ればすぐにわかります。


【1】Internet Explorer を起動して、以下のURLにアクセスします。

http://ws.bzen.net/pgtop/GetCity.php?prefCd=1

ajax-309.gif

北海道の市町村だけが表示されました。


【2】次は Webブラウザのアドレスで、URLのパラメータを「8」に変更し、「移動」ボタンをクリックします。

ajax-311.gif


【3】今度は東京都の市町村が表示されました。

ajax-310.gif


【4】パラメータの数値を 1〜47 の範囲で変え、他の都道府県の市町村も表示してみてください。


【解説】

(1)Webブラウザのアドレスから、URLを入力して表示した場合は、GETメソッドとなります。リンクをクリックして表示した場合もGETメソッドです。


(2)「GetCity.php」はプログラミング言語のPHPで書かれています。このプログラムは、GETメソッドでリクエストされると、「prefCd」という名前のパラメータで指定した数値(都道府県)の市町村をデータベースから検索して、XML形式で出力するようになっています。

これも簡単なWebサービスと言えます。都道府県を指定すると、市町村データが取得できるサービスです。

この仕組みを Ajax のプログラムで利用したのが、最初に紹介したWebサイトです。
全国の特産品検索


(3)GETメソッドを使うメリットは、特にプログラムを書くことなく、URLだけで取得するデータを変化させられることです。POSTメソッドならある程度プログラムを書かなければなりません。

楽天Webサービスなどでも、パラメータの数が増えるだけで、GETメソッドの使い方は同じです。そのため初心者のうちはGETメソッドが何かと便利なのです。

ただしGETメソッドでは、送信できる情報量に制限があることや、URLに情報が表示されてしまうため、重要な情報のやり取りには向きません。その場合はPOSTメソッドが適しています。


(4)Webサービスを利用するだけなら、それほど深い知識はいりません。しかしWebサービスを自分で公開する場合は、データベースとサーバーサイドで動くプログラミング言語の知識が必要です。よく使われているのが、PHPとMySQLの組み合わせです。

詳しくは PHP初心者入門講座 をご覧ください。基本的なことが学べます。


]]> Step14・動的なXMLの具体例 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/80068454 http://ajax.pgtop.net/article/80062247.html Ajax 静的なXMLと動的なXMLの違いについて Tue, 22 Jan 2008 14:21:06 +0900 Ajax のプログラムで非同期通信を行なう時、よく XMLベースのフォーマットが使われますが、それには情報が「静的」なものと「動的」なものがあります。静的 = 変化しない動的 = 変化するまずは以下のリンクをクリックして、比較してみてください。・静的なXMLhttp://ws.bzen.net/pgtop/pref.xml・動的なXMLhttp://ws.bzen.net/pgtop/GetPref.php違いがわかりましたか？表示されているデータの内容はまったく同じですが、.. ajax-307.gif ・動的なXML http://ws.bzen.net/pgtop/GetPref.php ajax-308.gif 違いがわかりましたか？ 表示されているデータの内容はまったく同じですが、実は大きな違いがあります。 よく見るとファイル名の拡張子が、静的なXMLの場合は「.xml」、動的なXMLの場合は「.php」になっています。 静的なXMLはデータをテキストエディタで書いてあるだけなので変化することはありません。変更したい場合はテキストエディタで再編集する必要があります。 それに対し動的なXMLのほうは、データベース(MySQL)に蓄積されたデータを、プログラミング言語(PHP)を使って出力していますので、自由自在に変化させることができます。 拡張子が「.php」でも、都道府県のような場合はデータ数が少ないし、変わることがありませんから、違いがわかり難いですね。でもこれが基礎になります。 次回は動的なXMLの具体的な活用例を紹介します。 【解説】 (1)Ajax の非同期通信には XMLベースのフォーマット以外に、テキストやHTMLなども利用できます。XML形式の場合は「タグでデータに意味付けができる」ので、プログラムの中で利用しやすいです。そのため例題でよく使っています。 (2)動的なXMLの出力には、PHP以外にもサーバーサイドで動くプログラミング言語が使えます。Java や Perl などもよく使われています。データベースは MySQL のほかに PostgreSQL がよく使われています。 ]]> Ajax のプログラムで非同期通信を行なう時、よく XMLベースのフォーマットが使われますが、それには情報が「静的」なものと「動的」なものがあります。

静的 = 変化しない
動的 = 変化する

まずは以下のリンクをクリックして、比較してみてください。

・静的なXML
http://ws.bzen.net/pgtop/pref.xml

ajax-307.gif

・動的なXML
http://ws.bzen.net/pgtop/GetPref.php

ajax-308.gif

違いがわかりましたか？
表示されているデータの内容はまったく同じですが、実は大きな違いがあります。

よく見るとファイル名の拡張子が、静的なXMLの場合は「.xml」、動的なXMLの場合は「.php」になっています。

静的なXMLはデータをテキストエディタで書いてあるだけなので変化することはありません。変更したい場合はテキストエディタで再編集する必要があります。

それに対し動的なXMLのほうは、データベース(MySQL)に蓄積されたデータを、プログラミング言語(PHP)を使って出力していますので、自由自在に変化させることができます。

拡張子が「.php」でも、都道府県のような場合はデータ数が少ないし、変わることがありませんから、違いがわかり難いですね。でもこれが基礎になります。

次回は動的なXMLの具体的な活用例を紹介します。


【解説】

(1)Ajax の非同期通信には XMLベースのフォーマット以外に、テキストやHTMLなども利用できます。XML形式の場合は「タグでデータに意味付けができる」ので、プログラムの中で利用しやすいです。そのため例題でよく使っています。


(2)動的なXMLの出力には、PHP以外にもサーバーサイドで動くプログラミング言語が使えます。Java や Perl などもよく使われています。データベースは MySQL のほかに PostgreSQL がよく使われています。


]]> Step13・静的なXMLと動的なXML Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/80062247 http://ajax.pgtop.net/article/79289679.html Ajax プログラムを自作することのメリットについて。 Fri, 18 Jan 2008 16:41:15 +0900 今回は Ajax のプログラムを自作することのメリットについて考えてみたいと思います。その前に少し補足すると、前回までに作成した簡易RSSリーダーは、RSS1.0対応です。RSS1.0ならそのまま動きますが、 RSS2.0、RDF、Atom、XML の場合は取得するデータの形式に合わせて変更が必要です。既成のRSSリーダーなら、ほとんどのXMLフォーマットに対応しているし、さらに高機能です。なので今さらRSSリーダーを自作するまでもありません。もちろん学習用の例題として適して.. シャトレーゼ 2008-01-18T14:59:24+09:00　:観葉植物 2008-01-18T15:04:53+09:00　:花粉症 ・電脳卸Webサービスと連携した場合 2008-01-17T21:45:41+09:00　:石鹸 2008-01-17T21:47:17+09:00　:お茶 2008-01-17T21:42:58+09:00　:英会話 イメージが湧きましたか？リンクしたキーワードで商品が検索されていますね。これは二つの情報を線で結んだ活用レベルです。最新キーワードを元に自動的にネットショップへのリンクを作成する仕組みです。 さらにいろんなWebサービスを同時に組み合わせることで、複数のネットショップを横断検索することもできます。そうすると面の活用レベルとなり、膨大な情報を利用して新たな付加価値を生み出すことになります。 Ajaxのプログラムでは、このような情報の組み立てが簡単にできるのです。自分で作ったシステムなら、アイデア次第で可能性が広がることが、プログラムを自作するメリットです。 上記のプログラムはあくまで「例え」であり、本当に連携しているわけではありません。最新キーワードは仮定です。しかし楽天、電脳卸の部分は本物です。本当に買い物することができます。 実際にデータを使うときは、情報を提供しているサイトの利用規約に従う必要があります。商用利用や取得したデータから統計をとって公開することを禁止している場合もありますので注意してください。 【ワンポイント】 電脳卸や楽天はWebサービスで商品情報を公開しています。楽天は会員登録していればすぐに使えます。一度でも楽天のサービスを何か利用したことがあれば、会員登録されているはずです。 電脳卸は販売店登録(無料)すると、Webサービスを無料で利用できます。販売店とはアフィリエイターのことです。アフィリエイトは成果に応じて報酬がもらえる仕組みです。 電脳卸の 販売店登録はこちら から行なえます。 電脳卸や楽天のWebサービスを活用したプログラミングについては、この「Ajax初心者入門講座」の続編で行ないます。まだ販売店登録していない方は、今のうちに登録してログインできるように準備しておいてください。 最近では電脳卸、楽天、Amazonなど多くのサイトがWebサービスを提供しています。ではどのようなメリットがあるのでしょうか？ それは多くの人にシステムを開発してもらうことで、販路を広げるチャンスが生まれるからです。 アフィリエイター側のメリットは、Webサービスを利用してシステムを開発することで、膨大な商品情報を簡単に利用できることです。元のサイトにはないような「商品の見せ方を工夫」すれば新たな価値になります。しかも成果に応じて報酬がもらえるのです。 ネットショップを利用していて「不便だな」と感じた時はチャンスです。それをWebサービスを利用したプログラミングで解決できれば、面白いことになるかも。 ]]> Ajax のプログラムを自作することのメリットについて考えてみたいと思います。

その前に少し補足すると、前回までに作成した簡易RSSリーダーは、RSS1.0対応です。RSS1.0ならそのまま動きますが、 RSS2.0、RDF、Atom、XML の場合は取得するデータの形式に合わせて変更が必要です。

既成のRSSリーダーなら、ほとんどのXMLフォーマットに対応しているし、さらに高機能です。なので今さらRSSリーダーを自作するまでもありません。

もちろん学習用の例題として適していたから取り上げたのですが、RSSリーダー自体を作ることが目的ではないのです。

学んでいただきたかったのは、「複数のコンピュータによるデータのやり取り」であり「公開されている膨大なデータの活用」、「データをいかに結びつけるか」なのです。

例えば自作した簡易RSSリーダーは、RSSフィードを読み込んで表示しましたが、これはまだ点の活用レベルです。他のWebサイトの情報とは結びついていません。

点　→　線　→　面

ネット上に点在している情報を結び付けて「線」や「面」の形に組み立てることで、新しい付加価値を作り出すことのほうが、面白くて楽しいのです。

では具体的な例を挙げてみます。現在検索されている最新のキーワードから、すぐにネットショップの商品を検索できるようにしてみるとどうでしょう。

もともと最新の検索キーワードとネットショップの商品情報は、別の情報でありつながっていません。これをプログラムを使ってつなげてみると以下のようになります。どれかリンクをクリックしてみてください。(Internet Explorer で確認)

・楽天Webサービスと連携した場合

2008-01-17T21:45:02+09:00　:シャトレーゼ

2008-01-18T14:59:24+09:00　:観葉植物

2008-01-18T15:04:53+09:00　:花粉症



・電脳卸Webサービスと連携した場合

2008-01-17T21:45:41+09:00　:石鹸

2008-01-17T21:47:17+09:00　:お茶

2008-01-17T21:42:58+09:00　:英会話



イメージが湧きましたか？リンクしたキーワードで商品が検索されていますね。これは二つの情報を線で結んだ活用レベルです。最新キーワードを元に自動的にネットショップへのリンクを作成する仕組みです。

さらにいろんなWebサービスを同時に組み合わせることで、複数のネットショップを横断検索することもできます。そうすると面の活用レベルとなり、膨大な情報を利用して新たな付加価値を生み出すことになります。

Ajaxのプログラムでは、このような情報の組み立てが簡単にできるのです。自分で作ったシステムなら、アイデア次第で可能性が広がることが、プログラムを自作するメリットです。

上記のプログラムはあくまで「例え」であり、本当に連携しているわけではありません。最新キーワードは仮定です。しかし楽天、電脳卸の部分は本物です。本当に買い物することができます。

実際にデータを使うときは、情報を提供しているサイトの利用規約に従う必要があります。商用利用や取得したデータから統計をとって公開することを禁止している場合もありますので注意してください。


【ワンポイント】

電脳卸や楽天はWebサービスで商品情報を公開しています。楽天は会員登録していればすぐに使えます。一度でも楽天のサービスを何か利用したことがあれば、会員登録されているはずです。

電脳卸は販売店登録(無料)すると、Webサービスを無料で利用できます。販売店とはアフィリエイターのことです。アフィリエイトは成果に応じて報酬がもらえる仕組みです。
電脳卸の 販売店登録はこちら から行なえます。

電脳卸や楽天のWebサービスを活用したプログラミングについては、この「Ajax初心者入門講座」の続編で行ないます。まだ販売店登録していない方は、今のうちに登録してログインできるように準備しておいてください。

最近では電脳卸、楽天、Amazonなど多くのサイトがWebサービスを提供しています。ではどのようなメリットがあるのでしょうか？

それは多くの人にシステムを開発してもらうことで、販路を広げるチャンスが生まれるからです。

アフィリエイター側のメリットは、Webサービスを利用してシステムを開発することで、膨大な商品情報を簡単に利用できることです。元のサイトにはないような「商品の見せ方を工夫」すれば新たな価値になります。しかも成果に応じて報酬がもらえるのです。

ネットショップを利用していて「不便だな」と感じた時はチャンスです。それをWebサービスを利用したプログラミングで解決できれば、面白いことになるかも。


]]> Step12・プログラムを自作するメリット Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/79289679 http://ajax.pgtop.net/article/79119141.html Ajax sample008で使用したプログラムの解説。 Thu, 17 Jan 2008 21:29:19 +0900 今回は sample008 で使用した Ajax のプログラムについて詳しく解説します。追加や変更は少しだけで済みます。最小限の変更で複数のRSSフィードが読み込めるようになっています。■index.html側(1)flash.js を読み込む部分を追加しました。&lt;script type="text/javascript" src="flash.js"&gt;&lt;/script&gt;(2)ニュース速報を表示するための div要素を追加しました。&lt;div id.. ]]> Ajax のプログラムについて詳しく解説します。追加や変更は少しだけで済みます。最小限の変更で複数のRSSフィードが読み込めるようになっています。


■index.html側

(1)flash.js を読み込む部分を追加しました。

<script type="text/javascript" src="flash.js"></script>


(2)ニュース速報を表示するための div要素を追加しました。

<div id="result2"></div>


■index.js側

(1)変数を宣言している部分に新しい変数を追加しました。

var result2;

＊この変数の有効範囲はプログラム全体です。


(2)ボタンをクリックした時のイベントハンドラの設定を変更しました。

$("btnData").onclick = newkwDisp;
↓
$("btnData").onclick = function (){newkwDisp();flashDisp();}

呼び出す関数を無名関数にし、その中で複数の関数を呼び出すようにしました。関数内では関数名の後に()カッコが付くことに注意してください。

これは以下のように書くこともできます。無名関数は呼び出したその場ですぐに定義していることがわかります。

$("btnData").onclick = function (){
  newkwDisp();
  flashDisp();
}

中に書くプログラムが多い場合は、この書き方のほうがわかりやすいです。


(3)変数で参照できるようにしている部分に1行追加しました。

result2 = $('result2');

＊$()関数は getElementById() のショートカットで、prototype.js の機能です。


(4)「クリア」ボタンをクリックした時に呼び出される関数に1行追加しました。

result2.innerHTML = "";


■newkw.js側

変更はありません。


■flash.js側

(1)関数名を flashDisp に変更しました。

function flashDisp() {
  省略
}


(2)中継プログラムのURLを変更しました。

var url = "flash.php";


(3)div要素に結果を出力している部分を変更しました。

result2.innerHTML = tmpHtml;


■index.css側

(1)result2要素のCSSを指定しました。

#result, #result2 {
  font-size:14px;
  color:#000000;
}

id名を「,」カンマを用いて区切ると、複数要素の属性を一度に指定することができます。


■newkw.php側

変更はありません。


■flash.php側

flash.phpは中継プログラム(スクリプト)です。

(1)取得するURLを変更しました。

$url = "http://mainichi.jp/rss/etc/flash.rss";


]]> Step11・sample008の解説 Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/79119141 http://ajax.pgtop.net/article/79086638.html Ajax 複数のRSSフィードを取得する方法。 Thu, 17 Jan 2008 18:03:15 +0900 Ajax を使って作った『簡易RSSリーダー』に、複数のRSSフィードを読み込む機能を加えてみましょう。もちろん既成のRSSリーダーには及びませんが、自分で作ったシステムは細かい調整や改良ができるので、アイデア次第では可能性が広がります。今回取り込むRSSフィードは、毎日新聞のサイトで公開しているニュース速報です。ニュース速報(総合)のRSShttp://mainichi.jp/rss/etc/flash.rss＊商業目的での利用は禁止されていますのでご注意ください。このRS.. ajax-295.gif ＊商業目的での利用は禁止されていますのでご注意ください。 このRSSフィードのタグ名は前回と同じなので、これまでに作ったプログラムをコピーして、少し変更するだけでできます。 今回も動作確認に専念してほしいので、プログラムの解説は次回に行ないます。まずはプログラムが動くようにして、全体の処理の流れをつかんでください。 【1】sample007 フォルダをコピーして sample008 フォルダを作成します。 ajax-304.gif 【2】sample008 フォルダを開き、以下のようにファイルをコピーしてください。 newkw.js　→　コピーしてファイル名を flash.js にする newkw.php　→　コピーしてファイル名を flash.php にする ajax-298.gif ＊元のファイルも使います。 【3】プログラムを少し書き換えます。一見多いようですがよく見ると変更はほんの一部です。newkw.js と newkw.php に変更はありませんので省略します。 ＊newkw.php と flash.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。 ＊「\」はWindowsでは円記号のことです。 保存先　C:\phpdev\www\ajax\sample008 ファイル名　index.html <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <script type="text/javascript" src="../lib/prototype.js"></script>     <script type="text/javascript" src="index.js"></script>     <script type="text/javascript" src="newkw.js"></script>     <script type="text/javascript" src="flash.js"></script>     <link href="index.css" rel="stylesheet" type="text/css">     <title>最新キーワード、ニュース速報</title>   </head>   <body>     <div>       <input type="button" id="btnData" value="データ取得" />       <input type="button" id="btnClear" value="クリア" />     </div>     <div id="state"></div>     <p>■最新キーワード</p>     <div id="result"></div>     <p>■ニュース速報</p>     <div id="result2"></div>   </body> </html> 保存先　C:\phpdev\www\ajax\sample008 ファイル名　index.js onload = init; var state; var result; var result2; function init() {   $("btnData").onclick = function (){newkwDisp();flashDisp();}   $("btnClear").onclick = clearDisp;   state = $('state');   result = $('result');   result2 = $('result2'); } function clearDisp() {   state.innerHTML = "";   result.innerHTML = "";   result2.innerHTML = ""; } 保存先　C:\phpdev\www\ajax\sample008 ファイル名　flash.js function flashDisp() {   state.innerHTML = "処理中です・・・<br />\n";   var url = "flash.php";   var paramList = "time=" + (new Date().getTime());   new Ajax.Request(url,     {       method: 'get',       onSuccess: getData,       onFailure: showErrMsg,       parameters: paramList   });   function getData(data){     var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";     var response;     if(document.all){       response = data.responseXML.getElementsByTagName('rdf:RDF');     }else{       response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');     }     var item = response[0].getElementsByTagName('item');     var tmpHtml="";     for(i = 0; i < item.length; i++){       var title = item[i].getElementsByTagName('title');       var titleValue = title[0].firstChild.nodeValue;       var link = item[i].getElementsByTagName('link');       var linkValue = link[0].firstChild.nodeValue;       var dc ="http://purl.org/dc/elements/1.1/";       var dcDate;       if(document.all){         dcDate = item[i].getElementsByTagName('dc:date');       }else{         dcDate = item[i].getElementsByTagNameNS(dc,'date');       }       var dcDateValue = dcDate[0].firstChild.nodeValue;       tmpHtml += dcDateValue + "　:"       tmpHtml += "<a href='" + linkValue + "' target='_blank'>" + titleValue + "</a>";       tmpHtml += "<br />\n";     }     result2.innerHTML = tmpHtml;     state.innerHTML = "データを取得しました。<br />\n";   }   function showErrMsg(){     clearDisp();     state.innerHTML = "データを取得できませんでした。<br />\n";   } } 保存先　C:\phpdev\www\ajax\sample008 ファイル名　index.css #state {   font-size:16px;   color:#0000cc;   margin-top:10px;   margin-bottom:10px; } #result, #result2 {   font-size:14px;   color:#000000; } 保存先　C:\phpdev\www\ajax\sample008 ファイル名　flash.php <?php   header("Content-type: application/xml");   $url = "http://mainichi.jp/rss/etc/flash.rss";   readfile($url); ?> 準備ができたら、Webサーバーを起動して動作確認してみましょう。 【4】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。 ajax-166.gif 【5】まずは中継プログラムが、きちんと動いているか確認します。 http://localhost/ajax/sample008/flash.php ajax-299.gif ＊中継プログラムの確認は重要です。 【6】Firefox を起動して、動作するか確認します。 http://localhost/ajax/sample008/ ajax-301.gif 【7】「データ取得」ボタンをクリックします。 ajax-302.gif 【8】データが表示されました。 ajax-303.gif 最新キーワードは頻繁に更新されますが、ニュース速報は更新間隔が長いので、すぐには反映されません。 ＊通信相手のサーバーに負担をかけないように、適当な間隔を置いてクリックしてください。 【9】ニュース速報の文字リンクをクリックします。 ajax-305.gif 【10】毎日新聞の記事が表示されました。 ajax-306.gif 毎日新聞はRSSフィードを提供することで、RSSリーダーなどからのアクセスを増やせるわけですね。 【11】同様に Internet Explorer でも動作確認してください。 ajax-300.gif 【解説】 (1)今回は別々のサイトからRSSフィードを取得している点がポイントです。異なるコンピュータ同士が、XML形式のデータを介してつながり、同じ画面上に出力しているわけです。 (2)RSSにはいくつかバージョンがあり、これまでに使っていたのは RSS1.0 です。同じ種類のRSSなら今回のような方法で扱えます。取り込むRSSフィードを3つ、4つと増やしても要領は同じです。 しかし RSS2.0、RDF、Atom、XML の場合は、取得したデータを解析する部分のプログラムを少し変更する必要があります。 (3)newkw.js と flash.js は統合することもできますが、 ・表示形式を個別に変えたい ・異なるXMLフォーマットを利用したい など、細かなカスタマイズをするような場合は、分けていたほうが便利です。 ]]> Ajax を使って作った『簡易RSSリーダー』に、複数のRSSフィードを読み込む機能を加えてみましょう。

もちろん既成のRSSリーダーには及びませんが、自分で作ったシステムは細かい調整や改良ができるので、アイデア次第では可能性が広がります。

今回取り込むRSSフィードは、毎日新聞のサイトで公開しているニュース速報です。

ニュース速報(総合)のRSS
http://mainichi.jp/rss/etc/flash.rss

ajax-295.gif

＊商業目的での利用は禁止されていますのでご注意ください。

このRSSフィードのタグ名は前回と同じなので、これまでに作ったプログラムをコピーして、少し変更するだけでできます。

今回も動作確認に専念してほしいので、プログラムの解説は次回に行ないます。まずはプログラムが動くようにして、全体の処理の流れをつかんでください。


【1】sample007 フォルダをコピーして sample008 フォルダを作成します。

ajax-304.gif


【2】sample008 フォルダを開き、以下のようにファイルをコピーしてください。

newkw.js　→　コピーしてファイル名を flash.js にする
newkw.php　→　コピーしてファイル名を flash.php にする

ajax-298.gif

＊元のファイルも使います。


【3】プログラムを少し書き換えます。一見多いようですがよく見ると変更はほんの一部です。newkw.js と newkw.php に変更はありませんので省略します。

＊newkw.php と flash.php は SHIFT-JIS、それ以外は UTF-8 形式で保存してください。
＊「\」はWindowsでは円記号のことです。

保存先　C:\phpdev\www\ajax\sample008
ファイル名　index.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../lib/prototype.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="newkw.js"></script>
    <script type="text/javascript" src="flash.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css">
    <title>最新キーワード、ニュース速報</title>
  </head>
  <body>
    <div>
      <input type="button" id="btnData" value="データ取得" />
      <input type="button" id="btnClear" value="クリア" />
    </div>
    <div id="state"></div>
    <p>■最新キーワード</p>
    <div id="result"></div>
    <p>■ニュース速報</p>
    <div id="result2"></div>
  </body>
</html>


保存先　C:\phpdev\www\ajax\sample008
ファイル名　index.js

onload = init;
var state;
var result;
var result2;

function init() {
  $("btnData").onclick = function (){newkwDisp();flashDisp();}
  $("btnClear").onclick = clearDisp;
  state = $('state');
  result = $('result');
  result2 = $('result2');
}

function clearDisp() {
  state.innerHTML = "";
  result.innerHTML = "";
  result2.innerHTML = "";
}


保存先　C:\phpdev\www\ajax\sample008
ファイル名　flash.js

function flashDisp() {
  state.innerHTML = "処理中です・・・<br />\n";
  var url = "flash.php";
  var paramList = "time=" + (new Date().getTime());

  new Ajax.Request(url,
    {
      method: 'get',
      onSuccess: getData,
      onFailure: showErrMsg,
      parameters: paramList
  });

  function getData(data){
    var rdf ="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
    var response;

    if(document.all){
      response = data.responseXML.getElementsByTagName('rdf:RDF');
    }else{
      response = data.responseXML.getElementsByTagNameNS(rdf,'RDF');
    }

    var item = response[0].getElementsByTagName('item');
    var tmpHtml="";

    for(i = 0; i < item.length; i++){
      var title = item[i].getElementsByTagName('title');
      var titleValue = title[0].firstChild.nodeValue;

      var link = item[i].getElementsByTagName('link');
      var linkValue = link[0].firstChild.nodeValue;

      var dc ="http://purl.org/dc/elements/1.1/";
      var dcDate;

      if(document.all){
        dcDate = item[i].getElementsByTagName('dc:date');
      }else{
        dcDate = item[i].getElementsByTagNameNS(dc,'date');
      }

      var dcDateValue = dcDate[0].firstChild.nodeValue;

      tmpHtml += dcDateValue + "　:"
      tmpHtml += "<a href='" + linkValue + "' target='_blank'>" + titleValue + "</a>";
      tmpHtml += "<br />\n";
    }

    result2.innerHTML = tmpHtml;
    state.innerHTML = "データを取得しました。<br />\n";

  }

  function showErrMsg(){
    clearDisp();
    state.innerHTML = "データを取得できませんでした。<br />\n";
  }

}


保存先　C:\phpdev\www\ajax\sample008
ファイル名　index.css

#state {
  font-size:16px;
  color:#0000cc;
  margin-top:10px;
  margin-bottom:10px;
}

#result, #result2 {
  font-size:14px;
  color:#000000;
}


保存先　C:\phpdev\www\ajax\sample008
ファイル名　flash.php

<?php
  header("Content-type: application/xml");
  $url = "http://mainichi.jp/rss/etc/flash.rss";
  readfile($url);
?>



準備ができたら、Webサーバーを起動して動作確認してみましょう。

【4】C:\phpdev にある「2K-NT-XP-phpdev_start.bat」をダブルクリックして、phpdev を起動します。

ajax-166.gif


【5】まずは中継プログラムが、きちんと動いているか確認します。

http://localhost/ajax/sample008/flash.php

ajax-299.gif

＊中継プログラムの確認は重要です。


【6】Firefox を起動して、動作するか確認します。

http://localhost/ajax/sample008/

ajax-301.gif


【7】「データ取得」ボタンをクリックします。

ajax-302.gif


【8】データが表示されました。

ajax-303.gif

最新キーワードは頻繁に更新されますが、ニュース速報は更新間隔が長いので、すぐには反映されません。

＊通信相手のサーバーに負担をかけないように、適当な間隔を置いてクリックしてください。


【9】ニュース速報の文字リンクをクリックします。

ajax-305.gif


【10】毎日新聞の記事が表示されました。

ajax-306.gif

毎日新聞はRSSフィードを提供することで、RSSリーダーなどからのアクセスを増やせるわけですね。


【11】同様に Internet Explorer でも動作確認してください。

ajax-300.gif


【解説】

(1)今回は別々のサイトからRSSフィードを取得している点がポイントです。異なるコンピュータ同士が、XML形式のデータを介してつながり、同じ画面上に出力しているわけです。


(2)RSSにはいくつかバージョンがあり、これまでに使っていたのは RSS1.0 です。同じ種類のRSSなら今回のような方法で扱えます。取り込むRSSフィードを3つ、4つと増やしても要領は同じです。

しかし RSS2.0、RDF、Atom、XML の場合は、取得したデータを解析する部分のプログラムを少し変更する必要があります。


(3)newkw.js と flash.js は統合することもできますが、
・表示形式を個別に変えたい
・異なるXMLフォーマットを利用したい
など、細かなカスタマイズをするような場合は、分けていたほうが便利です。


]]> Step10・複数のRSSフィードを取得する Ajax入門 blog:http://blog.seesaa.jp,ajaxhp/79086638