カテゴリー: WEB

IE6でSSL通信の場合、xmlHttpRequestのonreadyStateChangeがうまく拾えない場合がある

投稿者：isc_blog

この現象は　IE6(InternetExplorer6)でhttps://～　で発生します。
サイト上から下記Javascriptのような処理を行ったところ
非同期通信でデータを取得し取得が完了したら結果をサブウィンドウに表示する処理なのだが
一度目はデータを読み込みサブウィンドウを開いて表示したものの
2回目はサブウィンドウを開くそぶりもない・・・
JavaScriptにalert()を入れてみたところ
「きたよ！」が出ない・・・

どうやら通信に行っていないようだ
[javascript]
xmlHttpRequest.onreadyStateChange = function() {
// ↓ここにalert
alert(‘きたよ！’);
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
subwin = ("","subwin","width=400,height=370");
subwin.document.open();
subwin.document.write(xmlHttpRequest.responseText);
subwin.document.close();
}
}
[/javascript]
なにが悪いのかな・・・・と調べたところ
どうやらIE6でSSL通信の場合キャッシュを見てしまって通信すら行かないらしい・・・

上記ソースの場合、通信しないとサブウィンドウが開かないので
シレっと何事もないようになってしまうから厄介だ・・・

この場合、手っ取り早いのは
リクエスト送信時にタイムでも付けてしまうこと・・・
[javascript]
var time = (new Date()).getTime();
xmlHttpRequest.open("GET", "/service/AAAA?" + time);
[/javascript]
IE7やFireFoxでは再現しないみたい（IE8以降は試してません）

キーワード
onreadyStateChange キャッシュ ssl サブウィンドウ

2011年5月13日

Twitter発言をjQueryとJSONPで取得して表示してみました

投稿者：isc_blog

先日紹介したＷＥＢサービスで使用されている「jsonp」で取得と表示を簡単に出来ないかな？と思い「Twitter」のＡＰＩを利用してデータを取得しJSONPで表示するものを書きました。

※ＪＳＯＮＰについては→JSONPとは

[html]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JSONPでTwitter発言表示してみました</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.0");</script>
<script type="text/javascript">
function dispTweet() {
// 一度クリアにする
$("#recent").html("");
// ユーザーアカウントのデフォルト値
var screenName = "isc_web";
// デフォルト表示件数
var count = 20;
if ($("#sname").val() != "") {
screenName = $("#sname").val();
}
if ($("#count").val() != "" && !isNaN($("#count").val())) {
count = $("#count").val();
}
var url="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" +
screenName + "&count=" + count + "&callback=?";
$.getJSON(url , function(data){
$.each(data,function(i){
// 取得できるデータは
// http://dev.twitter.com/doc/get/statuses/user_timeline
// にて確認してください。
$("#recent").append("<li>"+this.text+"</li>"); // とりあえず記事本文のみ出力
});
});
alert("OK");
}
</script>
</head>
<body>
<strong>TwitterのつぶやきをJSONPで取得表示する</strong><br />
表示したいアカウント：<input type="text" id="sname" value=""> 
表示件数：<input type="text" id="count" value="">※デフォルト20件<br />
<input type="button" value="ツイート表示" onclick="dispTweet()">
<div id="recent"></ul>
</body>
</html>
[/html]
サンプルはこちら

即できました。
アカウントと表示件数を変更できるようにしてみました。
ちょいちょい改造すれば普通に見られる感じになります。
※あくまでも基本だけでスミマセン。

参考資料
無題メモランダム：jQueryでJSONP

2011年5月11日

RubyでCGI作ってみた

投稿者：isc_blog

PythonでCGI作ってみたのRuby版です。

Python版で「とっても稚拙で申し訳ない」といいつつ
稚拙なものを移植しただけで申し訳ないですが全く同じ挙動のものです。

下記を「HelloRuby.cgi」というファイル名で保存し
ウェブサーバー上にアップロード。
属性変更して実行権を与えてから・・・
※パーミッションを755にします。
webブラウザでアクセスします。

[ruby]
#!/usr/local/bin/ruby
#ヘッダ出力
print "Content-type: text/html\n\n"

#CGI 読み込み
require "cgi"
cgi = CGI.new

#リクエスト内容取得
yourName = cgi["yourName"]

#中身出力
print <<EOM
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
var yourName = "#{yourName}";
function init() {
if (yourName != "") {
alert("YOUR NAME IS " + yourName);
}
}
</script>
</head>
<body onload="init()">
<form action="HelloRuby.cgi">
<input type="text" name="yourName" value="" />
<p>
<input type="submit" />
<p>
</form>
</body>
</html>
EOM
[/ruby]

コードはこれだけ
実行結果はこんな感じ
HelloRuby.cgi実行結果
コード的には
１．「yourName」っていうパラメータがリクエストに存在したら
２．Javascriptでアラート表示
３．送信フォーム表示
・・・・これだけです。
※この説明も「PythonでCGI作ってみた」とおんなじですみません。

Pythonもそうなんだけどリクエストの取扱い方がPerlより簡単でいいなぁ！

「参考になったサイト」
Rubyはじめました：RubyでCGI.フォームデータを受けとる
 cgi – Rubyリファレンスマニュアル

2011年5月8日

PythonでCGI作ってみた

投稿者：isc_blog

とっても稚拙で申し訳ないですが
先日覚えだしだ「Python」でCGIを組んでみました。

下記を「HelloPython.cgi」というファイル名で保存し
ウェブサーバー上にアップロード。
属性変更して実行権を与えてから・・・
※パーミッションを755にします。

webブラウザでアクセスします。

#!/usr/local/bin/python
# -*- coding:utf-8 -*-
import cgi
print “Content-type: text/html”
print
form = cgi.FieldStorage()yourName = form.getvalue(‘yourName’, ”)

print “””
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html; charset=utf-8″>
<script type=’text/javascript’>
var yourName = ‘%s’;
function init() {
if (yourName != ”) {
alert(‘YOUR NAME IS ‘ + yourName);
}
}
</script>
</head>
<body onload=’init()’>
<form action=’HelloPython.cgi’>
<input type=’text’ name=’yourName’ value=” />
<p>
<input type=’submit’ />
<p>
</form>
</body>
</html>””” %(yourName)

コードはこれだけ

実行結果はこんな感じ
HelloPython.cgi実行結果

コード的には
１．「yourName」っていうパラメータがリクエストに存在したら
２．Javascriptでアラート表示
３．送信フォーム表示
・・・・これだけです。

とりあえず、動く！って確認だけ。
日本語入れると「数値文字参照」になってしまいます。
それは↓ここらへんを参考に・・・・
文字参照や実体参照を通常の文字に戻す【Python】
※↑head に文字コード指定したら直りました・・・横着してはいけませんね　2011/05/08

しかし、最近ＣＧＩはＰｅｒｌやってなくてＰＨＰばっかりだったから
属性変更してパーミッション７５５に変更とかすっかり忘れてたなぁ～
この辺がWindows野郎って感じですね・・・

2011年5月6日

PHPでMySQLのレコードに画像情報を保存するやり方

投稿者：isc_blog

PHPでMySQLへ画像格納のアップロードやり方
— テーブルは下記SQLで作成
[sql]
CREATE TABLE `img_data` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`img_bin` BLOB NOT NULL,
`mime` VARCHAR(64) NOT NULL
) ENGINE=MYISAM ;
[/sql]
格納側ソースこちら
[image_upload.php]で保存
↓↓
[php]
<?php
$host=”localhost”;
$user=”●●●●”;
$pass=”■■■■”;
$db_name=”▼▼▼▼”;
?>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>画像DB格納</title>
</head>
[/php]
ファイルアップロード
[php]
<form method=”POST” enctype=”multipart/form-data” action=”image_upload.php”>
<input type=”hidden” name=”MAX_FILE_SIZE” value=”3145728″><!–BLOB型の限界–>
画像ファイル選択：<input size=”30″ type=”file” name=”upfile”>
<input type=”submit” name=”submit” value=”送信”>
</form>
<?php
if($_POST["submit"]!=”"){ // 送信された場合のみ
if($_FILES["upfile"]["tmp_name"]==”none”){
print(“ファイルのアップロードができませんでした。\n”);
exit;
}
$fp=fopen($_FILES["upfile"]["tmp_name"], “rb”);
if(!$fp){
print(“アップロードしたファイルを開けませんでした”);
exit;
}
$imgdat=fread($fp, filesize($_FILES["upfile"]["tmp_name"]));
fclose($fp);
print(“ファイルサイズ：$_FILES["upfile"]["size"]\n”);
$len=strlen($imgdat);
print(“データ長=$len”);
$data=pathinfo($_FILES["upfile"]["name"]);
$ext=$data[‘extension’]; //拡張子
// 拡張子判定
if($ext==”jpg” || $ext==”jpeg”){
$mime=”image/jpeg”;
} else if($ext==”gif”){
$mime=”image/gif”;
} else {
print(“画像ファイルのみアップロード可能です。”);
exit;
}
print(“MIME-TYPE:”.$mime.”");
$imgdat=addslashes($imgdat);
$con=mysql_connect($host, $user, $pass);
if(!$con){
print(“MySQLへの接続に失敗しました”);
exit;
}
if(!mysql_select_db($db_name)){
print(“データベースへの接続に失敗しました”);
exit;
}
$sql=”INSERT INTO img_data(img_bin, mime) values(‘$imgdat’, ‘$mime’)”;
$result=mysql_query($sql);
if(!$result){
print(“SQLの実行に失敗しました”);
print(mysql_errno().”: “.mysql_error().”");
exit;
}
$sql=”select max(id) from img_data “;
$result=mysql_query($sql);
if(!$result){
print(“SQLの実行に失敗しました”);
print(mysql_errno().”: “.mysql_error().”");
exit;
}
$row=mysql_fetch_row($result);
$current_id=$row[0];
mysql_close($con);
unlink($_FILES["upfile"]["tmp_name"]);
}
?>
<div>
登録画像ＩＤ：<?php echo $current_id; ?>
<img src=”view.php?id=<?php echo $current_id?>” />
</div>
</BODY>
</HTML>
[/php]
表示側ソースこちら
[view.php]で保存
↓↓
[php]
<?php
$host=”localhost”;
$user=”●●●●”;
$pass=”■■■■”;
$db_name=”▼▼▼▼”;
$id=intval($_GET[‘id’]);
$con=mysql_connect($host, $user, $pass);
if(!$con){
print(“MySQLへの接続に失敗しました”);
exit;
}
if(!mysql_select_db($db_name)){
print(“データベースへの接続に失敗しました”);
exit;
}
$sql=”select img_bin from img_data where id=$id”;
$result=mysql_query($sql);
if(!$result){
print(“SQLの実行に失敗しました
“);
print(mysql_errno().”: “.mysql_error().”
“);
exit;
}
if(mysql_num_rows($result)==0){
$sql=”select img_bin, mime from img_data where id=1″;
$result=mysql_query($sql);
if(!$result){
print(“SQLの実行に失敗しました
“);
print(mysql_errno().”: “.mysql_error().”
“);
exit;
}
}
$row=mysql_fetch_row($result);
header(“Content-Type: “.$mime);
echo $row[0];
mysql_close($con);
?>
[/php]
テストサイトを作って・・・・
と思いましたが、変な画像を差し込まれると厳しいものがあるので自粛しました。
コード中のセキュリティに関する配慮は各自お願いします。

2011年5月4日

Webサービスで「都道府県→路線→駅」情報を簡単に表示

投稿者：isc_blog

素敵なWebサービスを発見しました！
HeartRails Express | 路線／駅名／最寄駅データサービス
こちらのWeb APIを使うだけで「エリア/都道府県/路線/駅/最寄駅」の情報が簡単に取り扱えてしまいます。
しかも、商用・非商用問わず無料で利用出来ます。

サンプル↓

ソースはこれだけ・・・

[html]
<html><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>都道府県→路線→駅のコンボが簡単に出来るWebサービス</title>
<script type=”text/javascript” src=”http://express.heartrails.com/api/express.js”></script>
</head>
<body onload=”HRELoadPrefecture(‘prefecture’, ‘line’, ‘station’);”>
都道府県を選択すると・・・<select id=”prefecture” name=”prefecture” onchange=”HREOnChangePrefecture();”>
<option value=”都道府県を選択してください”>都道府県を選択してください</option></select><br />
路線が自動的に入れ替わり・・・<select id=”line” name=”line” onchange=”HREOnChangeLine();”><option value=”路線を選択してください”>路線を選択してください</option></select><br />
駅もその路線の駅一覧に入れ替わります・・・<select id=”station” name=”station”><option value=”駅を選択してください”>駅を選択してください</option></select>
<br />
<a href=”http://express.heartrails.com/”>Heart Rails Express</a>| 路線／駅名／最寄駅データサービスを利用しました。
<br />
※「都道府県名」「路線名」「駅名」の連結コンボボックスをそのまま利用しただけです。
</body>
[/html]
不動産サイトとかナビ系サイトとかに使えそうです！