何でこのサービスをつくろうと思ったのか、開発者の生の声を聞くことは楽しい

Facebook開発者イベント「f8」でローンチパートナーとして発表されたクックパッドさん。
技術部長の井原正博氏へのインタビューが@ITに掲載されていた。

とても印象的だったのは、クックパッドがやりたいことは何なのか、彼がまっすぐに語っていたこと。

・・・Open Graphを使って、毎日の食卓を楽しく便利にするというクックパッドの本来の目的が、少しでも前に進むのならいいな・・・

・・・技術の進化は、あまり重要ではありません。重要なのは、「その技術によって、どれくらい生活が楽しく、豊かになるか」です。・・・

・・・「あの時代に、こんな料理を作っていたんだ」という思い出を俯瞰できる。これはクックパッドがやりたいことだったんです。人生の中でキーになる「料理」を表現し、それによって自分のアイデンティティを確認するということはやっていきたいです。・・・

料理をキーに自分のアイデンティティを確認する、そのようなビジョンを持っていらっしゃったことを初めて知った。

クックパッドを単に便利なレシピサイトとしか思っていなかったので、「アイデンティティ」という言葉まで出てくることに正直驚いた。

そういえば、スタジオジブリの宮崎駿監督は、NHKドキュメンタリーの「人間は何を食べてきたか」にとても感銘を受けたと仰っていた。食をたどっていくと人間が生きてきた歴史がリアリティを持って感じられるのかもしれない。思えば、ジブリ映画にはいつも印象に残る食事シーンがある。


何でこのソフトを、サービスを、つくろうと思ったのか、青臭い話になるのかもしれないが、開発者の生の声に触れたいと、最近益々思うようになった。

○○ができる。○○が便利。○○するのが楽。

ソフトウエアの品質として、機能性や使用性は大事だが、なんだかそういう手垢のついた売り言葉に慣れすぎて、飽きてしまった。

作り手の心の奥にある言葉が、もっと前に出てきてもいい。

そう感じているユーザーも、増えているんじゃないかな。

FacebookのOpen Graph新コンセプト「USER + ACTION + OBJECT」。人生をプログラマブルにする究極のシンプルワードだ。

FacebookのOpen Graphのコンセプトが刷新されている。

Open Graph Beta - Facebook開発者

Open Graph Beta - Facebook開発者 via kwout

これまでは

「USER + "like" + 何か（ページタイトルやURL）」

だったが、それが

「USER + ACTION + OBJECT」

と、定義された。


つまり、likeだけでなく、多様なACTIONが使えるようにり、あわせて目的語も自由に指定できるようになった。ランニングアプリだったら、「run（走る） + routes, marathons（ルートやマラソン）」、レシピアプリだったら「cook（料理する） + recipe, menu（レシピ、メニュー）」と組み合わせられる。


どのように定義できるのか、開発者サイトのチュートリアルにまとめられている。それが面白い。

Step 3: Define initial action, object, and aggregation in the Dev App

ACTIONの定義では、「Past Tense（過去形）」「Present Tense（現在進行形）」「Plural Tense（複数の現在進行形）」まで定義可能で、例えばノーマルバージョンの「cook」だけでなく、過去形は「cooked」、現在進行形は「is cooking」、私と友達は「are cooking」と、細かな表現まで定義できる。

OBJECTも、単数形「a recipe」や複数形「recipes」まで定義できる。

人間が入力していないプログラムで生成されたメッセージでも、ここまでできたら、そうそう不自然な文章にならないのでは？


人間の活動は、煎じ詰めれば全て「I did something.」で表現できる。

Facebookの新しいOpen Graphの、究極に簡略化された表現を使って、多くの人の日々の活動が益々Facebookへ流れ込んでいくだろう。そのデータの集まりは、まるで8億人の人生の塊みたいだ。

Facebookへ接続するアプリを作るときには、Open Graphを試してみよう。

BloggerのHTML/JavaScriptガジェットでTweet、いいね！、Google+1（Google Plus One）ボタンをつけてみた

Bloggerのブログ記事に対してではなく、ブログサイトそのものに対して、ツイートや、いいね！、+1をクリックできるように、Bloggerのブログ右脇にガジェットを追加してみた。

1.「HTML/JavaScript」ガジェットを追加

Bloggerの管理ページで「デザイン」＞「ページ要素」＞「ガジェットを追加」＞「HTML/JavaScript」の＋記号をクリック。

2.ソースコードを編集

「HTML/JavaScript」右下の「編集」をクリック。コンテンツ欄に以下のコードを貼り付ける。

ボタンサイズは全て65pxレベルの大きなものを選択。

<iframe allowtransparency='true' src='http://platform.twitter.com/widgets/tweet_button.html?url=ブログのURL&text=ブログのタイトル&related=Twitterのアカウント&lang=ja&count=vertical' frameborder='0' scrolling='no' style='border:none; vertical-align:top; overflow:hidden; width:110px; height:65px;'></iframe>
<iframe allowtransparency='true' frameborder='0' scrolling='no' style='width:100px; height:65px; border:none; overflow:hidden; vertical-align:top;' src='http://www.facebook.com/plugins/like.php?href=URLエンコードしたブログのURL（例：http%3a%2f%2fxxxx.blogspot.com%2f）&amp;layout=box_count&amp;show_faces=false&amp;width=100px&amp;action=like&amp;colorscheme=light&amp;height=65px'></iframe>
<g:plusone size="tall" href="ブログのURL"></g:plusone>

ガジェットのコンテンツ欄では、expr:タグが解釈されず、そのまま文字列として表示されてしまうようだ。そのため、ブログのURLやタイトルも直接入力せざるを得なかった。

何かやり方があるのかな？

Tweetボタン、Buzzボタン、FacebookのLikeボタン、いずれかが原因でIE8でページ表示に失敗する

Tweetボタン、Buzzボタン、FacebookのLikeボタンを設置したページが、IE8で表示できないという報告を、幾つか頂いた。それらのボタンが設置されていない他のページは、何ら問題なく表示されるらしい。

しかも、IE8ユーザーだと常にページが表示されないのではなく、表示されないユーザーも若干いる、という状況。自分のIE8では、表示されないと報告を受けたページは、問題なく表示される。

OSはWindows 7 32bit/64bit、Vistaと共通点が見られないが、報告をもらった方のブラウザは全てIE8だった。

ちなみに互換表示でも、表示されない状況は変わらないらしい。


どのように表示されないのか、具体的な報告を送ってくれた方のメールには、以下のエラーメッセージとエラーコードがあった。

メッセージ: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
ライン: 0
文字: 0
コード: 0

「KB927917」については、Microsoftのサポートページに対応策が書かれている。
Why do I receive an "Operation aborted" error message when I visit a Web page in Internet Explorer?

記事を読んだ限り、div要素の内側のscriptブロックで、閉じられていないdiv要素の親コンテナーの内容を変更しようとしたときに発生するようだ。


そこで疑ったのが、TweetボタンやBuzzボタン。それらはjsを読み込んでいるが、もしかしたら、申し訳ないが、それらのjsの書き方が原因でKB927917が起こっているのではないか、ということ。

試しに、Tweetボタン、Buzzボタン、FacebookのLikeボタン、全てを非表示にしてみたところ、KB927917が発生せず、ページが完全に表示できたと報告を頂いた。他サイトのコードの埋め込みは増えているが、大切なページに埋め込むときには慎重にならないといけない。


では、jsのロードではなく、iframeではどうだろいうということで、Twitterのiframeの記述だけ加えてみた。それでまた表示できなくなったと報告を受けるかどうか、様子を見てみよう。

なお、Facebookは最初からiframeのコードが提供されている。Twitterは、デフォルトはjsをロードするコードが提供されるが、調べるとiframeのコードの書き方も提供されている。

犯人はBuzzかなあ・・・？

API制限が緩くて開発者としては使いやすいサービスなので、Buzz頑張って欲しいなと思っているのだが・・・

世界地図がFacebook色に塗られていく | World Map of Social Networks | Vincos Blog

Vincenzo Cosenza氏が、最新の「World Map Of Social Networks」を公開している。
World Map of Social Networks | Vincos Blog

ベースにしたのは、Alexa社と、Google Trends for Websitesの統計データということだ。

2009年6月から2010年12月までのソーシャルネットワークのトラフィックデータが、世界地図上にマッピングされている。気になった点が幾つかある。

日本

今年の6月まではmixi色に塗られているが、現在はAmeba色に塗られている。

追記 2010.12.11
その後、Amebaはポータルやブロブホスティングプロバイダーも行っているので、純正のソーシャルネットワークサービスではないということで、トップトラフィックはmixiへ変更されたようです。

In Japan Mixi is still the most used web-based social network (Ameba that I previously mentioned it’s not a pure social networking site, but also a portal/blog-hosting provider). But if we look to mobile social networks usage the leader is Gree followeb by Mobage Town. [edited thanks to the insights from Akky Akimoto]

TechCrunchには、初発の画像が載っていますが。
World Map Of Social Networks Shows Facebook’s Ever-Increasing Dominance

モンゴル

今年の6月から現在までの間にFacebook勢力下へ。

イラン

2009年6月まではFacebookの勢力下だったが、2009年12月に空白地帯になり、現在はCloobというサイトがトップトラフィックのようだ。Facebookがトップから転落するなんて。政治的関係？

インド

以前にインドはGoogleのOrkutが普及している数少ない国だと聞いたことがある。しかし、2009年12月以降は、ここもFacebookの勢力下になったようだ。

ブラジル

ブラジルでは、GoogleのOrkutがトップトラフィックを誇っている。珍しい。でもブラジル一国でも国の面積が大きいと、バカに出来ない大きさに感じる。

ヨーロッパ

ヨーロッパは、どんどんとドメスティックなソーシャルネットワークから、Facebook勢力圏への移行が進んでいる。いろんな国があるのに、ほぼFacebook一色に塗られようとしている。


結論としては、世界地図がどんどんFacebook色に染められているということだろう。
頑固なのは、日本、ロシア、中国、ブラジル、ベトナム、オランダくらいなものだろう。
ちょっと怖いくらいだ。


World Map of Social Networks | Vincos Blog

米政府へは経済政策についてFacebookを通して直接ものを申すことができる | Have a Question About the Economy and Job Growth? Ask us. | The White House

Have a Question About the Economy and Job Growth? Ask us. | The White House

米政府は、ネット求人情報会社のモンスター・ワールドワイド社と組んで、政府の景気回復への取り組みについて直接ものを申せるページを、今週Facebookに開設した。
Monster Keep America Working | Facebook

ボトムアップで進めるスタイルが、アメリカらしいなと感じる。

ちなみに、モンスター・ワールドワイド社は世界各国にオフィスを構えているが、日本のオフィスはない。
中国、香港、インド、インドネシア、韓国、マレーシア、フィリピン、シンガポール、タイ、ベトナム、オーストラリアには、オフィスやサイトが設けられている。
International Jobs, Global Jobs, Jobs Abroad | Monster.com

フーム。

BloggerにTwitter公式ツイートボタンとGoogle Buzz投稿ボタンとFacebookのいいね！ボタンを設置する

Bloggerにツイートボタンなどを設置する際に気をつけなくてはいけないのは、インデックスページで、インデックスページのツイートになるのではなく、各ブログエントリーのツイートにならなくてはいけないことだ。

1. Twitterの公式ツイートボタン

Twitterの公式ツイートボタンのコードをBloggerのテンプレートページに貼り付ける際には、data-text属性とdata-url属性の設定が必要だ。

<a class="twitter-share-button" data-count="horizontal" data-lang="ja" data-via="Twitterのアカウント名" expr:data-text='data:title + ": "+ data:post.title' expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

expr:data-text='data:title + ": "+ data:post.title'
「ツイートする」ボタンがクリックされたときに、インデックスページのタイトルではなく、「ブログタイトル: ブログエントリーのタイトル」が反映されるようになる。

expr:data-url="data:post.url"
「ツイートする」ボタンがクリックされたときに、インデックスページのURLではなく、ブログエントリーのURLが反映されるようになる。

2. Google BuzzのBuzz投稿ボタン

Buzz投稿ボタンのコードをBloggerのテンプレートページに貼り付ける際には、最低でも、data-url属性の設定が必要だ。

<a class="google-buzz-button" data-button-style="small-count" data-locale="ja" expr:data-url="data:post.url" href="http://www.google.com/buzz/post" title="Google バズに投稿"></a>
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"></script>

expr:data-url="data:post.url"
「バズ」ボタンがクリックされたときに、インデックスページのURLではなく、ブログエントリーのURLが反映されるようになる。

3. FacebookのLikeボタン

FacebookのLikeボタンをBloggerのテンプレートページに貼り付ける際には、like.phpのクエリーパラメーターhrefの値の設定が必要だ。

<iframe allowtransparency="true" expr:src=""http://www.facebook.com/plugins/like.php?href=＆quot; + data:post.url + ＆quot;&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light&height=21"" frameborder="0" scrolling="no" style="border: none; height: 21px; overflow: hidden; width: 100px;"></iframe>

like.php?href=＆quot; + data:post.url + ＆quot;
いいね！ボタンがクリックされたときに、インデックスページのURLではなく、ブログエントリーのURLが反映されるようになる。＆は&に読み替えてください。

< まとめ >

最終的に、現在テンプレートページに貼り付けているコードは以下。上端揃えにするために結局Tableを使った。

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" width="130">

<a class="twitter-share-button" data-count="horizontal" data-lang="ja" data-via="Twitterのアカウント名" expr:data-text='data:title + ": "+ data:post.title' expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

</td>
<td align="left" valign="top" width="115">

<a class="google-buzz-button" data-button-style="small-count" data-locale="ja" expr:data-url="data:post.url" href="http://www.google.com/buzz/post" title="Google バズに投稿"></a>
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"></script>

</td>
<td align="left" width="110">

<iframe allowtransparency="true" expr:src=""http://www.facebook.com/plugins/like.php?href=＆quot; + data:post.url + ＆quot;&layout=button_count&show_faces=false&width=90&action=like&colorscheme=light&height=21"" frameborder="0" scrolling="no" style="border: none; height: 21px; overflow: hidden; width: 100px;"></iframe>

</td>
</tr>
</table>

ツイートボタンやいいね！ボタンを設置。WEBページ一等地の土地争奪戦が始まったのかもしれない

Twitterの公式ツイートボタン、その他つぶやき系のボタンやLikeボタンも、導入にむけて設置方法を調べてみた。

1. Twitterの公式ツイートボタン

Twitter / ツイートボタン

まずはTwitterの公式ツイートボタン。
ボタンのスタイルを選んでフォローをすすめるユーザー名の入力を済ませば、多くの場合、デフォルト設定で問題ないだろう。後はJavaScriptのコードをコピーして、サイトに設置すればOK。最も導入が簡単だった。

2. Google BuzzのBuzz投稿ボタン

バズ - ウィジェット

こちらもTwitter同様、ボタンのスタイルを選んで、ちょこちょこっとデフォルト設定を変更すればすぐにボタンが出来る。ソースがJavaScriptなのもTwitterと同じ。

ただ、Buzzの場合、クエリーパラメーターやJavaScriptのデータ属性で、さらに項目が設定できる。
Buttons and Gadgets - Google Buzz API - Google Code

3. FacebookのLikeボタン

Like Button - Facebook開発者

Likeボタンの埋め込みパターンとしては、IframeバージョンとXFBMLバージョンの二つがある。
Iframeバージョンはシンプルで分かりやすく、XFBMLバージョンの方は、よりFacebookのページで情報を効果的に表示することが出来るようだ。但し、XFBMLを使う場合、JavaScript SDKが必要だ。

Facebookは、Open Graph protocolに対応していて、Open Graphタグを記述すると、記述した内容がLikeボタンをクリックした際に使用される。Open Graphタグを必ずしも記述する必要はないようだ。

また、Likeボタンを設置するために、Facebookのアカウントを取得する必要はなく、デベロッパー登録も必要ない。

< 注意 >
Layout Styleを「button_count」にする場合、iframeのstyle属性のwidthが、デフォルトの90pxのままだと右端が切れます。96px以上にするとIE8でも右端が切れずに表示できます。

4. GREEのSocial Feedback

Social Feedback - GREE Developer Center（グリー デベロッパーセンター）

GREEでは、いいね！やオススメ、シェアなどのボタン設置は、Social Feedbackとして用意されている。

フォーマットはIframeで、URLやボタンの種類、大きさなどを設定したら、Iframeのコードをコピーしてサイト内に設置する。

Social Feedbackを設置するために、GREEのアカウントを取得する必要はなく、デベロッパー登録も必要ない。

GREEもFacebookと同じように、Open Graph protocolに対応しているが、GREEの場合はOpen Graphタグを記述する必要があるようだ。

5. mixiのmixi チェック

技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

mixi チェックはaタグとJavaScriptコードで構成されている。aタグのプロパティとして必須になっているdata-keyでは、mixiデベロッパー登録時に発行されるmixi チェックキーが必要。

つまり、mixi チェックを設置する際には、mixiにデベロッパー登録が必要だ。さらにデベロッパー登録後、mixi チェックを設置するサイトのURLをURL許可リストに含める必要もある。

mixi チェックもOpen Graph protocolに対応している。但し、技術仕様を見る限り、Open Graphタグの記述は必ずしも必須ではないようだ。

mixiのページは、説明がとても丁寧にされている反面、色々書かれすぎていて、若干面倒くさそうな印象を持ってしまう(^^;)。

< まとめ >

最終的に、登録などの手間や設置するメリット、ページレイアウトなどを考慮して、結局、TwitterとFacebookとGoogle Buzzに限定してボタンを設置した。

ボタンを設置する側の論理で言えば、ページの面積は限られているので、こういったボタンを全て設置するのは無理だ。

ということは取捨選択せざるをえず、その選択に勝ち残るためには、ボタンを提供する側も、設置に必要な手間をできるだけ簡略化して、高い設置メリットを提供できなければならないだろう。

どれだけ有名なサイトにボタンを設置してもらえるか、ソーシャルメディアのWEBページ一等地争奪戦が始まっているようだ。