Facebookアプリの設定ページにいつのまにかできていた「Cloud Services」を試す

どうやら、Facebookアプリを乗せるホスティングサービスを自動的に設定してくれるようなので、ちょっと試してみました。
基本的には、Herokuのドキュメントにあるとおりでいけます。

注意点は、既にherokuに登録している場合は、その登録メアドを使ったほうがよさそうってことぐらいでしょうか。

Facebookアプリの作成

Facebook開発者のアプリメニューから「新しいアプリケーションを作成」でいけます。
App Display Nameは、お好きな名前を。あとで変えることはできるので。
App Namespaceは、ひとまず空白でいいと思います。OPGでカスタムフィールドを作るときとかに使うのかな。使いたくなったらそのときに設定すればいいんじゃないかなと思いますよ。

クラウドサービスを始める

  1. アプリの基本設定画面の真ん中あたりに「Cloud Services」というセクションがあって、「Get Started」というボタンがあると思うので、それをクリック!
  2. 「Choose a provider」というダイアログが出ますが、まぁ、今はHerokuしか選べないので「Next」ですね。
  3. 「Host your site with Heroku」というダイアログが出ます。ここで開発言語とメールアドレスを入力して、「作成」ボタンをクリック

この時点で、こんなアプリができています。

Herokuに登録されていないメアドだと、登録確認メールが飛んできました。登録されていれば、そのまま使えます。

ソースを取得する

Herokuにログインして、アプリの設定を見ると、gitのリポジトリ情報が出ているので、そこからcloneすれば取れます。
ある程度ひな形が作られているのがわかるので、あとはまぁそれを参考にしながら作ればいいでしょう。

herokuの開発のやりかたは、
id:myamyugon:20111007:1318009614
にもちょっと書いたので、参考にしてください。
※ Herokuのドキュメントを見るとWindows版も出ていたりするので、書いたころとちょっと手順が違うかもしれません。

iOS5から?iPhoneのSafariのposition:fixedが有効になっている

先日、jQueryのプラグイン「Block UI」で出している似非ダイアログが出てこないという報告を受けた。

僕の持っているiPhone 4(iOS4)ではちゃんと動いているので、キャッシュとかメモリとかの関係だと思ってた。
そしたら、iOS5の人がことごとく同じ現象だとのこと。

何故だろう?と調べてみると、

・・・え?

position:fixedが効くの???
じゃあ、調整って・・・悪影響でしかないじゃん???



もうね、涙目ですよ。どうしよう・・・これ。
なんか、position:fixedが効かないがために、いろいろ小細工していた人は、泣けってことなのか?
できるなら、最初から対応してよぉ。。。(´;ω;`)


ん?Androidはどうなっているんだろう?



(´・ω・`)

iPhoneをiOS5にすると、SafariのCookie設定がオフになる

そんな現象を目の当たりにしてしまって驚いているみゃみゅ玉子です。

僕のぽよんは、まだiOS5にアップデートしていないのですが、アップデートした何人かの端末でサイトにログインできないだの使えなくなっただのが発生していました。
ログを見たり、頭を捻ったり、怪しいサイトを見てた説で解決しようとしたりしても不明のまま・・・怪奇現象に陥りそうになったのですが、
現象が起きている端末のCookie設定を見てみた人が、驚きの声を上げました。

Cookieがオフになってる!なんで!?」

その後、現象が起きる何人かを確認してみたところ、みんなオフ。オフ。オフーーーーー!!!!
どうやら、iOS5にするとSafariCookie設定がオフになるという、酷い現象が起きる人がいるようです。

iPhoneをお持ちのみなさま・・・どうか、サイト側へ通報する前に、まず端末設定の確認を!!

設定→SafariCookieを受け入れる
で確認できます。

ちなみに、iOSのことなんでiPadでも起きるもんだと思っていますが、今のところ問い合わせは来ていません。
(そんなにCookie使うところ無いからかなぁ・・・)

WindowsからHerokuにgitでpushするために。

僕は、tortoise gitを使っているので、鍵はPutty keyじゃないといけないっぽいのですが、puttygenで作ったやつだとうまくherokuにとりこめなかったので、ssh-keygenを使います。

鍵の作成

msysgitのbinにssh-keygenがあるので、

ssh-keygen.exe -C herokuに登録したメアド -t rsa

で、鍵を作って、そのprivate keyをputtygenでimportしてppkファイルで保存します。

鍵をherokuへ登録

Windowsで作った公開キーをUbuntuに送って、Ubuntu上で

heroku keys:add /PATH/TO/SAVE/DIR/id_rsa.pub 

こんな感じで登録できます。

git clone

tortoise gitで、てきとーなフォルダでcloneします。
putty keyには、↑で作ったppkファイルを指定します。

これで、きっとアプリのソースがcloneできるはず・・・。
あとは、編集してcommitしてpushして。
# restartはUbuntu側での操作なので、なんかWinだけでできるようにしたいなぁ・・・

HerokuでNode。

なんだかんだで、Herokuかぁ・・・と思いながら、Nodeでアプリを動かして見ました。

まあ、Herokuのドキュメント(Getting Started With Node.js on Heroku/Cedar)のとおりにやれば、大丈夫なわけですが。

rubyが入っていれば、Windowsでもできそうな気がするけど、Linuxでやったほうが困らないようです。
僕は、VirtualBoxUbuntuを入れて作業しました。

(1) Herokuに登録

これは、Herokuのサイト上から「Sign up」でOK。
すぐに使えます。

(2) 必要なものをインストール

Herokuのドキュメント(Getting Started with Heroku)を参考に。

git

悩まずにapt-getで。

sudo apt-get install git-core

確認は、

git --version

バージョンが表示されればOK。

ruby

ドキュメントでは1.9になってるけど、1.8でも大丈夫っぽい?

sudo apt-get install ruby

で。
確認は、

ruby --version

バージョンが表示されればOK。

gem

これもapt-getでOK。

sudo apt-get install rubygems1.8

確認は、

gem --version

バージョンが表示されればOK。

.bashrcにPATHの設定もわすれずに。(僕はこれを知らなくて悩んだ・・・)

export PATH=/var/lib/gems/1.8/bin:$PATH
heroku

これはgemで入れる。

sudo gem install heroku

確認は、

heroku version

バージョンが表示されればOK。

node

ローカルでの確認用。
NodeのバージョンはHerokuのドキュメントを見て。

wget http://nodejs.org/dist/node-v0.4.7.tar.gz
tar -zxvf node-v0.4.7.tar.gz
cd node-v0.4.7
./configure
make
sudo make install
npm

これもローカルでの確認用。

curl http://npmjs.org/install.sh | sudo sh
foreman

ローカル確認用に、これもあるといいらしい。

gem install foreman

(3)herokuの設定

インストールしたherokuでログイン情報を記憶

heroku login

登録した時のメアド、パスワードを聞かれるので、入力。
公開キーを作るか?と聞かれるので、作りたかったら、Y。作らなくても後で自分のキーを追加できるので、心配なさらずに。

※キーを登録しないと、後でgitにコミットしたりできません。

(4)ローカルでアプリを作る

まあ、まずはHelloでも出しておきますかね。

mkdir node-sample
cd node-sample
vim web.js

web.jsの中身は、こんな感じで。

var exp = require('express');
var app = exp.createServer(exp.logger());

app.get('/', function(req,res){
    res.send('Hello!!');
});

var port = process.env.PORT || 3000;

app.listen(port, function(){
    console.log("Listen on " + port);
});

console.log("Start sample");

あとは、同じディレクトリにpackage.jsonとProcfileが必要なので、それも。
まずは、package.json

{
        "name": "node-test",
        "version": "0.0.1",
        "dependencies": {
                "express": "2.2.0"
        }
}

次に、Procfile

web: node web.js

確認するなら、

foreman start

でちゃんと動けばOKかな。

(5)gitに登録。そしてherokuへデプロイ。

まずは、git。

git init
git add .
git commit -m "init"

そして、ここでheroku上にアプリを作成!そうすることで、gitのあれこれもやってくれる。

heroku create --stack cedar

Git remote heroku added

って出てたら、OK。
そして、push。

git push heroku master

なんか、pushするとそれがトリガーなのか、いろいろ出てくる。

(6)heroku側の操作

これを最初にする必要があるのかな?

heroku ps:scale web=1

プロセスの稼働状況を見る

heroku ps

web.1があればOK。

再起動するなら

heroku ps:restart web.1

ログを見るなら、初回のみアドオン登録が必要。

heroku addons:add logging

最新ログを見る場合は、

heroku logs

tail -f的なのは、

heroku logs -t

あとは、アプリのURLにアクセスしてみて、Helloが出てくればOK。
Scriptを変えたりして遊ぶといいかと。

Google Chromeアプリ「ぐるめDJ」を開発しています

ぐるめDJは、きまぐれに居酒屋・レストランを紹介するGoogle Chromeアプリケーションです。

インストールして、放置しておくとたまにポップアップでお店をおすすめしてくれます。
f:id:myamyugon:20110604152309p:image:left
このポップアップのお店が気になったら、クリック!すると・・・
新しい画面が開いて、ぐるめDJがオススメ内容をしゃべってくれます。(音声は無いです。。。)
f:id:myamyugon:20110604152310p:image

このお店に行ってみたくなったら、ホットペッパーグルメで見てみてください。
f:id:myamyugon:20110604152311p:image

そんな感じです。まだまだ開発中なので、いろいろ改良すべき点がありますが、よかったら使ってみてください!
インストールは、↓こちらから。
http://sites.google.com/site/tmgnapps/home/chrome-apps/gourmet_dj

自分のサイトにFacebookのコメント欄を表示する(fb:comments)

お久しぶりです。あけよろです。
そんなわけで、最近はFacebookにはまっています。

で、いろいろ作ったりして、いつか実装したいな・・・と思っていた機能がありました。
Facebook 開発者のドキュメントの下のほうにあるディスカッション。
これって、ソーシャルプラグインにならないのかなぁ・・・と。

あれこれ悩みながら、ドキュメントを見たりしていて・・・・ふと、fb:commentsをいじっていたら・・・

できました。(笑)

<fb:comments href="http://xn--cbkalj9885c9m4a.net/" />

fb:like-boxのように、hrefにすることでサイト指定が可能・・・というだけでなく、別のプラグインになります!
なんなんだ!?fb:comments!!

しかも、コメント管理画面から管理者が校閲できるし!
しかもしかも!そこの設定次第でfacebookだけじゃなく・・・twitterなどの他のアカウントからもコメントができる!!

現在、1日だけなぜか公開されていたドキュメントが消えちゃっているので、これがいつまで可能かわかりませんが・・・
できれば、このまま・・・もうちょっとパフォーマンスをよくして、正式リリースしてほしい!!
ううん、正式じゃなくてもいい。・・・消えなければ。(笑)

ちなみに、これはそのコメント対象のページのOpen Graph Protocolの情報を見るみたいなので、今後はけっこう重要になってきますよ!OGP!!
・・・たぶん。

そんなわけで、ちょっとした発見だったので勢いで書いてしまいましたが、
今年もよろしくお願いします。

追記 2011-01-19

ちなみに、これはそのコメント対象のページのOpen Graph Protocolの情報を見るみたいなので、今後はけっこう重要になってきますよ!OGP!!

と、書いたのですが・・・どうやら、hrefのfb:commentsはURLは見てくれないようです。
hrefのURLをそのまま使うため、そのままペタッと貼り付けるだけでは不要なパラメーターまで持ってきてしまううえに、同じ記事なのに違うページとみなされて、コメントが全部見れなかったりします。

これはいけない!!

なので、これを回避するために・・・URL Lintを使いましょう。
jQueryで書くと、こんな感じです。

// URL Lintで正規化されたURLを持ってくる
var targetUrl = "http://xn--cbkalj9885c9m4a.net/?aaa=bbb&ccc=ddd";
$.ajax({
	url: "http://developers.facebook.com/tools/lint/?format=json&url=" + encodeURIComponent(targetUrl),
	type: "GET",
	dataType: "jsonp",
	success: function(res){
		var url = "";
		for(var infoIdx in res.info){
			var data = res.info[infoIdx];
			log("type:" + data.type + ",message:" + data.message);
			if(data.type == "URL"){
				url = data.message;
				break;
			}
		}
		
		var fb_comments = ['<fb:comments href="', url , '" />"].join(""); 
		$("#fb-comments").html(iframe);
		FB.XFBML.parse(document.getElementById("fb-comments"));
	},
	error: function(err){
		alert("エラーでした。");
	}
});

ちょっとめんどくさいなぁ・・・。。。

Aptana Studio 3でGit

意外なところで便利な感じがしたのでメモ。

aptana studio 3のダウンロードはこちらから(現在、まだベータ)

  • Githubを使う場合はSSH公開鍵が必要だが、Aptana Studio 3には「ターミナル」Cygwin?)が入っていて、ssh-keygenで作れる
  • gitクライアントがなんとなく入っている(Aptana Studio初回起動時に「Git無いの?無いなら勝手にいれるよ!」的に入る?)みたいだけれど、ターミナルじゃないとうまく動かない?
  • まあ、ターミナルでgitコマンドペシペシたたけば使えるからいいか。commitまではプロジェクトエクスプローラーでできた。

もうちょっとしっかり設定したりすれば、もしかしたらいい感じに使えるかもしれない。

web R25をFacebookで積ん読するアプリ「積25(つむ・にじゅーご)」を作りました

はじめてのFacebookアプリです。
積25(つむ・にじゅーご) op Facebook | Facebook

なんとなく、リクルートWebサービスのページを見ていたら、web R25 APIができたとのことなので、作ってみたアプリです。
FacebookのJavascript SDKも気になっていたところだったので、まあその組み合わせでちょいっと。

Mashup Award 6にも応募してみました。

最初につまずいたのは、window.fbAsyncInitのタイミングでした。
どうも、$(document).readyと平行して動いてしまうっぽいので、$(document).ready内でFacebookのJSファイルを動的に参照して、動かすようにしました。

window.fbAsyncInit = function(){
	FB.init({
		appId  : 'your app id',
		status : true,
		cookie : true,
		xfbml  : true
	});

	FB.getLoginStatus(function(res){
		if(! res.session){
			doAuth();
		}else{
			if(!checkParms(res.perms)){
				doAuth();
			}else{
				// 処理
			}
		}
	});
}

$(document).ready(function(){
	var sc = document.createElement("script");
	sc.setAttribute("type", "text/javascript");
	sc.setAttribute("src", "http://connect.facebook.net/en_US/all.js?" + (new Date()).getTime());
	var hd = document.getElementsByTagName('head')[0];
	hd.appendChild(sc);
});

これでうまくいくようになりましたが、Facebook上で動かさないと動かないという残念な・・・(´・ω・`)


あとは・・・ああ、リファレンスが違うのがけっこう困りましたね。web R25 APIの。
検索条件がidとリファレンスに書いてあるのに、実はcodeが正解とか少し悩んでしまいました。
あとは、必須条件が書いていないのに「何かしらは検索条件を指定しなさい」的なエラーに。。。リファレンスに書いておいてほしい。。。


あ、そうそう。
現状、なぜかIEでうまくうごきません。
理由は、「後で読む」でFacebookのノートに書き込むわけですが、そのcallback関数が呼ばれないためです。

FB.api("/me/notes", "post", note, function(res){
	// ... ここにこない。 ...
	if (!res || res.error) {
		errorDlg("ノートに投稿失敗!!");
	}else{
		// うまくいった
	}
});

ただ、HTTPのレスポンスは200で返ってきてるし、投稿もちゃんとできているので、関数が認識されないだとかそういう話だと思うのですが・・・
無名じゃなく、外に宣言しておいてみようかな・・・

Mashup Award 6に応募してみました

ゲームクリップアプリです。
#157 みあれこるど for Game | 応募作品一覧 | Mashup Awards 6 (#MA6) on CREYLE

毎年、応募しよう応募しようと思っていてもなかなかできなかったのですが、今回はなんとか時間を作って小さなものでもいいから応募しようと、作ってみました。
まだまだエラーが出る箇所もありますが、審査までになんとかなるかなぁ・・・?

基本的にはiPhoneで利用することを前提に作っていたりするので、PCならSafariChromeで動くかもしれませんが、他のブラウザは微妙です。
(ローカルDBやローカルストレージを使っているだけなので、Firefoxは動くかと思ったら駄目だった・・・なんで?)


ちなみに・・・今回、処理は全部JavaScriptで頑張っています。
そう。サーバーは使っていません。
意外と動くもんです。