素敵なjavascript ~google chrome編~

3,612 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,612
On SlideShare
0
From Embeds
0
Number of Embeds
144
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

素敵なjavascript ~google chrome編~

  1. 1. 素敵な javascript Google Chrome 編 Hisatoshi Kikumoto
  2. 2. Google Chrome とは? <ul><li>Google Chrome (グーグル・クローム)とは、 WebKit レンダリングエンジン・アプリケーションフレームワークをベースに Google が開発しているウェブブラウザです。 </li></ul><ul><li>とにかく速くて軽いです!! </li></ul><ul><li>現在安定版で 4.0 がリリースされています (Windows 版のみ) </li></ul><ul><li>4.0 のリリースにより以下の機能に対応になりました </li></ul><ul><ul><li>ブックマーク同期機能 </li></ul></ul><ul><ul><li>エクステンション正式対応!! </li></ul></ul><ul><ul><ul><li>エクステンションについてはギャラリーにすでに 1500 以上も登録されています。 </li></ul></ul></ul><ul><ul><ul><li>https:// chrome.google.com /extensions </li></ul></ul></ul><ul><ul><li>上記意外にも javascript の高速化や HTML5 API である Local Storage 、 DatabaseAPI 、 WebSockets にも対応しました </li></ul></ul>
  3. 3. ショートカットを覚えよう <ul><li>使うときにはショートカットを覚えよう </li></ul>後は他のブラウザとだいたい同じ タスクマネージャを表示 Shift + Escape 新しいタブでそのアドレスを開く アドレスを入力して Alt + Enter キーワードの前後に「 www. 」と「 .com 」を追加してウェブアドレスとして開く キーワードを入力して Ctrl + Enter アドレスバーにフォーカス F6 または Ctrl + L タブの切替 Ctrl + Tab Ctrl + Shift + Tab Ctrl + 1 ~ 8
  4. 4. ショートカットが足りない <ul><li>Firefox の vimperator みたいな chrome エクステンション「 smooziee 」を入れよう </li></ul><ul><li>http://code.google.com/p/vimlike-smooziee / </li></ul>閉じたタブを復元 u リロード r リンク表示 f タブを閉じる d 戻る、進む H,L トップ、エンドへスクロール gg 、 G スクロール j、 k 、 h 、 l
  5. 5. 便利なエクステンション <ul><li>便利なエクステンション </li></ul><ul><ul><li>Hatena Bookmark </li></ul></ul><ul><ul><li>Chrome IE Tab </li></ul></ul><ul><ul><li>Chromeleon User-Agent Spoofer   (User-Agent switcher ) </li></ul></ul><ul><ul><li>nkGestures    右クリックのジェスチャーでページ操作 </li></ul></ul><ul><ul><li>Bubble Translate 翻訳 </li></ul></ul><ul><ul><li>Google Preview 検索結果のプレビュー </li></ul></ul><ul><ul><li>Gracemonkey はネイティブで対応しています </li></ul></ul>
  6. 6. 開発者用の便利な機能 <ul><li>Firebug 以上の開発者用機能が最初からついてます </li></ul><ul><li>ディベロッパーツール  Ctrl + Shit + I </li></ul><ul><ul><li>HTML 、 CSS 解析 </li></ul></ul><ul><ul><li>リソース解析 </li></ul></ul><ul><ul><li>script デバッグ </li></ul></ul><ul><ul><li>その他 HTML API の Local Storage やデータベースを確認が可能に! </li></ul></ul>
  7. 7. エクステンションを作ろう(エクステンションで使える技術) <ul><li>エクステンションを作る上でまず使える API 群を把握しよう </li></ul><ul><ul><li>通常の JavaScript と DOM API </li></ul></ul><ul><ul><li>XML HttpRequest </li></ul></ul><ul><ul><li>WebKit API ( アニメーションや変形処理などで使われます) </li></ul></ul><ul><ul><li>V8 API(JSON 用 )   ECMA5 では正式に採用されていますが、 chrome は ECMA 3 ベースとなっているので </li></ul></ul><ul><ul><li>HTML5 API </li></ul></ul><ul><ul><li>Chrome API </li></ul></ul>JQuery とかを使いたい場合はエクステンションにバンドルしましょう
  8. 8. エクステンションを作ろう(エクステンションの作り方) <ul><li>Hello   World を作ってみる </li></ul><ul><ul><li>用意するファイル </li></ul></ul><ul><ul><ul><li>manifest.json   ( 定義ファイル ) </li></ul></ul></ul><ul><ul><ul><li>アイコン </li></ul></ul></ul><ul><ul><ul><li>ポップアップ用 HTML </li></ul></ul></ul><ul><ul><li>デモ実施 </li></ul></ul>
  9. 9. エクステンションを作ろう (Chrome API 一部紹介 ) <ul><li>Browser Actions   </li></ul><ul><ul><li>ツールバーへのボタン表示およびボタンアクションを定義出来る API です。 </li></ul></ul><ul><ul><li>tooltip 、 popup 、 badge を作成することができます </li></ul></ul>
  10. 10. エクステンションを作ろう (Chrome API 一部紹介 ) <ul><li>Background Pages </li></ul><ul><ul><li>起動時に実行しておける API で、初期化処理の実行や Browser Action で使用するアクションをまとめておくことができます。 </li></ul></ul>{ &quot;background_page&quot;: &quot;background.html“ ・ ・ }
  11. 11. エクステンションを作ろう (Chrome API 一部紹介 ) <ul><li>Content Scripts </li></ul><ul><ul><li>対象ページを表示する際に実行するスクリプトを定義する API です。 </li></ul></ul><ul><ul><li>いわゆる Gracemonkey みたいなものです </li></ul></ul>&quot;content_scripts&quot;: [ { &quot;css&quot;: [ &quot;google.css&quot; ], &quot;js&quot;: [ &quot;google.js&quot; ], &quot;run_at&quot;: &quot;document_start&quot;, &quot;matches&quot;: [ &quot;http://www.google.com/*&quot; ] } ]
  12. 12. エクステンションを作ろう (Chrome API 一部紹介 ) <ul><li>Event </li></ul><ul><ul><li>ブラウザイベントへのリスナー定義を行う API です </li></ul></ul>chrome.tabs.onCreated.addListener(function(tab) { appendToLog('tabs.onCreated --' + ' window: ' + tab.windowId + ' tab: ' + tab.id + ' index: ' + tab.index + ' url: ' + tab.url); });
  13. 13. エクステンションを作ろう (Chrome API 一部紹介 ) <ul><li>Tabs 、 Windows </li></ul><ul><ul><li>タブやウインドウをコントロールする API です </li></ul></ul><ul><ul><li>操作する場合は manifest.json に permission の設定が必要となります </li></ul></ul>{ &quot;name&quot;: &quot;My extension&quot;, ... &quot;permissions&quot;: [ &quot;tabs&quot; ], ... }
  14. 14. エクステンションを作ろう ( ソースのありか ) <ul><li>エクステンションはパッケージすると .crx ファイルになりますが解凍方法が分からないのでソースはどうやって見ればいいのかなと思い探してみました </li></ul><ul><li>インストール後に以下のパスにソースが展開されているのでそこを見ればいいようです </li></ul>C:Documents and Settings[ ユーザー名 ]Local SettingsApplication DataGoogleChromeUser DataDefaultExtensions
  15. 15. このように Chrome のエクステンションは Firefox に比べて 圧倒的に簡単で分かりやすいので ぜひ活用ください!
  16. 16. Let’s Enjoy Google Chrome !!

×