Ajax localhostのファイルを表示する方法。

Ajax プログラミングの開発は、ドメインを意識する必要があるので、今後はローカル環境のWebサーバー上で行ないます。

前回 phpdev をインストールしたので、既に Apache、PHP、MySQL が使えるようになっています。そこで今回はWebサーバーを起動して、WebブラウザからURLでファイルにアクセスする方法を解説します。

Webサーバー上のファイルを開くには、これまでと手順が異なりますので注意してください。もちろんWebサーバーが起動している必要があります。


【1】これまでCドライブの直下にあった ajaxフォルダ を、「C:\phpdev\www」にフォルダごと移動します。

*「\」はWindowsではエンマークのことです。
C:\phpdev\www

ajax-165.gif


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

ajax-166.gif


【3】以下の画面が表示されたら起動はOKです。

ajax-168.gif


【4】同時に以下のようなブラウザ画面が表示されていれば、Webサーバーが正常に動いています。この段階で Apache、PHP、MySQLが使える状態になっています。

ajax-169.gif

表示されていない場合は、ブラウザを立ち上げてアドレスに http://localhost/ と入力し、移動ボタンで実行してください。


準備ができたら以前に作成したプログラムにアクセスしてみましょう。


【5】まず Internet Explorer6.0 を起動して、アドレスに以下のように入力し、移動ボタンで実行します。

http://localhost/ajax/sample002/test.html

ajax-170.gif


【6】同様に Firefox でも実行してみてください。

http://localhost/ajax/sample002/test.html

ajax-171.gif


次は終了方法です。

【7】phpdev を終了するには、以下のウィンドウの閉じる「×」ボタンをクリックします。

ajax-172.gif

しかしまだ Apache は動いている状態です。


【8】タスクバーにあるApacheのアイコンを右クリックします。

ajax-173.gif


【9】「Exit」を選択すると、Apacheが終了します。

ajax-174.gif


【解説】

(1)今後は今回のような手順で、ブラウザから動作確認するようにしてください。

必ずWebサーバーが起動している必要があるので、まず http://localhost/ が表示されるか確認したほうが無難です。


(2)ファイルとアドレスの関係

C:\phpdev\www と http://localhost/ が対応します。

C:\phpdev\www\ajax\sample002\test.htm
に配置したファイルに、ブラウザからアクセスするには、
http://localhost/ajax/sample002/test.html
となります。

この関係はとても重要ですので、しっかり頭に入れてください。

ローカル環境のWebサーバー上で開発したプログラムは、ファイルの位置関係を保てば、インターネット上でもそのまま動きます。実際にインターネット上に公開するときは localhost の部分が、独自ドメイン名に変わるだけです。


http://localhost/ajax/sample002/test.html

http://pgtop.net/ajax/sample002/test.html
このアドレスは無いのでイメージだけつかんでください。




Ajax Webサーバーを簡単に用意する方法。

Ajax の特徴である非同期通信は、JavaScript の XMLHttpRequest オブジェクトを使って行ないます。この XMLHttpRequest は Webブラウザ間で実装に違いがありますが、prototype.js などのAjaxフレームワークを利用することで、解決することができます。

大事なポイントとしては、セキュリティの関係上 XMLHttpRequest を使って取得できるデータは、同一ドメイン内のファイルに限られるということです。

例えばWebアプリケーションを pgtop.net というドメイン名で公開する場合、取得するファイルは pgtop.net/test.xml のように同一ドメイン内に配置しなければなりません。

*言葉で説明すると難しいですが、プログラムを動かしてみるとすぐにわかりますので安心してください。

しかしデータの取得が、同一ドメイン内に限られていては何かと不便です。最近ではYahooやGoogle、楽天、Amazonをはじめ、様々なWebサービスが提供されています。制限があるとその豊富なデータを利用できないことになりますよね。どうしても他のドメインからデータを取得したい時があるのです。

実はちゃんと解決方法があって、「中継プログラム」を介することで、他のドメインのデータも取得できます。JavaScriptからは同一ドメイン内に置いた中継プログラムにアクセスするようにします。中継プログラムには制限がないので、他のドメインのデータも取得できるという仕組みです。間接的にアクセスしているわけです。

中継プログラムには、 PHP、JAVA、Perlなどのサーバーサイドで動くプログラミング言語を使います。

このような理由からAjaxではWebサーバーを用意して、PHPなどの言語も同時に利用することが多いです。

通常、Ajaxを使ったWebアプリケーションはレンタルサーバーなどにアップして公開します。しかし開発中のプログラムをいきなりレンタルサーバーにアップするのは良くありません。レンタルサーバーは複数の人が共有して使いますので、他の人に迷惑がかかるかもしれないからです。

したがって開発はローカル環境で行い、完成したらレンタルサーバーにアップするのがマナーです。もちろん自分で利用するだけならローカル環境のまま使ってもかまいません。

どちらにしても最初はローカル環境にWebサーバーを用意する必要があります。ローカル環境を構築するには、パソコンにApacheなどのWebサーバソフトウェアをインストールします。

また中継プログラムとしてはPHPをインストールします。それからAjaxではデータベースと連携することが多いので、MySQLもインストールしておいたほうがいいでしょう。

つまりApache、PHP、MySQLのインストールが必要なのですが、設定に手間がかかります。初心者には難しいかもしれません。

そこで登場するのが「phpdev」という便利なソフトです。なんと一発でApache、PHP、MySQLをインストールできます。しかも作業時間はたった1分程度で済みます。

phpdevの欠点は、各ソフトウェアが最新バージョンではないことですが、Ajaxの基礎を学ぶのには十分です。

まずは以下のページの手順を見て、phpdevでインストールしてください。

PHP phpdevで一発インストール
http://php5.seesaa.net/category/1632821-1.html

↑PHP用の入門サイトなので、このページだけでかまいません。


【ワンポイント】

Ajaxは基本的に同一ドメイン内のファイルにアクセスできるわけですが、ローカル環境ならわざわざ独自ドメインを取得する必要はありません。Webサーバソフトウェアをインストールすると「localhost」という、自分のパソコン内だけで有効なドメイン名が使えます。


Ajax prototype.jsを使用する方法。

今回は Ajax フレームワークとして人気のある prototype.js を実際に使ってみましょう。

prototype.js には Ajax でよく使う機能があらかじめ用意されていて、JavaScriptのプログラムをシンプルにしてくれます。まずは prototype.js を使って既存のプログラムを書き換えた場合、どのように便利になるのか体験してみてください。

prototype.js は機能が豊富なので、最初は戸惑ってしまいます。とりあえずよく使う機能から使い方を覚えて、少しずつ活用の幅を広げていけばいいと思います。


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

ajax-161.gif


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

ajax-162.gif

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

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

保存先 C:\ajax\sample002
ファイル名 test.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="test.js"></script>
    <link href="test.css" rel="stylesheet" type="text/css">
    <title>test</title>
  </head>
  <body>
    <div id="result"></div>
  </body>
</html>


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

onload = init;
var result;

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

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


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

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


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

C:\ajax\sample002

ajax-163.gif


【4】Internet Explorer6.0 で sample002 の「test.html」を開き、動作を確認します。

ajax-164.gif

prototype.jsを使用する前と同じように動作したらOKです。

ウェブアプリケーションの開発は Firefox を使って行ないますが、利用者の多い Internet Explorer でも必ず動作確認するようにしてください。


【解説】

(1)prototype.js を使うには、test.html の head 部分に以下の1行を加えるだけです。

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

これで prototype.js に用意されている豊富な機能が使えるようになります。prototype.js は複数のサンプルから共通して利用するため、libフォルダに配置しています。

「..」は一つ上の階層を表します。つまり test.html からみて、一つ上の階層にあるlibフォルダの中にある prototype.js を読み込むということになります。


(2)prototype.js の関数を使うと、JavaScriptのプログラムがシンプルに書けます。

result = document.getElementById("result");

result = $('result');

$()関数は getElementById() のショートカットです。HTMLファイルで要素に付けたid名を「'」シングルクォーテーションで囲んでいます。「"」ダブルクォーテーションで囲んでも同じです。

今回はプログラムが短いのであまりメリットを感じないかもしれませんが、プログラムが長くなるほど威力を発揮します。


【ワンポイント】

prototype.js には他にも多くの機能があり、ドキュメントが公開されています。ドキュメントは英語ですが、翻訳サイトなどを使えばある程度意味が掴めます。

この講座でも必要に応じて解説しますが、もっと詳しく知りたい方はドキュメントをご覧ください。

Prototype API Documentation
http://www.prototypejs.org/api


翻訳にはエキサイト翻訳が便利です。
http://www.excite.co.jp/world/

Webページごと翻訳する機能もあります。


Ajax prototype.jsを入手する方法。

Ajax を取り入れたウェブアプリケーションの中心技術である JavaScript は、Webブラウザごとに実装が異なります。特に Ajax の特徴である非同期通信では、かなりブラウザの差が出ます。多くのブラウザで動くようにするには、プログラムが複雑になってしまいます。

そこで最近ではWebブラウザ間の違いを吸収するため、prototype.js などのAjaxフレームワークを利用することが増えてきました。

prototype.js は最もよく使われているAjaxフレームワークの一つで、 JavaScript を使ったウェブアプリケーションの開発を簡単にしてくれます。

prototype.js が難しい処理をラップ(包む)してくれるので、プログラマーはたった数行書くだけで、多くのブラウザに対応したウェブアプリケーションが作れます。

非同期通信に関すること以外にも、JavaScriptの機能が大きく拡張されているので、複雑な処理を簡単なコードで書くことができます。

それでは早速 prototype.js を入手してみましょう。

サイトのデザインなどは更新されるかもしれませんのでご了承ください。大体の入手手順は変わることがないと思います。


【1】以下のURLをクリックし、「prototypejs.org」のサイトにアクセスします。

http://www.prototypejs.org/

ajax-154.gif


【2】「Download」をクリックします。

ajax-155.gif


【3】「Download the latest stable version...」をクリックします。

ajax-156.gif

*最新の安定したバージョンです。


【4】セキュリティの警告メッセージが表示されますが、大丈夫ですので「保存」ボタンをクリックします。

ajax-157.gif


【5】「prototype.js」が入手できました。

ajax-158.gif


この prototype.js は今後の学習で各サンプルから共通で利用します。そのため prototype.js を配置するフォルダを用意し、各サンプルから参照できるようにします。


【6】ajaxフォルダの中に「lib」という名前で、フォルダを新規作成してください。

*「\」はWindowsではエンマークのことです。
C:\ajax

ajax-159.gif


【7】libフォルダの中に、「prototype.js」を配置します。

C:\ajax\lib

ajax-160.gif


これで prototype.js を利用するための準備が完了しました。


Ajax わざとエラーを出してブラウザで原因を調べる方法。

Ajax は、基本的にテキストエディタでプログラミングして、Webブラウザで確認する手順を繰り返します。Ajaxの中心となる技術はJavaScriptですが、統合開発環境がないため少し不便です。

逆に言うとAjaxは、テキストエディタさえあればプログラミングができてしまいます。しかもブラウザはどのパソコンにも標準でインストールされているので、すぐに実行することができます。ただブラウザだけではエラーの原因がわかり難いことが欠点です。

このAjax初心者入門講座で Firefox を使う理由の一つは Firebug が使えることです。 Firebug を使えば、エラーの原因がすぐにわかるので、デバッグを効率よく行なうことができます。

プログラミングにバグは付き物です。プログラミング初心者はエラーが出るとパニックになりますが、原因を特定して一つ一つ解決していけば大丈夫です。

今回はわざとプログラムを間違えてエラーを出してみましょう。エラー原因をブラウザで調べる方法がわかれば、エラーが出ても落ち着いて対応できます。


【1】「test.js」の13行目をわざと間違えます。result → resalt

resalt.innerHTML = "a + b = " + c;

ajax-144.gif

変更したらファイルを保存してください。


【2】まず Internet Explorer6.0 で「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-145.gif

JavaScriptのプログラムが間違っているので、ブラウザの画面には何も表示されません。またエラーメッセージも出ていません。これでは何が原因なのかわかりませんね。


【3】次は Firefox で「test.html」を開きます。

ajax-151.gif

ブラウザの画面に何も表示されないのは同じですが、画面右下のステータスバーにエラーメッセージが表示されています。


【4】エラーメッセージをクリックします。

ajax-152.gif


【5】Firebug が起動して、エラーの内容と行番号が確認できました。

ajax-147.gif

実際にはこの情報をもとにデバッグしていきます。Firefox の方がデバッグに便利なことがわかったと思います。


【6】「test.js」の13行目を元に戻してください。忘れないでくださいね。


【解説】

実は Internet Explorer でもある程度のエラーメッセージは表示されます。

以下は別のプログラムで、わざとエラーが出るようにした状態です。Internet Explorer のステータスバーに警告アイコンが表示されます。ダブルクリックすると、

ajax-153.gif

エラーメッセージが表示されます。
ajax-149.gif


【ワンポイント】

Firefox は日々改良されています。更新があると以下のようなメッセージが表示されるので、「Firefox を今すぐ再起動」ボタンをクリックして更新してください。

ajax-150.gif

作業中なら「後で」ボタンをクリックすると、Firefox を次回起動時に更新できます。


Ajax Firebugを使ってCSSのボックスを視覚化する方法。

Ajax では、ブラウザ画面のレイアウトによく CSS(Cascading Style Sheets) を利用します。CSS はHTMLに埋め込んだり、外部ファイルとして読み込んだり、JavaScript から動的に書き換えたりします。

CSSではHTML内の各要素は「ボックス」という長方形であると考えます。ボックスは以下の図のように入れ子になっています。

ajax-143.gif

プログラミング初心者が CSS を利用する時に一番戸惑うのは、content、padding、border、margin の指定だと思います。

まずは以下のCSSを見てください。

#result {
  width:100px;
  height:50px;
  font-size:24px;
  color:#0000cc;
  background-color:#CCFFcc;
  padding:10px 10px 10px 10px;
  border:3px solid #000000;
  margin:10px 10px 10px 10px;
}

上のCSSから以下の図のようにイメージできたら優秀です。

ajax-130.gif

*内容には文字や画像が表示されます。

慣れてくるとイメージできますが、最初は難しいですよね。ボックスが1つだけならわかるかもしれませんが、数十~数百のボックスを使うことはいくらでもあります。それぞれのサイズを設定するのが、いかに複雑になるかということは簡単に想像できます。

普通はCSSをテキストエディタで編集して、ブラウザで確認してといった手順を繰り返して調整します。この調整が結構難しいのです。

しかし安心してください。Firebug はCSSのボックスを視覚化してくれます。

私もCSSでレイアウトが思ったとおりにできず、長時間悩んだことがありましたが、視覚化できれば原因がすぐわかるので大変助かります。HTMLやCSSが複雑になるほどこの機能は重宝します。


【1】Firefox を起動します。

ajax-97.gif


【2】作成済みの「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-98.gif


【3】Firebug を起動します。今回は同一ウィンドウで開きます。

ajax-113.gif

*「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。


【4】Firebug の「CSS」をクリックします。

ajax-115.gif


【5】「編集」をクリックします。

ajax-116.gif


【6】CSSを以下のように変更してください。

#result {
  width:100px;
  height:50px;
  font-size:24px;
  color:#0000cc;
  background-color:#CCFFcc;
  padding:10px 10px 10px 10px;
  border:3px solid #000000;
  margin:10px 10px 10px 10px;
}

ajax-128.gif

*これは Firebug 上だけの変更です。元のファイルには影響ありません。


【7】CSS を変更すると、Firefox の画面が変わります。

ajax-129.gif


それではボックスを視覚化してみましょう。


【8】Firebug の「HTML」をクリックします。

ajax-131.gif


【9】Firebug の「レイアウト」をクリックします。

ajax-132.gif


【10】レイアウトタブが表示されました。ただしこれは body のレイアウトです。

ajax-133.gif


result のレイアウトに切り替えます。


【11】「調査」をクリックします。

ajax-134.gif


【12】ブラウザ画面で result の部分をクリックします。

ajax-135.gif

*result は計算結果が出力されている領域です。HTMLファイルでid名を付けましたね。
<div id="result"></div>


【13】result のレイアウトに変わりました。

ajax-136.gif

変更したCSSとレイアウトを比較してください。どのように反映されているかよくわかります。


【14】レイアウト上にマウスを重ねると、ブラウザの画面上で対応する部分がルーラーとガイドで表示されます。

ajax-137.gif

*レイアウトの濃い青の部分が対象になっています。

・content の時
ajax-138.gif

・padding の時
ajax-139.gif

・border の時
ajax-140.gif

・margin の時
ajax-141.gif


【15】レイアウトの数値を変えると、ブラウザ画面上の content、padding、border、margin のサイズが変化します。

ajax-142.gif


【解説】

(1)ボックスの中は以下のようになります。

content(コンテント) 内容 文字や画像
padding(パディング) コンテントとボーダーの空間
border(ボーダー) 枠線
margin(マージン) ボーダーと他のボックスとの空間
offset(オフセット) 基準となる親要素からの相対位置

*paddingには背景色がつきますが、marginは透明だという点に注意してください。


(2)padding と margin は「上右下左」の順に指定しています。

padding:10px 10px 10px 10px;
margin:10px 10px 10px 10px;


(3)他にもいろいろな書き方があります。

・個別に指定
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

・上下左右
padding:10px;

・上下 左右
padding:10px 10px;

・上 左右 下
padding:10px 10px 10px;

*marginも同じように書くことができます。


Ajax Firebugを使ってCSSを編集する方法。

Firebug はプログラムの実行中に、CSS(Cascading Style Sheets)やHTMLを一時的に変更してみることができます。

CSSとはWebページのデザインを定義する規格です。HTMLファイルには論理構造だけを記述し、デザインに関することはCSSファイルにまとめることで、それぞれのファイルがシンプルになります。

またCSSファイルを差し替えるだけで、Webページの見た目をガラッと変えられることもメリットです。最近ではブログでもCSSが使われているので一度は試したことがあると思います。ブログでデザインを選択すると画面が変わりますよね。あれはCSSを差し替えているのです。(CSSとHTML両方変えている場合もあります)

Ajax ではプログラムの結果を画面に出力するときに、動的にCSSやHTMLを変更するので、編集機能はテストに便利です。

ポイントは編集は一時的なものであるということです。元のファイルには影響しませんので、安心してテストできます。


【1】Firefox を起動します。

ajax-97.gif


【2】作成済みの「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-98.gif


【3】Firebug を起動します。

ajax-71.gif

*「F12キー」を押すと、Firebug がブラウザと同一ウィンドウで開きます。
*「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。


【4】Firebug で「CSS」をクリックします。

ajax-100.gif


【5】「test.css」が選択されていることを確認してください。

ajax-101.gif

1つのHTMLファイルに読み込むCSSファイルは複数設定できます。デザインが複雑になってくるとCSSを分割することもありますので、ここで操作の対象となるCSSを選択します。


【6】「編集」をクリックします。

ajax-102.gif


【7】画面が編集モードに切り替わりました。

ajax-103.gif


【8】フォントサイズを大きくしてみましょう。

font-size:48px;

ajax-104.gif

Firebug での編集が、すぐに Firefox の画面に反映されますね。ただし test.css ファイル自体は元のままです。


【9】フォントの色を変えてみましょう。

color:#ff0000;

ajax-105.gif


【10】CSSは新たに加えることもできます。

width:200px; 幅
border:1px solid #000000; 枠線

ajax-106.gif


【11】デザインを元に戻すには、 Firefox のツールバーにある「再読み込み」ボタンをクリックします。

ajax-107.gif


【12】元に戻りました。

ajax-108.gif


CSSと同じようにHTMLも変更してみることができます。


【13】「HTML」をクリックします。

ajax-109.gif


【14】「編集」をクリックします。

ajax-110.gif


【15】画面が編集モードに切り替わりました。

ajax-111.gif

*この時、「調査」は押された状態にしないでください。


【16】HTMLの一部を変更すると、ブラウザの画面も変わります。

ajax-112.gif


HTMLも「再読み込み」ボタンをクリックすると元に戻ります。


Firebug での編集は一時的なものです。気に入ったデザインなどはコピーしておいて、ファイルをTeraPadなどのテキストエディタで開き、編集・保存する必要があります。


Firebugを使って変数の値を変更する方法。

Ajax のプログラムをデバッグする時に、JavaScriptプログラム中に書いた値とは違う値で動作確認してみたいことがあります。

例えばユーザーがブラウザのテキストボックスから、予想外の数値や文字列を入力したと仮定して、プログラムが正常に動くかテストしたいなど。

もちろんプログラムを書き換えてもいいのですが、一時的な場合はなるべくプログラムは変更したくありません。そんなときには Firebug が便利です。

Firebug にはプログラムの実行中に、変数の値を変更できる便利な機能があります。この機能を使うと、動作確認がとてもやり易くなります。

操作も簡単なので早速使ってみましょう。


【1】Firefox を起動します。

ajax-97.gif


【2】作成済みの「test.html」を開きます。

*「\」はWindowsではエンマークのことです。
C:\ajax\sample001\test.html

ajax-98.gif

Firefox の画面をみると、「a + b = 3」になっています。これは JavaScript のプログラムの中で、変数に値を代入して計算しているからです。

var a = 1;
var b = 2;
var c = a + b;

計算結果は文字列として画面に出力しています。
result.innerHTML = "a + b = " + c;


次はプログラムの実行中に、変数の値を変えてみましょう。


【3】Firebug を起動します。

ajax-71.gif

*「Ctrlキー + F12キー」を押すと、Firebug がブラウザとは別ウィンドウで開きます。


【4】Firebug で行番号12をクリックして、ブレークポイントを設定します。

ajax-90.gif


【5】Firefox のツールバーにある「再読み込み」ボタンをクリックします。

ajax-99.gif


【6】行番号12のブレークポイントでプログラムが一時停止しました。監視にある変数 a、b の値を確認してください。

ajax-91.gif

*行番号12はまだ実行されていないので、変数 c は undefined です。


【7】変数 a の行をマウスで右クリックし、「変数を編集」をクリックします。

ajax-92.gif


【8】変数を編集できるようになったら、値に「3」と入力し「Enterキー」を押して確定してください。

ajax-93.gif


【9】変数 a の値が「3」に変わりました。

ajax-94.gif


【10】再開ボタンをクリックして、プログラムを最後まで実行します。

ajax-95.gif


【11】Firefox の画面をみると、「a + b = 5」になりました。

ajax-96.gif


【12】ブレークポイントを設定して、変数の値をいろいろ変えてみてください。


このように Firebug を使うと、JavaScriptのプログラムを実行中に、変数の値を確認したり、変更することが自由自在にできるのでとても便利です。


スポンサード リンク

スポンサード リンク






Ajax初心者入門講座TOPへ

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。