twitterの変更前にOAuth認証を導入して、自分のツイートを取得するメモ

3月5日の変更前に、php+OAuth認証を使って自分のツイートを取得できるように準備しておきましょう。

下準備として、Twitter Developersのページで、表示させるtwitterアカウントでアプリケーション登録をし、『Consumer key』『Consumer secret』『Access token』『Access token secret』を取得します。

Twitter Developers
 ↓
新しくアプリケーションを登録
Create an application | Twitter Developers
・Name:mytweeetdesuyo(適当でok)
・Description:自分のツイートを表示させるんです(適当でok)
・Website: 自分のサイトのURL
を記入して登録。
 ↓
登録完了「OAuth settings」の『Consumer key』『Consumer secret』をコピーして保存して、ページ下の「Create my access token」をクリック
 ↓
すると「Your access token」の下に『Access token』『Access token secret』が表示されるので、これを保存しておく。
 ↓
下準備完了!

php側は、以前はPEARを使っていたんですが、今回は「abraham/twitteroauth」を利用させてもらいます。

abraham/twitteroauth · GitHub

利用するファイルはダウンロードしたファイルを解凍した中の「twitteroauth」フォルダの中はOAuth.php、twitteroauth.phpの2つ。

以下自分のツイートをjson形式で出力するサンプル。

//読み込むファイルはtwitteroauth.phpのみでok。パスは環境にあわせて変更してくださいな。
require_once("twitteroauth/twitteroauth.php");
 
$consumerKey = "保存したConsumer key";
$consumerSecret = "保存したConsumer secret";
$accessToken = "保存したAccess token";
$accessTokenSecret = "保存したAccess token secret";
 
$twObj = new TwitterOAuth($consumerKey,$consumerSecret,$accessToken,$accessTokenSecret);
//JSON形式で情報を取得 varは1.1に
$request = $twObj->OAuthRequest("https://api.twitter.com/1.1/statuses/user_timeline.json","GET",array("count"=>"10"));
$twJsonData = json_decode($request);

header("Content-Type: application/json; charset=utf-8");
echo $twJsonData;

json形式で取得しているためjson_decodeを利用しますが、万が一使えない場合は下記ページを参考にJsphonを利用してみてください。

Jsphonをcodereposにアップロードしました。 – 株式会社RYUS

あとはキーがところどころ変わってたりするようなので、jsonデータを確認しながら、javascriptでいじるなり、phpで整形して出力するなりしてくださいな。

REST API v1.1 Resources | Twitter Developers

Google Font APIを使う

ブログのデザインを変更したのでついでにGoogle Font APIを利用してみました。スタイルシートを読み込んで利用するだけなので簡単に導入できます。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=フォント名">
    <style>
      body {
        font-family: 'フォント名';
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

上記のように外部スタイルシートを読み込む時に「?family=フォント名」を記述し、スタイルシートで読み込んだフォントを指定するだけです。

複数のフォントを読み込みたい場合は「?family=フォント名1|フォント名2」とフォント名を「|」で区切って指定します。

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=フォント名1|フォント名2">

利用できるフォントの一覧は「Google Web Fonts」に掲載されています。

日本語対応のフォントは用意されていないのですが、軽いのでちょこっと英語を利用する場所があれば気軽に利用してみてもいいかもしれません。(ちなみにこのブログのサイドバーとコピーライトの部分に利用しています。)

Google Font API – Google Code

Google MAP API 導入メモ

いまさらながらGoogle MAP API 導入簡易メモ。

1. 下記ページでMaps API キーを手に入れる。
Sign Up for the Google Maps API – Google Maps API – Google Code

2. 座標指定だけでなく住所検索でも利用できる下記サンプルのソースを利用。
Google マップ

3. サンプルのソースの<script src=”http://maps.google.co.jp/maps?file=api&…>の部分のスクリプトの読み込み部分のkeyの値を1で取得した値に変更。

4. ソース少しだけ変更したものがこれ↓です。
Google Map サンプル

Javascript部分だけ抜粋

	var map = null;
	var geocoder = null;
	var address = "大阪高島屋";
	var infoMsg = "<b>"+address+"</b><br />外観が古くひそかにいい建物です。";
	function loadMap() {
		if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GOverviewMapControl());
		map.addControl(new GMapTypeControl());
		//座標を利用する場合はこちらを利用する。geocoder以下はコメントアウトしましょう。
		//map.setCenter(new GLatLng(135.5010216, 34.6646465), 17);
		geocoder = new GClientGeocoder();
		geocoder.getLatLng(
				address,
				function(point) {
					if (!point) {
						alert(address +"が見つかりません。");
					} else {
						map.clearOverlays();
						map.setCenter(point, 17);
						var marker = new GMarker(point);
						map.addOverlay(marker);
						marker.openInfoWindowHtml(infoMsg);
					}
				}
			);
		}
	}
	window.onload = loadMap;
	window.unload=GUnload;

上記サンプルでは「高島屋大阪店」でマップを取得しています。
「address」に住所等を入れ、「infoMsg」に地図上に表示させたいメッセージを記入します。
とりあへずは最低限はこと足りるかと思います。全ソースが気になる方は直接のぞいてください。

参考URL
Google Maps API の例 – Google Maps API – Google Code
逆引きGoogle Maps APIリファレンス
みんなの知識【ちょっと便利帳】 緯度・経度を調べる(GoogleMapsAPI・地図作成用,10進数)