Webでタブシート
っぽいことをやってみます。
まだベータ版。
<html>
<head>
<script language="javascript">
<!--
function taba() {
document.getElementById('testa').style.display = "block";
document.getElementById('taba').style.backgroundColor = "#999";
document.getElementById('testb').style.display = "none";
document.getElementById('tabb').style.backgroundColor = "#fff";
}
function tabb() {
document.getElementById('testb').style.display = "block";
document.getElementById('tabb').style.backgroundColor = "#999";
document.getElementById('testa').style.display = "none";
document.getElementById('taba').style.backgroundColor = "#fff";
// Mac IEはこうしないと動かない?
// document.getElementById('taba').style.setProperty("background-color","#fff");
}
//-->
</script>
</head>
<body>
<span id="taba" style="border:solid 1px #000; background-color:#999" onclick="javascript:taba()">test_a</span>
<span id="tabb" style="border:solid 1px #000; background-color:#fff" onclick="javascript:tabb()">test_b</span>
<div id="testa" style="border:solid 1px #000; display:block">
test_a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</div>
<div id="testb" style="border:solid 1px #000; display:none">
test_b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
</div>
</body>
</html>
タグ<>が全角になってますのでご注意。
一応、動くには動く。
問題点
1:
音声読み上げソフトでページをよんだときに
先にタブ名が全部読まれちゃう。
2:
javascriptの中身はもうちょっと融通利くように
直したほうがよいです。
ID固定で書いているので。
タブを増やすときとか面倒なんで。
3:
MacIEだけ一部別ロジック。
改良版はまた後日。
[コメント読む(0)]
「Favorito」のメール送信機能
やっつけ仕事っぽく作ってみました。
あんまり出来はよくないかと(笑)
とりあえず使ってみてください。
今回は全部シェルです。
CとかPHPとかは使ってません。
ページのほうは、相変わらずがバグが潜んでいます。
Cookieがちっとも有効になってない。
サーバでセッションファイルが消えてるんじゃないか?
メールは今日初回稼動です。
まずは自分とこにメールが届くかどうか。
[コメント読む(0)]
ホームページメンテナンス画面にAjaxを導入。
簡単に。
本家The Sunday Breezeのトップ画面、最新情報などは
専用のメンテナンスページから更新しています。
その専用メンテナンス画面に
Ajaxを使ってみた。
最新情報の中に、馬名もしくはレース名を入れるときに、
馬名だったら、その馬の詳細情報へ
レース名だったら、そのレースの出走馬情報へ
とリンクをはることが目的。
リンクアドレスに、馬なら馬ID、レースならレースIDを使用しているので、
馬名を入れたら馬IDを、レース名を入れたらレースIDをサーバから取得する、というもの。
まず、
<textarea name="topic"></textarea>
<input type="button" value="馬名" onclick="javascript:h_name=prompt('馬名',''); getIndex_h();">
とすると、テキストエリアの下に「馬名」というボタンができます。
ボタンを押すと、ちっちゃいボックスが出てきて、
馬名の入力を促されます。
馬名を入れて、「OK」ボタンを押すと、getIndex_h()というJavaScriptの関数に飛ぶわけですね。
function getIndex_h() {
if ( window.ActiveXObject ) { // for IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
} else if ( window.XMLHttpRequest ) { // for Firefox, Opera
xmlhttp = new XMLHttpRequest();
}
if (xmlhttp) {
xmlhttp.onreadystatechange = check_h;
xmlhttp.open('GET', '馬ID取得.php?馬名=' + h_name, true);
xmlhttp.send(null);
}
}
function check_h() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.topics.topic.value+='<a href="リンク先' + xmlhttp.responseText + ')">' + h_name + '</a>';
}
}
getIndex_hの中で、馬IDを取得するPHPを呼んでいます。馬名を引数として。
戻り値(xmlhttp.responseText)には馬IDが入るようになってます。
あとは、テキストエリアの最後尾にリンクテキストを追記する、という感じ。
レース名についても同様の手法で簡単にできます。
どちらもID取得.PHPに日本語で引数を渡していますが、
文字コードには注意。うまく動かないことがあります。
Ajaxはそれほど大変なものではないです。
多少のWebの知識があれば、簡単にできます。
[コメント読む(0)]
AjaxならぬAjapを使ってみる。
そもそもAjax(エイジャックス)とは
「Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、
Webページのリロードを伴わずにサーバとXML形式のデータの
やり取りを行なって処理を進めていく対話型Webアプリケーションの実装形態。」
(下記リンクより)
Asynchronous JavaScript + XMLの略だそうです。
これね、はじめてみたときに
すごい画期的な技術だなと思って。
ページ遷移しないのに、内容変えられるんですよ。
んで。
使ってみたいという気持ちはあるものの、
XMLの知識は相変わらずないので、さてどうしよう。
今回導入しようとしているのは、
POGの歴代馬のランキング。
データはもちろんDBで持ってます。
ページリクエストがきたらXMLを生成するか。。。
そこでひらめいた。
「Flashと同じじゃない?」
と。
PHPでテキストをベタではくようにしておき、
FlashのActionScript内からそのPHPを呼び出す。
そうすると、そのPHPはあたかもテキストファイルのように
ActionScript内では扱えるのです。
ActionScriptをJavaScriptに置き換えてみます。
PHPでテキストをベタではくようにしておき、
JavaScript内からそのPHPを呼び出す。
そうすると、そのPHPはあたかもテキストファイルのように
JavaScript内では扱えるのです。
ってなわけで、今回ご紹介するのを
勝手に「Ajap(エイジャップ)」と名づけさせていただきました。
XMLがPHPになった、と。
さて、詳細。
まずはJavaScript部分も含め、呼び出すほう。
----------
<html><head><script><!--
cnt = 0;
function hoge() {
//ブラウザを判定して、どちらかを使います。
xmlhttp = new XMLHttpRequest(); // for not IE
xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); // for IE
if (xmlhttp) {
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', 'hoge.php?cnt=' + cnt, true);
xmlhttp.send(null);
}
}
function check() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("disp").innerHTML = xmlhttp.responseText;
}
}
//--></script></head>
<body><a href="javascript:cnt++;hoge();">count+1</a>
<div id="disp"></div></body></html>
呼び出されるほう(上のソースからだとhoge.php)
----------
<?
$cnt=$HTTP_GET_VARS["cnt"];
$cnt++;
echo $cnt;
?>
とまあこれだけでいいでしょう。
ブラウザでアクセスすると、「count+1」というリンクが現れます。
リンクを押すと、その下に数字が出て、押すたびに増えていきます。
たいしたサンプルじゃないな。
でもまあ、原理はわかっていただけると思うので。
あとはPHPでDB呼び出して、データ拾って、
タグまで書いちゃうと相当楽。
まだ未完成なので、作ったアドレスをお教えすることはできないんですが、
性能的な問題がクリアできるか。
都度サーバへアクセスするわけで、ページ遷移しているのと同じですから。
クリアできればじゃんじゃん使っていこうと目論んでいるところです。
Ajaxとは 【Asynchronous JavaScript + XML】 ─ 意味・解説 : IT用語辞典
[コメント読む(0)]
掲示板を新しくしました(PHPでXMLを使う)
ってなわけで。
メインページの掲示板を新しくしました。
見た目もさることながら、
今回作りも大幅に変えてみたんです。
実は、今までの掲示板。
データはCSV形式で持ってたんですよ。
カンマ区切りってやつですね。
で、致命的な不具合に気づきまして。
「本文中にカンマがあるとちゃんと表示できない」
本文のカンマと区切り文字のカンマの区別が
つけられないわけですね。
なので、本文のカンマ以降の続きの本文は
次のデータ項目と認識されてしまうわけです。
CSV却下。
そんなわけで。新しい掲示板。
データをどう持とうかとあれこれ考えました。
データベースにするか。ファイルにするか。
データベースの場合の案1
馬のデータはMySQLというデータベースに入っています。
なので、掲示板のデータもあわせてMySQLへ。
データベースの場合の案2
PHPバージョン5以降でデフォルトでついてくる
SQLiteという簡易データベースを使用する
まあ掲示板のデータはWebから以外触ることないし、
PHPからすんなり動くならこれもありかと。
データベースの場合の案3
新し物好きなので、最近うわさの「Firebird」を使う。
今後、MySQLのデータも順次Firebirdへ移行。
でもね。
案1:馬のデータとあわせる必要あるの?あんまり負荷もかけたくないし。
案2:文字コードがISO8859-1しか使えない?
案3:なんかそんな元気ないなぁ。
そもそも
たかだか掲示板でデータベース使う必要あるの?
そんな書き込み多いわけじゃないんだし。
データベース案ALL却下。
ファイルか。
ってことで。PHPのマニュアルを読んでいて、こんな記述。
「PHPにはPOSIX拡張正規表現もしくはPerl正規表現から
XML文書の解析に至るまで 非常に便利なテキスト処理の機能があります。
XML文書の解析や操作のために SAXとDOMをサポートしています。
XML文書の変換にはXSLT拡張モジュールを使用することが出来ます。」
XMLか。
PHPマニュアルのXMLパーサ関数の項を見ていたら、
かなり使えそうでしたので、ちょろっと作ってみました。
XMLファイルをPHPの配列へ変換します。
XMLの構造は
<bbsdata>
<ma>おやID(新しいスレッドで増える)</ma>
<mi>こID(返信のときに増える)</mi>
<w_date>書き込み日付</w_date>
<w_mail>メールアドレス</w_mail>
<w_web>Webアドレス</w_web>
<w_title>タイトル</w_title>
<w_name>名前</w_name>
<w_detail>本文</w_detail>
</bbsdata>
な感じで。
//データをべたで変数に読み出して、
$data = implode("",file("XMLファイル名"));
//XMLパーサを作成します。
$p = xml_parser_create();
//大文字への変換はOFF
//(デフォルトだとXMLタグが全部大文字に変換されちゃいます)
xml_parser_set_option($p,XML_OPTION_CASE_FOLDING,0);
//これは何かわかんないけど、ないと動かない
xml_parser_set_option($p,XML_OPTION_SKIP_WHITE,1);
//で、読み出したXMLデータを配列へ
xml_parse_into_struct($p,$data,$vals,$index);
//XMLパーサは以上
xml_parser_free($p);
この時点で、
$vals[$index["ma"][n]]["value"]=(n+1)件目のデータのおやID
$vals[$index["mi"][n]]["value"]=(n+1)件目のデータのこID
ってな感じで。
あとはループとか多用しながら
使い勝手のいいように配列を整理していけば。
$bbsdata[おやID][こID]["w_date"]=日付
$bbsdata[おやID][こID]["w_title"]=タイトル
$bbsdata[おやID][こID]["w_detail"]=本文
みたいにね。
こうなれば、ページの構成は単純で
おやIDの0から最大までループ
|
| こID=0の(新規で書き込まれた)書き込み表示
|
| こIDの1から最大までループ
| (最大が0(返信がない)なら通らない)
| |
| | こID>0の(返信された)書き込みを表示
| |
| |
|
書き込むときは単純に
同じ構造でXMLファイルのケツに追記すればいいだけ。
XMLにしとけば、PHP以外でも何かと使えそうだし。
万が一jspとかservletとか使うようになってもすんなり移行できそうだしね。
なかなか使い勝手がいいので、
今後いろんなページで多用していこうかと思ってます。
リンク集とか。
そうだ。書き忘れ。
PHPのXMLパーサ関数は使える文字コードが限られてます。
(UTF-8とISO-8859-1とUS-ASCII)
けど、うまいことmb_convert_encoding(マルチバイトエンコーディング)関数とか使えば
SHIFT-JISでもEUCでもいけます。
うちは基本的にEUCですが、掲示板データはUTF-8で持ってます。
読み込むときに
$after=mb_convert_encoding($before,"EUC-JP","UTF-8");
書き込むときに
$after=mb_convert_encoding($before,"UTF-8","EUC-JP");
とすればいいだけなので、あまり問題ではないでしょう。
PHPマニュアル(日本語版)
[コメント読む(0)]