10 Apr 2010

Chrome Extension TechTalk

chromium-extensions-japan主催. chrome拡張開発の勉強会. 勉強会の対象は初級者ですが, 熱い内容だったと思います.

自分はfirefoxの拡張をすこし, chromeの拡張は全く経験なしという人間です. その視点からだと, chrome拡張には次のポイントがあると感じました.

将来性. chromeの拡張を開発することで得られるリターンが多いように感じられました. 将来的にChrome OSにおけるアプリケーションのような存在になるとのことらしいし, HTML5の技術を学ぶにも良いフィールドです.
開発が簡単(制約は多いが). firefoxの拡張の場合はXULやXPCOMなどmozilla特有の技術を学ばねばならず敷居が比較的高くなりますが, chromeの拡張はhtml/css/javascriptで構成されるため, 既存の知識を流用できる割合が多くなります.

これらのポイントから, chrome拡張はやはり魅力的で開発者が多くなっていることも納得いきます. firefoxの場合もjetpackがもう少し起動に乗ってくれば良いと思うんですが, sdkはまだまだapiが整っていないし再起動なしのインストールもfirefox3.7以降になるので, 現状では厳しいといえます. HTML5の実装もWebKitが先行しています. ただこれは両者の開発方針の違いによるもで, なんでもかんでも実装せずにspecが固まって安定したものから実装するという方針は正しいものだと思います. しかし一方で新しいAPIがいちはやく使えるWebKitに開発者はひかれるという面もあります.

今後はfirefox拡張もchrome拡張も作っていきたいなというのが最終的な感想です. Chrome OSのことを考えると, 今から拡張にコミットしておく価値は高いと感じます.

以下メモ.

Google Chrome拡張開発者のためのHTML5ミニ講座: 及川卓也(http://www.jalphant.net/)

開発プラットフォームとしてのHTML5/CSS3
- Webを開発のプラットフォームにする
- 個別要素の集大成
http://www.youtube.com/watch?v=fyfu4OwjUEI
Desktop Notification
- Google 提案
- あとの白石さんのセッションで
Chrome OS

Chrome拡張入門: 太田昌吾(http://tako3.com/http://twitter.com/os0x)

http://docs.google.com/present/view?id=ddt83665_1307m2cft

Chromium
- WebKit, V8
- OSS
Google Chrome

WebKitのWebCore
- WebKitのレンダリング周り

Chrome拡張
- HTML/CSS/Javascript
- Chrome OS ではアプリケーションの役割を果たす?
- 作るの簡単
- 制約多い

API
http://code.google.com/chrome/extensions/
まだまだ少ない
バックグラウンド処理, クロスドメイン通信, データの永続化でだいたいやりたいことはできる

拡張同士は互いに独立
拡張同士の連携はchrome.extension.sendRequestでメッセージをやりとり
拡張のID: URI形式

manifest.json
ここで宣言してない機能は使えない

拡張の作り方
"拡張を作るにあたって必要なものは特にありません。あえて挙げるなら、アイコンは用意しておきましょう。"

パッケージング
chrome://extensions/ から
GitHub - Constellation/crxmake: making chromium extension でcuiでもパッケージングできる
crxになる
- crxはzip
IDが開発時と変わってしまうからkeyフィールドを参照する
パスに日本語とかはいるとだめ

Stylist - Chrome Web Store
- 今回のサンプル
- firefoxのextensionのchrome版

manifest.json
- "run_at" 起動タイミング
background.html
- ページのjsの変数がメモリ的に使える

debug
- web inspector をつかう
- 第6回　Firebug要らずなChromeのWeb Inspector：続・先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社
- firebugっぽい感じ

ドキュメントよりもソース読むのがはやい
"HTML5 を使いたい！という方は、是非Chrome拡張を！！"

いまできないけど将来できたらいいなというAPIは?
- webサービス上のデータを読み書き
  - 自由に使えるweb上のストレージ
- 自分でサーバ側を作るのは面倒

拡張でやらない方がいいものは?
- 結構いっぱいある
- マウスジェスチャ

さっきからよく落ちてるけど原因は拡張側?本体側?
- 拡張側が原因で落ちることは少ない
- dev版は不安定だから落ちがち
- わりと拡張で無理をしてもそんなに落ちちゃうってことはないだろう

Web Form 2.0の現在: 田村健人 (google)

Google グループ

Formsのchrome5での進捗
UIはほとんどなし. APIはあり.
operaとはちがった見た目になりそう
- OSネイティブに近いものになる

Notification APIの紹介: 白石俊平 (http://twitter.com/shumpei)

Google Slides - create and edit presentations online, for free.

webアプリがユーザに通知を行うためのapi
growlみたいの

現在はワーキングドラフト
chromeでの非標準的な実装のみ

notificationは2種類
- simple notification
  - アイコンとテキストのみ
  - 実装必須
- web notification
  - htmlを埋め込みできる
UIは実装に任される
- ブラウザによって見た目はけっこうかわるだろう

ながれ
最初にユーザに通知の許可を得る
- 広告に使われることを防ぐ意図

ユーザー許可
- try, catchで自分で実装

LT

google calendar for todayの紹介, 拡張内ページ間通信の実例

@makoto_kw

Google Calendar for Todayの紹介と拡張内ページ間通信の実例

当日の予定を確認するextension
ポイントはlifetime
- popup.htmlは短い. background.htmlは長い
- popupでデータ取得するとロードで待たされる
- popupはbackground.htmlを見に行くようにする
popupからbackgroundを見に行くにはgetBackgroundPage()
backgroundからpopupへ変更通知をするにはsendRequest(), sendResponse()
backgroundから他へ
- sendRequest(), onRequestListener()
getViews()
http://githubcom/makotokw/