JavaScirptをブラウザ上で組んでそのまま気軽に実行できるWebサービス

 見つけては時間が経つと忘れ、また再発見してはまた時間が経つと忘れ・・・を繰り返しているのでまとめみました。書いたらさすがに忘れまい。ブラウザ上でJavaSript実行できて当たり前じゃんというツッコミが来そうですが、いちいちテキストエディタ立ち上げてコード組んでとかじゃなく、フォームに書いてホイとすぐに試せるサービスをここでは指してます。マニュアルを読みながらサンプルコード実行してみたいだけなのに、jQueryなどのライブラリをダウンロードして・・とか環境整えるだけでも結構面倒でしょ。
 

jsdo.it

 Web上で書いてWeb上で実行できるオンラインエディター、そして、それを他の人とシェアするサイト。HTML5関連のAPIを試している人が沢山いるので探すといろいろとでてくる。jQueryな人も沢山おるようです。
jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/
 

jsfiddle

 上のjsdo.itはどちらかというと気軽に試すという感じですが、こちらは本格的にオンラインエディターという感じのWebサービスです(試していないのであくまでイメージ)。jQueryやprototypeなどのライブラリのいろいろなバージョンを試せるというのも便利そう。
jsfiddle
http://jsfiddle.net/
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと – かちびと. net
 

jsPerf

 jsPerfはこのエントリの趣旨から少し離れてしまいますが、便利そうなのでいっしょに掲載しておきます。JavaScritの実行速度の比較ができるサービスのようです。
jsPerf: JavaScript performance playground
http://jsperf.com/
 
 詳細は以下をご覧ください。
JavaScriptコードのパフォーマンス比較ができるWebサービス「jsPerf」の使い方 | Web scratch

W3Cで策定中のモバイル向けWebアプリを進化させるHTML5関連のデバイスAPI

 今、JavaScript関係の本を読みつつ、HTML5関係の本もぱらぱらと並行して読んでます。JavaScriptに対する理解がまだまだ全然なので、「サンプルコードとか、もう読むのが辛い・・」、「いや、もう、どんなこと書いてあるかその概要がざっと読めればいいや」、「いや、コードの気の流れが理解できればいいや」・・とハードルを下げ続けて現在に至ります。 といいつつも、HTML5面白いなあとほんわか感じています。
 
 Webアプリがネィティブアプリに機能的に近くなるのは、HTML+CSS+JavaScrptでできることが格段に増えるということで、Rubyを少しかじった程度のなんちゃってコーダー(笑)としては、「CやJavaを覚えずとも、JavaScriptでいけるんか!」とヘタレな感じですが、嬉しい限りです。とはいえ、現状ではWebアプリとネィティブアプリでは、以下のブログで紹介されているようにそれぞれ一長一短があるようです。
ネイティブアプリとウェブアプリ(Webアプリ)のメリット・デメリットまとめ – hachimitu blog
 しかし、上で言及されているようなカメラやセンサーなどのハードウェア固有の機能を操作できないというWebアプリの欠点は将来的に解消されていくのかもと思わせる仕様の検討がW3Cでされているようです。W3Cで検討されている仕様は膨大にあって、私はTwitterで流れてくる情報を追うのが精一杯ですが、その中で拾えた仕様のいくつかをまとめてみました。ちなみにここではいくつもものW3Cの仕様を紹介していますが、私はまだ読んでません(汗)。これからこういうのを読みたいという思いでまとめたという意味もありますのでご容赦ください。ここで書かれている事に対する間違い等のご指摘は大歓迎です。

■DeviceOrientation Event Specification

 デバイスの向きや動きに関する情報のDOMを定義している仕様です。つまり、デバイスの向きや動きを探知するセンサーをつかっていろいろとできる仕様のようです。とまあ、ちょっと知ったかぶってみましたが、後述の羽田野太巳(@futomi)さんのツィートでその存在を初めて知りました。
DeviceOrientation Event Specification
http://dev.w3.org/geo/api/spec-source-orientation.html 
 この仕様はまだEditor’s Draftの段階でまだまだ確定にほど遠いはずなんですが、HTML5.JPの羽田野太巳(@futomi)さんによる10月15日付けの以下のツィートによるとiOSデバイスではすでに実装されているようです。時期的にiOS5アップデート後のSafariについて言及されているのだろうと思いますが、すごいですね。

 この仕様については日本の情報も比較的多い。 
ヅラッシュ! – Android 3.0 端末の傾きを JavaScript Device Orientation で取得するサンプル
DeviceOrientation Eventでシェイク!iPhoneウェブアプリで使ってみる | 岡山のウェブサイト制作プロダクション “ニイハチヨンサン” のブログ
Chromeでも加速度センサー(DeviceOrientation Event)が使える様になってたみたい – 強火で進め
 
 

■WebRTC 1.0: Real-time Communication Between Browsers

 
音声や動画のリアルタイム通信機能を行うための仕様が以下のWebRTCという仕様で、Skypeのようなチャットなどに使われることを想定しているようです。カメラ、ビデオカメラ、マイクロフォンなどデバイスのインターフェイスから得た情報をHTML5に対応したブラウザで扱うことができるAPIらしい。まだEditor’s Draftの段階で、実装しているブラウザは後述の秋葉秀樹(@Hidetaro7)さんが紹介するAndroid用の開発版Opera Mobileぐらいなのでしょうか?
WebRTC 1.0: Real-time Communication Between Browsers
http://dev.w3.org/2011/webrtc/editor/webrtc.html
Chromeブラウザ初の「WebRTC」実装発表 – JavaScript/HTML5でIMを簡単開発 | エンタープライズ | マイコミジャーナル
MozillaがWebRTCグループ参加を正式表明~Firefoxへの統合も視野に -INTERNET Watch
HTML5ブラウザで音声や動画のリアルタイム通信機能「WebRTC」 :: dotHTML5
 
 この仕様は秋葉秀樹(@Hidetaro7)さんの以下のブログのエントリでその存在を初めて知りましたが、そのエントリで紹介されているようにカメラアプリなどの開発に活用することもできるようです。個人的にはチャットよりもこちらのほうが興味深いので、このエントリでも紹介させていただきました。 
HTML5でつくるカメラ&落書きアプリ(中国GTUGハッカソンで発表) | 秋葉秀樹個人ブログ 
HTML5-WEST.jp 勉強会「HTMLでつくるカメラ&落書きアプリ」フォローアップ | 秋葉秀樹個人ブログ
 

■Device APIs Working Groupが策定を進めている仕様群

 W3CのDevice APIs Working Groupが策定を進めているAPIの仕様群です。面倒ですが、”Priority APIs”と”Other”に挙げられているAPIで仕様がドラフトでも公開されているものを自分の勉強がてら以下にリスト化してみます。以下で全部ではもちろんありません。詳しくはDevice APIs Working Groupのサイトをご覧ください。デバイス関係だけでいろいろなAPIがありますねぇ・・・・。
Priority APIs
Battery Status Events(2011/10/18時点でPublic Working draft)
Contacts API(reading from addressbook)(2011/10/18時点でLast Call)
HTML Media Capture(2011/10/18時点でPublic Working draft)
The Messaging API(SMS, MMS, emails)(2011/10/18時点でPublic Working draft)
The Network Information API(2011/10/18時点でPublic Working draft) 
Other
Calendar API(2011/10/18時点でPublic Working draft)
Feature Permissions(2011/10/18時点でEditor’s Draft)
The Media Capture API (programmatic access to camera/microphone)(2011/10/18時点でPublic Working draft)
Sensor API Specification(2011/10/18時点でEditor’s Draft)
Permissions for Device API Access(2011/10/18時点でPublic Working draft)
  
 仕様を読んでいないのでよくわかりませんが、ここで検討されているHTML Media CaptureThe Media Capture APIを使ってでも将来的にカメラアプリやビデオカメラアプリなどのWebアプリが作れたりするのでしょうか。その辺、もう少し勉強してみたいところです。
 ”Other”にあるSensor API Specificationはデバイスが持つ様々なセンサーが提供する情報にアクセスするためのAPIを定めた全般的な仕様のようです。最初に紹介した”DeviceOrientation Event Specification“やGeolocation APIなどの上位にくる仕様ということでしょうか?デバイスがもついろいろなセンサーを活用することができるAPIの仕様のようです。センサーやカメラなどハードウェアが持つ機能をHTML5対応のブラウザからアクセスしたり、操作したりできるようになるといよいよ面白くなりそうですね。 
 

■さらにスコープを拡げて>Ubiquitous Web Applications Activity

 これまで紹介した仕様はUbiquitous Web Applications Activity下のWorking Group(分科会)で検討されている仕様です。他にもいろいろとありそう。じっくり調べてみたいところです。
Ubiquitous Web Applications Activity
http://www.w3.org/2007/uwa/Activity.html