最近気になる単語「Ajax（えいじゃっくす）」
ネットでみたとあるブログでは・・・
「AjaxはAsynchronous JavaScript + XMLの略で、具体的にはJavaScript と XmlHttpRequest によって、画面遷移のないスムーズなWebのインターフェースを実現することができます。この組み合わせの定義をAjaxと呼びます。」
とかかれてました。
Google Map等の登場で注目されてるあたらしい単語です。
要は、ユーザーフレンドリーなインターフェースを作るためのもの。
いろいろ新しい言葉でてくるよ。まったく・・・
話題の「Ajax」でサンプル作ってみた。
といっても「Web Designing」のサンプルをちぃっと変えただけです。
■サンプル
Ajaxでテーブルのみ入れ替え
これを使えばECサイトで商品ごとの詳細をページ遷移なしにロールオーバーで表示させたり、いろいろ使えそう。
でも、Javascriptを使ってるだけに、ブラウザの種類やWinかMacで動作したりしなかったりとすべてに対応するのは大変そうです。最近のブラウザは大抵いけますが・・・
また、日本語を使う際に文字化け対策も必要みたい。ちなみに上のサンプルの文字コードは、「utf-8」です。「Shift_JIS」では文字化けします。
まずは簡単な小技から実際に仕事でも使っていければなぁ。
最近、クライアントさんのサイトのBBSが国内や海外からのスパム被害に遭い、何度削除したりhtaccessでIPを弾いてもきりがない状態に陥ってました。そこで比較的簡単にできるスパム対策を調べてみました。
基本的なBBSスパム対策として、まずBBSのアドレスを変えてみる。（しばらくは元のアドレスも残しておいた方がいいと思う。こっちを身代わりにする）
それでも、検索エンジンのロボットがくるところにはBBSスパムもやってくるので、<a>タグによる普通のリンクではなく、Javascriptを利用したリンクを施してやりました。
方法は・・・
先日久々にサイト制作の技術的な参考書を買ってみた。
その名も「入門Ajax」。
Javascriptでは有名な高橋 登史朗さんが書かれた本だ。僕がWebを遊びでやってた頃に何度か、Javascriptのことで質問したことがあるが、おバカな質問にも親切に答えてくれた。今ではAll About JapanのJavascript解説なんかもやってたと思う。
そんな「入門Ajax」を読んでまず試すのは、「GoogleMap」
早速K1ファクトリーにも設置してみた。（浜松はここだ！）
よく関西の知り合いに「浜松ってどこ？」「何県？」と聞かれるので、
GoogleMapでやってみました。ここじゃ！分かったか！！
※ちなみに僕のウチではありません。
この「入門Ajax」によると、GoogleMapって個人・商用サイトを問わず、無料で使うことができるらしい。（１日５万ページビュー以下のサイトとかちょっとした制限はあるが）
だから、会社までのアクセスマップでもタダで使えるのだ！なんて太っ腹。
そして、GPS携帯なんかを使ってGoogleMap上にポインタを付けたり、Flashでもないのにアニメーションをつけたりできるらしい・・・
う〜ん、改めてGoogleMapって凄いね。Ajaxおもろいかも。
久々のPHP。
ブログのRSSを普通のサイトに読み込むため、PHPを使う事に。
最初は簡単に考えてたんだけど、ちょっと調べると結構ややこしかったりする。
基本的には、XMLパーサを使ってウンタラカンタラ・・・という事らしいのだが、
これにはバグがあったりで、あらゆる状況には対処できない可能性が・・・
以前は意地でも自力でやろうとしてたんだが、今となっては遠い昔。
楽したいが為、ネットでもう少し調べると・・・
Web Designing６月号の「Ajaxハジメマシタ」に使えそうなAjaxサンプルが載っていたので、K1ファクトリーブログで試してみました。
このブログでもAjaxやRSSは何度か取り上げてきました。前回はPHPでRSSを読み込むというものでした。PHPで読み込むのもいいんですが、静的なHTMLに今はやりのAjaxで読み込ませるっているのも、これからいろんな場面で使えるかな・・・。
例えば、ブログではない静的なページにとあるサイトのRSSを読み込ませ、ちょっとしたポータルサイトみたいなのがこれで出来てしまいます。
また、最近のサイト制作で必ずトピックスなどクライアントさん自身で手軽に更新できるブログをやりたいってことになったりすると、ブログではない普通のトップページとかにそのブログのRSSを更新情報として載せるってこともできますしね。
そんなわけで、ちょっとやってみたんですが・・・
同一サーバー内にあるRSSの取得は、サンプルデータそのままですんなりと出来たんですが、外部のRSS、例えば良くチェックしているCNET JapanのRSSは結構手強い物となりました。
結果的には、出来ました。（ブログトップの右上部分です。）
作業詳細は次回にて。
前回のつづきです。
詳しくはWeb Designing６月号を見てもらえれば大体は分かるんですが、
サンプルデータをダウンロードしていざトライ。
しくみとしては、表示したいHTMLにJavascriptでRSSを読み込むんですが、外部のサーバのRSSを読み込むというのは、Javascriptだけではどうも無理らしいので（同一サーバなら出来るそうです。）CGIとかPHPとかを利用することになるそうです。今回のサンプルではCGI（Perl）とRubyのファイルがダウンロードしたデータについておりました。
別サーバのデータベースからデータを取り出し、それを表示させる方法。（PHP）
※別サーバにFTPでアクセスできるのが前提です。
iframe使えば簡単なんだけど…使えない場合、使いたくない場合。
あんまりこういうシチュエーションはないかと思うけど…
別サーバのDBからデータを取得。
SELECT文とか使って取得したデータを、
echo文で表示させます。（A.php）
当サーバの「B.php」
readfile関数にて、A.phpを読み込み表示。
<?php
header("Content-type:text/html; charset=shift_jis");
$url = "別サーバのA.php";
readfile($url);
?>
PHP良く知ってる人ならもっと効率的な方法あるんだろうけど…
PHPファイルでなく、普通のHTMLにDBの情報を載せたいので、
AJAXを使う・・・prototype.jsを読み込んだ上で、
function loadHTMLFile(fName)
{
new Ajax.Request(fName, { method: "get", onComplete: displayData });
}
function displayData(httpObj)
{
$("表示させたい場所のdivタグのid名").innerHTML = httpObj.responseText;
}
// PHPファイルの呼び出し
function price(){ ・・・priceと言う名のユーザ定義関数
loadHTMLFile('B.php');
}
IFRAMEタグを使えば簡単なんだろうけど、なんだかレイアウト制御が面倒かも…
この方法でも、AJAXでソースは表示されないから、SEOを求める場面には使えない。
※PHP5.2以上から外部ドメインのincludeができないんですね。
デフォルトで「allow_url_include」が「OFF」なんだそうです。（セキュリティ対策らしい）
だから、B.phpでは、「include」ではなく、「readfile」を使ってます。
