header image

Ryuzeeの他サイト

mixi Twitter Twitter

Categories

Archives

携帯対応

QRコード

RING

人気ブログランキング



新着記事

本買った
2007/06/22 23:58:15 Ajax/Web2.0, PHP, 書評 none Comments
add Hatena Bookmark Tags: , ,

なんとなくAjaxを色々やってみよーということで、本買った。
PHPによるJavaScriptを書かないAjax　九天社　ISBN978-4-86167-175-3
とりあえず読み応えありそうなので、土日にゆっくり読むことにする。

JAVAScriptを(ほとんど)書かないでAjax
2007/06/18 01:18:23 Ajax/Web2.0, PHP none Comments
add Hatena Bookmark Tags: , ,

それぞれのブラウザ毎に異なる仕様を吸収するソースを書くのも面倒だし、かといってprototype.jsとかも複雑そうだし、やっぱなれたPHPでAjaxだよな～ということでxajaxというライブラリを使ってみた。

以下はライブドアの天気予報Webサービスに接続して画面に表示する例だが、極めてシンプルであり、ソース中にはJAVAスクリプトのコードはほぼ出現しない。
動作させると、プルダウンの切り替えによって画面を切り替えるようになっている。

<?php
mb_language("Japanese");
mb_internal_encoding("UTF-8");
mb_http_output("UTF-8");

require_once("./xajax.inc.php");
require_once("XML/Unserializer.php");
require_once("HTTP/Request.php");

$xajax = new xajax();
$xajax->registerFunction("weather_search");

function weather_search($string)
{
    $string = htmlspecialchars($string);
    $url = "http://weather.livedoor.com/forecast/webservice/rest/v1?day=today&city=".$string;
    $option = array(
        "timeout" => "10",
        "allowRedirects" => true,
        "maxRedirects" => 3,
    );

    $http = &new HTTP_Request($url, $option);
    $http->addHeader('User-Agent', 'Ryuzee.com test scripts');
    $http->sendRequest();

    if ($http->getResponseCode() != 200 && $http->getResponseCode() != 304){
        return PEAR::raiseError('Error HTTP Status ' . $http->getResponseCode());
    }
    $result = $http->getResponseBody();

    $xml = &new XML_Unserializer();
    $xml->setOption(XML_UNSERIALIZER_OPTION_ATTRIBUTES_PARSE, true);
    $xml->unserialize($result, false);
    $xml_result = $xml->getUnserializedData();

    $objResponse = new xajaxResponse();
    $objResponse->addAssign("result","innerHTML", nl2br(print_r($xml_result, true)));

    return $objResponse;
}

$xajax->processRequests();

?>
<html>

<head>
<title>xajax sample</title>
<?php $xajax->printJavascript(); ?>
</head>
<body>
<select name="point" onChange="if(this.value != 0){ xajax_weather_search(this.value); }">
        <option value="0">---Please select---</option>
        <option value="4">Sapporo</option>
        <option value="15">Hakodate</option>
        <option value="31">Fukushima</option>
        <option value="50">Niigata</option>
        <option value="63">Tokyo</option>
        <option value="67">Chiba</option>
        <option value="79">Kyoto</option>
        <option value="81">Osaka</option>
</select>

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

JAVAScriptのメモ
2007/04/22 01:30:04 Ajax/Web2.0, セキュリティ none Comments
add Hatena Bookmark Tags: , , ,

こんなことをして嵌った。

  • 開発していたのは、ローカルファイルシステムで
  • JAVAスクリプトで他のサイトをwindow.openを呼び出して
  • 呼び出したウィンドウを操作

で、これは何故か失敗します。ちょっと以下の通り試してみてください。

例えば、デスクトップにparent.htmlという名前で以下のようなファイルを作ります。

<html>
<head>
<script>
function openWin() {
    hWin = window.open("http://www.google.co.jp", "child");
    alert("aaa"); //本来読み込みを待つべきですが、とりあえずalertで代用
    hWin.document.forms[0].q.value = "aaaa";
}
</script>
</head>
<body>
<input type="button"
onClick="javascript:openWin();" value="子ウィンドウ操作"/>
</body>
</html>

これを実行すると、結果はこうなります。
JAVAスクリプトセキュリティの警告

次にファイルシステム同士で実行してみます。(googleはローカルに配置できないので、
同じフォーム要素を持ったファイルを作ってください)
呼び出し元と呼び出し先をファイルシステム同士に配置した場合、これはうまくいきます。

さらに、今度は呼び出し元を違うサーバに配置し、呼び出し先をローカルのIIS以下に配置してみます。
これはうまくいきません。

まとめると

呼び出し元 呼び出し先 項目操作
できるか
ファイルシステム ファイルシステム 成功
ファイルシステム 内部サイト(http://localhost) 失敗
ファイルシステム 外部サイト 失敗
内部サイト(http://localhost) ファイルシステム 失敗
内部サイト(http://localhost) 内部サイト(http://localhost) 成功
内部サイト(http://localhost) 外部サイト(http://192.168.1.54) 失敗
外部サイト(http://192.168.1.54) ファイルシステム 失敗
外部サイト(http://192.168.1.54) 内部サイト(http://localhost) 失敗
外部サイト(http://192.168.1.54) 外部サイト(http://192.168.1.54) 成功

結論としては、

  • Window.openはどのサイトでも開けるが、
  • 画面項目の操作については、Window.openを呼び出したページと、
    Window.openによって呼び出されたページのドメインが同一である必要がある

ということのようだ。なるほどねぇ。

入力フィールドにツールチップヒントを出す
2007/01/08 00:00:00 Ajax/Web2.0 none Comments
add Hatena Bookmark Tags: ,

JAVAスクリプトとCSSを使うと簡単に対応できる。

http://www.dhtmlgoodies.com/index.html?whichScript=form-field-tooltipにアクセスしてzipファイルをダウンロードする。

解凍すると、js、css、imagesディレクトリがあるので、そのままの構成でサーバにアップする。

後は、ツールチップヒントを出したい画面に以下のような記述を挿入する。

<head>部

<link rel="stylesheet" href="/css/form-field-tooltip.css"
　　　　　　　　　　　　　　　　　　　　　　media="screen" type="text/css">
<script type="text/javascript" src="/js/rounded-corners.js"></script>
<script type="text/javascript" src="/js/form-field-tooltip.js"></script>

<body>部の最下部

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>

ツールチップを出したい箇所

<input type="text" id="hoge" name="hoge"
tooltipText="全角カナで入力して下さい"/>

以上で終了だ。
特に複雑な入力を求めるものやいつも間違えてしまうような画面に適用すると良いだろう。

付属のサンプルを表示した例が以下である。FirstNameの右横にツールチップが表示されている。

form_field_tooltip.png

リンク先をプレビューする
2007/01/07 00:00:00 Ajax/Web2.0 none Comments
add Hatena Bookmark Tags: ,

Web2.0時代は色々なAPIが無償で用意されているから使いがいがあって楽しい。

今日採用したのは、Snapというサービス。ハイパーリンクのhoverイベントに反応して、リンク先のサムネイルを表示してくれる、という優れものである。

サイトURLはこちら：http://www.snap.com/about/spa1A.php

ちなみに、導入は非常に簡単で、上記サイトにアクセスしてサインアップし、生成されたJAVAスクリプトをページに挿入するのみである。（以下は適宜改行が入っている）

<script id="snap_preview_anywhere" src="http://spa.snap.com/snap_preview_anywhere.js?ap=0 &amp;key=SAMPLE_KEY&amp;sb=0&amp;domain=www.example.com" type="text/javascript"></script>

日本では、simpleapiなどのAPIが無償提供されているが、海外にも色々あるようだ。

自分のサイトがちょっとした工夫でにぎやか（微妙にうざいかも汗）になるので、どんどん探してみよう。

 

add to hatena hatena.comment (0) add to del.icio.us (0) add to livedoor.clip (0) add to Yahoo!Bookmark (0) Total: 0