素敵なjavascript ～google chrome編～

素敵な javascript Google Chrome 編 Hisatoshi Kikumoto

Google Chrome とは？
Google Chrome （グーグル・クローム）とは、 WebKit レンダリングエンジン・アプリケーションフレームワークをベースに Google が開発しているウェブブラウザです。
とにかく速くて軽いです！！
現在安定版で 4.0 がリリースされています (Windows 版のみ）
4.0 のリリースにより以下の機能に対応になりました
ブックマーク同期機能
エクステンション正式対応！！
エクステンションについてはギャラリーにすでに 1500 以上も登録されています。
https:// chrome.google.com /extensions
上記意外にも javascript の高速化や HTML5 API である Local Storage 、 DatabaseAPI 、 WebSockets にも対応しました

ショートカットを覚えよう
使うときにはショートカットを覚えよう
後は他のブラウザとだいたい同じタスクマネージャを表示 Shift ＋ Escape 新しいタブでそのアドレスを開くアドレスを入力して Alt ＋ Enter キーワードの前後に「 www. 」と「 .com 」を追加してウェブアドレスとして開くキーワードを入力して Ctrl ＋ Enter アドレスバーにフォーカス F6 または Ctrl ＋ L タブの切替 Ctrl ＋ Tab Ctrl ＋ Shift ＋ Tab Ctrl ＋ 1 ～ 8

ショートカットが足りない
Firefox の vimperator みたいな chrome エクステンション「 smooziee 」を入れよう
http://code.google.com/p/vimlike-smooziee /
閉じたタブを復元 u リロード r リンク表示 f タブを閉じる d 戻る、進む H,L トップ、エンドへスクロール gg 、 G スクロールｊ、 k 、 h 、 l

便利なエクステンション
便利なエクステンション
Hatena Bookmark
Chrome IE Tab
Chromeleon User-Agent Spoofer 　 (User-Agent switcher ）
nkGestures 　右クリックのジェスチャーでページ操作
Bubble Translate 翻訳
Google Preview 検索結果のプレビュー
Gracemonkey はネイティブで対応しています

開発者用の便利な機能
Firebug 以上の開発者用機能が最初からついてます
ディベロッパーツール　 Ctrl + Shit + I
HTML 、 CSS 解析
リソース解析
script デバッグ
その他 HTML API の Local Storage やデータベースを確認が可能に！

エクステンションを作ろう（エクステンションで使える技術）
エクステンションを作る上でまず使える API 群を把握しよう
通常の JavaScript と DOM API
XML HttpRequest
WebKit API ( アニメーションや変形処理などで使われます）
V8 API(JSON 用 ) 　 ECMA5 では正式に採用されていますが、 chrome は ECMA 3 ベースとなっているので
HTML5 API
Chrome API
JQuery とかを使いたい場合はエクステンションにバンドルしましょう

エクステンションを作ろう（エクステンションの作り方）
Hello 　 World を作ってみる
用意するファイル
manifest.json 　 ( 定義ファイル )
アイコン
ポップアップ用 HTML
デモ実施

エクステンションを作ろう (Chrome API 一部紹介 )
Browser Actions 　
ツールバーへのボタン表示およびボタンアクションを定義出来る API です。
tooltip 、 popup 、 badge を作成することができます

Background Pages
起動時に実行しておける API で、初期化処理の実行や Browser Action で使用するアクションをまとめておくことができます。
{ "background_page": "background.html“ ・・ }

Content Scripts
対象ページを表示する際に実行するスクリプトを定義する API です。
いわゆる Gracemonkey みたいなものです
"content_scripts": [ { "css": [ "google.css" ], "js": [ "google.js" ], "run_at": "document_start", "matches": [ "http://www.google.com/*" ] } ]

Event
ブラウザイベントへのリスナー定義を行う API です
chrome.tabs.onCreated.addListener(function(tab) { appendToLog('tabs.onCreated --' + ' window: ' + tab.windowId + ' tab: ' + tab.id + ' index: ' + tab.index + ' url: ' + tab.url); });

Tabs 、 Windows
タブやウインドウをコントロールする API です
操作する場合は manifest.json に permission の設定が必要となります
{ "name": "My extension", ... "permissions": [ "tabs" ], ... }

エクステンションを作ろう ( ソースのありか )
エクステンションはパッケージすると .crx ファイルになりますが解凍方法が分からないのでソースはどうやって見ればいいのかなと思い探してみました
インストール後に以下のパスにソースが展開されているのでそこを見ればいいようです
C:Documents and Settings[ ユーザー名 ]Local SettingsApplication DataGoogleChromeUser DataDefaultExtensions

このように Chrome のエクステンションは Firefox に比べて圧倒的に簡単で分かりやすいのでぜひ活用ください！

Let’s Enjoy Google Chrome !!

http://techknowledge.ngigroup.com	68
http://techknowledge.fractalist.jp	67
http://www.slideshare.net	8

素敵なjavascript ～google chrome編～

by ngi group. on Mar 11, 2010

Statistics

Views

Actions

3 Embeds 143

Accessibility

Categories

Upload Details

Usage Rights

Report content

素敵なjavascript ～google chrome編～ Presentation Transcript