info

category : JavaScript
[javascript]jQueryセレクタのようなもの  @ JavaScript , jQuery 2011年1月14日

jQueryのセレクタがとても便利ですが、
セレクタのためにjQueryをロードするのも気が引けるので自作しました。
指定したエレメントの配列が返ってくるだけです。

サンプル

//使う時
var list=getelm("div#center ul.ul_class0 li");

function getelm(s){
	var a,b,c,e,f,g,h,k,n,m;
	var p=s.split(" ");
	for(a=0;a<p.length;a++){
		b=p[a];
		if(b.indexOf('#')>-1){
			e=b.split('#');
			m=0;
		}else if(b.indexOf('.')>-1){
			e=b.split('.');
			m=1;
		}else{
			e=[b];
			m=2;
		}
		if(a>0){
			c=k;
		}else{
			k=document.getElementsByTagName(e[0]);
			if(m==2){
				c=k;
			}else{
				c=[];
				for(f=0;f<k.length;f++){
					n=k[f];
					if(m==0 && n.id!=e[1])continue;
					if(m==1 && n.className!=e[1])continue;
					c.push(n);
				}
			}
			continue;
		}
		k=[];
		for(f=0;f<c.length;f++){
			g=c[f].childNodes;
			for(h=0;h<g.length;h++){
				n=g[h];
				if(n.nodeName.toLowerCase()!=e[0])continue;
				if(m==0 && n.id!=e[1])continue;
				if(m==1 && n.className!=e[1])continue;
				k.push(n);
			}
		}
	}
	if(p.length<2)return c;
	return k;
}
[javascript]Google Maps ルート検索  @ JavaScript , ajax 2011年1月13日

Google Maps ルート検索を使おうと思い、サンプルを作りました。
 
Google Maps ルート検索

 
Google Maps本家とAPIで出来ることに違いがあるようです。
APIでは
・電車を使うルート検索が出来ない
・電車が使えないので出発時間、到着時間の指定が出来ない
 
WindowsXPの下記のブラウザで動作を確認しました。
Firefox3.6.3
GoogleChrome8.0.552.224
Safari5.0
IE8
 
参考にしたサイト

Google Code – Google Maps JavaScript API V3
http://code.google.com/intl/ja/apis/maps/documentation/javascript/

[javascript]Google URL Shortener API  @ PHP , JavaScript , ajax 2011年1月11日

Googleの短縮URL「goo.gl」がAPIの提供を開始http://blog.fkoji.com/2011/01110730.html
したらしいので早速いじってみました。
 

 
あらかじめ下記サイトでAPIキーを取得しておきましょう。
URL Shortener APIのActivateボタンを押して表示されたURLのkeyの値がAPIキーです。
http://code.google.com/apis/console/
APIキーを取得したらあとはごりごり書くだけ。
 
PHP

< ?php
$apikey='APIキー';
$url="https://www.googleapis.com/urlshortener/v1/url" . '?key=' . $apikey;
$longurl=$_GET["longUrl"];
$shorturl=$_GET["shortUrl"];

if($longurl){
	$request='{"longUrl": "' . $longurl . '"}';
	$headers = array('Content-Type:application/json');
	$conn = curl_init();
	curl_setopt($conn, CURLOPT_URL, $url);
	curl_setopt($conn, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($conn, CURLOPT_POSTFIELDS, $request);
	curl_setopt($conn, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($conn, CURLOPT_POST, true);
	curl_setopt($conn, CURLOPT_HEADER, false);
	curl_setopt($conn, CURLOPT_HTTPHEADER, $headers);
}elseif($shorturl){
	$url .= '&shortUrl=' . $shorturl;
	$conn = curl_init();
	curl_setopt($conn, CURLOPT_URL, $url);
	curl_setopt($conn, CURLOPT_SSL_VERIFYPEER, false);
	curl_setopt($conn, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($conn, CURLOPT_HEADER, false);
}else{
	echo "error";
	exit;
}
$ret=curl_exec($conn);
echo $ret;
curl_close($conn);
exit;
?>

 
Javascript

//短縮するとき
var m={'longUrl':対象URL};
ajax_get('action.php', m, when_get_shorturl);

//元に戻すとき
var m={'shortUrl':対象URL};
ajax_get('action.php', m, when_get_longurl);

function when_get_shorturl(data){
	var m=eval("("+data+")");
}

function when_get_longurl(data){
	var m=eval("("+data+")");
}

function ajax_get(cgi_path, param, finish_func){
	var httpObj = createHttpRequest();
	if(!httpObj)return;
	var str=get_post_param(param);
	if(str!="")cgi_path+=('?'+str);
	httpObj.open("GET",cgi_path, true);
	httpObj.onreadystatechange=function(){
		if(httpObj.readyState == 4 && httpObj.status == 200){
			var data=httpObj.responseText;
			finish_func(data);
		}
	}
	httpObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
	httpObj.send();
}

function get_post_param(param){
	if(!param)return "";
	var a;
	var str="";
	var m;
	var b;
	for(b in param){
		str+=b+"="+encodeURIComponent(param[b]);
		str+="&";
	}
	str=str.substring(0,str.length-1);
	return str;
}
function createHttpRequest(){
    var x=null;
    if (window.XMLHttpRequest)return new XMLHttpRequest();
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {
            x = null;
        }
    }
    return x;
}

 

参考にしたサイト
 
Google Code – Google URL Shortener API
http://code.google.com/intl/ja/apis/urlshortener/
 

[javascript]jQueryPlugin:tinyTips  @ JavaScript , jQuery 2011年1月7日

これは便利ですね。ちょっと使おうと思ったので調べました。
ロールオーバーすると吹き出しを出してくれるjQueryPlugin。
tinyTipsサンプル

使用方法

1)
Mike Merritt – jQuery Plugin: TinyTips 1.1からjsをダウンロードする。

2)
jsファイルを読み込む。

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>

3)
htmlのbodyにはこのようなコードを書く。

<a title="見つけにくいものですか?" href="#">探し物はなんですか?</a>
<a title="http://www.yahoo.co.jp/" href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a>
<a title="白い結晶が浮遊・沈殿することがありますが、これは天然のミネラル成分が結晶したものですので、品質に問題はありません。" href="http://www.google.co.jp/">Google</a>

4)
次のjsを記述する。

$(document).ready(init);
function init(){
 $('a.tTip1').tinyTips('light', 'title');
 $('a.tTip2').tinyTips('light', '<img src="image/sc01.jpg" border="0" alt="" />http://www.yahoo.co.jp/');
 $('a.tTip3').tinyTips('light', '<img src="image/sc02.jpg" border="0" alt="" />http://www.google.co.jp/');
}

参考にしたサイト

Mike Merritt – jQuery Plugin: TinyTips 1.1
http://www.mikemerritt.me/blog/jquery-plugin-tinytips-1-1/

[Facebook]shareボタン  @ Facebook , JavaScript 2011年1月5日

新年明けましておめでとうございます。
2011年一発目は小ネタです。
Facebookのshareボタンを押したときに表示される
サイトの情報を指定する方法とサンプル。
参考にしたサイトに全部書いてあります。

1)htmlタグの属性を追加する

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

2)metaタグを追加する

<meta property="og:title" content="FacebookShareテスト frasio report タイトルタグ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://ktyr.net/facebook/02/" />
<meta property="og:image" content="http://ktyr.net/facebook/02/image/facebookshare.jpg" />
<meta property="og:description" content="白い結晶が浮遊・沈殿することがありますが、
これは天然のミネラル成分が結晶したものですので、品質に問題はありません。" />

3)サムネイル画像を用意する

サンプル

参考にしたサイト

Open Graph protocol – Facebook開発者
http://developers.facebook.com/docs/opengraph

[facebook]newsfeed reader  @ Facebook , PHP , JavaScript , ajax 2010年12月2日

とりあえず小手調べです。
認証通してnewsfeedを表示するまでです。
Facebookは機能が多くてアプリを作るのに
かなり時間がかかりそうです。

newsfeed reader

参考にしたサイト

Facebook開発者 参考資料
http://developers.facebook.com/docs/

コーヒーサーバは香炉である – [Facebook]Facebook アプリ作ろうぜ (その1 準備編)
http://www.madin.jp/diary/?date=20101016

「そん」の気ままなLOG – facebookで携帯認証確認する方法-2
http://sonkunt.blog26.fc2.com/blog-entry-473.html

[Google Analytics]EventTracking And Data Export API  @ PHP , JavaScript , ajax 2010年12月1日

また地味なAJAXでGoogle Analytics
Google Analyticsでログを取って、Data Export APIでログを取得するテストです。
ページビューなどはログとして反映されるまでに24時間かかるようですが
「ボタンを押した」などのイベントは10~30分で反映されるようです。
よって即時反映させる必要が無い、予算も無いというときに使えるかもしれません。
PHPはこちらのサイトのクラスを使っています。
Google Analytics API class for PHP
http://www.askaboutphp.com/63/google-analytics-api-class-for-php.html

Google Analytics EventTracking And Data Export API

参考にしたサイト
Google Analytics トラッキング コード
http://code.google.com/intl/ja/apis/analytics/docs/tracking/home.html

Data Export API
http://code.google.com/intl/ja/apis/analytics/docs/gdata/home.html

Google Analytics API class for PHP
http://www.askaboutphp.com/63/google-analytics-api-class-for-php.html

[twitter]指定のURLが含まれているツイートの数を調べる  @ Twitter , JavaScript 2010年11月12日

また地味なネタです。
公式Tweetボタンで使われているっぽいです。

指定のURLが含まれているツイートの数を調べる。

使い方

var head=document.getElementsByTagName('head')[0];
var script=document.createElement('script');
script.src=get_jsp('http://www.yahoo.co.jp/', 'when_get_result');
head.appendChild(script);

function get_jsp(url, callback){
	var str='';
	str+='http://urls.api.twitter.com/1/urls/count.json';
	str+='?url='+encodeURIComponent(url);
	str+='&callback='+callback;
	return str;
}
function when_get_result(data){
	alert(data.url+" "+data.count);
}

気付いたこと、確認したこと。
・TwitterAPIの仕様書には載っていないようです。
・つぶやいてから反映されるまで5秒~30秒ほどかかるようです。
・つぶやきを削除してもカウント数は減らないようです。
・使い所はよくわからない。