yoshi-zou :: Recent Entries

昨年後半くらいから人気がじわじわと出てきた「Instagram」という名のiPhone用カメラアプリ。
その公式APIが出るという噂を聞いたのが先月くらい。

そして、今月中旬にデベロッパー登録の受付が始まりいつになったら使えるのかと待ちわびていたのですが、先日たまたまデベロッパー用ページにアクセスしたら既にアプリ登録が出来るようになっていたので早速試しに作ってみました。
※注意 2011/2/26現在まだプライベートベータ版です。


この地図のマーカーをクリックするとその場所で投稿された写真をスライドショーで眺めることができます。
地図を移動させれば世界中の写真を観ることも可能です。
（写真をクリックするとInstagramの個別ページに飛びます。）

このウェブアプリを作るためにどのようなことをやったかというと

1.Instagram APIのデベロッパー管理画面でアプリを登録しクライアントキー等を取得
2.サーバサイドのスクリプトでOAuth認証をクリアしてアクセストークンを取得
3.LOCATIONS APIを使って、経度緯度から半径1000m以内で登録された位置情報IDを取得。
4.位置情報から地図のマーカーをセット。
5.マーカーがクリックされた時、位置情報IDからその場所から投稿された写真データを取得。
6.写真データをスライド表示。

みたいな感じです。

OAuthに関してはcurl使ってごにょごにょやったら突破出来ました。
Twitterで使っているOAuth1.0と比べるとInstagram APIのOAuth2.0はシンプルで使いやすい感じがします。

Instagramみたいに写真ありきでここまで流行ったアプリのAPIってあまりまだ無い気もするのでこれから色々出来そうですね。
まだサーバもちょっと重い気がするので、今後の機能拡張も含め期待してます。
（APIの制限は勘弁ですが。。）
※API制限ありました。1アクセストークンまたは1クライアントIDにつき、1時間5000アクセスまでとのこと。ただしメールでの申請により許可されれば制限をゆるくできるらしい。（2011/2/25現在）

ちなみにこの素敵なスライドショーは弊社フロントエンドエンジニアの@keiskey氏によるものです。

また何か良いアイデアを思いついたら紹介したいと思います。

最近、位置情報系コンテンツに興味津々のyoshi-zouです。

まだ、プライバシー等の問題で大々的な流行の兆しが見えない位置情報系コミュニティですが、インフラ（というか考え方）の整備が進めば面白いコンテンツが次々に出てくるんじゃないかなあと思ってます。


位置情報を手っ取り早く利用するにはやっぱりGoogle Mapsが便利。

ということでサーバサイドと連携した簡単なWiki地図のためのサンプルを作ってみました。


赤いマーカーは移動させて、その位置情報を変更することができます。
これが、みんなで地図を編集するためのベースとなります。

あとはこれに何を乗せるかが問題。
何か形になれば公開したいと思います。

サイトリニューアルを行う際の、以前存在したけどリニューアル後には
存在しないページへアクセスされた場合の対処について。

方法はおそらく一つしかないと思ってるんですが、エラーレスポンスで404が
返ってきたときのhtaccessのリダイレクト設定ですね。

ただし、ここで絶対パスを指定するか、相対パスを指定するかで
違いが出てきます。

■絶対パス（URL）を指定する場合

トップページへリダイレクトしたい場合等ではこの方法をとります。

記述例：
ErrorDocument 404 http://www.example.com/index.html

絶対パスを指定した場合は、ブラウザのURL表示も指定されたものに
変更されるので画像やcssファイルが相対パスで指定可能です。

ただし、完全なリダイレクトになるので、対象のファイルが無い場合に
無限ループとなるので危険です。

■相対パスを指定する場合

エラーページを用意する場合はこの方法をよくとります。

記述例：
ErrorDocument 404 /err/404.html

相対パスで指定すると、ブラウザのURL表示が前後で変わりません。
よって、画像やcssは遷移前のページからの相対となるので
ルートパスで記述しないと正常に表示されません。

おすすめは後者です。
やはりそのページが存在しないことを一旦エンドユーザーに知らせて
トップページへ誘導するのが親切ですよね。

Twitterから始まったOAuthについて。

OpenIDが認証の仕組みを一つの認証局に委ねようと画策している同時期に、TwitterはAPIの認証も同じような仕組みで出来ないかと模索していました。
ただ、OpenIDは認証を行うに過ぎず、各サービスごとにアクセス可能な情報を制限するということが出来なかったのでした。

そこで考えられたのがOAuth。

各Twitterアプリケーションにあらかじめどのリソースにアクセスすることが出来るという権限を付与しておき、その許可をTwitter本体サイトで行うことによりセキュアにアプリケーション同士での情報共有を可能としています。

簡単な実現例を示すと

A：コメントを書くアプリケーション
B：メールを送信するアプリケーション

A⇒Bを行う場合

■OpenIDだと

Aにログインしコメントを書く。
↓
Bにログインし、同じ内容をメール送信する。

■OAuthだと

Aにログインしコメントを書く。
↓
A内でBのAPIを使うことにより同じ内容を送信。

という感じになります。
ユーザビリティを基準に考えると違いは一目瞭然ですよね。

当然、権限は自由に設定できるのでOpenIDと同様のことをOAuthで実現することも可能です。
しかし説明するのが難しいですね。これ。

画像を拡張子によらずバイナリの先頭8バイトで判別する方法。

PHPだと以下のような感じ。

$img = './sample.jpg';

if ($fp=fopen($img, "rb")){
	$head= fread($fp, 8);
	fclose($fp);

	if (strncmp("\x89PNG\x0d\x0a\x1a\x0a", $head, 8) == 0) {
		echo 'PNGだよ';
	} else if (strncmp('BM', $head, 2) == 0) {
		echo 'BMPだよ';
	} else if (strncmp('GIF87a', $head, 6) == 0 || strncmp('GIF89a', $head, 6) == 0) {
		echo 'GIFだよ';
	} else if (strncmp("\xff\xd8", $head, 2) == 0) {
		echo 'JPEGだよ';
	} else {
		echo 'どれにも当てはまらないよ';
	}
}

出力結果：JPEGだよ

アップロードする際に拡張子やMIMEタイプは偽装できるのでここまでやる必要がありそうですね。

最近ハマッてしまった件です。

某サイトの検証用にアンダーバーの入ったサブドメインを使用していたのですが
IEに関してCOOKIEが使えないという問題が発生しました。

原因は以下のとおり。

ドメイン名は基本的には英数字及び「-（ハイフン）」で構成されています。

参考サイト
http://www.psi.jp/content/view/197/344/

ただし、サブドメインを作成できるツールで特にバリデーションを行っていない
ものの中には、使用できる文字以外でも作成できてしまうものがあります。

正しいドメイン
http://kae-lab777.example.com/

正しくないドメイン
http://kae_lab.example.com/

そして、そのサブドメインを使ったサイトにブラウザは普通にアクセス出来てしまうので
あまりそのルールが広まっていないようです。

Cookieはドメインに紐付けられて管理されているので、ありえるといえば
ありえるのですが盲点でした。
有償のサーバ管理パッケージを使えばおそらく大丈夫だと思いますが
頭の片隅には置いておいたほうが良いですね。

今日聞かれたので調べてみました。
以下のようなURLからドメインまでを取得する場合のパターン。

http://www.example.com/news/index.html

<script type="text/javascript">
<!--
document.write(location.href.match(/^https?:\/\/[^\/]+/));
//-->
</script>

出力は

http://www.example.com

になります。

ちなみにhttpsでアクセスした場合も大丈夫です。
ただ、正規表現に関してはかなり簡略化しています。

JavaScriptでクッキーを使うのはすごく簡単だということが判明。

var d = new Date();
d.setTime(d.getTime() + 1 * 24 * 60 * 60 * 1000); // １日
document.cookie = "sendchk=finish;expires=" + d.toGMTString();

肝は有効期限を指定すること。
これをやらないとブラウザを閉じると同時にクッキーが消えます。

ちなみにJavaScriptでは時間をミリ秒で計算します。

【5/26追記】
もし異なるフォルダでクッキーを読み込む場合は以下のように
パスを設定する必要あり。

document.cookie = "sendchk=finish;path=/;expires=" + d.toGMTString();

ちょっとつまづいてしまったのでメモ。

selectタグの属性をmultipleに設定すると、データを複数選択する
ことができるのですが、以下のように書くとsubmitしても配列として
POST送信されず、選択した最後の値のみが送信されます。

<select name="sel" multiple></select>

正しくは以下のように書きます。

<select name="sel[]" multiple></select>

name属性に[]を付けるだけなんですが、radiobottunや
checkboxでは無くて大丈夫なので意外と見落としがちです。

multiple自体あまり使うことが無いので、こういったところで作業が
止まらないように気をつけたいものです。