info

category : PHP
[javascript]JSONP  @ PHP , JavaScript , ajax 2011年1月19日

JSONP(JSON with padding)
クロスドメインなデータを取得する一番シンプルなやり方です。
サンプル
 

javascript

var php='action.php';
var mc=document.createElement('script');
mc.type='text/javascript';
mc.src=php+'?callback=when_get_data';
document.getElementsByTagName('head')[0].appendChild(mc);

function when_get_data(m){
	m=eval(m);
	var a;
	var b="";
	for(a in m){
		b+=a+":"+m[a]+"\n";
	}
	get_item("output").innerHTML=b;
}

 

PHP

<?php
$dat=array('name'=>'John', birthday=>'19731129', 'time'=>date('Y/m/d H:i:s'));
$res='(' . json_encode($dat) . ')';
if($_GET['callback']){
	$res=$_GET['callback'] . '(\'' . $res . '\');';
}
header('Content-Type: text/javascript; charset=utf-8');
echo $res;
?>

 

[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/
 

[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]dokoitter どこいったー?  @ Twitter , PHP , JavaScript , ajax 2010年4月19日

おつかれさまです。

追記
※このコンテンツは2010年6月30日のTwitterのBASIC認証廃止と同時に使用不可になります。
TwitterのBASIC認証廃止、企業ユーザーが知っておくべきこと

twitterの設定で「ツイートに位置情報を入れる」にチェックしても
位置情報を一緒に送信してくれるものが手元に無かったので作りました。
モバツイのイマココでは出来ませんでした。
未確認ですがiPhoneを持ってる人は、GPSTwitあたりを使えば位置情報を
送信、確認できると思います。
dokoitterPCバージョンならGoogleMapで位置を指定して送信できます。
とりあえずどんなものか見たいって人は、ユーザ名に「frasio_report」と入れて、
パスワードは何も入れずにログインをクリックしてみてください。



今回JSONデータ形式とか、モバイルサイトの作り方とか、GoogleMapVersion3とか、
PHPの暗号化、復号化とか、OAuth認証とか
やってたら工数が倍になり、制作に2週間もかかってしまいました。
得るものはたくさんあってなかなか楽しかったです。

モバイルサイトのほうは下記の機種で動作を確認しました。
新しめの携帯なら使えると思いますが、よくわかりません。

au : W53CAで動作を確認しました。
docomo : iモードHTMLシミュレータIIで動作を確認しました。(あてになるのかなこれ)
 ※追記 うまく動かなかったのを修正しました。P906で動作を確認しました。
SoftBank : 820SHで動作を確認しました。
willcom : 確認してません。情報求む。

使い方は下記を参照してください。




今回参照したサイト一覧(順不同)

PHP: PHP マニュアル
http://www.php.net/manual/ja/

Raizlabs – GPS Twit
http://www.raizlabs.com/software/apps/gpstwit

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

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

SDN Project – PHP+OAuthでTwitter
http://www.sdn-project.net/labo/oauth.html

そふぃのphp入門
http://nyx.pu1.net/

Twitlogo
http://www.twitlogo.com/

[観] Twitter API 仕様書 (勝手に日本語訳シリーズ)
http://watcher.moe-nifty.com/memo/2007/04/twitter_api.html

りょーちの駄文と書評 – Twitter APIをphpで使う方法(サンプル)
http://ryouchi.seesaa.net/article/40073217.html

Knowledge Database IT – 3キャリアごとのXHTML用ドキュメントタイプ
http://it.kndb.jp/entry/show/id/2393

携帯GPS機能が扱えるPEAR::Net_UserAgent_Mobile_GPSを使ってみました | 携帯サイトをつくろう。
http://www.plusmb.jp/2008/12/19/1816.html

ウノウラボ Unoh Labs: PHPで暗号化・復号あれこれ
http://labs.unoh.net/2007/11/php_de_crypt.html

Net_UserAgent_Mobile
http://pear.php.net/package/Net_UserAgent_Mobile

GPS携帯 位置情報 基礎知識
http://www.yaskey.cside.tv/mapserver/note/gps.html

PHP TIPS:ITpro – 96. 携帯電話でGPSデータを取得してみよう
http://itpro.nikkeibp.co.jp/article/COLUMN/20080703/310053/

QRコード(二次元バーコード)作成【無料】
http://www.cman.jp/QRcode/

3キャリア対応サイトを作る 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
http://dspt.blog59.fc2.com/blog-category-5.html

CSS Lecture – CSSで中央配置(センターリング)する方法
http://www.css-lecture.com/log/css-beginner/026.html

加藤貴之Wiki – howto/RSA
http://katotakayuki.jp/wiki/index.php?howto/RSA

Schwarz Lanzenreiter – 暗号化アルゴリズム Blowfish を JavaScriptで
http://user1.matsumoto.ne.jp/~goma/js/blowfish.html

【HTMLタグの簡単検索】TAG index – ホームページ作成情報
http://www.tagindex.com/index.html

Load Info – gif generator
http://loadinfo.net/

NTTドコモ – iモードHTMLシミュレータII
http://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/

さて、次もtwitter関連で行こうと思います。

[JavaScript]painting on canvas  @ PHP , JavaScript , HTML5 , ajax 2010年3月22日

マウスで絵を描く→pngで保存 というものです。
jsとphpで出来ています。
「保存」を押したときのリアクションはtwitterっぽくしてあります。
canvasタグの使い方はこちらが詳しいです。HTML5.jp – Canvas
「みんなの絵を見る」機能無しのflashバージョンはこちら[Flashからjpg]

HTML5.jpによると下記の環境で動きます。IEは論外。
Firefox 2以降
Safari 4以降
Google Chrome 2以降
Opera 9.2以降

キャンバスドラッグ:線を引く
「太」の数字変更:線の太さ変更
カラーパレットクリック:色選択
「保存」クリック:pngで保存
「消去」クリック:キャンバスを真っ白に
「みんなの絵を見る」:みんなの絵一覧
サムネイルクリック:pngオリジナルサイズを別ウィンドウで開く

painting on canvas


さて、次は何を作ろうか。

[flash]twitter on flash #1  @ Twitter , PHP , FlashAS3 , Flash DEMO 2009年11月9日

おつかれさまです。

追記
※このコンテンツは2010年6月30日のTwitterのBASIC認証廃止と同時に使用不可になります。
TwitterのBASIC認証廃止、企業ユーザーが知っておくべきこと

twitterAPIを使ったtwitter on flashをつくりました。
flashからtwitterを見たり投稿したりできるというものです。
今はつぶやきを見る、投稿するの2つの機能しかありません。これから改良を続けるかどうかは未定です。
twitterみたいな文字主体のものをわざわざflashにする意味はあるのかと言われれば、
そんなものは無いのですが、おもしろければついやっちゃうよね。

スクリーンショット1

twitter on flash

ソースの話
flashは違うドメインにアクセスしようとするとセキュリティエラーが出てアクセスできません。
そこで実際のtwitterの処理はPHPで行っています。今回のflashでは下記のような処理をしています。
それぞれflashからPOSTでtwitterのid, pass及びtwitterAPIのurlを送信しています。

ログイン処理
urlはhttp://twitter.com/account/verify_credentials.xml

$url = $_POST['url'];
$id = $_POST['id'];
$pass = $_POST['pass'];
$ch=curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_USERPWD, $id.":".$pass);
$result=curl_exec($ch);
curl_close($ch);
echo $result;

つぶやき取得
urlはhttp://twitter.com/statuses/friends_timeline.rss

$url = $_POST['url'];
$id = $_POST['id'];
$pass = $_POST['pass'];
if($id=="" || $pass==""){
	echo file_get_contents($url);
}else{
	$url=get_url_with_idpass($url, $id, $pass);
	echo file_get_contents($url);
}
function get_url_with_idpass($a, $b, $c){
	$a=str_replace("http://", "", $a);
	$a="http://".$b.":".$c."@".$a;
	return $a;
}

投稿
urlはhttp://twitter.com/statuses/update.xml

$url = $_POST['url'];
$id = $_POST['id'];
$pass = $_POST['pass'];
$message = $_POST['status'];
$url = $url."?status=". rawurlencode($message);

$opts = array("http" => array(
"method" => "POST",
"header" => "Authorization: Basic ". base64_encode($id. ":". $pass)
)
);
$context = stream_context_create($opts);
$result = file_get_contents($url , false, $context);
echo $result;