Web システムのツボ

【AS3】 addEventListenerに引数を渡す

複数のオブジェクトにイベントを追加する場合、イベント発生時の処理で
どのオブジェクトか識別したい場合があります。

例えば、多数あるボタンにクリックイベントを纏めて登録する場合、

【一括でイベントを登録するサンプル
// ボタン格納配列
var btn_array:Array = new Array(btn1_mc, btn2_mc, btn3_mc, ...);

for(var i:int=0; i<btn_array.length; i++){
    // マウスイベント登録
    btn_array[i].addEventListener(MouseEvent.CLICK, onMouseClickHandler);
}

/**
 * マウスイベント
 */
function onMouseClickHandler(e:MouseEvent):void
{
    var btn_mc:MovieClip = MovieClip(e.target);
    // "btn_mc"って、btn_array配列のどのボタンが押された?
}

登録イベント発生時に、どのボタン押されたのか判別できません。
nameプロパティで出来なくはないですが、出来れば配列で回したいですよね。

この場合は、ムービークリップに対してイベントを張っているので、
予め識別できるidなどプロパティを追加しておけば楽に判別できます。

【ムービークリップに識別idを追加するサンプル
for(var i:int=0; i<btn_array.length; i++){
    // 識別id追加
    btn_array[i]._id = i;
    // マウスイベント登録
    btn_array[i].addEventListener(MouseEvent.CLICK, onMouseClickHandler);
}

/**
 * マウスイベント
 */
function onMouseClickHandler(e:MouseEvent):void
{
    // btn_array[e.target._id] が押されました!
}


というように、予め識別できるidなどを追加しておけば判別出来ます。

ただ、全てこのような形で出来るわけではなく、例えば画像読み込みに使用するloaderには、
プロパティを追加できません。

【プロパティを追加できないサンプル
// 画像ファイル名格納配列
var img_array:Array = new Array('img1.jpg', 'img2.jpg', 'img3.jpg', ...);

for(var i:int=0; i<img_array.length; i++){
    var myLoader:Loader = new Loader();
    myLoader._id = i;    // プロパティを追加できない、※エラー
    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler );
    // 読み込み開始
    myLoader.load(new URLRequest(img_array[i]));
}

/**
 * 読み込み完了イベント
 */
function onCompleteHandler(e:Event):void
{
    // どの画像が読み込み完了した?
}


そこで、loaderなどのイベント発生時に引数を渡す方法をご紹介します。

そもそもaddEventListenerの構文は、addEventListener(イベント名、リスナー関数);
となっています。
一番簡単な方法は、このリスナー関数にループで使用しているカウンタ(i)を渡してあげれば
済む話なのですが、リスナー関数の引数はリファレンスにも書かれている通り、

この関数は、次の例のように、Event オブジェクトを唯一のパラメータとして受け取り、
何も返さないものである必要があります。
function(evt:Event):void
引用:ActionScript 3.0 コンポーネントリファレンスガイド
http://livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/flash/events/EventDispatcher.html

となっています。つまり、

/**
 * リスナー関数
 */
function(e:Event):void
{
    
}

という形でないといけないのです。これではループカウンタを渡すことが出来ません。
そこで、リスナー関数の構文を守り、かつループカウンタを渡す方法はこのようになります。

【AddEventListenerに引数を渡すサンプル
for(var i:int=0; i<img_array.length; i++){
    var myLoader:Loader = new Loader();
    myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler(i));
    
    // 読み込み開始
    myLoader.load(new URLRequest(img_array[i]));
}

/**
   * 読み込み完了イベント
   */
function onCompleteHandler(_num:int):Function
{
    // img_array[_num] 画像が読み込み完了しました!
    
    return function(e:Event):void;
}



パラメータを受け取る関数(onCompleteHandler)を間に挟み、且つ構文を守る為
Event型を唯一の引数とした戻り値なしの関数をリターンしてあげれば完了です。

(tsubasa)
 
システムニュース

【フィッシングサイト】ドメイン利用料金の架空請求にご注意ください

弊社ではサイト制作をワンストップでおこなっており、その業務のひとつとしてお客様のドメイン管理をしているのですが、先日、ドメイン管理者に以下のようなメールが届きました。

件名:○○○○○○○○.com Registration
送信者:Registration Expiring <reginastauffer@domainregistservices.com>
(本文は以下の画像)

domainregistratMail.png
※「ぼかし」の箇所には弊社で利用しているドメイン名が入っています

一見、「ドメイン利用期限切れのお知らせ」メールのようですが・・・
メールの送信者はうちで利用している事業者ではなく"domainregistservices.com"というところでした。
(※メール送信者は簡単に偽装できるので当てになりません)

メールの本文には「支払いサイトへのリンク」があり、"domainregistrat.com"という知らないサイトへリンクが貼られていました。
実際、リンク先にいってみると(※メール中のリンクをむやみにクリックしないでください)、以下のようなページで下部はクレジットカード番号を入力するフォームになっていました。

もちろん、弊社で利用している事業者ではないのでカード番号は入力しませんでしたが、事情に詳しくない担当者だったら間違って入れてしまうかもしれません。


domainHide.png
※画像はイメージです

ドメインの登録情報はWhoisなどを利用すると簡単に取得できるので、架空請求メールは誰でも簡単に作ることができます。
ドメインの期間更新をおこなうときは"本当に自分が利用している事業者かどうか"しっかり確認するようにしましょう。

(teruhisa)

ツール紹介

PCを快適に使う為に

パソコンは、環境やスペック、使用しているソフトウェアの数によって変わってきますが、
使い続けることでだんだんと遅くなってしまいます。
そこで、PCを快適に使い続ける為の方法をご紹介します。

■デフラグ
Windowsに標準装備されている機能で、Windowsを使っていれば誰でも行うことが出来ます。
もしPCが遅いと感じた場合は、デフラグを行ってみてください。

・デフラグとは・・
「デフラグメント(非断片化)」の略で、日頃使っているデータの書き込み・削除を繰り返していくうちに、
HDD上のデータの位置が蜂の巣のように穴だらけの状態になっていきます。
そこで、データの位置を並べ替えて整理し、データへのアクセスを効率よくすることです。

・デフラグの方法

1.[スタート]ボタンをクリックし、[すべてのプログラム]->[アクセサリ]->[システムツール]->
[ディスク デフラグ]をクリックします。

20101111_1855jpg.jpg

2.デフラグツールウィンドウが立ち上がるので、分析をしたい場合は「ディスクの分析」をクリック、
デフラグを実行する場合は「ディスクの最適化」を選択します。

20101111_1919.jpg

これだけです。すごく簡単ですね。
ただ、気をつけなければならない点も幾つかあります。

・デフラグには時間が掛かります。
 →HDDの領域を整理するため、HDD容量・データ使用量によって時間が掛かります。
 
・PCに負荷が掛かる為、他の作業を行っていないときに実行する。
 →データの整理を行うので、出来るだけ常駐アプリケーションを切るようにしましょう。

・デフラグ中に電源を落とさないようにする。
 →これはデフラグに限らず、全てにおいて当てはまりますね。HDDの寿命を縮めるのでやめましょう。

時間が掛かり途中で止めたい場合は、「一時停止」や「停止」ボタンを押すことで
停止することが出来ます。

PCの動きが遅く感じたら、是非やってみてください。


(tsubasa)
開発日誌

jQueryではじめるJavaScript : ボールを動かしてみる

今回はjQueryの第4回目、今までのプログラムを使って"ボールを動かしてみる"サンプルプログラムを作ってみます。

今までのものはわりと地味なサンプルでしたが、今回のサンプルは「おぉ!プログラムだ」と実感できると思います。
今回作ったものはこちらからダウンロードできます。sample4.zip

  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>ボールバウンド</title>
  <style type="text/css">
	div#box {
		width:400px;
		height:300px;
		border:1px #999 solid;
		position:relative;
	}
	div.ball {
		left:0px;
		top:0px;
		position:absolute;
	}
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
	var velocity = {x:4, y:7};

	$(function(){
		redraw();
	});
	function redraw()
	{
		// 外枠のサイズを取得
		var boxWidth = parseFloat($('#box').css('width'));
		var boxHeight = parseFloat($('#box').css('height'));

		// ボールの位置を取得
		var posLeft = parseFloat($('#ball').css('left'));
		var posTop = parseFloat($('#ball').css('top'));

		// ボールを移動
		posLeft += velocity.x;
		posTop += velocity.y;

		// 外枠から出ないように調整
		if(posLeft < 0 || posLeft > boxWidth){
			velocity.x *= -1;
		}
		if(posTop < 0 || posTop > boxHeight){
			velocity.y *= -1;
		}

		// 移動したボールの位置のCSSをセット
		$('#ball').css({left:posLeft, top:posTop});

		setTimeout(redraw, 50);
	}
  </script>

  <div id="box">
    <div id="ball" class="ball">●</div>
  </div>


[ブラウザ表示]
※ ブラウザおよびJavaScriptの設定によっては動かないことがあります。

こんな感じに動きます。
それではプログラムの解説していきます

[プログラム序盤部分]
	var velocity = {x:4, y:7};

	$(function(){
		redraw();
	});

velocity はボールの初期速度です。
この数値を変更すればボールを速くしたり遅くしたりできます。

$(function(){ の箇所がちょっと混乱するかと思います。第1回で $(...) は「セレクター」だといっていましたが、中に関数が入っている場合はまったく違った動作になり、"HTMLがすべて読み込まれて準備ができたら関数を実行"します。
「まあ、そういうもんだ」と覚えておいてください。

[プログラム中盤部分]
		// 外枠のサイズを取得
		var boxWidth = parseFloat($('#box').css('width'));
		var boxHeight = parseFloat($('#box').css('height'));

		// ボールの位置を取得
		var posLeft = parseFloat($('#ball').css('left'));
		var posTop = parseFloat($('#ball').css('top'));
前回勉強したCSSの値を取ってきています。ただし、width や left の値は"○○px"のように余計な"px"という文字が入ってしまうので、parseFloat() をつかって数値だけにしています。

[プログラム終盤部分]
		setTimeout(redraw, 50);
setTimeout() は一定時間後に関数を実行してくれる処理です。ここでは0.05秒後に関数redraw() を実行します。そこで実行される redraw() もまた0.05秒後に redraw() を実行するので、結局、0.05秒間隔で redraw() が実行されます。


"ボールを移動"の箇所を変更すれば、万有引力のリンゴのようにボールが自由落下する動作もつくれるので余裕があれば作ってみてください。

(teruhisa)
Web システムのツボ

Google Analytics 携帯版(PHP)のレポートがうまくとれない場合の対処法

公式にGoogleAnalytics携帯版が発表されてから大分経ちますが、
Twitterなどでも「計測できない!」とつぶやかれる方が多く目立ってました。
僕自身、担当した案件でモバイルサイトへGoogleAnalyticsを設置する機会があり
多くの方がつまづかれているのと同様にしばらく悩みました。

現象としては、タグ埋め込みもga.phpも正しく設置して1pxのgif画像も表示されているのに
「トラッキングコードが見つかりません」というエラーが表示されるというものです。
同じような現象を克服された方はいないかいろいろ調べた結果、原因がようやく分かりました。

原因はphp側の設定でした。
具体的にはga.phpで使用されているstream_context_createというPHPの関数が
php.iniのallow_url_fopenという設定がOffだと動作しないためのようです。
Onに変更後、Apacheを再起動したら無事Google Analytics携帯版で解析が可能になりました。

php.iniを修正できないサーバの場合で .htaccess で設定可能な場合は以下のように記述します。
----------------------------------------------------------
php_flag allow_url_fopen on
----------------------------------------------------------

もし設定が完璧なのに「トラッキングコードが見つかりません」というエラーが出続けている
場合はphp.iniのallow_url_fopenの設定がOnかどうかを確認してみると解消されるかもしれません。

問題解決に際して下記2つのサイトを参考にさせていただきました。
『ウェブマスターセントラル -Google Analytics 携帯版のレポートがとれません- 』
『元Webエンジニアの無職日記 -google analyticsのモバイル版の解析が上手くいかない場合の対処法 その2-』


(masato)
システムニュース

新たなガンブラー型攻撃によるウイルス感染ルート

ITニュースを発信しているLAC(ラック)より
ガンブラー型攻撃によるウイルス感染の注意喚起の公表がありました。


Gumblar_newattack.gif
[http://www.lac.co.jp/info/alert/alert20101029.html より転載]

ITニュースを発信しているLAC(ラック)より
ガンブラー型攻撃によるウイルス感染の注意喚起の公表がありました。

【注意喚起】大手有名サイトの閲覧で発生したコンピュータウイルス感染について
http://www.lac.co.jp/info/alert/alert20101029.html

JREの脆弱性を悪用した攻撃で、
対策は、JREのホームページから最新版を更新する事防げます。

Java.com|無料 Java ソフトウェアをダウンロード
http://www.java.com/ja/download/

パッと見、ちょっとわかりづらかったので、
自分なりの解釈ですが、感染の手口を簡単に説明しますとこんな感じです。

Googleが提供しているGoogle Analyticsを例に挙げてみましょう。

【1】悪意あるユーザーがウイルス配布サイトを設置。

【2】悪意あるユーザーがホームページアクセス解析サイト、「Google Analytics」のスクリプトを改ざんする。

【3】ユーザーがGoogle Analyticsを利用しているウェブサイトにアクセスする。

【4】ウェブサイトはGoogle Analyticsにユーザーがアクセスした情報を送信。

【5】スクリプトの改ざんがされたGoogle Analyticsは、ユーザーをウイルス配布サイトへ転送する。

【6】転送先のウイルスサイトを閲覧してしまったユーザーは、ウイルスに感染する。

【7】ウイルスに感染したユーザーは、悪意あるユーザーにIDとパスワードを盗まれてしまう。

というような流れになってしまいます。

自社サイトのみセキュリティを強化しても、
外部サイトと連携をする場合は、
その先にセキュリティホールがあるかもしれないと頭に入れておいた方がよさそうですね。

(hirohito)

ツール紹介

Flash Cookie を削除する方法

Flashにも、ブラウザのCookieのような機能を持っています。
Local Shared Objectと呼ばれ、Flashの設定情報をユーザーPC内部に保存します。
ブラウザのCookieと同じような働きをするためFlash Cookieとも呼ばれますが
Cookieとの違いは有効期限が無い為、情報が消えない点です。

Flash Cookieが保存されているサイトの確認・削除を行うには、
Flashの開発元であるAdobe公式サイトのFlash Player設定マネージャーで行うことができます。

1.Adobe公式サイトにアクセスします。
Web サイトのプライバシー設定パネル

2.サイトにアクセスすると、埋め込まれている設定マネージャーがFlash Cookie を読み込みます。
flash20101027.jpg

3.ロードが終わると、Flash Cookieの一覧が表示されます。
全て削除する場合は 「すべてのサイトを削除」、個別に削除する場合は、リストを選択し「Web サイトを削除」
を押すことで削除できます。
flash201010272.jpg 


Flash Cookieの削除は、この操作で削除するか、ローカルPCに保存されているファイルを直接削除する
しか方法はありません。
Flash Cookieの存在を知らなければ、蓄積した情報は永遠に残り続けることになります。

その為、悪用するケースも多々報告されています。中には、
・ユーザーが削除したHTTP Cookieを、Flash Cookieを使って復活させる
・ユーザーのWeb閲覧の行動追跡をするスパイウェアに利用される
といった例があります。

Flash Cookieの危険性についての記事
http://builder.japan.zdnet.com/news/story/0,3800079086,20399999,00.htm

Flash Cookieは非常に便利ですが、悪用されるケースもある為、定期的な削除をオススメします。

(tsubasa)


開発日誌

jQueryではじめるJavaScript : 処理1

今回はjQueryの第3回目、「処理」について進めていきます。
第1回第2回で「なにを どうするか」の「なにを」の箇所を勉強しましたが、処理は「どうするか」の部分です。

実はjQueryを知るまでは、私もJavaScriptが苦手でした。
HTMLやCSSとの結びつきが難解で、ブラウザ依存する箇所でもあり、頭を悩ませていました。
ところがjQueryを使うとその問題を軽々クリアし、「なにを どうするか」の部分が簡単に表現できるようになります。まさに「必要は発明の母」と言ったところですね。

それでは今日はjQueryの処理の部分の紹介をしていきます。

今回作ったものはこちらからダウンロードできます。sample3.zip

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <title>jQueryではじめるJavaScript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function changeStyle()
      {
        $('#sun').css('color', '#f33');
      }
    </script>
  </head>

  <body>
    <div>
      真っ赤な<span id="sun">太陽</span><br />
      <input type="button" onclick="changeStyle();" value="変更" />
    </div>
  </body>

</html>


ブラウザ表示
jqueryimg.gif
ボタンを押してみますと、「太陽」のところが赤文字に書き換わりました!

$('#sun').css('color', '#f33');

このプログラムは、ID 'sun' の要素のCSSのプロパティ 'color' を '#f33' に変更する処理をしています。

ちなみに複数のプロパティを変更したい場合は
function changeStyle()
{
  $('#sun').css('color', '#f33');
  $('#sun').css('font-weight', 'bold');
}

上のように複数並べて書けばできますが、
次のような書き方もできます。処理が数珠繋ぎになっていることから"メソッドチェーン"と呼ばれます。
function changeStyle()
{
  $('#sun').css('color', '#f33').css('font-weight', 'bold');
}

次のようにオブジェクトを使って書くこともできます。
function changeStyle()
{
  $('#sun').css({'color':'#f33', 'font-weight':'bold'});
}

jQueryの特徴的なところなのですが、1つの関数で複数の処理ができるようになっています。最初は混乱するかもしれませんが、覚える関数名が少なくてすむのでなかなか便利です。

たとえば、上の処理とは逆に現在、設定されているものを取得したい場合は
function getStyle()
{
  alert('color : ' + $('#sun').css('color'));
}

これをボタンのonclickに設置するとアラートウィンドウで値が取得できます。


次回はこれらをつかって、ちょっと動くものをつくってみたいと思います。

(teruhisa)



ツール紹介

【MovableType】MT5携帯用サイトをMT4iで作成してみました

Movable Typeを携帯向けに対応させるためのプラグイン「MT4i」のインストール方法・手順を紹介します。
このプラグインは太鉄さんが個人で制作されたもので、MTモバイル版構築の際は定番のプラグインになっているようです。
今回は、MT5にも対応している検索機能付きのバージョン3.1 alpha3を使ってみました。

■MT4iダウンロード
まずMT4iを以下のURL先からダウンロードします。
3.1 alpha3ダウンロード

「Download」の項目から「mt4i31a3.zip」をクリックしてデスクトップなどに保存します。
解凍すると「mt4i31a3」フォルダ内に以下のファイルが確認できます。

3つのフォルダ
「lib」
「plugins」
「tmpl」

3つのファイル
「mt4i.cgi」
「mt4imgr.cgi」
「purge_old_cache.pl」

これらのファイルのサーバーにアップロードしていきます。

■サーバへ設置
テンプレートのキャッシュを保存するためディレクトリを作成します。
mt4iフォルダを作成Movable Typeホームディレクトリの直下に、以下の構造でディレクトリを作成します。

Movable Type ホームディレクトリ
 ┗ mt4i
     ┗ cache
         ┗ tmpl

次に、ファイル「mt4i.cgi」「mt4imgr.cgi」、フォルダ「lib」「tmpl」をサーバーの任意の場所にアップロードします。
これらのファイルは全て同階層に置きます。
携帯サイトのURLを「http://サイトのURL/m/」としたかったので「m」フォルダを作成し、ファイルをアップロードしました。
次に「mt4i.cgi」と「mt4imgr.cgi」のファイル属性(パーミッション)を「705」に設定します。

■MT4i管理画面(mt4imgr.cgi)へアクセス
WEBブラウザから「mt4imgr.cgi」にアクセスします。URLは、「http://サイトのURL/m/mt4imgr.cgi」になります。
アクセスすると「MT4i Manager」という画面に移りますので、最初にパスワードを設定します。
任意のパスワードを記入し保存ボタンを押すと、「MT4i Manager のパスワードを設定しました。」と表示されたログイン画面に移りますので、改めてパスワードを入力し「ログイン」ボタンを押してください。

ログインすると「設定を編集する。」と表示された画面に移動するので、下の「ENTER」ボタンを押します。
ここの段階ではまず「MT_DIR - MTホームディレクトリ」の設定をします。
Movable Typeをインストールしたディレクトリ(mt.cgiのある場所)を、絶対パスあるいは相対パスで指定してください。
「Blog_ID - Movable Type 上で使用しているBlog固有のID」の設定は、ブログIDが分かれば半角数字で入力します。
ブログIDが分からなければ空のままでも保存できます。

設定が終えたら上にある「保存」ボタンを押して設定を保存します。

■インデックスページ(mt4i.cgi)へアクセス
管理画面の設定完了後、WEBブラウザから「http://サイトのURL/m/mt4i.cgi」へアクセスしてみます。
管理画面の設定で「Blog_ID - Movable Type 上で使用しているBlog固有のID」を空にしていた場合は
「Error:引数にblog IDを指定してください。」と表示されてブログ一覧が表示されるので、携帯用に表示させたい
blog IDを先ほどの管理画面の「Blog_ID - Movable Type 上で使用しているBlog固有のID」へセットして保存しなおします。
再度、「http://サイトのURL/m/mt4i.cgi」へアクセスしてみると以下のようにきちんと携帯用に変換されたページを表示できました。
mt4ia.jpg

■カスタマイズ
「http://サイトのURL/m/」でアクセスできるようにする
管理画面の「MyName - MT4i本体のファイル名(index.cgiなどに変更したい人用)」という項目にデフォルト「mt4i.cgi」を「index.cgi」へ変更し保存します。
そしてファイル名も「mt4i.cgi」を「index.cgi」に変更します。これでURL「http://サイトのURL/m/」でアクセスできるようになります。

デザインをかっこよくする
MT4i用のかっこいいテンプレート(「MT4i3.0.8X1」)を公開しているサイトを見つけましたので試しに使ってみました。
参考URL:MTのケータイ向け変換プログラム「MT4i」のXHTML対応改変版を公開します

上記のデザインがここまでかっこよく変わりました。
mt4ib.jpg

■参考
mt4imgr.cgiへアクセス時、真っ白な画面になる場合
以下の4つのモジュールがインストールされていないことが考えられます。
モジュールの有無を確認して足りないものがあればインストールしてください。
 Encode
 HTML::Template
 Image::Magick(画像の自動縮小機能を利用する場合)
 HTML::Entities(XSS 防止機能を使用する場合)


index.cgi(mt4i.cgi)へアクセス時、InternalServerエラーが出る場合

「mt4i.cgi」をテキストファイルなどで一度開いて改行コードを「LF」へ設定しなおして
保存するとエラーを回避できる確率が高いです。

GoogleBot対策
MT4iで↓のような現象が起こる可能性がため、対策として以下の方法を使用しました。
MT4i、Googlebotにやられる
googlebotにmt4iからエントリ消される

 【対策方法】
 1.mt4i.cgiのhtmloutの<head>の後に
 <META NAME=\"HATENA\" CONTENT=\"NOINDEX\"><META NAME=\"ROBOTS\" CONTENT=\"NOINDEX\">
 を追加。

 2..htaccessに
 order deny,allow
 deny from all
 deny from googlebot.com
 を追加。

 3.robots.txに
 User-Agent: *
 Disallow: /*.cgi
 Disallow: /mt_mobile/ (mt4i関係のディレクトリ)
 を追加。

今後もデザイン含めて機能についてもカスタマイズを試みてみようと思います。

(masato)




オープンソース紹介

「Google AJAX Feed API」を使ってみよう!

ブログのRSS情報をWebサイトトップ等に表示させたい場合、強引にRSSを表示させるプログラムを作成しても可能ですが、せっかくなのでGoogleが公開しているAPIを利用してみましょう。Googleは、いくつかAPIを公開していますので、
どんどんこちらで紹介していこうと思います。

今回は・・・
「ジーピーオンラインの制作実績」のRSSを読み込んで見ましょう!

制作実績のRSSはこちらです!
http://www.gpol.co.jp/works/index.php?action=rss

この情報を、GoogleのAPIを通して、
簡単なTopics形式の表示にチャレンジしてみます!

できたhtmlはこんな感じです!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google API RSS</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("http://www.gpol.co.jp/works/index.php?action=rss");  // 読み込むRSS

feed.setNumEntries(10);

feed.load(function(result) {

 if (!result.error) {

  var rsshtml = "";

  for (var i = 0; i < result.feed.entries.length; i++) {
   var entry = result.feed.entries[i];
   var dd = new Date(entry.publishedDate);
   var yearNum = dd.getYear();
   if (yearNum < 2000) yearNum += 1900;
   var date = '<br>【' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日】 ";
   rsshtml += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a><br />";
   rsshtml += entry.content + "<br /><br />";
  }
  var rssdata = document.getElementById("RssList");
  rssdata.innerHTML = rsshtml;
 }
});
}

google.setOnLoadCallback(initialize);

</script>
</head>
<body>
<ul>
<div id="RssList"></div>
</ul>
</body>


ちょっと単純なものになってしまいましたが、
まぁ上手く表示できればよしとしましょう。

このAPIで気をつけたい箇所は下記の4点です。

【Google APIの読み込み】
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
グーグルのAPI設定をしておく必要があります。


【RSS情報】
var feed = new google.feeds.Feed("http://www.gpol.co.jp/works/index.php?action=rss");  //読み込むRSS
読み込むRSS情報の設定をする必要があります。


【html出力変数】
var rssdata = document.getElementById("RssList");
ここで設定する変数が、htmに出力する変数になります。


【htmlに出力】
<div id="RssList"></div>
この箇所に、スクリプトで設定した変数を記述します。

このhtmlを出力すると以下のようになります。

gpol_seisaku_rss.gif

どうなる事かと内心思ってましたが、成功です!
とりあえずRSS情報を引っ張ってくることができました!!

やはり単純なhtmlだと少し寂しいですね。。。

htmlの装飾をする場合は、下記の箇所、

   var date = '<br>【' + yearNum + "年"+(dd.getMonth()+1)+"月"+dd.getDate()+"日】 ";
   rsshtml += " " + date +"<a href='" + entry.link + "' title='" + entry.title + "'>" + entry.title + "</a><br />";
   rsshtml += entry.content + "<br /><br />";

この箇所にスタイルシート等を記述すれば、
いい感じにできるはずです!

公式サイトでドキュメントも公開していますので、今後ガンガン使っていこう!
と思われる方は、是非参考にしてみて下さい!

Google AJAX Feed API 公式サイト
http://code.google.com/intl/ja/apis/ajaxfeeds/documentation/


(hirohito)

New Entries
1  2  3  4  5

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive