The original request was to come up with some ideas of HTML5 ads for audience at the event. It isn’t that hard just to create ads using HTML5, but since the purpose was to show off to the audience, I needed to inject “wow” feeling as well as to put clear sign that it’s made of HTML5.

Concept

Though there’s still a lot of things which native apps can do while web apps cannot do, it’s an interesting challenge to make HTML5 apps work like native apps. On the contrary, it’s advantage of web apps that you can see the app without installing.

So, here’s the demo I have come up with: “Wow” enough HTML5-ish, instantly experience-able and easily imagine-able of actual advertisement.

Demo

Soda Can: Please access using iPhone or iPad (you can view on Chrome but don’t break your MacBookPro!)

1. When loaded, you’ll see a can “Google Soda”. (It was originally Coke but for some reason, I asked Jerome Senaillat to make it up as “Google Soda”.)
2. Try tilting your iPhone / iPad. You can find the can actually tilts inside your browser.
3. You know what soda is like? Try shake your device. Guess what???

When the background turns red enough, try touching tab of the can. (sorry if browser crashes…)

How was that? Doesn’t this look interesting when you see it after clicking banner ad of some kind of soda drinks?

Technical Tricks

Could you guess how I did it? I assume you wondered how I did:

• 3D
• Detect device tilt
• Detect device shake
• That performance on smartphone

There’s roughly 3 tricks:

• Cylinder is made of long and narrow DOM elements
• CSS3 3D Transform enables it three dimensional and fast enough (using GPU)
• Device Orientation detects tilt and gravity

The side of can is made of many (180) long and narrow divs with each background images slightly shifted. Adding top and bottom of the can completes the shape. GPU rendering doesn’t make you feel like it’s actually moving more than 180 DOM elements when Device Orientation API detects device tilt and style changes.

I don’t bother writing any more details since it’s much easier reading the source code. This is roughly the tricks.

Summary

Asking users to install native app which is actually ad via ad sounds ridiculous but what if that app is made of HTML5? It may directly lead to conversion.

I’m hoping to see interesting ideas of ads using HTML5 soon.

Here’s a demonstration of metronome using HTML5.

http://demo.agektmr.com/metronome/

I’ve confirmed it works on Chrome12, Firefox4, Safari5, Opera10. iOS4 Safari and browser on Android2.3 also works without sound.

HTML5 technologies used:

• Application Cache
• CSS3 transform, transition, box-shadow
• Web Audio API
• Audio Element
• Drag
• WebFonts

No images used. For Chrome12, I recommend to turn Web Audio API on. Type about:flags on Ominibox on Chrome and enter, then relaunch Chrome after enabling Web Audio API. It should work better than without the flag on. If it’s disabled, the program falls back to use Audio element, but is not as stable as with Web Audio API apparently.

The trick is very simple. CSS3 transform and transition enables movement of the bar in specific intervals. When the bar flipping back, Web Audio API or Audio element makes sound of click.

You can start / stop by either clicking on the button or pressing space bar. You can change interval by moving the weight on the bar.

Enjoy!

OpenAppMkt

http://openappmkt.com/

iPhone向けのサービスです。登録なしで利用できるので、iPhoneをお持ちの方は、取り敢えず試してみてください。

iPhoneでアクセスするといきなり「ホーム画面にブックマーク」しろと出て来るので、やってみます。すると当然ながらホーム画面にアイコンが出現します。問題はここから。

アイコンをクリックして起動してみると、ブラウザではなく、ネイティブアプリらしきものが起動します(!)。これはアプリをインストールするためのアプリなので、試しにFacebookをインストールして、起動してみます。こちらのインストール手順も同じくホーム画面にブックマーク。

Facebookアプリを起動するとこれまた不思議とネイティブアプリらしきものが起動。しかし内容はどう見てもスマートフォン版Facebook・・・。

実はこれ、ウェブアプリなんです。ナビゲーションやメニューを表示していないだけで、Safariが起動している様子。iPhoneでこんな事できたんですね。

モバイルウェブアプリケーション

実際に使ってみると、これだけでユーザーエクスペリエンス(主に気分)が大分違うことに気付くと思います。なぜ今までほとんどのiPhoneウェブアプリがこの方法をとってこなかったのか不思議なくらい。Safariで見るとただのウェブサイトでも、こうしてナビゲーションなしで画面が見えると、普通のアプリとして扱うことにためらいを感じません。

レスポンスもしっかりしているので、動作の軽いアプリであれば、ウェブアプリであることを意識しないで利用できるし、何よりもウェブを作る感覚でiPhone用アプリが作れるのは、ウェブディベロッパーにとって大変ありがたいお話です。これまでの資産を活かすこともできるという意味でも、単純なことながら見逃せないテクニックと言えます。

ここまで来ると、後の問題はディストリビューション。どうやって作ったウェブアプリを配布するか。そこを担うのがOpenAppMktの役割、という訳ですね。ひとことで言えば「iTunes Storeのウェブアプリ版」。あ、これも忘れちゃイヤですけどね。詳細は見ていませんが、課金もできるようです。

HTML5と組み合わせて、究極のウェブアプリを

上記のように、Safariのメニューやステータスバーを消すには、HTMLにapple-mobile-web-app-capableというメタタグを入れるだけで、非常に簡単に実現できるようです。詳細はこちらを御覧ください。

実はこの機能、OS2.1からできていたらしく、僕も小耳に挟んだ記憶はあったのですが、実際に動いているウェブアプリを目にしたのは初めてでした。ある意味この機能が日の目を見るのに、iPhoneはHTML5の登場を待っていた、という部分もあるかもしれません。

例えば、これとApplicationCacheやWeb SQL Databaseを組み合わせたところを想像してみてください。基本的なリソースはAppCacheですべてローカルにキャッシュ。動的なデータは、オフライン時はWeb SQL Databaseに保存、オンラインになったことを検知してクラウドに同期、といった形にすれば、完全にオフラインで動作可能なウェブアプリができあがります。

色々夢が広がってしまって困りますね・・・

Though there might be much more things to list, here’s the basic ones. Since it’s difficult for me to pursue all of them for now, I’m hoping people to dig into them.

I will add short summary for each specs when I have time.

Social Web Spec Directory

If you find new specs, updates, wrong links, feel free to leave comment so that I can fix.

goo is one of the biggest portal site in Japan. First thing I wanted to do there was to let goo share profiles and social graphs across its services. goo Home was born as a social platform to accomplish that. Since the project started before Facebook‘s platform launch, I was kinda shocked to see how Facebook made its platform.

After a while, OpenSocial emerged. My next mission was to let goo Home connect to sites outside of goo as open as possible. OpenSocial looked like the best solution. So I started to learn how it works, proposed how it will work better, implemented it into our service. As a result, goo Home became the first ever OpenSocial container (non-mobile) in Japan.

In the mean time, I became a Google API Expert (called API Guru in U.S.) of OpenSocial, and a Shindig committer. Holding hackathon events as API Expert, I also had community called SocialWeb Japan, which I’ve been trying to evangelize social web technologies to Japanese developers. My goal has been “let Japanese web more social” for these 4 years.

Today, I’m thrilled to announce that I’m joining Google. I will be a Developer Advocate of Chrome/HTML5 in Tokyo. Here’s a few reasons why I chose Google and Chrome/HTML5.

1. Google has been eager to open and standardize various technologies such as OpenSocial which I respect.
2. I know they are cool by my experience as an API Guru :)
3. As an international company, I believe that I will have more chance to communicate with developers outside of Japan.
4. HTML5 is very basic technology which every developers/designers who are involved in web should know.
5. Browsers will eventually have to deal with social web where I can contribute my knowledge.
6. My 20% is going to social web :)

I’d like to thank goo Home team. They gave me chances to deal with cutting edge technologies. I wouldn’t have been able to work at Google without those experiences.

Also, I’d like to give biggest appreciation to my family, especially to my wife. She helped me since I was a poor music composer 6 years ago, when I had no idea that I was to work at Google.

I’m really excited to work there, expecting lots of great things. I hope I will be any help to the future of social and open web.

大げさに聞こえるかもしれませんが、僕はこのTwitterを含めた、いわゆる「ソーシャルメディア」が、今後インターネットの大動脈になっていく、と考えています。今回はその理由について書いてみます。

※既に気付かれている方も多いとは思いますが、昨今言われている「ソーシャルメディア」は、言葉は同じでも、数年前のブログやYoutubeといった一方通行のサービスを指す言葉とは、明らかに異なっています。今でいう「ソーシャルメディア」は、まさにTwitterやFacebookのフィードを始めとする、双方向なマイクロブログを指しています。今回のお話はそれを前提に書いていますので、ご注意ください。

検索からソーシャルメディアへ

ソーシャルメディア以前のインターネット生活の中心は、間違いなく検索にありました。「検索結果に出ないものはネットに存在しないのと同義」とまで言われ、SEOやSEMといった手法や、関連する商売まで登場。新しいサービスやメディアを立ち上げるとあれば、広告を打つことと同時に、いかに検索の上位に載せるかで、一般ユーザーに見つけてもらえるかの分かれ目になっていました。それが最近、様相が変わってきたという統計があります。

• Facebook directs more online users than Google
• Top 8 reasons why your business will need Social Media Optimization

このグラフはいくつかのサイトのトラフィック源をSNSとGoogleで比較したものです。自社サイトのトラフィック流入がこうなってくると、さすがにSEOばかりに気をとられている場合ではないことが分かると思います。

これまでは、無限に存在する情報の選別や整理をポータルサイトや検索が担ってきましたが、これからはソーシャルメディアがそのシェアを広げていくのだ、と理解しても大げさではないでしょう。

ディベロッパーにとってのソーシャルメディア

昨年mixiアプリが公開されて以来、ソーシャルアプリケーションの注目度は高まる一方。今はまさにゴールドラッシュと言えるでしょう。

ソーシャルアプリケーションが受けている理由はいくつかあると思いますが、何よりも重要なのは、サードパーティーが魅力的なアプリを提供してくれること。そしてそれを支えるのがコンテナとなるSNSの持つソーシャル性です。魅力的なアプリを体験したユーザーがそれを友達に教えて広げる、それを糧にディベロッパーがさらに魅力的なアプリを提供する。このサイクルがあるからこそ、成り立っているのがソーシャルアプリの人気なのです。

そして、このソーシャルアプリのクチコミを支えるひとつの要素が、いわゆるアクティビティストリームと呼ばれるもの。mixiアプリでも「アプリ更新情報」として表示されています。

実はこのアクティビティストリームも、ソーシャルメディアの一種です。僕はいずれmixiでも、ボイスと混ぜて表示されるようになるのでは、と踏んでいますが、そうなれば、さらにユーザーに伝わりやすく、強い影響力を持つようになるでしょう。

Foursquareを思い出してください。Foursquareでは、TwitterやFacebookと連携し、タイムラインに更新情報を挿し込むことで、その価値を高めてきたことは、先日の記事でも紹介した通りです。(言うまでもありませんが、FoursquareはSNS内のアプリケーションではないとはいえ、ソーシャルグラフやアクティビティストリームを活用しているという点で、ソーシャルアプリケーションの一種と言えます。)

このように、ソーシャルアプリにとって、ユーザーが普段見るタイムラインに入り込めることは、それだけで広告効果があります。そこにさらに、ソーシャルなクチコミ効果が加わるとなれば、ディベロッパーにとって、ソーシャルメディアが重要であることは、説明するまでもないことでしょう。1ヶ月で100万人集めるアプリが登場してきている一因は、ソーシャルメディアにあると思って間違いありません。

マーケターにとってのソーシャルメディア

ソーシャルメディマーケティングという言葉を聞いたことがある方は少なくないと思います。まさに、ソーシャルメディアを使ってマーケティングしようというお話で、最近マーケターの方たちの間では旬なトピックになっているようです。

専門外ではありますが、僕なりにソーシャルメディアマーケティングを定義すると「企業等がソーシャルメディアに入り込み、ユーザーとコミュニケーションすることで行うマーケティング」です。

• 加ト吉、DELLなどの事例
• Eye-Fiカード1500円引きキャンペーン

ソーシャルメディアは情報の流通経路として、大変注目されています。これまでの検索を利用したSEO、SEMといったマーケティング手法から、ソーシャルメディアを使ったマーケティング手法に流行が移りつつあり、SMO(Social Media Optimization)、SMM(Social Media Marketing)という言葉もチラホラ聞こえるようになってきました。

ソーシャルメディアの持つ、先程説明したようなクチコミ伝搬力には、多くのマーケターが注目しています。この熱はしばらく続くでしょう。

参考ブログ

• 日本にソーシャルメディアの風を！
• in the looop

新しいテクノロジー

さて、ここまで紹介してきた内容だけでも、十分ソーシャルメディアの将来性が高いことは分かったかと思いますが、これだけではTwitterやFacebookがすごいだけでは？と思う方もいるかもしれません。なぜ、「TwitterやFacebookが大動脈になる」ではなく、「ソーシャルメディアが大動脈になる」なのか？それは、新たなテクノロジーが立ち上がり、今後様々なソーシャルメディアがシームレスに繋がっていく未来がそこまで来ているからです。

Social Media May Get Much More Convenient for Businesses

少しわかりづらいですが、この画面キャプチャはCliqset.comからidenti.caの僕のアカウントに対して、いわゆるMentionをした状態です。identi.caのアカウントは、Cliqset.comのアカウントをフォローしていないのに、タイムラインに現れていることが分かるでしょうか？(実はフォローすることもできます！)。

Cliqset.comは、いわゆるFriendFeedタイプのソーシャルメディアアグリゲータ。identi.caはstatus.netというオープンソースプロジェクトのデモサイトで、Twitterクローンながら分散型の構成が可能なマイクロブログプラットフォームです。いずれもActivityStreamsやWebFinger、Salmon Protocol、PubsubHubbubといった先進のソーシャルウェブ技術をいちはやく実装することで、これを可能にしました。

もうここまでできるなら、TwitterやFacebookに縛られる理由はありませんよね？ユーザーは、自分の好きなソーシャルメディアサービスを使っていれば、TwitterだろうとFacebookだろうと、自由にフォローし、相手がどのサービスを使っているか意識せず、コミュニケーションを行うことができるようになるのです。

これはつまり今後ソーシャルメディアが、TwitterやFacebook単体の人気向上に依存せず、発展していくことを意味しています。

まとめ

SNS運営事業者、ディベロッパー、マーケターからの支持に加え、特定サービスに偏らない利便性が提供可能になりつつあるソーシャルメディア。時代の流れは確実にソーシャルに向かっています。人間がコンピュータのスクリーンからブラウザを起動し、どのように欲しい情報にたどり着くか。そのための道筋が、ポータルサイトや検索から、ソーシャルメディアを中心としたものに変化しつつあることは、もう明らかではないでしょうか？

もしあなたがウェブサービスのディレクタだとしたら、どうやって集客しますか？もしあなたが新製品のマーケターだとしたら、どうやって宣伝しますか？もちろん検索について考える必要はなくなりませんが、今後はソーシャルメディアを使ったマーケティングについても、決して侮ってはいけません。むしろ積極的に活用することで、これまででは考えられなかったレベルで集客することも可能になってきているのです。

お知らせ

記事タイトルは若干釣り気味だった訳ですが・・・

このブログを読んでいるような人なら、Google Buzzについて知らない人はいないと思います。中には、もう全然見てない、なんて人もいるかも知れませんが、今回の記事の記事や、先日gihyoで公開したこちらの記事でもご紹介した通り、Google Buzzの真の価値は、まだまだ発揮されていないのが現状です。

実は今回ご紹介したCliqset.comやstatus.netで使われている技術は、Google BuzzのAPI開発と共に進行している背景があります。公開されたメーリングリスト上で仕様について意見交換される中で、先行して実装されたプロダクトがCliqset.comやstatus.netなのです。

つまり、Google Buzzは現在進行しているインターネットのソーシャルウェブ化の代名詞とも言えます。

そしてこの度、僕がこのGoogle BuzzのAPI Expertに就任したことをお知らせします。2年ほど前から務めてきたOpenSocialのGoogle API Expertもしばらく留任にはなりますが、長年夢見てきたソーシャルウェブの実現に少しでも寄与出来ることに、興奮しています。

また、しばらく前からGoogle Buzz API Japanというコミュニティも立ち上げていますので、技術者の方はぜひご参加ください。

日本で僕ほどのソーシャルウェブ馬鹿はなかなかいないと自負しております。今後とも宜しくお願いいたします。

Google Buzz is a feed aggregator similar to FriendFeed, Cliqset. Service itself looks very typical and stereotype: entries on timeline with comments, likes. The only characteristics I could find was that it’s on Gmail, Google Profile. I was watching the press conference on live stream, but couldn’t find a reason it will be a big hit.

But once I look at the API docs, I’ve changed my mind. There I found that Buzz is not meant to be just a feed aggregator, how this project go beyond people’s imagination and tremendous. There was an answer I was dreaming of for three years about socialweb.

I couldn’t stop my impulse to write an article about Buzz and here it is:

True meaning of Google Buzz

Sorry it’s all written in Japanese, so the link is automated translation (might not quite understandable). But if you are disappointed about Buzz, check it out. You will change your mind.

Service called Foursquare is getting attention from Japanese early adopters recently. I’ve got more than twenty friend requests in one day in Foursquare, and that is apparently, because of an article famous blogger wrote. I’ve just started using it, found a few appealing points.

The basic usage is to post information about the place you are currently around. Though this sounds a typical location based service, there’s some characteristics you should check out:

• User motivating point system, Mayorship, Badges.
• You don’t need to post precise location since you can check-in to places someone else already have registered.
• If the place is not registered yet, you can register and get points.
• You can leave Tips on the place. For example, you can tell people that the restraunt’s curry is good.
• You can add Todos from Tips other people left on the place, so that you can someday accomplish it.

Thus, Foursquare is a kind of service that the more people join, the more people enjoy. There might be other reasons people give focus on it, I’ll keep trying to find its goodness.

By the way, did you notice that there’s some socialweb trends that Foursquare is following on this service.

Typical socialweb service design

It’s social

Yes, it’s social. Most of the services starting recently are social, and others will follow, too. It’s really hard to gain users without making the service social. It’s too common for readers of this blog, though :)

In Foursquare, you can check your friends’ where about, tips of the place you visit.

Facebook Connect / Twitter Compatible

It’s being common to adopt Facebook Connect or Twitter to a service these days. You can skip time consuming registration process – filling your name, finding friends, etc. (Foursquare requires you to complete a form, though) Some of other services don’t ask you to fill all.

What is interesting about Foursquare is that, Foursquare’s profile url is numeric by default. But once you connect Twitter account to it, its profile url turns to the one with Twitter’s screen name.

Importing Friends List

One of the reasons I got many friend requests seems because of Foursquare’s functionality to find Twitter’s followers and friend them quickly. Of course, you can do the same with Facebook friends.

Feedback Activity

The most significant reason for connecting to social service is activity stream. By being able to post feedback, the service can attract user’s friends. I know it’s needless to say on this blog, how this is effective.

By using this feedback, you can share realtime event to your friends. There’s been events like this on twitter, and this on Ustream, for example. It’s getting common to have realtime event sharing on the web.

On Foursquare, you can of course feedback activities to Twitter or Facebook. You may be able to find your friend visiting neighbor by tweet on twitter from Foursquare.

iPhone / Android apps

There’s tendency that services release iPhone / Android applications along with its web service. They are not just application on smartphones, but something that take advantage of its GPS.

Foursquare is a typical example for this kind, they have iPhone, Androind and Palm Pre version of apps.

In Japan?

So, how do japanese service do?

• Are they social?:
  Of course!
• Support Facebook Connect / Twitter?:
  The number of Twitter compatible services are rising, but for Facebook, since there’s not so many users in Japan, I don’t see Facebook Connect so often. How about mixi Connect and GREE Connect? Unfortunately, they are not public yet.
• Do they feedback activities?:
  It’s important that receiver services’ acitivty stream is popular enough. But unfortunately, there’s no real activity-stream-ed service in Japan yet. Let’s wait for mixi or GREE to maximize its activity stream’s possibilities.
• iPhone / Android apps
  You can develop smartphone apps in japan too!

Now you see, there’s potential viral effect, by utilizing social media like Twitter or Facebook. While Japanese service are delaying, you can use them and spread the service.

Summary

If you couldn’t find what’s good about being social, imagine Foursquare without characteristics I’ve introduced on this article. Not social, not able to import friends, not able to feed back activities… You may have imagined service you’ve used 5 years ago.

The slide I’ve introduced at SocialWeb Conference last year may be effective yet. Check it out.

Chrome is even easy to develop extensions on top of its extensibility. So this is my first Chrome extension called Social Graph Analyzer.

How to Use

By installing Social Graph Analyzer shows person icon on top right of your browser. To use this extension, just click this button on profile page of someone on any social services. By clicking it, pop up show up his / her other services’ profile page link. Of course, you can click them to see those pages.

I won’t describe how this is implemented, but if those profile pages include technologies like microformat or FOAF, detection possibility will go up.

In the future

Planning to show badge, how many sites are detected before clicking the button. Tracing social graph sounds nice too.

Twitter is a good place to try out. Check it out.

Download from here: Social Graph Analyzer

By the way, did you notice that this online storage means more than just a storage?

SocialWeb and Access Control

I’ve been insisting that, web will act like operating system in the future, and social web will be important part of it. Here’s ideas:

• SocialWeb will be too common to notice it exists.
• Global identity will be required.
• Social Graph will be tied with identity and will be portable.
• Social Graph will be ported to phones, TVs, etc. as well as web services.
• Social Graph will control accesses, as well as used to share or invite someone.
• File systems will eventually have ACL using Social Graph.

I’ve been thinking the last one will be future, but…

ACL on Google Docs

Google Docs Storage seems to have social ACL functionality. As you know, Google Docs originally have Access Control: When you create a doc, it’s basically private. Then, you can publish it to public, or share it with groups or people individually, by specifying his/her email address. Mail address of course, will be auto-completed as you type, derived from Gmail contact list. You can give read/write access to them.

Imagine this strong access control feature is adopted to your other files like music, photos, videos…and you can access them from desktop, iPhone, Android. Files are synced with cloud. ACL is managed easily using global identities like email address, WebFinger, OpenID. Isn’t it nice?

This is what we call: Web OS.

Summary

Some people say Google is behind Facebook, because Google doesn’t own SNS. But it’s just about application platform. Google is building something better than that, slowly but surely, as you can see on Google Docs Storage: web OS platform. In the future, Chrome OS will take advantage of this, their concept will see its completion. Their layer is lower than Facebook’s.

Someday, Facebook will notice, that they are just playing on Google’s palm top.