Tender Surrender

先日Google+でAddy Osmani氏が紹介していたオンラインツールが便利そうだったので紹介します。

DocHub.io


CSS, HTML, JavaScript, DOM, jQuery, PHP, PythonのAPIリファレンス。インクリメンタルサーチできるので、開発中は常に開いておきたい。

Dillinger.io


最近GitHub関連で使われるようになって流行り始めたMarkdown記法を、視覚的に確認しながら入力できるツール。DropboxやGitHubのアカウントで繋ぐと、アップロードできるようです。Mac用デスクトップアプリのMouというのも合わせて紹介されていました。

HTML5Please


今から使えるHTML5機能のリストとブラウザの対応状況に応じたアドバイス、そしてPollyfill(未対応ブラウザ向けに機能を補完するJSライブラリ)などを教えてくれる便利サイト。

そしてそのAPI。ここで作ったウィジェットを自分のサイトに埋め込むことで、未対応の機能がある場合に教えてあげるUIを簡単に作れます。ブラウザの対応状況は caniuse.com を使うことで常に最新の状態だとか。

CSS3Please


このページに表示されているCSSをインラインで編集することで、表示内容を確認しつつコピペできる便利サイト。

CSS3 Playground


表示内容を確認しながらCSS3のプロパティをいじることができるプレイグラウンド。グラデーション、テキストプロパティ、トランスフォームなどに対応しています。

Responsive


ワンソースでスマートフォンからデスクトップまで幅広い閲覧環境に対応するレスポンシブウェブデザインというコンセプト。そんなレスポンシブウェブデザインを使って作られたサイトの表示内容をまとめて確認できるツール。

CanIUse.com


既にご存じの方も多いと思いますが、HTML5のブラウザごとの対応状況を調べるサイトといえばここです。

HTML5 Readiness


こちらもHTML5の対応状況を知るには有名なサイトですが、個別のAPIについて調べるためというよりも、HTML5の実装が進行していることをビジュアルで実感できることに主眼が置かれています。

Browserstack


新旧各種ブラウザのテストができる有料サービス。

Grunt

JavaScriptプロジェクト向けのコマンドラインビルドツール。ファイルの連結からバリデート、圧縮(難読化)、ユニットテストまでできます。まだベータ版だけどとてもパワフル。

jsPerf


様々なJavaScriptのテストケースを作成・共有できるサイト。既存のテストケースだけでも参考になります。Browserscope.orgを使ったブラウザごとの比較も。

jsconsole


JavaScriptコンソール兼デバッガのウェブアプリ。Adobe Shadowのようなツールが出てきた今どの程度役に立つのかは不明ですが、iOSやAndroidのブラウザに接続して使えるデバッガ機能が素敵です。

Chrome DevTools AutoSave

http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/
Chrome DevToolsの変更履歴管理機能と保存機能は便利ですが、この拡張機能を使うと自動で保存してくれるようになり、実質的にChrome DevTools上で開発を進めることが可能になります。Addy Osmaniがスクリーンキャストで分かりやすく説明してくれています。

Codiqa


jQuery Mobileサイトをビジュアルで構築できるウェブアプリ。

Read on...

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.

Read on...

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...