Chrome 拡張のご紹介

643 views
597 views

Published on

2012/12/12 にChrome拡張についての紹介をお話してきた時のスライドです

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
643
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chrome 拡張のご紹介

  1. 1. Chrome Extension のご 紹 介 ~ エンジニアじゃないけど 開発 したい ~2012.12.12 Google Apps ラクラクまるわかり 講 座 株式会社フォトクリエイト 伊藤 哲之輔 tetsunosuke.ito@photocreate.co.jp
  2. 2. 改めまして• 伊藤 哲之輔(いとう てつのすけ)• 株式会社フォトクリエイト エンジニア• Official:  o 写真販売 EC サイト担当 o Facebook ・ Twitter  アプリ等 WebAPI  連携サービス o 最近統計にハマっていて先月統計検定を受験•  Private:  o ラーメン二郎・蒙古タンメン中本 o 野球・バスケットボール o お笑い・マンガ・ヒトカラ( New! )
  3. 3. 内 線 表のお 話 だけ少し• 「 Google Apps  ユーザーフォーラム Sidebar 」 で検索してください。• 動いてるところだけ少しお見せします
  4. 4. Extension 使ってますか?• Screen Capture o 見えてない部分や任意の矩形をキャプチャ• AutoPager o 複数ページで構成されるページをたどっていく• Gestures o マウスジェスチャで戻ったりタブ開いたり• Replies and more for Google+ o Twitter ・ Facebook ・ Email へシェア o 投稿者への返信へ「+氏名」 できる• User-Agent Switcher o モバイルサイトのテストに o 会社でモb [ 自主規制 ]
  5. 5. Bookmarklet は?• ユーザーがウェブブラウザのブックマークなどから起動し 、 ウェブブラウザで簡単な処理を行う簡易的なプログラム 例: 画面の一番上へ /  下へ javascript:(function(){if(document.body.scrollTop>0){h =  0;}else{h=document.documentElement.scrollHeight;} window.scrollTo(0,h);})();
  6. 6. more speed / less stress
  7. 7. Extension でできること• Extensions are small software programs that can modify and enhance the functionality of the Chrome browser. You write them using web technologies such as HTML, JavaScript, and CSS. http://developer.chrome.com/extensions/ ○ Chrome の 挙動を修正したり強化したりする ○ HTML/JavaScript/CSS で書くことができる
  8. 8. Apps Script との 違 い• 言語は JavaScript だが手持ちのエディタで書く o AppsScript は「互換」だがこちらは単なる JS o 補完はしてくれない• 実行は完全にクライアントサイド o バージョンアップはクライアントに通知をだして 行ってもらう o Chrome のプロセスを一つ使う(入れすぎ注意) o 時間によるトリガーなどは作れない
  9. 9. 主な改造方法• BrowserActions• Context Menus• Desktop Notifications• Omni Box• Page Actions• その他: o Background Script o Content Script
  10. 10. Browser Actions
  11. 11. Contextual Menus
  12. 12. Desktop Notifications
  13. 13. Omni Box
  14. 14. Page Actions
  15. 15. Content Script
  16. 16. 私が(自分用に)作っている• Context Menus o Gmail から社内グル ー プウェア呼び出し• Background script o サイボウズでショ ー トカットキ ー• Omni Box o   (たまに使う)サイトのテストでカスタムコ マンド ” それっぽいデモ” を作って 来ました ちょっとバグってました ... http://goo.gl/ GhvE6
  17. 17. まとめ• Chrome Extension は HTML/CSS/JS で Chrome をカスタマイズすることができる• カスタマイズ可能な 箇 所はいくつかあるので ドキュメント参照• まずはアリモノを探して作 業効 率 Up!• 俺得ツ ー ルを作って差をつけろ!• JavaScript すごい!
  18. 18. Q & Ahttp://www.fotopedia.com/items/flickr-4494183080

×