Mozilla Vision 2012 Conference Dayに参加してきたので、その時のメモです。(いつも通り正確性は保証されません)

Boot to Gecko

B2G = Boot to Gecko

なぜ必要なのか

モバイルは閉鎖的すぎる

過去を振りかえる

• 2002年 ブラウザの場合

IE のみだったので、拡張性はなかった。 拡張する必要がなかった

やがて複数のブラウザが登場して競争するようになった。 ブラウザ間で実装の競争が起こると

• UXが良くなる
• ユーザーはハッピーになる
• 標準化も良くなっていく -> 書き手もハッピー

ブラウザとモバイル

モバイルプラットフォームは閉鎖的で、プラットフォーム側がコントールできるようにしている。

様々なプラットフォームに対応しようとするとそのプラットフォームに対応しないといけない -> 時間の無駄になってる。

プラットフォームを移行するとデータが移行できない。 このようなsilosがあるとオープンではない

これを変えるためにB2Gを作っていく。

Webプラットフォームができる事

オープンなものにするために必要なもの

• オープンなApp Marketsが必要
• プラットフォーム間を移行する際にデータも移行できる Firefox Syncのデバイスを超えた同期システム。
• BrowserID

ネイティブアプリだと使えるケドWebからは使えないモバイルの機能があるのはWebのバグなども

Boo2Gecko

B2Gに必要なもの

• iOS負けないUX
• オープンスタンダートを構築する。B2G以外でも同じAPIが利用できる
• Apps。Web自体がapp storeみたいなもの

デモ

• ロックスクリーン、ホーム画面もWebアプリとして実装されている
• 60FPS出るようにしている

電話ができるようにWeb APIとしてDevice APIを実装してある。 ネイティブコードではなくてWebの技術で実装されている。

ホーム画面もHTMLベースなので、ソースコードが見られる

• Quake 3を使ったアプリ
  • WebGLのエンジン

クラッシュしたけど、直ぐ立ち上がる。

B2Gの実装

iOSなどのネイティブAPIの代わりに、Webエンジン/標準化されたDevice APIsがあり、ネイティブUIの代わりにWebベースのUIが存在する。

すべて再開発するわけではなく、Webレイヤー以外の部分は既存のものをサイっ利用したりする。

Gonk ( Androidのものも再利用) WebランタイムにMozillaは集中開発して、GPSなど他の部分に関してはAndroidのコードを利用する。

B2Gは何がしたい

• モバイルをオープンにしたい
• プランや開発やソースコードもオープンにしている
• 作成したAPIを標準化したい
• オープンなエコシステムを作成したい
• Boot2Webkit など他の実装も作れるようにしたい
• B2Gで動くものはB2Wでうごくようになるべき

一からはじめたプロジェクトではない。 Androidのコミュニティ

Q&A

Q どのようにして標準化していくのか。 それぞれの実装に対してそれぞれのUIがあるから、ポートする作業していく必要がでていく。 Gaiaに対してのUIのガイドラインが必要

A 標準化していくのはシステムのテーマ

Q non-nativeなものを場合、ゲーム等最大限の性能出すためにネイティブAPIを開発するの?

A ネイティブAPIを実装するつもりはない。 WebGLがOpenGLが遅ければそれはWebのバグである。 クロスプラットフォームを常に担保していくという目的を持っているので、少し遠回りでもWeb APIをやっていく。

Q アプリが落ちたときに他のシステムを巻き込むの?

A プライオリティの高いものを別のプロセスを走らせる事もできる。 OSがとても軽量なので、全てがダウンしても直ぐに起動できる。

電話のプロセスは別のものとして動いてるのでOSがダウンしても生きてる。 プロセスのセパレーションと呼ばれるものが実装できてる。

Linuxカーネルがあってその上にいくつかのXULや電話やBTなどのプロセスなどを起動していく。そして最後にB2Gのプロセスが起動して、その中でWeb Appが起動する。

Chromelessのようなイメージで、全てがiframeのようなものになって、iframeにマニフェストを与えて、iframeを別プロセスで動作させることができる。

Q どのようにB2Gを提供していくか? Mozillaがサポートするの?

A Mozillaは直接デバイスを出荷することはなく、 Mozilla Phoneパートナーと一緒してやっていく。 メジャーなキャリアとはやり取りを始めていて、最終的にそのキャリアが出していくことになる。

Q デバイスを買ってきて、OSとしてB2Gを後入れるということはできるの?

A 今サムソンのデバイスを使ってるが勝手に入れてる。 なので、将来的にはより多くのデバイスをサポートして行って、そのような事が可能になる

Web 標準の今、そして未来

Tantek Çelik

スライド : Open Standards Stories & Practices

CSSの標準化に参加したことについてのお話

• ISO

買った上で誰でも見ることができる => 昔のオープン

• CalConnect

お金を払った上にテストに参加できる。 テストスイートなのに、対象が限定されている。

W3Cはだれても見られるオープン

• W3C tests

CSS WGはレポートを公開していたので誰でも見ることができた。 CalcConnectは公開してはいけないという縛りがあった

オープンなテストは再現性が担保されている

まだCSS WG不満があった

更にテスト、レポートをオープンにしていく必要がある。

• Blog
• Wiki

CSS WGのWikiを作成した。まだ閉ざされていた部分があったが、IRCやバグトラッカーなども公開していくようにした。

当時にメーリングリストはあったが、W3Cのメンバーでないとみられないようになっていたが、テクニカルな内容のものは全てPublicにしていくようにした。

• editor ‘s drafts

これもエディターが書いてる途中のものも公開していくようにした。

• last call

2011になってCSS2.1がやっとRCになった。9年もかかった。

CSS3の確固たる基盤になるCSS2.1ができた。

学んだ事

オープンは進化する

2. XFN

• 2003年

SXSWという会議に参加した時の話。

ブログロールの仕組みについての会議で、ものすごく複雑な仕様になっていた。

rel=”friend”がついてればいいぐらいな簡単なものを提案した。

実際にどういう状態がfriendなのかについて調査した。

CC

XFNは初めてのCCライセンスを使ったオープンな標準化となった。 そこからフィードバックをもらってXFN1.1をリリースした。

rel=me

一番大きな6文字。自分を示すrel属性で、多くのSNSなどで使用されている。

rel=me , OAuth

２つを組み合わせることで、OpenIDをよりシンプルなものを実現できるでは?

XFNから学んだものは単純でシンプルであるべきということ

3. MicroFormat

• rel=license

この時初めてMicroFormatという事が使われた

その頃はまだ標準に関するWikiがなかったので、Wikiで公開した。= 初めてのWikiで公開され知多Web標準

人を表現するhtml

classnameでつけていた習慣など、定義されていた言葉を元に定義した。

hcard , hcalendar

既にある用語を元に作成した標準。 既存のフォーマットを使用したので馴染みやすい。

Webレビューのフォーマット

いろいろ研究した

80/20の法則 : 比較などのある程度のフォーマットの表現が見えてきた

• hreview

hreviewという標準化した

microformats.org

これまでの標準化団体とは少し異なる。

• プロセスそのものを文章化
• 今までの教訓を掲載した
• IRCもオープンに
• パブリックなログを公開

wikiがemail以上の公式な文章であるとした。 -> Wikiが厳格であるようにした

• IRCに変更をとばすbot
• スパムの除去

Wikiのイイ点としては同時に翻訳が行えるようになった。 今も標準化作業中に17ヶ国に翻訳作業がされている。

どんどんフィードバックを送る。標準化は誰でも参加ができる環境に翻訳は重要

Wikiは誰でも参加できる。W3Cは組織としての参加が必要になってる。

全てPublic domain / CC0にすることで全てがオープンであることを体現する。

microformats2

更にシンプルになるMicroformat。 ユーザーはシンプルなしようが求められる。

4. HTML5

• 2004年

W3Cのワークショップが始まり。

HTM + CSS + DOM VS XHTML2 +XForms +etc..

これまでを進化させていく方向　VS W3CのXML

incremental VS replace

進化させていくと置き換えていくの対決

HTML VS XML は8:11でHTMLは負けた

ベンダーはHTMlの方を支持していた。MS,Apple,Mozilla等

Web自体は進化しないと行けない

WHATWGが設立

ここでHTMLは進化していった。

Web Apllication specがHTMl5になっていった。

Core+new APIsという構成はCSSも同じ

WHATWGはMITライセンスをしようした!!! これまであるライセンスを再利用した

W3Cは独自のライセンス – フォークが許されないライセンス

W3CとWHATWGの共通点

• 要素

エディタを信頼する VS WG全体で協議する

というような対立が生まれてた。

5. W3C CGs (コミュニティグループ)

• 2011年

2011にW3Cコミュニティグループができた

あるテーマに関するコミュニティグループは4人いればできる

CC0 & OWFa の仕様

Mozillaの弁護士にそれぞれ調べて持ったが、どちらもいい感じだった。 オープンに使えるライセンス。

仕様作成の10個のベストプラクティス

1. オープンに作る(標準をオープンに作っていく)
2. オープンに反復を行う(完璧じゃなくてもいいから試行錯誤を出す)
3. オープンWikiを使う
4. オープンに討議をする
5. ブログ、Tweet、あらゆる手を使ってオープンに
6. オープンなアーカイブ&ログ
7. Wiki編集はIRCに投げる
8. オープンテストスイート(堅牢、反復的に
9. テストレポートをオープンにする
10. 可能な限りコミュニティを巻き込む( 多くの人を巻き込む)

境界を超えた範囲で巻き込んだ作業をする。標準はグローバル

Q&A

Q MicroFormats以外に草の根的なものはありますか?

A OAuthはメーリングリストだけでできてきた

Q ベストプラクティスはWeb以外に対しても適応できる?

A 他にも適応できるだろう.

Facebookがオープンプラットフォームということをやろうとしている

Q W3Cのノンフォークライセンスだということだけど、コミュニティができてフォークが行われてる。W3Cが変わってきてるの?

A 今は２つの方向ができてきてる。 HTML5はまだノンフォークなライセンスになってる。

将来的には切り替わるかもしれない。

pdf.js — HTML5 と JavaScript の限界に挑戦する

なぜpdf.jsが必要なのか

信頼されたネイティブコードは脆弱性があると問題になる。

pdfに何が必要なのか

portableなのに巨大なフォーマット

• Adobeのみが実装してるサブセットがある
• pdfの一部サブセットを実装することを目的にした

圧縮されたpdfを戻して、パースしてdrawTextみたい形にしてレンダリングする。

Document -> ページとオブジェクトがある。

HTML/CSS/JS

• JavaScriptはTyped Arrayなどを使用して高速化
• Fast 2D Canvas、GPUで加速的
• CSS @fant-face フォントに対応、ダイナミックにフォントをロードする機能
• data: URI バイナリデータをJavaScript上で作れる

SVGなどを使わなかった理由もある。 = スピード

pdf.jsの手順

ダウンロード

バイナリデータをXHRでresponseTYpe = “arraybuffer”でダウンロードできる。

デコード、解読、パース

• PNG,LZWデコーダーをJavaScriptで書いた
• パーサーもJavaScriptで書いた

レンダリング

パースしたものをレンダリングしていくのが大変

• 2D CanvasでLineやarcsなどを描いていく
• bitmapもimgで描画する

問題

• 2DCanvasは十分ではなかった。
• Dash line等Canvasには実装されてなかった。 even odd ruleなどもそう

解決方法として2DCanvas自体を拡張していく

bitmap画像のデコードをサポートしてなかった。

• img と Canvasはjpeg2000
• フォーマットを追加するのは大変
• JavaScriptでデコーダーを書く

フォントの問題

• OpenType , TrueTypesなどブラウザはサポートしてないTypeがあった
• Type1は一番PDFで使わてるのにCSS Font faceでサポートされてない

解決方法としてOpenTypeに変換して、中間フォーマット的にType1をサポートした。

まだまだやることはいろいろ

• Shading fillはCSS gradientsで実装されてる
• Image Mask はCanvasがネイティブでできる
• PostScriptオブジェクト – PostScriptのインタープリタをJSで
• TYpe3フォント PDF.js自体でレンダリングを行ってる

pdfをWeb技術でレンダリングする事に成功した。

デモ

• Web技術で実装するとモバイルでも動かせる
• フルのPDFレンダラーがブラウザ上で走っている

PDFビューアーのUI

UIを作っていく

• ページビュー(サイドでページをプレビューする)
• ハイパーリンクのサポート
• テキストの選択 – 難しい
• テキストの検索 – 難しい

ハイパーリンクの実装

2種類のリンク方式がある

• 相互参照
• 外部リング

Webブラウザが認識できるaリンクに変換した。 そのオブジェクトをpdf.jsでレンダリングした上にaリンクを重ねたものを表示して扱うようにした。

相互参照はポイントへ飛ぶようにしていて、バックボタンが機能するようになっている。

テキストの選択

Canvasは画素が並んでいるだけなので選べないが、オーバーレイに透過性を持ったdivタグでテキストを描画している。

アクセシビリティもサポートできている。

pdf.jsの高速化

コンパイル

pdf.jsはPDFのサブセットをレンタリング

• PDFレンダラーはインタープリタだった
• PDFレンダラーのJITコンパイルする switch等をコンパイルしたら省略できるので、直接draw*を呼べるようにできて十数倍の動作速度が得られる。
• Overview of pdf.js guts < Chris Pitchin’ Hey

ダイナミックなコンパイレーションを行なってFunction()で実行してる。

Web Workers

Web Workersを使って別のスレッドで、デコード、パース、フォント変換、デコードイメージを行う。

• main threadではdrawを行なっていく。(これはUIブロックを生む)
• 別スレッドで実行してるものはUIブロックの影響されない
• 同時併用でタスクを実行できるので高速化

pdf.jsの現状

• 大部分の機能は完成している
• Firefox,Chromeの拡張して利用できる

* HTML/JS/CSS Can redner PDFs *

next

• PDF内のテキストを検索
• HTTP byte-rangeリクエストを使ってPDFを分割ロード。メモリの削減になる
• Web Worker内でCanvasをサポート。UIブロックを潰せる
• (maybe) WebGLで高速レンダリング？？？ GPUをもっと使える

質問

Q なぜCanvasを使用したのか?

A JavaScriptが直接やり取りできる。SVGはDOMを経由しないといけないため、より早くするには難しい。

PDFではPDFファイルがあるのだからDOMを作成してやるのは不要だ。

Q 政府などでフォームとしてPDFを利用する場合。インタラクティブなPDFな方向はするのか?

A ２つのフォームフォーマットがある

• Acro format – 標準化されてる
• XNA format – プロレタリア

PDF.jsでも実装しやすい部類のもの。 AdobeではSpiderMonkeyベースのエンジンが使わていて、Validationが行われていたりする。

pdf.jsは100%のpdfのサポートするわけではないので、フォームなどのやり取りをべーすとするならばHTMLベースのほうがよいものになるかもしれない。

Q セキュリティポリシーについて

A pdf.jsの用途について

A メールクライアントなどの場合 HTMLのセキュリティポリシーに寄っていく(クロスドメインの問題がでるかもしれない)

Q テキストの描画方法

A PDFは左から右へ書けというようなコマンドが存在する。 まだ、サポートしてないが、Canvasの機能を一部利用かもしれない。

Q Canvasにテキスト選択を追加しなかった理由?

A Canvasにそれが実装されなかったのはとても管理が大変だったから。パフォーマンスとテキスト選択のトレードオフの結果

Q 対応するブラウザについて

A pdf.jsはオープンWeb標準を使って作っていくという方向から始まった。だが、ブラウザにはまだ実装されていない機能があって、その部分が拡張実装として、Firefox や Webkitに実装されていった。

dot line と even fill あたりが互換性ブラウザの問題を生んでる。 => スタンダートを追加していく

重要なのはTyped Arrayのサポートが大事で高速に動作するにはこれが必須。# LT

LT

“実践”Emscripten

• Alon zakai
  • EmScriptenの作者
• C, C++をLLVMでJavaScriptへ変換する
  • バイトコードになってそれをエミュレート
• 手作業よりも少し遅いぐらい
• まとめ
  • 2-4倍ぐらい遅くなる
  • 変換作業が短くすむ
• JSViz
  • GraphVizを変換
  • アニメーション機能付き
  • グラフを考えるようにするのを視覚化

ブラウザプレゼンテーションの教育的利用

• Nurota Lab.
• 教師と生徒とのやり取りが必要になる。
  • 臨機応変に内容を変えられるようにする
  • 黒板以上のことをできるようにする
• インタラクティブにコードを実行しながら事業を進行できる
• Webページを埋め込むとかWeb技術を使える
• 数学とか物理とか利用方法がある

Firefox Syncサーバを建てて見た

• Firefox Sync
  • 保存情報をアドオンを同期する機能
  • Androidとも同期できる
• Mozillaのサーバに情報が転送される
  • ローカで暗号化されてから送信している
• Syncサーバを自前で建てて利用する
  • 証明書を用意してHTTPSでやり取りできる
• Python, SQLite、Macurialで動く
  • ビルドして、コマンドだけ動く
• いろいろ調整しないと動かないけど

Firefox 布教大作戦

• Firefox を 灘高校 に広める
  • IE 83%のシェアな高校
• Firefoxノートを1300部発注
  • 教員に止められた
• 「布教」は簡単ではない

Firefoxのゴキゲンな通知UI

• Popup Notifications
  • doorhangerがコードネーム
• ノンブロッキングな通知UI
• PopupNotification.show()
  • 6つの引数で設定
• 通知の複数表示ができないバグ
• ドキュメントが充実してない
  • コードはドキュメントになってる
• まとめ

ドアハンガーをもっと簡単につかいたい! – Piro

• PopupNotication.jsmの罠
  • CSSでアイコンの表示
  • コードバックをたくさん指定しないといけない
• 簡単に扱えるライブラリを書いた

海外の開発コミュニティをを利用して世界デビューをしよう

• Linuxに企業として参加
  • コミニティに参加していくには
• ユーザーもどんどん参加する
• 英語のレベルはあまりきにしない
• 批判されても落ち込まない
• 思いついたらすぐ投稿(反応を早く)
• オープンにディスカッションをする
• キーとなる人を早く見つける
• まずは感謝

才能のソーシャルメディア

• Stylelist DirectoryというSNSサービス
  • 才能のソーシャルメディア
  • 美容師のソーシャルメディア
• 欧米だと美容師は芸術家的に個人活動
  • 日本だとサロン
• 美容師が才能を発揮できるようなサイト
  • 活躍のアピール
  • 一般の人たちもそれらに反応
• Joomla の CMSを使って運営してる
  • 他の業界とのコラボレーションとかやっていきたい

Scratchでつなぐオープンな学び

• Openな学び
• Scratch
  • 8 – 12歳向けのMITが開発してるソフト
  • 80万人ぐらいアクティブユーザー
• デモ

Interop Tokyoでのオープンなネットワークエンジニア育成

• Interop
  • ネットワークの国内最大のイベント
  • いろんな会社の機器を使ってネットワークを構築する
  • 超ネット
• ShowNet
  • STMプログラム
  • インターネット技術者を育てる

まとめ

Web 標準の今、そして未来 by Tantek Çelik がとても面白かった。仕様を作っている側からの視点の話は結構貴重な貴重な気がした。

Mozilla飯よかった。

メモツール(セッションごとに別々のファイルで保存)

• Qute for PC/Mac
• Mou

• 海外のJavaScript情報を見つけよう
• 世界のJavaScript情報を読もう
• 今からRSS購読すべきタグと検索結果
• ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ
• HOW TO LEARN (これだけ記事じゃないですが)

世界のJavaScriptを読もう @ 2012を発表していた時、RSS購読フローの部分がなぜか受けが良かったようなので、簡単な補足を書いておきます。

自分はRSSリーダを多用しているので、何でもRSSにしてとりあえずRSSリーダーに流れてくるような状況を作っています。
Webサイトを見ていて、Read It Latorなどで後で読むことにしても結局読むのを忘れてしまうことがあるため、Read It Latorに登録したリストがRSSとしてRSSリーダーに流れてくるといった感じです。

Pinboardやはてなブックマークやソーシャルニュースサイト等もRSSで購読していると、同じ記事を扱ったものが何度もRSSに出てきます。
これは今からRSS購読すべきタグと検索結果でLDRの読み方にでも書いていましたが、SBMなどは量が多くなってしまうので、全て目を通そうとすると気疲れします。
そのため、SBMや検索結果等のRSSは高めのレートにして心理的に飛ばしやすい(LDRでいうSキーを押す)状態にしています。

なんで検索結果のRSSは★4にしてるかというと、検索結果RSSで出てくるサイトは★3のサイトと被ったりすることがあるので、
★4で飛ばしても★3で出てくるからまあいいっかと適当な感じで読める安心感が生まれます。

今からRSS購読すべきタグと検索結果 | Web scratch

ここから、発表してたときにウケてた部分ですが、RSSリーダで読んでいるときに少しでも気になった記事は
とりあえずTwitterへ投稿しています。(Post Now browsing to TwitterがLDRから直接投稿できるようにしているのもその辺の関係)
一応軽くは目を通してからTwitterへ投稿していますが、専門的な記事や英語の記事など一度みるだけじゃ理解が出来なかったり、判断が難しい記事も多いと思います。

そういう時にTwitterのフォロワーから反応があると理解しやすかったりします。
またFavやRTがあったものが流れてくるようにRSSを購読しておけば、重要な記事 (少なくてもフォロワーが興味を持った記事)が再度RSSとして流れてくるようになります。

こういう感じで、重要な記事は何度もRSSとして流れるようにして、読み忘れを減らしたり & 心理的に軽い気持ちでフィードを読み飛ばしても大丈夫なように意識しています。
他の人の力も借りて手を抜きつつ、人があまり見ないようなところもチェックするようにして、いろいろな情報を共有できればいいかなと思います。

どういう所などをみているかについてはオフライン勉強会でJSer.info一周年について発表してきた | JSer.infoのスライドの方にもまとめたのでそちらを見てください。

• オフライン勉強会でJSer.info一周年について発表してきた | JSer.info

「JavaScriptで大規模ゲーム開発」渋川

ソーシャルゲームの定義

• ユーザー間で非同期のやり取りが発生する

ngCore

• マルチプラットフォーム
  • 同一ソースでAndroidとiOSに対応
  • テスト環境はFlashにも対応

ゲームの構成

• ngCore上にゲームロジック/JavaScript
• サーバ/APach+FCGI上に認証とか結果の書き込みをMobageサーバに

役割分担

• ngCoreのクライアント
  • アクションシーン
  • サーバ側で作ったデータの再生
• ゲームサーバ
  • パラメーター保持、変化
  • アイテム管理
  • ミッションのスロットの目の決定など
  • ずる防止をするためサーバ側でロジックがある

ngCoreの開発サイクル

• node.jsで書かれたビルドサーバでビルドを行う。
  • ファイルの結合とか

コード

• CJSライクなモジュール
• クラスを作るsubclass関数
• ゲームはmain関数から始まる
• Core.UpdateEmitter でゲームループを回す

ゲームの基本構成

• シンプルなクラス群
  • Sceneクラスを継承してシームを作っていく
  • Sceneを遷移してゲームの遷移が行われる
• サーバ側からjsonのジョブスタックを受け取る
  • ミッション結果なども配列で返ってくる
  • 知らないジョブが来たら無視が基本方針
  • クライアントは順番に再生していくだけ
  • 新しいミッションも簡単に追加できる
• サーバエラーがおきたらホーム画面に強制的に戻る

DnLig/ngGo

• DnLib
  • ゲーム開発の共通ライブラリ
• ngGo

開発拠点

• サンフランシスコ
• 日本

• パキスタン

• SKypeチャットが主なインフラ

• git
  • git flow
• ドキュメントSphinx

ngGo/ngBuilder

• – データ駆動で行えるように
• - パラメーターチューニングのしやすさ

デバッグとテスト

• デバッグメニュー
  • サーバにデバッグ用画面がある
• Jasmineを使ってる

今後のngCore

• 3D対応、HTML5対応

まとめ

JavaScriptベースで

オフラインWebアプリケーションの作り方 (白石)

Google Gearsを使ってオフラインアプリケーションを作ったことがある。

オフラインWebアプリケーション

Google Gears

• Google Gears終了 –> HTML5へ以降を推奨
  • HTML5を中心にするようになった

オフラインでも読めるアプリの作り方

• それほど実装は難しくない
• アプリケーションキャッシュを利用すればいい

アプリケーションキャッシュとは

• 静的なリソースをキャッシュすることができる機能
• ローカルキャッシュの利点
• IE以外のブラウザでは実装されてる

キャッシュマニフェスト

• リソースのリストを作成する
• Titanium Mobileのリファレンスはローカルキャッシュされてる

アプリケーションキャッシュのJavaScript API

• window.applicationCacheにJavaScriptから操作できるアプリケーションキャッシュAPIがある。

アプリケーションキャッシュを利用する上での注意点

• キャッシュマニフェストを更新しないとリロードで反映しない
• キャッシュ容量が限られている
  • モバイルとかだと10MBぐらい

オフラインでも書けるアプリの作り方

• 割りと面倒なもの
• デスクトップアプリとやりたい事はあんまり変わらない

オフラインWebアプリを作るポイント

• 基本はリッチクライアント+同期機能

利用できるローカルストレージ

• Web Storage
• Web SQL Database
• Indexed Database API
• File API
  • ドメインごとに仮想的な空間
  • セキュリティ的なものがあるため

双方向同期

かなり難しく面倒くさい – フェールセーフ – 更新の衝突 – 同期のタイミング – ネットワーク状態、データの状態管理 – ローカルDBのスキーマ管理/サーバのスキーマと2つできてしまう – ローカルDBのクオータ(5MBぐらい)

- 容量の限界がきたときにどうするか

まとめ

• オフラインアプリケーションといっても読む/書くの2つがある
• 書く/同期的なアプリケーションはかなり面倒臭い
  • 割り切ったほうがいい

スケールするUIについて – @monjudoh

Objective-Cで非同期処理のチェーンライブラリとか

要素数

ループの中でbind/unbindしてたので大量に追加されたときに重たかったのでliveメソッドに変更 bindはここの要素に付けるから、要素が多いと死ぬ。delegateとかliveはその枠の方にイベント一個張るだけだから軽くてすむ。

D&D

• ユーザが触れる範囲だけにイベントを付ける
• D&Dは複数のイベントから成り立つので複雑(down->move-up)

要素の生成

• UITableView
  • 表示範囲+ぐらいのみを描画してる
  • 再利用してる

JavaScriptのテスト事情 – @os0x

• JavaScriptのテスト
  • まだまだ未成熟
• 二種類
  • JavaScriptのテスト
    • JavaScriptだけなので比較的わかりやすい
  • JavaScriptを含めたテスト
    • UIとかも含むインテグレーションテスト

インテグレーションテスト

• インテグレーションテストは書くのが大変
• 動いてあることが保証できるので重要
  • 後から追加修正とかも

インテグレーションテストの定番 – Selenium

• インテグレーションテストは遅い

テスト実行環境

• カピバラさん + Webkit

QUnit,Jasmine

• Jasmineの方がアプリケーションテストは向いてる

jasmine-headless-webkit

• jasmine のspecをCUI環境で実行できる

Titanium Mobile – Masui Yuichiro

• ココログ
• liblis
• AKB
• サイボウズLiveの
• MobSnap

Titanium Mobile

• JavaScriptだけでアプリを作成できる
• Titanium Mobile のモジュール売買できる
  • mobile market place

モバイルのUX

• それぞれのプラットフォームに合わせた形に変換する
• それぞれに合わせたUIはUXに
• タブバーの位置がAndroid/iPhoneで逆になったり

飯食う

• 追加モジュールとサポートのみが有料
• 認定トレーニング

感想

• ちょっと落ち着きがなかった気がするの
• あまり掘り下げた感じにはならなかったのは少しもったいない気がした。

メモ環境

• Mou

デジタルプラクティス

発行は季刊で1月（創刊号のみ2月），4月，7月，10月に発行されるのをPDFで読める。
内容も多岐にわたっていて、論文というほど堅くはないものもあり読みやすい。

デジタルプラクティスでは，実務の現場におけるIT 実践例・経験・ノウハウのレベルの成果でも社会的に有用なものならば歓迎し，IT実践における新たな発展を先導するような論文を積極的に採録します
創刊に当たって

また、著名な人も結構寄稿されているので、読みたいものが何かしらあると思います。

• プログラミング言語Rubyの世界普及戦略
  まつもとゆきひろ
• ウェブブラウザLunascapeの起業戦略と技術戦略
  近藤秀和
• クラウド時代のユーザインタフェースの方向性
  ～サービスサイエンスでUI の方向性を検証する～
  鹿島泰介

などなど

情報処理推進機構：ニューヨークだより

IPAにより月一でPDF形式で発行される。
アメリカのIT関係についての最新事情を扱っていて、ものすごく詳しく書かれている。
ITやスマートフォンなどのデジタル機器(OSについても)やITと政治についてなど、かなり詳細な情報を掲載している。
無料とは思えない質だったり、情報元のソースを脚注で入れてくれるので、情報元自体も見られてとても良い感じになっている。おすすめです。

Wizard Bible

Wizard Bibleとは、基本的に毎月リリースしているWebマガジンです
Wizard Bible

発行は月一でtxt形式で発行されている(最近不定期だった気がする)
内容はどういったテーマで書けばいいのか？を見ると分かると思いますが、セキュリティ関係のものが中心となっています。それに関係するプログラミングや数学などの内容も扱われています。

IS Report System

本サイトは 「同志社大学生命医科学部医情報学科 医療情報システム研究室」 及び 「同志社大学工学部インテリジェント工学科 知的システムデザイン研究室」 の所有する研究報告である ISレポートの管理システム
IS Report System

医療やソーシャルメディア、インターネットや携帯電話などの電子機器について書かれたレポートが公開されています。
HTMLとepub形式(一部PDFも)で配布されていて、図などが入ったものも多く内容も結構読みやすいです。
結構書かれているジャンルが幅広い気がします。

The Pragmatic Bookshelf | Read Our Magazines

Pragmatic Bookshelfにより毎月発行されるプログラミング関係の電子雑誌。
HTML PDF epub mobiが用意されている。

番外編

タイトルから外れて有料の雑誌。
といっても海外だと電子版の雑誌は珍しくないので、気になったものだけ。

JsMag – the magazine for JavaScript developers

JavaScriptについて扱う月刊誌。
一号毎に購入($4.99)か一年分まとめて購入($53.88 )ができる。
日本にもこういうの欲しいですね。。

Hacker Monthly – Print Magazine of Hacker News

Hacker Newsで話題になったものを厳選して扱う月刊誌。

おわり

電子雑誌というタイトルにしたけど、別に雑誌じゃないものが多い気がする。
今はブログやソーシャルメディア経由でだいたいの情報はカバーできるだろうけど、論文や雑誌、スライドなどある程度労力を伴って書かれたものにはブログとは異なるものがあると思ってるので、こういうものも読んでいきたいですね。

JavaScriptの論文かき集める仕組み欲しい。日本でも小さなもの含めて年間二桁は書かれてる感じする。
Twitter / @azu_re: JavaScriptの論文かき集める仕組み欲しい。日 …

とか思ったりするのはそういう理由です。

他にもおすすめがありましたらよろしくお願いします。

TwittterのログはTogetter – 「第3回 ブラウザー勉強会(#BrowserWS)のまとめ」にまとまっています。

第3回 ブラウザー勉強会

午前の部 :コミュニティー セッション

ショートセッション : kyo_ago  (http://tech.kayac.com/)
「Testで始まる物語（ストーリー） QUnit CUIの紹介」

[Ustream] [発表資料]

jQuery Plugin testフレームワーク

• 非同期実行されるコードのテストが面倒
• UIのテストが面倒

テストコードは次の３つから構成される

• テスト前のHTML
• テストするコード
• テスト後のHTML

コードにすると以下みたいな感じ。

<script type="dom/base" /> <script type="test/code" /> <script type="dom/comp" />

• iframe内でこれを行うので、セレクタなどの心配が不要
• 自動的にdiffをとれる
• 複数端末上で分散実行
• 複数ブラウザでの比較
• pluginのテストコードを生成

ショートセッション : はせがわようすけ 「Using Win32 API inside Chrome Extension」

[Ustream] [発表資料]

Chrome Extensionの構成

• HTML + JavaScript
• マニフェストとリソース

Chrome Extentionの制約を超える

NPAPI DLL – プラグインを書くためのもの

• OSに依存する
• Extension内にplugin DLL
  • リモートHTMLから直接利用は無理

マニフェストにdllのロードパスを書くだけで読み込める。

• 拡張の制約が超えられる
• 化石のようなもの

NPWIN32

何でも使える汎用DLL * JavaScriptから何でもできる

JavaScriptからネイティブコードを呼び出すことができる

• Windowsの方のalertを呼び出す
• デスクトップ情報の取得

NaCLとの違い * NaCLは OSネイティブの機能は呼び出せない。

ライトニング トーク : normalian さん (http://d.hatena.ne.jp/waritohutsu/)

[Ustream] [発表資料]

「ブラウザ戦国時代で考えるクロスブラウザなテスト方法（仮題）」

• ブラウザのバージョンアップ頻度が高くなった

• ブラウザレンダリングの差異

• JavaScriptのイベントハンドリングの差異
• HTMl5の対応状況の差異

jQuery & Modernizr

jQuery

• jQuery Core
• jQuery Mobile
• jQuery Template
• jQuery Validate

Modernizr

• ブラウザのHTML5対応度合いの確認

jQuery UIとjQuery Mobileはソースコードは一部流用されている。 混ぜると危険。

モバイルブラウザのタブの傾向と対策 -Androidスマフォを主に- saneyuki_s

[Ustream] [発表資料]

• モバイルブラウザのタブの傾向まとめ スマートフォンブラウザの「タブ」の様式にデファクトがない

• ウィンドウ式

• メニューからウィンドウを出して切り替える

• 画面下部に表示
  • Opera
  • Sleipnir Mobile
  • サムネイル付きが多くてわかりやすい
• 画面上部に表示
  • Dolphine Browser
  • タブレットでは一般的
• FIrefox Mobile式
  • サイドに格納する

番外

* IE9 Mobile – タスクスイッチャーと連動
* Sleipnir Mobile – タブグループ機能 -  面倒くさい工程

まとめ

様式は落ち着かないだろう。

Google Chromeはエンタープライズの夢をみるか : Hebikuzure

[Ustream] [発表資料]

• ユーザ権限でインストールできる
• 勝手にアップデートできる
• Google Chrome Frame

管理者が投げ捨てる可能性

Chrome にはグループポリシー機能がある

(Windows版について) Documentation for Administrators – The Chromium Projects

Chromum Projectの方に書かれてる

• HTTP認証の動作
• コンテンツの設定
• 検索プロバイダ
• パスワードマネージャー
• プロキシ
• ホームページ
• 拡張機能
• スタートアップページ
• Google Chrome Frameの動作(無効にできる)
• Google Updateの動作
  • Google製品の個別で自動アップデートの有無
• Google Installerによるソフトウェアのインストールの設定

Chromeのmsiインストーラーもある(?msi=trueでダウンロード)

• Active Directorで配布できる
• 特定のバージョン縛りができる

グループポリシーのテンプレート(ADM,ADMX)が配布されているので、グループポリシーの追加ができる。
PolicyDefinitionsというフォルダーにコピーする事で入れることでも読み込める

Q&A

• セキュリティアップデートも無効にできる

午後の部 : テーマ セッション 「ブラウザーと Web が描く『夢』」

加藤 誠さん (Mozilla Japan)
「Openness, Innovation, and Opportunity」

[Ustream] [発表資料]

Mozillaのミッション「Openness, Innovation, and Opportunity」

非営利法人が扱えるお金が制限されているので、Mozilla Corporationという株式会社ができた。

Mozilla Labsをメインに

• 実装だけではなくて、モックなどでもあり
• RUST 言語

• 将来のFirefoxで取り入れられることも

  • FIrefox Syncなど
• UI/UX
• WEB API

などがLabの範囲

Design Challenge

• 特定のテーマでデザインやモックでアイデアを募る
• アイデア(デザイン)の発表する場所
• 実装ではなく、あくまでもアイデア

Test Pilot

• ユーザーのブラウザ利用データーを取得して解析
  • 収集用のアドオン
  • 結果を公開
• データが偏る傾向があるため、偏りを取る手法を使う
• ユーザーのクリックするホットスポット調査とか

Prospector

• ユーザーが目的のサイトにたどり着くためのUXの模索
• Prospectorは実装ありきのアイデア

Firefox SHARE / F1

ソーシャルネットワークとの結合

Q&A

アップデートスピードが早くなったのはなんで? * Webの流れが早くなってる

UI/UXのアプローチ

• 目線の移動がおかしいとか
• 公開された議論してるので、おかしいとクレームがくる

検索バーとURLバーの統合について

• 一応Firefoxとしてもそういう議論がある
• ユーザーからのフィードバック次第になる。

Daniel Davis さん (Opera Japan)
「ブラウザの未来：HTML5の先には？」

[Ustream] [発表資料]

1899年に書かれた未来2000年について。

未来的なものを想像しても、洋服や建物が変化していない。

More than HTML5

Device APIs

• まだまだカメラでデータ取得は先だけど 。
• Web APIとARを連動してやるなど(Tweetの取得など)

逆にカメラにブラウザが乗ることもあり得る

More like a platform

Web on TV * ブラウザが載ってるTVも増えている * ブラウザはWebを見るためではなく、Appとして利用されてる * 多くのメーカーはSVGでUIを使ってる(レンダリングエンジンがブラウザ)

• TVのUI(user input = リモコン)は最悪
  • これが改善されないとWeb on TVが流行らないかも
  • ジャイロリモコン
  • キーボードタイプ

ブラウザの進化

• ブラウザによりUIが静的から動的に
• 動的からインタラクティブへ
  • ペーパーレス = 静的なものがまだ多い => マルチメディア

履歴書の事例 * 履歴書に動画を入れる * マルチメディアをもっと普通のドキュメントに使う

再生だけではなく、作成もブラウザで? * contenteditable * 今はまだ非力

ネイティブよりウェブ?

• JavaScriptは早く、パワフルになった
• 比較的に書きやすく勉強しやすい
• 100%オープン
  • ひとつの会社などにコントロールされてない
  • 未来的にそれはいいこと

未来の予想は人によって違う

• ウェブはひとつの団体にコントロールされないのが重要
• コントロールされないウェブは未来も一緒に作る

Q&A

ブラウザがいろいろなものに乗った場合、それぞれに対して最適なUIは異なるが、それを上手くやる工夫

• OSとブラウザは大きくは変わらない
• ブラウザを一番下において、その上に何かをかぶせて作らせれば異なるものに対して拡張を作りやすい。

春日井 良隆さん (日本マイクロソフト株式会社 UXエバンジェリスト)
「マイクロソフトにとってのWebって？」

[Ustream] [発表資料]

MSとしてIE6のシェアを減らすのに取り組んでいる。 @mskkie の中の人 with ミゾグチさん

管理者キット9(IEAK 9) * カスタマイズしたIEをパッケージ化、配布、管理するためのツール
なんとか版IEというのはIEAKでパッケージ化したものを使ってる

The Internet Explorer 9 Blocker Toolkit
WindowsアップデートやMSアップデートを管理するツール

HTML5 Native to WIndows

• ウェブの技術をネイティブに持っていく
• ウェブサイトをアプリケーションと同じように使う方向性

タブレットPCは失敗した…

HTML5+JavaScriptでアプリケーションを作る。

MSは同じ表示をするという基本思念がある。

Windowsはカーナビ専用のOSがある。

Windows Phone はIE9ベースのブラウザ

MSと携帯会社である程度端末の取り決めがある

• ボタンは3つを付ける
• 性能についても取り決めがある
• 解像度は固定

IE10は8-12週でリリースする。

MSはブラウザ固有の機能は付けない方向

IEの拡張性について

• IEはカスマイズは上げて行く方向ではない感じ
• 拡張を簡単に作る仕組みはまだ見検討

IE7について

• IE7さんはわすられています。
• まずはIE6からなくしていく。

IDE, Expression について

• Expressionはdevよりの作り
• デザインはDWの方がいいかも
• ExpressionはそっけないVisual Studioな感じ

• IE10は今年はでない
• Windows 8 がタブレット

環境記録
メモソフトウェア: bodhi/MarkdownEditor – GitHub

サイボウズラボユース中間結果発表会

NDAは結ばずに、成果をオープンすることを条件に支援を行う。

• サイボウズ・ラボユース

「ロボット制作を支援するログ解析プログラムの開発」 by @sn_monochr

マイコンカー

赤外線センサーを使ってリアルタイムで制御するカー。 C言語で開発を行う。

マイコンカーの走行ログ

走行ログ

• 制御プログラムの動作状態
• 赤外線などのセンサー状態

メモリが限られているので、データはシフト演算などを使って一つにまとめて保存、送信を行う。 これらのデータを可視化していくため、解析ソフトウェアを開発する。(Windows)

走行ログの可視化

• データに基づいたマシン調整が可能になる
• １つのソフトウェアに統合

夏の合宿

目標設定をして合宿を行った

• 走行ログの可視化

ラインの中でモードの変更をライン色の変更してる。

• 無線通信でログのやり取りをするのが今後目標

走るコースに、車線変更や直角カーブなどのマークが書かれていて、それを読み取ってモードを変えることで動きを変える。

「世界最速の正規表現JITエンジンの実装」by @sinya8282

• 正規表現エンジンの作成
• 正規表現の歴史は古い 1960～
• • 実装はたくさんある
• • いろいろやられている

「正規表現エンジンの開発」には意義があるのですか? -> 車輪は車輪でも「最速の車輪」を開発する

正規表現エンジンRegen(れーげん)の開発

Regen

動的コード生成

• Xbyak でJIT regex
• 正規表現に合わせて、プログラムがプログラムを生成する
• 正規表現コンパイルに最適化レベル導入(O0 – O4)
• • 最適化しにくいパターンもある

マッチング並列化

• 並列化のための特殊なモデルを実装

ベンチマーク

Google RE2との比較。

JITしても3-5倍の高速化 -> 今はメニーコアの時代 -> 正規表現の並列化

• 6コアでガクって落ちるのはアーキテクチャの問題

まとめ

高速化の二台手法は実装した、成果もでた

• JIT
• 並列化

これからの課題

• 実システムへの応用、ツールの作成
• 正規表現エンジンじゃないと処理できない問題
• • なければ作る
• ライブラリとして今夏中に整えたい

質問

• 正規表現 <-> インデクシング
• フィルターなどの分野では、流れるデータに対して正規表現の活用などもある。
• 禁止ワードのORつなぎみたいなものは正規表現より向いてる方法があるとか

「JavaScriptによる型推論器の実装と可視化」by takuto_h

• JavaScriptで型推論器を作りました – takuto_hの日記

型推論

• 型を書かなくて楽
• 型があるんで安全

引数の型

function foo(bar){ return bar + 1; }

どのような演算子を呼んでいるかを見て、型を推論する

型推論は方程式

• 値が広志位なら型が等しい
• 方の上での方程式を集めて解くのが型推論

コンピューターでは解くのか

a = b, b = c, c = d, d= int

<a>, <b>, <c>, <d>というオブジェクトとintという物体を用意する。

• a = b で <a : <b>>, <b>, <c>, <d>
• b = c で ….

どんどん置き換えて行って型推論を行う。

Ibisという型推論機

IbisはJavaScriptで書かれている。

• まずはパースして構文木にする
• ここからステップごとに型推論の計算(推論)を表示
• 最終的に、関数の入力と出力の型推論結果が表示される

型推論はパズル

質問

型推論にとってオブジェクトは鬼門

Q . 循環参照の時はどうするの?

２つの考え方

• 禁止する方針
• 再帰的なものも許す方針

OCamlは不健全な循環参照は禁止されている。 再帰的なものはチェックを付けて型推論を続ける。

演算子のオーバーロードがあると型推論はむずい

「世界で一番仕様に忠実なJavaScript処理系の作成」 by Constellation

iv/lv5

iv / lv5 VM engine – 枕を欹てて聴く

• ESのパーサーiv
• エンジンlv5

sputniktestというECMA262への正確性を測るテスト

• 以前はASTはインタープリンタ
• VMに変えたのでECMAエンジンといえますね。
• インタープリタと共存している(オプションで切り替えが可能)

JITをモジュールとして取り込めるのではないかと。

高速化

いろいろ。11倍近く高速

まだJITはしていない。

今後

• RegisterVmについての検討
• GCの自作

az: ECMAScript Analyzer

JavaScriptの補完候補を出す

型の推論 Doctorjs

• 抽象的なAbstractインタプリターを使って型情報を集めている
• これを元にC++にした

JavaScriptは後ろに関数宣言置けるし、補完するときにシンタックスは壊れてるからどうするの?

方針: シンタックスが不正なASTに対して解析を行う

• シンタックスが不正なスクリプトでも常にASTを得る

target.

こういう時はに解析を行うと、式がエラーになるので、ここでステートメントにマークを付ける。

改行があったらそのへんは大丈夫なんじゃないかと、してぶっちぎる。 JavaScriptにはセミコロン自動挿入があるので、改行を判定に使う必要性が出てくる。

問題点

• Abstractインタープリタは状態が有限でないと終わらない
• なので状態を有限して、行う
• jQueryとのfor inとかむず

WebStromの場合

• JSDocで型情報を読んでこれを基準に解析
• 元に情報を用意して何とかする方向

おわり

仕様忠実は第一

「現役高校生の考えるクラウドOSの設計と実装」by liva_s

クラスドOSって何だろう?

Googleの場合

• ブラウザ上でWebアプリを走らせている
• 確かにクラウドを利用している

僕の考えるクラウド化

カーネルのクラウド化

• カーネルがやるべきことをクラウドサーバー上で一括処理するのはどうだろか?
• サーバー側に処理を置くことで、クライアント側の負荷が減る

カーネルを分割して、クラウド上でカーネルが動いてるいうという状態

• 当然ローカルでやるべきことも残る(ハードウェア制御)
• ローカルとくらうどの線引きが大事になる

どの境界線はどう測るべきものかがわからない(ベンチマークで?)

マイクロカーネル開発

カーネルには最小限なものにして、Serverというアプリケーションにわけてやるもの。 この時のServerをクラウドに乗っければ、クラウドOSになる。

=> マイクロカーネルの開発がいいのではないかと

Serverを単位にして、ローカルとクラウドでベンチマークを取れば、境界線がわかりやくなる。

モジュール開発とマイクロカーネル

モジュールはプロセス管理を作る前に、モジュールを開発できる。 (後で動かせばいい)

まとめ

クラウドOSはWebアプリベースのOSではない

Q. カーネルでどの辺がボトルネックになってるのか?

A. モジュール化していけばベンチは測りやすいから、これからは。

カーネルのモジュール化はダイナミックに構成を変更できるということが結構面白い事になる

Q.マルチキャストの逆みたいな話。同じような処理をしてるコンピューターはいっぱいあるから、そのへんの処理を効率ができるのではないかと

ちょっと触っただけの雑感です。本質としてとらえてはいけません。
Titanium (Mobile|Desktop)については全く触れていないため、そういうものについては参考にはならないと思います。
というか、Titanium (Mobile|Desktop)向けのものを書かないのに、Titamium Studioを選ぶ理由はない気がするので、タイトルのような事が目的ならばベースが同じAptana Studio 3を使った方が良いでしょう。

インストール

インストール先がProgram Filesじゃない

起動すると、ログインアカウントを求めてくる

起動して最初に開く画面

Aptanaで昔無かった気がする折り返しがあった

プレビューできるのはAptanaと同じ。
デフォルトIEだったけど、ApatanaのようにFirefoxもできるのかな。

• Aptana Studio 2.0.3－Firefoxプレビュータブ – ゆちの備忘録

適当なJavaScriptファイルでコードを書いてみるけど、補完候補が何か特殊な感じする。

2,3番目のFunctionはどちらもスニペットになっていて、2番目のFunctionは以下のような関数定義を展開する。

function function_name (argument) {

}

3番目のNew Functionもスニペットで、以下のような無名関数を展開する。

function (args) {

}

var container = {
  init: function() {},
};
container.obj = (function(){
  var privateProp = null;
  var namager = {
    publicMethod: function(){ },
  };
  return namager;
})();

デフォルトだとdocument.queryselectorが出てこなかったり、何か欠けている感じがするけど、下記を見る感じWebStormやアマテラスのようにjsファイルで補完候補を定義できそうな気がする。(でも、References Viewとやらが見つからないのでやり方よく分からない…)

• Titanium と Aptana でモバイル開発 | アカベコマイリ
• Titanium Studio 1.0 Preview 版を入れてみた | アカベコマイリ

入力するごとにJSLint,，HTML Tidy，W3C などを使ってエラー検出ができる。
デフォルトだとJSLintは無効になってたけど。

噂のバージョン管理システム(gitでの表示)

ブランチを簡単に作れたり切り替えできるのは結構よさげ。

コミット画面もステージへの移動とかさせながらコミットメッセージを書けるようになってる

履歴もIDE内で表示できてDiffを見たりできる。

メニューからできることは基本的な事だけっぽい感じ。
この辺もWebStormとかの方ができが良いかもしれないけど、ブランチの切り替えとコミットやpushができるので、書いていく環境としては悪くないかもしれない。(マージとかその辺のやり方がよく分からない)

ただ、Terminal機能が内蔵されているので直接コンソールからgitコマンドを叩けるので結構良い感じかもしれない。

使いこなすにはちょっと手間がかかりそうだけど、ちょっと触った感じだとそこまで悪くはない。 推測した用に補完候補をいじったりできるなら、結構良い感じにJavaScript IDEとして使えるようになるんじゃないかと思う。
Aptana 2では時間とともに腐っていってたけど(長いソースでダメとか、どんどん重くなるとか)、そういうのがないことを祈りましょう。
まあ、普通にJavaScriptを書くのが目的ならAptana Studio 3を使いましょう。ベースは同じなので、Titanium (Mobile|Desktop)向けのものを書かないのに、Titamium Studioを選ぶ理由はない気がする。

• [ Titanium Studio ] インストール・設定してみた | Bowz::Notebook
• Titanium Studio 1.0 Previewが出ました！ – JP::HSJ::Junknews::HatenaSide

• リンクのようなボタンを作る: Days on the Moon
• javascript scheme でボタンを作るのは ? | ヨモツネット

clickイベントに使うためだけに<a href=”#”>text</a>とか(下の例の1,2番目)やるのが嫌いで、どうやるのがスマートorシンプルなんだろと思って書き出したもの。input、button 要素がでてこないのはスタイルシート考えるのが面倒で何となくです。button要素をCSSでリンクのようなデザインにできるならそれでもいいじゃないでしょうか。

• クリッカブルなボタンとRoleのデモ

1番目は今時ない気がするし、1,2番目は状態が遷移しないのにhref指定してると、ミドルクリックなどで別のページとして開けたりしちゃうのでそれを抑制するコードも必要になるのが何か嫌で、3番目当たりが個人的には好きだった。(4番目は何か気持ちわるい)

<div><a href="javascript:void 0;">javscript:ボタン</a></div>
<div><a href="#">#なボタン</a></div>
<div><a role="button">hrefがないroleボタン</a></div>
<div><span role="button">リンクじゃないspanボタン</span></div>

Note: If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
The Roles Model | Accessible Rich Internet Applications (WAI-ARIA) 1.0

そして、A要素のroleはnativeでlinkですが3.2.5 Content models — HTML Standardを見ると、 link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, treeitem のいずれかのroleであれば上書きすることができると書いてあります。(そう読み取れたんだけどあってるのかね)

<a role="button">hrefがないroleボタン</a>

• 4.2. Conflicts between native markup semantics and WAI-ARIA
• 3.2. ネイティブなマークアップセマンティクスとARIAとの衝突

  翻訳版をみるとnativeなroleがlinkであっても、roleでbuttonと指定すれば上書きできるべきであるみたいな内容。

何で、上書きできるかが気になったかというとjavascript scheme でボタンを作るのは ? | ヨモツネットのコメント欄で、できないかのように読み取れる内容があったため。多分多分、strong native semanticsというのはa要素が本来持っているのはlinkというroleの事で、<a role=”button” />のようにそれぞれのa要素におけるroleは上書きできるけど、a要素本来のlink(strong native semantics)というroleは上書きできないよって話なのかなーとか思った。(仕様読んでないので自信ない)

ちなみに、jQuery UIの$.button()は<button role=”button”>という感じでbutton要素を使用している。

• jQuery UI – Button Demos & Documentation
• jQuery UI に見る WAI-ARIA の実装：dialog 編 – アークウェブアクセシビリティWiki(結構前)

• WAI-ARIA Implementation in JavaScript UI Libraries – updated | The Paciello Group Blog

というわけで、ここに書かれている内容はあまり自信がありません。以上

• Accessible Rich Internet Applications (WAI-ARIA) 1.0

このプラグインはChemr-jsのように先にリファレンスサイトのインデックスのキャッシュを作っておいて、複数のリファレンスからまとめて検索をすることができるプラグインです。

動画だと対応サイトが少ないですが、現在は以下のサイトに対応しています。
(最新の対応サイトリストはJSReference at master from azu/KeySnail-Plugins – GitHubを参照してください)

• developer.mozilla.org
• jp.developer.mozilla.org
• www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/
• api.jquery.com
• es5.github.com
• msdn.microsoft.com

ECMAScriptの仕様書、MDCのドキュメント、jQueryのAPIドキュメント、IEのJavaScriptリファレンスなどを同時に引けるので結構便利です。

対応サイトもSITEINFO的なものを書けば増やせるので、JSReference at master from azu/KeySnail-Plugins – GitHubを参考に見てみるといいです。

プラグインをインストールするとプラグインマネージャーにドキュメントが表示されるので、そこに使い方が書いてありますが簡単に説明すると二つのコマンドが追加されます。

このコマンドをKeySnailの設定メニューや_keysnail.jsファイルに直接書き込むなどでショートカットに割り当てて使います。

設定画面の場合

key.setGlobalKey(['C-b', 'j'], function (ev, arg) {
    ext.exec("JsReferrence-open-prompt", arg, ev);
}, 'JsReferrenceのプロンプトを開く', true);
key.setGlobalKey(['C-b', 'r'], function (ev, arg) {
    ext.exec("JsReferrence-reIndex", arg, ev);
}, 'JsReferrenceののインデックスを作り直す', true);

// 二つのサイトを候補にする - JavaScript
key.setGlobalKey(['C-b', 'l'], function (ev, arg) {
    ext.exec("JsReferrence-open-prompt", ["developer.mozilla.org", "www2u.biglobe.ne.jp/~oz-07ams/prog/ecma262r3/"], ev);
}, 'JsReferrenceのプロンプトを開く', true);
// msdn.microsoft.comのインデックスだけを再構築する
key.setGlobalKey(['C-b', 'r'], function (ev, arg) {
    ext.exec("JsReferrence-reIndex", ["msdn.microsoft.com"], ev);
}, 'JsReferrenceのプロンプトを開く', true);

• KeySnail
• JSReference at master from azu/KeySnail-Plugins – GitHub
• KeySnailプラグイン開発の方法とデバッグ | Web scratch

document.getElementById("ASIN").value

Amazonはページ中のhiddenなinput要素にASINを持たせてるのでこういう手が取れる。

<input id="ASIN" type="hidden" value="4253196519" name="ASIN">

ページの構造が変わったらダメだけど、結構昔からこの部分は変わってないので意外と安定しているかもしれない。
amazon.comだと構造が違うものがあって、Amazon.com: Buried Prey eBook: John Sandford: Kindle StoreのようにKindle Storeだとページ構造が違ってID=ASINがない代わりに次のようなものがある。

<input type="hidden" value="B004LRPGPC" name="ASIN.0">

var ASIN = document.getElementById("ASIN") || document.getElementsByName("ASIN.0")[0];

もう一つの方法はwindowオブジェクトのプロパティから取得する方法

(2011年6月5日現在だと)

window.sitbAsin;

• Amazonの商品個別ページでASINを抜き出す – おれ ここ めも かきなぐる おまえ ここ よむ なぐる – subtech

最後はURLからASIN部分を切り出す方法

URLにはASINが入ってるはずなので、ページに構造の変化には強いけど、少しパースが面倒なところがある。
どのようなURLがあるかを把握する必要があるので、条件分けなども必要になる。
まあASINのフォーマットは\w{10}と決まっているので、ある程度安定するのかもしれない。

ついでに、replaceStateを使ってリロードなしでAmazonのURLを/dp/ASINだけの短いURLにするGreasemonkey書いた。

• Amazon URL Cleaner for Greasemonkey