header image

Ryuzeeの他サイト

mixi Twitter Twitter

Categories

Archives

携帯対応

QRコード

RING

人気ブログランキング

新着記事

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

なんとなくAjaxを色々やってみよーということで、本買った。

PHPによるJavaScriptを書かないAjax

著者／訳者：佐久嶋 ひろみ

出版社：九天社( 2007-05 )

定価：￥ 3,150

単行本 ( 473 ページ )

ISBN-10 : 4861671752

ISBN-13 : 9784861671753

とりあえず読み応えありそうなので、土日にゆっくり読むことにする。

JAVAScriptを(ほとんど)書かないでAjax add Hatena Bookmark
2007/06/18 01:18:23 Ajax/Web2.0, PHP none Comments 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のメモ add Hatena Bookmark
2007/04/22 01:30:04 Ajax/Web2.0, セキュリティ none Comments 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によって呼び出されたページのドメインが同一である必要がある

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

入力フィールドにツールチップヒントを出す add Hatena Bookmark
2007/01/08 00:00:00 Ajax/Web2.0 none Comments 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

リンク先をプレビューする add Hatena Bookmark
2007/01/07 00:00:00 Ajax/Web2.0 none Comments 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 Hatena Bookmark
2006/02/11 09:20:02 Ajax/Web2.0, 日記 none Comments

ビジネスブログの定義は以下の通りだそうな。

* 運営者が明確であること。
* 企業が運営していること。
* 会社概要のWebサイトへのリンクがあること。
* メールまたはメールフォームでの問い合わせ先があること。
* RSSを配信していること。
* コメント追加・Trackback追加が出来ること。

なるほどなるほど。上４つはビジネスであることで、下２つは
ブログであることを示している。
となるとブログを企業が採用する理由は究極的には以下に集約できるのではないか。

* 更新が楽（運用コストが削減できる）
* SEO対策が出来る

そもそも論だが、現在のWebサイトにおける集客はかなりの割合を検索エンジンに頼っている。
ちなみに俺のサイトも7割以上は検索サイト経由だ。

検索サイトに集客を頼る、ということは、特定のキーワードで自社サイトが上位の結果として
出てくるようにしなければならない。上位に出すためには、外部間のリンクの多さや
更新頻度の多さが非常に重要となる。
ブログを使うと訪問者自身が勝手にトラックバックやコメントを追加し、外部との連携を
強化していってくれるわけで、訪問者に訴えかけたい内容が、共感を得れば得るほど、
また、他との差をアピールできればできるほど、自動的に大勢に広がっていく、
という効果が見込める。

そういう意味では、他との差別化をしにくい金融業界や小売業界においては
ビジネスブログが高い効果を上げることは難しいだろう。

てなことを色々と調べているのだが、俺はシステム屋なので、どう使うかよりも
どうやって作るかにより興味があったりする。
ビジネスブログで言えば、俺が見る限り、MovableTypeで決まり。
よくよく詳しく見るとBlogソフト兼軽量版CMSといったカンジだが内容秀逸。
なんか他に良いのあったら教えてくれ。

Ajaxを仕事で使いたい add Hatena Bookmark
2005/11/27 21:50:03 Ajax/Web2.0, 日記 none Comments

Ajax。ほっとなキーワードである。

仕事で使いたいのだが、所謂コーポレートサイトを作るのが仕事な俺には、そんなアプリを必要としているケースは殆ど無いわけである。なんせ作るとしたらお問い合わせフォームとか資料請求とか、せいぜいセミナーの検索と申し込みとかだからな～。もう依頼を受けたタイミングで実装まで見えてしまうような世界に住んでいる訳だ。これじゃ技術力がどんどん衰退するよなぁ、と危惧しちょるわけです。

そんな中色々探していたら見つけたのが、
http://www.bindows.net/
これは良い。当分遊べる。

あー、それにしても実験的に新しい技術を使える仕事もたまにはしたいもんだ。金融機関相手だと枯れていないとどうしようもないから、つまらん。

 

日記 PHP オープンソース インストールマニアックス IIS Trac MySQL Perl Linux Agile・生産性向上 wordpress フリーソフト 自宅サーバ 書評 ブックマーク phpMyFaq TraM Plugin 早起き Delphi apache CakePHP Firefox Ruby eclipse セキュリティ プラグイン アジャイル mojavi Subversion Ajax/Web2.0 SQLServer Zope サーバ フレームワーク phpBB 仮想化 PostgreSQL OpenVZ scuttle CMS 文字化け 自宅 翻訳・日本語化 ApacheDS LDAP Excel 生産性向上 CodeIgniter XAMPP hacks taskfreak 修正 言語ファイル Ajax SBM ダウンロード HTML::FillInForm mod_security 情報共有


ads

読まなきゃモグリ

Recent Posts

最近のコメント

あわせて読みたいブログパーツ