2011-12-09

Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア )

Facebook IE

はじめに

みなさん、お元気ですか＞＜リリースも終わって、一息ついたあまちゃんです！
ヽ(´ー｀)ノわー
さて今日は、最近「お花サプライズ！」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。

（今日のテーマはこの円グラフ）

フェイスブック系のサービスはどのブラウザに対応すれば良い？

よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか？」というものがあります。
「お花サプライズ！」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか？」という心配が常にありました。
そこでよぎる甘い誘惑

このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね？

で、調べてみると大概の場合は「やっぱり IE6 や IE7 は無視できない… orz」となるのですが、「お花サプライズ」は、ターゲットユーザをフェイスブックだけに限定しています。
フェイスブック自体が「IE6 を非推奨にしていたりする」ということもあるので

ひょっとしたら IE6 や IE7 をそこまでケアしなくても大丈夫なんじゃないだろうか？

そう思って、ちょっと調べてみました。

ウェルカムページメーカーのデータをもとに調べる

実は、お花サプライズ！を作る前にちょっと作ったプチサービスがありまして、それがフェイスブックページのウェルカムページを作るサービス「ウェルカムページメーカー」です。
作ってからずっと放置してるんですけど、何げにずっと伸びてて、今は 3100 ページ以上のフェイスブックページに導入されていて、月間ユニークユーザーベースで 110,000 人からのアクセスがあります。

(9月〜今日までの訪問数、にょきにょき〜)
使われているページも、アナウンサーのページや、歌手のページ、アニメのページ、EC サイト、企業のページ、個人のページと色々なページに使われていて、そこまで偏りはないと思うので、このサービスの統計をもとにフェイスブックでのブラウザシェアを考えてみたいと思います。
また、フェイスブックのウェルカムページを見れるのは基本的には PC なので、モバイルはこの統計には含みません。

昨日から 30 日前までのデータを使う

まずは、バージョンを問わないブラウザのシェアを見てみると以下のようになりました。
訪問数ベース↓

PV ベース↓

やはり、 IE を使っている人が多いですね！
では、次に IE をバージョンごとに分割したグラフを作ってみます。
訪問数ベース↓

IE6: 3.15%、 IE7: 5.09%
PV ベース↓

IE6: 3.78%、 IE7: 5.87%
表にまとめると以下のようになりました

ブラウザ	訪問数(%)	PV(%)
IE6	3.15	3.78
IE7	5.09	5.87
IE8	27.92	32.81
IE9	14.86	19.04
IE10	0.00	0.00
Chrome	23.04	16.36
Firefox	14.34	13.77
Safari	8.68	6.16
Android Browser	1.52	0.98
Opera	0.51	0.52
他	0.89	0.71

やはり、フェイスブックユーザに限定すると IE6 や IE7 のユーザが少ないことが分かりますね。

各ブラウザに対応するために必要なコスト

次に、各ブラウザに対応するコストを僕の主観で数値化してみる
以下の数値は、プロジェクト全体でかかる時間のうち、特定ブラウザへの対応時間以外にかかる時間を 1000 としたときに、どのくらい時間を費やす必要があるかを数値化したもの

ブラウザ	JavaScript で同じ挙動を実現するのに必要な時間	CSS で文言が見えないなどの大きな崩れを解消するのに必要な時間	CSS で見た目の崩れをすべて解消するのに必要な時間
IE6	10	20	60
IE7	10	10	30
IE8	2	1	5
IE9	2	1	3
IE10	2	1	2
Chrome	1	1	1
Firefox	1	1	1
Safari	1	1	1
Opera	5	1	2

単位訪問あたりの作業時間を計算してみる

サービスへの訪問数 1% あたりのコストを計算してみる

ブラウザ	1% の訪問に対して JavaScript で同じ挙動を実現するのに必要な時間	1% の訪問に対して CSS で文言が見えないなどの大きな崩れを解消するのに必要な時間	1% の訪問に対して CSS で見た目の崩れをすべて解消するのに必要な時間
IE6	3.17	6.35	15.87
IE7	1.96	1.96	5.08
IE8	0.07	0.04	0.18
IE9	0.13	0.07	0.20
Chrome	0.04	0.04	0.04
Firefox	0.07	0.07	0.07
Safari	0.11	0.11	0.11
Opera	9.80	1.96	3.92

このように見ると IE6 の CSS のくずれを直すこと、また、 Opera の JavaScirpt に対する修正があまり生産的でないことが分かりますね＞＜

というわけで「お花サプライズ！」では

以下のようなポリシーでブラウザ対応することにしました

IE6
- JavaScript はちゃんと動くように
- 大きく崩れてても気にしない。ただし、押せないリンクやボタン、隠れて読めない文字があるのは許さない
IE7
- JavaScript はちゃんと動くように
- レイアウトが大きく崩れてるようなのは修正。多少の崩れは気にしない。押せないリンクやボタン、隠れて読めない文字があるのは許さない
Opera
- 試さない（運任せ）
- きっと、 Opera さんならやってくれる…！！！
全般的に
- ブラウザのバグに依存したコードは書かない

まあ、そもそも

特定ブラウザに「対応する」って言い方はあまりよくないですね（＞＜ごめんさない
こういう場合は、「なるべく多くの人が使ってるブラウザが実装してない仕様を使わないようにする」というのが正しいのかもしれません。
まあ、何にせよ。
これだけ色々な種類のブラウザが出てくると一つ一つのブラウザへの対応というものの重要性は薄れつつあるのかもしれませんね。
それなりに多くのブラウザでそれなりに動くのがちょうどいいと思うのですよヽ(´ー｀)ノ

最後に

みなさんも、フェイスブックユーザをターゲットとしたサービスを作ることがあれば参考にしてみてくださいー
ではではーヽ(´ー｀)ノ

2011-12-01

ソーシャルギフトサービス「お花サプライズ！」をリリースしました！

Web Facebook

僕たちのウェブサービスはまだはじまったばかりだ…ビシッ!! m9( ・`ω・´)

はじめに

お久しぶりです。三度の飯よりも、パイナップルが好きなあまちゃんです＞＜
みなさん寒い季節ですが風邪とかひいてないでしょうか＞＜
さてさて、今日、お花サプライズ！というウェブサービスをリリースしましたのでちょっと紹介したいと思います＞＜

どんなサービスなの？

お花サプライズ！とは簡単に言うと「友達の誕生日にみんなで花束を贈るサービス」です。
今、流行りのソーシャルギフトってやつですね＞＜！

何で、お花なの？

名前でも分かるように、このサービスではプレゼントは花束に限定しています。
それは、花束が「みんなが好きのものを選んで、最終的に一つの大きなプレゼントに出来る」というコンセプトに最も近い素材だったからです。
みんなが好きな花を選んで、それが一つの大きな花束になってプレゼントされる。
そんなサービスを目指しています＞＜

簡単なサービスの使いかた

説明ばかりでもアレなので、画面を見せながら簡単に使い方を紹介したいと思います。

1. まず、フェイスブックでログインします。

ポチっとな

2. 次に、花束を贈りたい人を選びます

フェイスブックでログインすると、あなたの友達の一覧が表示されます。ぜひ、仲良しの友達を選んでみてください！

友達を選ぶと以下のような画面が表示されます。

この画面は本人からは見ることが出来ないページで、こっそりと誕生日に花束を贈る企画を進めることになります。

3. 自分が贈りたい花を選ぶ

さっそく花を選んでみましょう

花は誕生日の時期によって種類が変わります。
友達に似合う花を選んでみてくださいね。

4. メッセージを書き込む

花を選ぶと、誕生日のメッセージを書くことが出来るようになります

その人に普段は言えない感謝の気持ちを伝えてみましょう。

5. 渡しに行く人を決める

お花サプライズ！の重要なコンセプトの一つに「手渡し」というものがあります。
このサービスでは普通のソーシャルギフトと違い、花を選んだ誰かが、誕生日の友達に直接花を渡しに行くのです。

何故手渡しなの？

それは、最高のサプライズを演出するために、手で渡すというコストは絶対に省いてはいけないと考えたからです。
花束を贈られた人は、みんなからのメッセージと、みんなが一本一本選んでくれた花束を直接受け取って、
はじめて「みんな、自分のために頑張ってくれたんだ。ありがとう」という感情が生まれてくると考えました。
だから、やっぱり「手渡し」じゃなきゃダメなのです。
ぜひ、みなさんも直接花束を渡しに行く「お届け係」に立候補して花束を渡しに行ってみませんか＾＾？

開発秘話

実は、この「お花サプライズ！」は、以前に紹介した UT Startup Gym という勉強会のメンバーで作ったサービスです。
開発期間は 2 ヶ月半くらいで、かなりスピーディーにリリースにこぎ着けることができました。
開発メンバーは、僕と 4 人の学生でその 4 人は、半年前までプログラムをほとんど書いたことがないという状況でした。
そんな中、どうやってこのサービスがリリースに向かっていったか。
UT Startup Gym の紹介もかねて、開発秘話をお話したいと思います。

4月勉強会スタート、プログラミングを学ぶ

4 月に今の開発メンバーが、初めてプログラムの勉強を始めました。
開発のノウハウを毎週土曜日に 3 〜 6 時間みっちり叩き込みました。

9月13日〜 9月15日開発合宿

だいぶメンバーが成長してきた 9 月中旬、このサービスの開発が始まりました。
企画は飯塚修平の持ち込んだものでした。

(お花サプライズが生まれた瞬間)
この開発合宿の 3 日間で、このサイトのほとんどのフローが完成します。
しかし、まだ、花をどうやって実際に送る？課金はどうするの？などたくさんの問題はありました。
ただ、この時期に動くものを完成させたということが後々に良い方向に働きます。

9月26日〜 10 月中旬花贈りを出来るように走り回る

合宿が終わってから、様々な人に紹介を頂き、花を扱う仕事の人に「お花サプライズ！」のデモを見せて回りました。
バラ農園に行って、生産者様の声を聞き、花業界の勉強をしたり、花市場に突撃したり、花の通販業者様にアドバイスを頂いたり、あっちこっちに飛び回ります。

そして、花の通販サイトを運営しているブラウズ様と無事契約にこぎ着けることができました。
ここで、開発合宿で作ったデモが活躍します。
様々な場で、実際に動くものを見て頂いたことで、生産的な意見や提案をたくさんいただくことができました。
やっぱり、「机上の空論ではなく、実際に動くものを見せにいくというスタンスが重要なのだな」とあらためて思いました。

9月28日〜 10月末決済周りの仕様確定

こういうサービスを作るときに、小額決済をどうするかというのは、ちょっとした悩みどころですね。
このあたりもいろんな人と交渉したり、相談したりして決済を行ってくれる会社と契約することができました。
ここでも、実際に動くものを見せることが出来るので、とてもスムーズに交渉は進みます。

11月頭〜 11月末仕上げ

そして、すべてが整って怒濤の仕上げが始まります。

(開発合宿で仕上げ作業中の画像)
この作業が一番長く感じ、そして地味で、辛い作業ですね。
ここでも開発合宿を幾度も重ね、少しでもサービスを良いものにするために頑張りました。
そして、ついに

12 月 1 日リリース

今日、ウェブサービスをリリースすることが出来ました！
なんとも言えない瞬間ですね。

(なかなか割れないくす玉…)

(パカーン)

開発メンバーへ

お花サプライズ！は、以下の勉強会メンバーで作りました。

プロマネ
- 飯塚修平 (しゅうちゃん)
開発
- 斉藤雅弘 (さいちゃん)
- 若林尚文 (わかさん)
- 砂川辰徳 (ちゃっぴー)
アドバイス＆開発
- 天野仁史 (あまちゃん)

開発中は、辛いこともあったでしょうし、いろいろと厳しいことを言ったりしたこともあったけど、最後までこのメンバーで作りあげることが出来て本当に良かったなと思います。
リリースおめでとう！そして、ありがとう！
これからは、このサイトをどうやって成長させていくかというフェーズに入っていきます。
また乗り越えなければならないことはたくさん出てくると思いますが、一緒に乗り越えていきましょう。

UT Startup Gym に興味を持ってくださっている方へ

みなさんもよかったら勉強会に参加して、自分の実現したいサービスを一緒に作ってみませんか？
興味があるかたは、以下のページをご覧ください！
https://www.facebook.com/utgym

最後に

今日は、ソーシャルギフトサービス「お花サプライズ！」について紹介しました！
みなさんも大切な人の誕生日、忘れていませんか？
そんなときは、みんなで自分たちだけの花束をプレゼントしてみませんか？

2011-09-05

Facebookページの顔、「Welcomeページ」のとことん簡単な作り方

Facebook JavaScript

はじめに

みなさんこんにちはヽ(´ー｀)ノ
本日、Facebook ページにウェルカムページを簡単に追加できるサービス「ウェルカムページメーカー」をリリースいたしました！

どんなサービスなの？

Facebook ページを持っている人なら、誰でも「とことん簡単に」ウェルカムページを作れるサービスです！
今までも、このようなサービスはあったのですが「とことん簡単に」というところを追求したのがこのサービスです。

ウェルカムページって何？

ウェルカムページとは、 Facebook ページのトップページとなるページで簡単なメッセージや、「いいね！」を促す文言を載せたりすることができます。
有名なウェルカムページとしてはレッドブルの Facebook ページなどがあります。

ついつい、「いいね！」をクリックしてしまいそうです！

なんで、「いいね！」されるが重要なの？

「いいね！」されることで、ユーザのニュースフィードにそのページの更新情報が流れるようになるのです。

なので、「企業」や「ブロガーさん」がユーザともっと仲良くなるために「いいね！」してもらうことは結構重要なことみたいです＞＜

でも、ウェルカムページ作るのめんどくさい＞＜

でも、今までウェルカムページを作るにはどうしても Facebook アプリの知識が必要だったり、 FBML という独自のマークアップ言語を使う必要があったりと何気にめんどくさい作業だったんです＞＜

と、言うわけで

「とことん簡単」にウェルカムページ作りたい！
という要望に応えたサービスがウェルカムページメーカーです！

使い方（ウェルカムページの作り方）

と、言うわけで簡単にウェルカムページメーカーを使って、ウェルカムページを作ってみましょう。

1. 画像を 2 枚用意する

今回は、サンプルにこんな画像を用意してみました
いいね！を押して　　 ... - はてなちゃんセリフ - はてなセリフべ、べつに　　嬉しい... - はてなちゃんセリフ - はてなセリフ

2. ウェルカムページメーカーに行って「さっそく作る」をクリック！

http://welcome-page.jp/ へ行って

「さっそく作る」というボタンをクリックします

3. Facebook ページを選ぶ

f:id:amachang:20110905103800j:image
ウェルカムページメーカーを追加しますか？と表示されますので、ウェルカムページを追加したい Facebook ページを選びます。
f:id:amachang:20110905103801j:image
確認画面が出るので、「ウェルカムページメーカーを追加する」を押します。

4. 画像を設定する

追加すると、以下のような画像設定画面が表示されますので、
f:id:amachang:20110905103803j:image
画像を設定して、「変更を適用する」を押します

5. 完成したウェルカムページをデフォルトページにする

以下のような更新完了ページが表示されますので、
f:id:amachang:20110905103804j:image
Facebook ページの設定に行き、「デフォルトで表示するタブ」を「ウェルカム！」に設定します。

6. これで完成！

このページに設定してみたので見てみてください！ → Amachang | Facebook

おおおお！出来てますね！簡単！

このサービスを作ろうと思ったきっかけ

で、なんでこんなサービスを作ろうかと思ったかというと先日以下のようなやりとりがあったんです。

とある会社にて

A さん：「Facebok ページにウェルカムページみたいなの作りたいんだよねー」
僕：「じゃあ、 HTML くれればやっときますよー」
A さん：「画像のほうが楽だわ」
僕：「え、 HTML より画像のほうが楽なんすか？」
A さん：「そりゃそうよ」
僕：「じゃあ、アップロードフォームがあればいいの？」
A さん：「うん」
僕：「今、作るわ」
A さん：「じゃあ、僕画像作るわ」
僕：「フォーム作った」
A さん：「画像できた」
僕：「これ、意外と便利ね」
A さん：「だね」
僕：「明日リリースするわ」
A さん：「えっ」

って感じで

打ち合わせ中に書いたサンプルコードが便利だったのでサービスとしてリリースすることにしたって感じです。

その打ち合わせ中に書いたコード

もちろん、エスケープもしてないし、 CSRF チェックとかもしてないし、画像のバリデーションもしてないし、 HTML も超適当なのでこのままリリースしてるわけではないですが、その場でパパっと書いたコードは以下のものです。

<?php
   require_once '/home/ubuntu/php-sdk/src/facebook.php';

  $facebook = new Facebook(array('appId' => 'XXX', 'secret' => 'XXX'));
  $req = $facebook->getSignedRequest();
  $page_id = $req['page']['id'];
  if($req['page']['admin']) {
    echo('<form action="upload.php" method="post" enctype="multipart/form-data">');
    echo('<input input type="hidden" name="id" value="' . $page_id . '" />');
    echo('<input input type="file" name="before" />');
    echo('<input input type="file" name="after" />');
    echo('<input type="submit" value="upload" />');
    echo('</form>');
  }
  else if($req['page']['liked']) {
    echo('<img src="/files/' . $page_id . '/after.jpg">');
    echo('<script>setTimeout(function() { top.location.href = "http://www.facebook.com/page/' . $page_id . '?sk=wall" }, 10000)</script>');
  }
  else {
    echo('<img src="/files/' . $page_id . '/before.jpg">');
  }

<?php
if (is_uploaded_file($_FILES["before"]["tmp_name"]) and is_uploaded_file($_FILES["after"]["tmp_name"]) and isset($_POST['id'])) {
  if(!is_dir("/home/ubuntu/simplefb/files/" . $_POST['id'])) {
    mkdir("/home/ubuntu/simplefb/files/" . $_POST['id']);
  }
  $before_file = "/home/ubuntu/simplefb/files/" . $_POST['id'] . '/before.jpg';
  $after_file = "/home/ubuntu/simplefb/files/" . $_POST['id'] . '/after.jpg';
  if (move_uploaded_file($_FILES["before"]["tmp_name"], $before_file) and
    move_uploaded_file($_FILES["after"]["tmp_name"], $after_file)) {
    chmod($before_file, 0644);
    chmod($after_file, 0644);
    echo"アップロードしました。";
  } else {
    echo "ファイルをアップロードできません。";
  }
} else {
    echo "ファイルが選択されていません。";
}

まあ、たまにはこんな開発もいいよね

(´∀｀*)ｳﾌﾌ

というわけで

今回リリースしたサービス、「ウェルカムページメーカー」。
ぜひ使ってみてください＞＜
ではではーヽ(´ー｀)ノ

2011-02-07

フェイスブックアプリを HTTPS に対応する方法

Facebook

はじめに

みなさんこんにちは (´・ω・｀)
元気ですか？僕は元気です…。
さて。以下の記事で、フェイスブックが HTTPS をサポートするっていうことが書かれています。

Facebookが、サイトをHTTPSサポートする機能を追加しました。Firesheepなどの攻撃から自分のFacebookアカウントを守るためにも、今すぐオンにしたほうが良さそうです。
http://www.lifehacker.jp/2011/02/110202facebookhttps.html

HTTPS って何？

HTTPS って何？って方向けに簡単に説明しておくと。
「HTTPS を使う」っていうのは、「自分のパソコン」から「フェイスブック」までの「通信経路の途中に居る人」に通信内容を読まれなくなるってことです。
「通信経路の途中に居る人」って言うのは以下のような人ですね。

会社のネットワークの管理者
学校のネットワークを管理している人
インターネットプロバイダーで働いてる人
家のインターネットを管理しているお父さん

これらの人に、友達とイチャコラしてる内容とかが読まれちゃったりしなくなるんです＞＜
まあ、読まれないにこしたことはないってことですね。

やり方は

右上の「アカウント」→「アカウント設定」→「アカウントのセキュリティ」と進み以下のチェックボックスをクリックするだけ！

簡単ですね！

フェイスブックアプリを HTTS に対応する

で、フェイスブック自体が HTTPS に対応したので、フェイスブック内に埋め込まれる類のフェイスブックアプリは HTTPS に対応しなければならなくなりました＞＜
対応しないと以下のように怒られます。

やり方は、簡単で

https://www.facebook.com/developers/apps.phpに行く
「設定を編集」を押して
以下のように「Facebook Integration」のタブの中の「Secure Canvas URL」に、 HTTPS 用の URL を記述する

簡単ですね！

と、いうわけで

みなさん素敵な HTTPS ライフをお送りください！
ではではーヽ(´ー｀)ノ

2011-01-27

はてなユーザーのファンページをまとめてみた！

はてな Facebook

はじめに

どーも、生粋のはてなファンあまちゃんです！

お元気ですか？僕は元気です＞＜

さてさて

突然ですが、フェイスブックでもはてなユーザーと仲良くしたい！！
と、いうことで。はてなユーザーが作っているフェイスブックのファンページをまとめてみました。

はてなユーザーのファンページ集

こちらがそのリストです。

ファンページ	ウェブサイト	内容
Amachang	id:amachang	僕のページです。技術やウェブの情報や思ったことを呟いています。
ネタフル	id:netafull	ブログで有名なネタフルさんのページ。出版やリリースのお知らせなど
作家　内藤みか　@micanaitoh novelist	id:micanaitoh	ツイッター小説や恋愛小説で有名な内藤みかさんのページ。お仕事現場での写真や。出版やリリースのお知らせ
もともこも鳴き笑い	id:mo_tomoco_mo	はてなダイアラーさん。ブログ更新のお知らせ
津田大介	id:ozric	メディアジャーナリストの津田大介さんのページ。出版やリリースのお知らせ
けんすうのページ	id:kensuu	株式会社ロケットスタートの社長のけんすうさんのページ。
りすこ	id:kluklu	株式会社ゼロスタート広報のりすこさんのページ。日々の出来事や写真。
寺瀬功一（不真面目）	id:ujiujise		おもしろい画像や動画の紹介。日々の出来事
小澤職場・現場体験プロジェクト	id:ozarn	様々な会社の顧問や取締役をやっているおざーんさんのページ。はてなダイアリーで書いている職業体験のブログの更新情報。ファンページでしか見れない写真も多数
みたいもん！	id:masakiishitani		ブロガーのいしたにまさきさんのページ。ブログ「みたいもん」の更新情報。
みんなのかねとも	id:tmmknk	NAVER 広報の金子さんのページ。ツイッターを流している。ここでしかみれない写真も
はまちちゃん	id:Hamachiya2	はまちちゃんのページ。
ササクレササオ		id:sscr	ブロガーのささくれささおさんのページ。日々の出来事やブログの更新情報
ゆーすけべー	id:kamawada	エロぎーくのゆーすけべーさんのページ。
Michi Kaifu 海部美知	id:michikaifu	「パラダイス鎖国」著者、海部美知さんのページ。近日何かやるそうです。
しなもん	id:hatenacinnamon	はてなのマスコット兼会長しなもんのページ。しなもんのかわいい写真が多数
HolyGrail	id:HolyGrail	エンジニアブロガーの HolyGrail さんのページ。ブログの更新情報。
工場萌え	id:wami		写真ブロガーの wani さんのページ。ノスタルジックな工場写真の更新情報
P3(PeraPeraPrv)	id:lynmock		ツイッタークライアント PeraPeraPrv の情報やその他お役立ち情報
Purprinfanpage	id:purprin	デザイナー purprin さんのページ。仕事の情報や、出版、リリースの情報。
やくそさん！	id:YAK		エンジニア yak さんのページ。交流がメイン
Masahide Mori	id:masazangi	fbrank など Facebook 連携ウェブアプリケーションを作っている masazangi さんのページ。 fbrank のサポートページ？
達人出版会	id:tatsu-zine	技術書籍電子出版サービスのページ。準備中？
Cheebow	id:cheebow	歌って踊れるプログラマ Cheebow さんのページ。ブログの更新情報。イベント情報。作詞や作曲した曲の紹介。
Mhattaのポッドキャスト	id:mhatta	ポッドキャスター Mhatta さんのページ。ポッドキャストの更新情報
くろけん	id:chroru	くろけんさんのページ。交流メイン
今読んでいる本は、これ！	id:romaiya	romaiya さんの読書ページ。今、読んでいる本、読んだ本の感想を更新
就活甲子園（2012、2013、2014年卒）	id:rakkochan+jikopr	就職活動情報を流しているページ。ブログの更新情報
リフォーム母さん	id:sakaekoumuten	栄工務店二代目アシスタントの sakaekoumuten さんのページ。
ブログ『世界はあなたのもの。』	id:the-world-is-yours	ブロガーさんのページ。ブログ『世界はあなたのもの。』の更新情報
電書部	id:mirai-contents	電書フリマなどをやっている「電子書籍部」さんのページ。準備中？
このブログは証明できない。	id:shunsuk	エンジニア系ブロガーの shunsuk さんのページ。ブログの更新情報
MIHO Murai ＋＋	id:pipinpa	エンジニア pipinpa さんのページ。ブログの更新情報。海外記事の紹介。日々のつぶやきなど
Deg84	id:deg84	エンジニア deg84 さんのページ。ブログの更新情報。日々の呟き
【フツサラ】（フツーのサラリーマン）	id:salary-man	フツ―のサラリーマンさんのページ。ツイッターを流している。
いっしょく	id:isshoku	土木系裏幹事アイドルのいっしょくさんのページ。
laiso.org	id:laiso	エンジニア laiso さんのページ。準備中？
すぎゃーん	id:sugyan	エンジニアすぎゃーんさんのページ。準備中？
HirokazuFukami	id:fkm	エンジニア fkm さんのページ。自作ソフトウェアの更新情報
男色系男子	id:masafiro1986	非モテタイムズの記者、ブロガーの masafiro1986 さんのページ。ブログの更新情報。日々のつぶやき
YuKobayashi	id:yukoba	JavaScript で JVM で有名な yukoba さんのページ。現在準備中
玉置沙由里（MG）	id:iammg	女京大生の日記で有名な iammg さんのページ。ブログの更新情報と交流
Nic	id:ryo88c	デザイン、ウェブの企画、開発などなんでもできる nic さんのページ。日記、日々の呟き
Drillbits	id:drillbits	準備中？
( •́ .̫ •̀ )だいすけだよー	id:dk19810313	インフラエンジニア、だいすけさんのページ。日々のつぶやき
自由ヶ丘の狂犬	id:chibatch	おもしろいウェブアプリを作ってる千葉さん。日々のつぶやき
vkdb.jp	id:kuwa	ヴィジュアル系バンドの情報。
yutacar.net	id:yutacar	エンジニアの ytacar さんのページ。ブログの更新情報
Yteppei	id:yteppei	サブカル系ブロガー yteppei さんのページ。準備中？
まみぺこ	id:Mamipeko	サブカル系ブロガーまみぺこさんのページ。準備中？
西岡Blog	id:raitu	セキュリティ系 SE 兼エンジニア raitu さんのページ。写真や動画や日々のつぶやきを更新
Blog 941	id:kushii	ライブドアのブロガー、エヴァンジェリストとして有名なくしいさんのページ。絶賛準備中
にぽたん研究所	id:nipotan	ライブドアのエンジニアにぽたんのページ。独特の感性と文章術でおもしろおかしく技術を紹介。ブログの情報の更新

このまとめは

ファンページにはてなへのリンクのあるファンページを API 経由でひっぱてきたものと、手動で探したものが混ざってます。
間違いや追加したほうが良い人がいれば、ぜひ教えてください＞＜

感想

ひととおり纏めてみて思ったのは、「意外とファンページ作ってる人って少ないんだなー」ということです。
最初はランキングとかにしようと思ってたんですけど、あまりに少なかったので全部紹介することにしたぐらいです。
たしかに、ファンページを自分で作るというのには抵抗がある人も多いかもしれませんね。
ただ、ブログをやっている人にとっては更新情報を伝える良い手段だと思いますし、一般の人は RSS リーダーとか使わないので、やっぱりブログを書く人はファンページを作っておいたほうがいいんじゃないかなーなんて思ったりします。

最後に

フェイスブックをやってる「はてなー」さんとは仲良くしていきたいなー((((*´ｰ`)
ではではーヽ(´ー｀)ノ

2011-01-21

明日（1/22）20 時に第二回フェイスブックオン会を開催します！

Facebook

こんにちは

フェイスブックが面白くてしかたない昨今ですが、みなさんいかがお過ごしでしょうか！

・e・)v

というわけで

良いタイミングなので、明日（1/22）20 時に第二回となるフェイスブック「オン会」というものを開こうと思っています！

フェイスブックオン会とは

「オン会」というのは、「オフ会」のもじりで、みんなで一緒にフェイスブックににログインしようぜ！という会です！
インターネットのつながる場所から、みんなでログインして「いいね！」や「コメント」を付け合ったり、冗談を言い合ったり、お酒を飲んだりして楽しみましょう！

この機会に参加してみませんか？

もちろん、これからフェイスブックを始める人、フェイスブックを触ったことのない人でも大歓迎！この機会に、フェイスブックの楽しさを体感してみよう！
参加方法は、明日の 20 時前にフェイスブックでログインして、以下のイベントページに「参加」して
第２回FB同時オン会
以下のグループに「参加」するだけです！
フェイスブック同時オン会グループ
また、朝までやってたりしますので、ちょっと気の向いた時間に参加してみるのもいいと思います！

ではでは

みなさん、お誘いあわせのうえふるってご参加ください！
1/22（土）は、みんなでかんぱーい！

わっしょーヽ(´ー｀)ノーい

2011-01-17

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

Mixi Facebook

みなさん、こんにちは

お元気ですか？僕は元気です。

さて

最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。

そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。
OGP? おーじーぴー？？とはなんでしょうか。

OGP とは

簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。
まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。
ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別することが難しいのです。
なので、決まった OGP という書き方で HTML に情報を付加しておくことで、プログラムからも意味を理解しやすいウェブページを作っていこうってことです。

なぜ、これが重要か

「いいね！」ボタンや「チェック」ボタンで、ウェブページが紹介されるようになって、ウェブ中の様々なウェブページがどんどん SNS の中に流れ込んでくるようになっているんですね。
で、そうすると当然 SNS の中でそのページをどう表現すればいいか（リンクテキストはどうすべきか、画像はどうすべきか、どこに表示すべきか）という問題が出てきます。
そこで、最近さまざまな SNS サイトで使われるようになった仕様が OGP なんですね。
SNS だけでなく、これからは様々なサイトで「ウェブ上に書かれたモノ」と「人」をつないで行く時代になると思います。
OGP も SNS だけに留まらず、そのほかのサイトでもどんどん使われるようになっていくのだと思います。

具体的にはどう書くの？

さて、では具体的にどのように書くのか、その一例を見せたいと思います。
たとえば僕のブログのトップページについて OGP で記述すると、以下のようになります。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    <title>IT戦記 - はてなダイアリー</title>
    <meta property="og:title" content="IT戦記">
    <meta property="og:type" content="blog">
    <meta property="og:description" content="IT戦士あまちゃんが、日々思ったことやウェブのことプログラミングのことを書いている日記的なブログです。">
    <meta property="og:url" content="http://d.hatena.ne.jp/amachang/">
    <meta property="og:image" content="http://www.st-hatena.com/users/am/amachang/user.jpg">
    <meta property="og:site_name" content="はてなダイアリー">
    <meta property="og:email" content="seijro@gmail.com">
    <meta property="og:phone_number" content="080-1266-2159">
  </head>
  <body>

簡単に説明すると

og:type
- このウェブページが何のページであるかを記述（必須）
og:title
- このウェブページが記述しているモノの名前（必須）
og:image
- このウェブページが記述しているモノの画像（必須）
og:url
- このウェブページの正式な URL（必須）
og:description
- このウェブページの説明
og:site_name
- このウェブページが何かのサイトに所属する場合そのサイト名
og:email, og:phone_number
- 連絡先

詳細はThe Open Graph protocol に記述されています。
まあ、要はウェブページの情報を HTML 上の meta 要素として記述するんですね！簡単ですよね！

フェイスブックでの使われ方

ちょっと概要ばっかりだとピンとこないと思うので、具体的にフェイスブックでこの情報がどんな感じで使われるかを見てみましょう。
フェイスブックでは、以下の 4 つの箇所で OGP の情報を使っています。

「いいね！」した人のウォール（「いいね！」した瞬間）
「シェア」した人のウォール
「いいね！」した人のプロフィール
「いいね！」した人のウォール（「いいね！」した後日）

ひとつひとつ具体例を見てます。

「いいね！」した人のウォール（「いいね！」した瞬間）での OGP の使われ方

まずは、「いいね！」を押した人のウォールに書き込まれる文言についてです。
OGP の情報によって表示されるリンクテキストを変えることができます。
たとえば、ちょっとサンプルとして以下のようなウェブページを用意してみました。
http://callee.jp/ogp/003.html
このウェブページでは、まったく OGP を使っていません。
これを「いいね！」すると以下のようにウォールに流れます。

こんな感じでドメイン名のトップとタイトルがそれぞれリンクされます。（場合によっては、ドメイン名の変わりにトップページのタイトルが入ったりします。）
そこで、以下のようにウェブページ og:title と og:site_name という property 属性を持った meta 要素を追加してみます。

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="タイトルだよ">
    <meta property="og:site_name" content="サイト名だよ">
    ...
  </head>

http://callee.jp/ogp/004.html
そうすると、以下のようにリンクテキストをカスタマイズすることが出来ます。

リンクテキストの重要性

リンクテキストはストリーム型の SNS では非常に重要な要素だと思います。
たとえば、以下の二つがウォールに流れてきた場合にどちらをクリックしたくなるでしょうか。

見た目の印象が全然違いますね。
なので、フェイスブックの「いいね！」をページに置くときは og:title と og:site_name は書いたほうがいいでしょう。

「シェア」した人のウォールでの OGP の使われ方

次は、リンクを「シェア」した瞬間にその人のウォールに表示される文言や画像についてです。
ここでも、 OGP の情報によってリンクテキストや画像や概要の文言を変えることができます。
たとえば、以下の URL を「いいね！」すると
http://callee.jp/ogp/007.html
以下の画像のような感じにウォールに表示されます。

「画像」と「ウェブページのタイトル」と「ドメイン」と、場合によっては、「概要」が挿入されていますね。
これを、以下のような meta 要素を挿入すると

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:title" content="おーじーぴーのテスト">
    <meta property="og:description" content="これは、あまちゃんが Open Graph Protocol の挙動を試すために用意したページです。">
    <meta property="og:image" content="http://callee.jp/ogp/full_moon.jpg">
    ...
  </head>

http://callee.jp/ogp/009.html
以下のように、「画像」と「ウェブページのタイトル」と「概要」をカスタマイズすることが出来ます。

音声や動画を添付する方法

また OGP の情報を使ってシェアされたリンクに音声や動画を添付することが出来ます。
以下は、音声を添付する例です。
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:audio" content="http://callee.jp/ogp/audio.mp3">
    <meta property="og:audio:title" content="すごい歌">
    <meta property="og:audio:artist" content="すごいバンド">
    <meta property="og:audio:album" content="すごいアルバム">
    <meta property="og:audio:type" content="application/mp3" />
    ...
  </head>
http://callee.jp/ogp/015.html
添付された音声は、以下のようにウォールに表示されます。

以下は、動画を添付する例です。
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
  <head>
    ...
    <meta property="og:video" content="http://callee.jp/ogp/movie.flv">
    <meta property="og:video:width" content="450">
    <meta property="og:video:height" content="390">
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    ...
  </head>
ちなみに、動画を添付するには以下のフォームでサイトの審査の申請をする必要があるようです。
http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist

「いいね！」した人のプロフィールでの OGP の使われ方

また、以下のように og:type と fb:admins が設定されていると、

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    ...
    <meta property="og:title" content="おーじーぴー・ザ・ムービー">
    <meta property="og:type" content="movie">
    <meta property="fb:admins" content="amachang">
    <meta property="og:image" content="http://callee.jp/ogp/amachang.gif">
    ...
  </head>

http://callee.jp/ogp/011.html
以下のような感じで og:type で指定した種類のモノとしてプロフィールに登録されます。

ここで、このリンクをクリックすると「いいね！」したウェブページに飛びます。
ただ、ちょっとややこしいんですが、 fb:admins で指定したフェイスブックのユーザーだけは違う挙動をします。
fb:admins で指定したユーザーは、そのページの管理人となります。
管理人は、次の項で示すようにそのページを「いいね！」した人のウォールにあとからお知らせを流すことが出来ます。

「いいね！」した人のウォール（「いいね！」した後日）での OGP の使われ方

前に述べたように、「いいね！」した人のウォールに後日お知らせを流すことが出来ます。
このお知らせは、管理ページ（ファンページに似たページ）から流すことが出来ます。
管理ページへは、前述した fb:admins で指定されたフェイスブックユーザーで、ウェブページの以下の部分をクリックすることで行くことができます。

管理ページは、以下のようにファンページのような感じです。

ただ、このファンページは管理者からしか見えないファンページで、「お知らせを流す用途」にだけ使います。
たとえば、以下のようにすると

以下のようにウォールにポストされます。

で、この名前の部分をクリックするとまたウェブページに人を呼び戻すことができます。（ただ、管理者がクリックした場合は、管理ページに飛ばされます。）
つまり、この機能を使うと外部サイトに内部ファンページと同等のユーザーの呼び戻し機能を付加することが出来るということです。
これは、非常に有益になってくると思います。重要ですよ！
あと、ひとつだけ注意すべきなのは og:type が article なものはこのお知らせの機能は使えません。
これは、 article は一時的なものでリアルなモノを指さない（ブログの記事など、それ自体がファンの対象ではない）からだそうです。

fb:admins の代わりに fb:app_id を使う

fb:admins を使って、手動でお知らせを流すことが出来るのは良い機能なのですが、一つのサイトにたくさんのウェブページがあって、たくさんの「いいね！」があった場合は一個一個のページに対して管理していくのは大変ですね。
そんな場合は、 fb:admins の代わりに fb:app_id を使うことで、プログラムからそれらの作業を自動化することが出来ます。
やり方としては、以下のページからお知らせ専用のフェイスブックアプリを作ります。
Facebook for Developers | F8 Facebook開発者向けカンファレンス: 5月1～2日

で、以下の ID を

以下のように fb:app_id として設定します。
<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    ...
    <meta property="og:title" content="おーじーぴー・ザ・ムービー２">
    <meta property="og:type" content="movie">
    <meta property="fb:app_id" content="168986543145706">
    <meta property="og:image" content="http://callee.jp/ogp/amachang.gif">
    ...
  </head>
http://callee.jp/ogp/012.html
この際、以下のようにアプリケーションの設定でドメインと URL を指定しておく必要があります。

そうしたら、まず access_token （アプリケーション自身が、アプリケーションのリソースを自由に使うための認可を示す文字列）を取得します。
コマンドラインで以下のように叩きます。
# まず、アプリケーションがアプリケーション自身のリソースにアクセスするための認可を取得する
curl -F type=client_cred -F client_id=168986543145706 -F client_secret=アプリケーションの秘密鍵https://graph.facebook.com/oauth/access_token

# 次に、 URL を指定してお知らせを流す
curl -F "access_token=上のコマンドで取得できたaccess_token" -F message="Hey guys" -F id=http://callee.jp/ogp/012.html https://graph.facebook.com/feed
簡単でしょ？
このようにすると、以下のようにストリームに流れるのです。

ミクシィやグリーでの使われ方

ミクシィやグリーでは、主に「いいね！」や「チェック」したときにストリームに流れる情報の以下の三つの指定に使われます。

画像の指定
各デバイスごと（スマートフォン、モバイル、PC）のリンク先の指定
リンクテキストの指定

プロフィールへのプッシュや、あとからお知らせを流したりする機能はないと思います（あったらすみません）

OGP のこれから

このように、大手 SNS がこぞって OGP を採用したことによって、今後ますますウェブページでの OGP の利用が進んでいくのだろうと思っています。
とくに、トラフィックの重要度が高いメディアや大手ブログでの OGP の利用が進むのではないでしょうか。（はてなダイアリーでも、早く対応してくれないとユーザーがスネちゃうぞ＞＜）
また、様々なウェブページの OGP 利用を始めることで、その情報を活用するサイトも増えてくると思います。
まず、ソーシャルブックマークサイトや Twib などのように URL に紐づいた情報をたくさん持っているサイトでの活用が思い浮かびます。情報として URL を大量に持っていて、さらに OGP によって「URL が何を示すものか」が分かるようになる訳ですから「URL をブックマークするサイト」から「リアルオブジェクトをブックマークするサイト」に進化することが出来る訳ですね！
たとえば、はてなブックマークで考えてみると URL を基にした「人気エントリ」だけではなく、リアルオブジェクトを基にした「人気の本」とか「人気の映画」とか「人気のアスリート」とか「人気の人」とか「人気の場所」とか「人気の店」とか、色んな切り口で表現できるようになれるわけです。
なんかわくわくしますね！

と、いうわけで

今回は OGP （Open Graph Protocol）について紹介いたしました。
OGP、おもしろくないですか？
この記事を読んで興味を持った人は、ぜひ自分のウェブページに OGP の情報を付加してみませんか？
また、これから何か URL に紐づいたデータを扱うようなサービスを作ろうとしているなら、 OGP の情報を活用してみるとおもしろいのではないでしょうか？
ではではーヽ(´ー｀)ノ

はじめに

フェイスブック系のサービスはどのブラウザに対応すれば良い？

ウェルカムページメーカーのデータをもとに調べる

昨日から 30 日前までのデータを使う

各ブラウザに対応するために必要なコスト

単位訪問あたりの作業時間を計算してみる

というわけで「お花サプライズ！」では

まあ、そもそも

最後に

はじめに

どんなサービスなの？

何で、お花なの？

簡単なサービスの使いかた

1. まず、フェイスブックでログインします。

2. 次に、花束を贈りたい人を選びます

3. 自分が贈りたい花を選ぶ

4. メッセージを書き込む

5. 渡しに行く人を決める

何故手渡しなの？

開発秘話

4月 勉強会スタート、プログラミングを学ぶ

9月13日 〜 9月15日 開発合宿

9月26日 〜 10 月 中旬 花贈りを出来るように走り回る

9月28日 〜 10月末 決済周りの仕様確定

11月頭 〜 11月末 仕上げ

12 月 1 日リリース

開発メンバーへ

UT Startup Gym に興味を持ってくださっている方へ

最後に

はじめに

どんなサービスなの？

ウェルカムページって何？

なんで、「いいね！」されるが重要なの？

でも、ウェルカムページ作るのめんどくさい＞＜

と、言うわけで

使い方（ウェルカムページの作り方）

1. 画像を 2 枚用意する

2. ウェルカムページメーカーに行って「さっそく作る」をクリック！

3. Facebook ページを選ぶ

4. 画像を設定する

5. 完成したウェルカムページをデフォルトページにする

6. これで完成！

このサービスを作ろうと思ったきっかけ

とある会社にて

って感じで

その打ち合わせ中に書いたコード

まあ、たまにはこんな開発もいいよね

というわけで

はじめに

HTTPS って何？

やり方は

フェイスブックアプリを HTTS に対応する

と、いうわけで

はじめに

さてさて

はてなユーザーのファンページ集

このまとめは

感想

最後に

こんにちは

最近

というわけで

フェイスブックオン会とは

この機会に参加してみませんか？

ではでは

みなさん、こんにちは

さて

OGP とは

なぜ、これが重要か

具体的にはどう書くの？

フェイスブックでの使われ方

「いいね！」した人のウォール（「いいね！」した瞬間）での OGP の使われ方

リンクテキストの重要性

「シェア」した人のウォールでの OGP の使われ方

音声や動画を添付する方法

「いいね！」した人のプロフィールでの OGP の使われ方

「いいね！」した人のウォール（「いいね！」した後日）での OGP の使われ方

fb:admins の代わりに fb:app_id を使う

ミクシィやグリーでの使われ方

OGP のこれから

4月勉強会スタート、プログラミングを学ぶ

9月13日〜 9月15日開発合宿

9月26日〜 10 月中旬花贈りを出来るように走り回る

9月28日〜 10月末決済周りの仕様確定

11月頭〜 11月末仕上げ