Skip to content

Thought about Ads in HTML5 era: HTML5 Soda Can

Let me introduce the “HTML5 Soda Can” demo I made for ThinkMobile2011 a while ago.

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.

Posted in HTML5.

Tagged with , .

No comments

By Eiji – 2011/8/6 土曜日

Metronome demo using HTML5

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!

Posted in HTML5.

Tagged with , , .

16 comments

By Eiji – 2011/4/9 土曜日

iPhoneでモバイルウェブアプリ

お久しぶりです。すっかりウェブアプリな毎日を過ごしているえーじです。今回はモバイルウェブアプリでこれは！というネタを拾ったのでご紹介。

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に保存、オンラインになったことを検知してクラウドに同期、といった形にすれば、完全にオフラインで動作可能なウェブアプリができあがります。

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

Posted in HTML5, WebApp.

Tagged with , .

18 comments

By Eiji – 2010/8/11 水曜日

Collected social web related specs and links

I’ve collected and listed social web related specs and links on the below page.

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.

Posted in SocialWeb.

13 comments

By Eiji – 2010/7/5 月曜日

I’m joining Google

It’s been 4 years and 8 months since I had joined NTT Resonant (goo). I was lucky they had allowed me to do many things I had proposed.

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.

Posted in HTML5, プライベート.

21 comments

By Eiji – 2010/5/31 月曜日