Tender Surrender

HTML5を使ってメトロノームを作ってみたのでご紹介します。

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

動作確認はChrome12、Firefox4、Safari5、Opera10で行いました。iOS4のSafari、Android2.3の標準ブラウザでも音は出ないけど動くことは確認しています。

使ったHTML5関連テクノロジーは

  • Application Cache
  • CSS3 transform, transition, box-shadow
  • Web Audio API
  • Audioエレメント
  • Drag
  • WebFonts

といったところでしょうか。画像は一切使っていません。Chrome12の場合、Omnibox(URLの欄)にabout:flagsと入力してWeb Audio APIを有効にすることで、割と安定した動作をするはずです。無効な場合はAudioエレメントを使うようフォールバックしますが、Chromeだと不安定なようです。

トリックは単純で、transformとtransitionを組み合わせてメトロノームの棒を左右に揺らすアニメーションを一定間隔で繰り返しているだけです。反転するタイミングでWeb Audio APIまたはAudioエレメントを使ってクリック音を鳴らしています。

ボタンをクリックまたはスペースキーでメトロノームをスタート・ストップできます。重石を上下に動かせば、スピードを調節できます。

Enjoy!

Read on...

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

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

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

Read on...

下記ページにてSocial Webにまつわる関連仕様をまとめてみました。

他にも関連仕様はたくさんあると思いますが、自分で追いかけ続けるのはかなり難しい状況になってしまったので、ここいらでまとめておきます。

なお、各仕様については、時間を見つけて簡単な解説を付けていきたいと思っています。

Social Web Spec Directory

新しい仕様や間違い、更新については、コメントでご指摘頂ければ、追加・編集します。

Read on...

今の会社に勤め始めて、はや4年8ヶ月が経過しました。

ポータルサイトをまるごとソーシャル化したいとの野望を持って入社し取り組んだプロジェクトでは、サービスを跨いだプロフィールやソーシャルグラフの共有、日本初のPC向けOpenSocialコンテナの実装など、他の会社ではなかなかできないであろう体験をさせてもらいました。またその間、OpenSocialのGoogle API Expert就任とコミュニティの運営、Shindigのコミッター就任、SocialWeb Japanの運営など、ディベロッパー・エヴァンジェリストとしての活動も並行して行って来ました。まさにソーシャルウェブ馬鹿な数年間だったと思います。

一方世間はというと、日本では昨年からmixiやモバゲー、GREE、Yahoo!といった巨大サイトが次々とソーシャルアプリに対応、市場も生まれ、まさにゴールドラッシュ。海外ではFacebook Connect、OpenID Connect、Distributed SocialWebなど、こちらも着々とソーシャルウェブの次のステップに向けて進んでいます。

翻って自分の今後の方向性を考えた時、今の立ち位置で本当にやりたいことをやれるのか、世間に影響を与えられる仕事をしていけるのか、疑問を持ち始めました。そんな時にもらったのがこの話です。

6月1日よりGoogleに転職します

** **ポジションはDeveloper Advocate。いわゆるエヴァンジェリストです。今後はChromeやHTML5の技術を普及する立場に身を置きます。

周囲の方から、なぜGoogleなのか?なぜソーシャルウェブ担当じゃないのか?必ず聞かれるので、備忘のためにもここで理由をまとめておきます。

  • GoogleはOpenSocialをはじめとした、インターネットのオープン化、標準化を力強く進めてきた。
  • Google API Expertとして関わってきた経験からも、その魅力に間違いはないと確信していた。
  • 国際色豊かな企業なため、世界中のディベロッパーを相手にし、経験を積んで行くことができると考えた。
  • HTML5とブラウザという、インターネットに関わる全ての人が知っておくべき基礎となる技術を、表舞台に立って啓蒙できる事を、エキサイティングであると感じた。
  • ブラウザとソーシャルは今後、切っても切れない関係になって行く。その動きの一端を担う事ができると考えた。
  • 20%ルールの中でソーシャルウェブに取り組むことを認めてもらえた。

他にも細かい理由は挙げればキリがないですが、この辺りが主なものです。今の自分にとって、文字通りこれ以上は存在しないであろう選択肢を取ることができたのは、実にラッキーだったと思っています。

運営コミュニティの今後について

これまで運営してきたコミュニティについても、簡単に触れておきます。

SocialWeb Japanについては、可能な限り今後も自分で運営を続けていきたいと考えています。まだ5回しか勉強会を開いていませんが、取り上げたいテーマは日々積み上がってきているので、ずっと気にしています。(スタッフを継続で募集しています。興味のある方は、ご連絡ください。)

Google Buzz API Japanについては、Hackathonなど開きたいところですが、時間的余裕ができるか分かりませんので、しばらく様子を見させてください。

OpenSocialのAPI Expertのポジションは、当然ですが卒業します。代わりに別の優秀な方を推薦しようと思っていますので、俺かな?と思った方は、楽しみにしていてください :)

ご存じない方が多いかもしれませんが、開発者のための英語学習コミュニティEIGOBUは、自分のためにも継続していくつもりです。

最後に

今まで僕の活動やわがままに付き合ってくれた前職のチームの皆さん、僕を支えてくれた家族に感謝したいと思います。

特に妻は、僕がバイトをしながら職業作曲家をやっていた時に婚約し、ウェブの世界に入って就職した後も会社買収・転職といった紆余曲折を一緒に乗り越え、子育ての最中にGoogle転職というひとつのマイルストーンに辿り着くまで、信じて支えてきてくれました。

これから何がどうなっていくのか、僕にもまだ分かりません。ただ、Googleで働くことが楽しみでしょうがなく、これが僕にとって、人生の最大のターニングポイントになるであろうことは間違いなさそうです。

今後も、日本のウェブをより良くするために貢献していければと思います。

北村 英志

Read on...

Twitterが登場して数年。始めのうちは意味も分からず、ただ話題だというだけで使っていたのですが、今ではすっかり生活の一部になっています。自分でもちょっと中毒かも?と思う一方、同じように感じながら使っている人は少なくないのではないでしょうか?その勢いは留まることなく、日本での浸透率は上昇する一方。ネット業界人ではない友達でも、使い始める人がチラホラ出てきています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考ブログ

新しいテクノロジー

さて、ここまで紹介してきた内容だけでも、十分ソーシャルメディアの将来性が高いことは分かったかと思いますが、これだけでは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クローンながら分散型の構成が可能なマイクロブログプラットフォームです。いずれもActivityStreamsWebFingerSalmon ProtocolPubsubHubbubといった先進のソーシャルウェブ技術をいちはやく実装することで、これを可能にしました。

もうここまでできるなら、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というコミュニティも立ち上げていますので、技術者の方はぜひご参加ください。

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

Read on...