SlideShare ist ein Scribd-Unternehmen logo
1 von 63
Downloaden Sie, um offline zu lesen
すごいぞ!
               Google Chrome!
                 Creator’s village in EHIME
                           Vol.3




12年12月17日月曜日
自己紹介


               株式会社アイムービック
               Webシステムの構築が主なお仕事
               GDG(Google Developer Group)四国所属
               2008年に愛媛へ移住




12年12月17日月曜日
おはなしすること


               Google Chrome とは?
               拡張機能のススメ
               開発ツールでスピードアップ
               まとめ




12年12月17日月曜日
Google Chromeとは?



12年12月17日月曜日
の前に!


               ブラウザ戦争を引き起こすつもりは
               ありません。
               他のブラウザをディスるつもりもない
               です。
               できるだけ心おだやかに



12年12月17日月曜日
ブラウザ遍歴




12年12月17日月曜日
Google Chromeとは?


               Googleが開発しているブラウザ
               Chromiumをベースに開発
               2008年に公開
               カナリア、開発版、ベータ版、安定版
               安定版の最新バージョンは、「22」



12年12月17日月曜日
いったいどれくらい
                つかわれてるの?


12年12月17日月曜日
ブラウザシェア




               http://gs.statcounter.com/#browser-ww-monthly-201110-201210


12年12月17日月曜日
ブラウザシェア(国内)




               http://gs.statcounter.com/#browser-ww-monthly-201110-201210


12年12月17日月曜日
世界で1番!
               日本で2番!


12年12月17日月曜日
使いたく
               なりませんか?


12年12月17日月曜日
使って
               みませんか?


12年12月17日月曜日
拡張機能のススメ



12年12月17日月曜日
拡張機能とは?


               ブラウザをカスタマイズできる
               追加機能
               Firefox、Safari、Operaにもあるよ
               Chrome ウェブストアからダウンロード
               HTML、CSS、JavaScriptで作れます



12年12月17日月曜日
効率化のための
                10の拡張機能


12年12月17日月曜日
Fire Mobile Simulator




12年12月17日月曜日
Google Quick Scroll




12年12月17日月曜日
Image Properties Context




12年12月17日月曜日
Mobile Barcoder




12年12月17日月曜日
JavaScript Errors Notifier




12年12月17日月曜日
PageSpeed Insights




12年12月17日月曜日
JSON Formatter




12年12月17日月曜日
XV - XML Viewer




12年12月17日月曜日
ColorZilla




12年12月17日月曜日
Cybozu Live Checker




12年12月17日月曜日
この他にも
               いっぱいあります。


12年12月17日月曜日
Chrome ウェブストア




12年12月17日月曜日
開発ツールで
               スピードアップ


12年12月17日月曜日
Developer Tool




12年12月17日月曜日
実は、Webの開発に
               めっちゃ使えます


12年12月17日月曜日
Ver.22
               になります


12年12月17日月曜日
起動方法

               Windows

               「Ctrl」+「Shift」+ i

               Mac

               「Cmd」+「option」+ i

               もしくは、メニューから




12年12月17日月曜日
画面の説明




12年12月17日月曜日
メニューエリア




12年12月17日月曜日
機能エリア




12年12月17日月曜日
コンソールエリア




12年12月17日月曜日
フッターエリア




12年12月17日月曜日
なにができるのか?



12年12月17日月曜日
8つの機能

               Elements    Profiles

               Resources   Audits

               Network     Console

               Sources

               Timeline

12年12月17日月曜日
Elements


               DOMツリーの確認
               要素の持つCSSスタイルの確認
               Boxモデルの確認
               DOMブレイクポイント




12年12月17日月曜日
Resources


               対象ページに読み込まれている
               リソースを確認
               HTML、画像、CSS、JavaScript
               ローカルストレージ、Cookie etc...




12年12月17日月曜日
Network




               ネットワークを介してダウンロードさ
               れたリソースを確認




12年12月17日月曜日
Sources




               JavaScriptのコードデバッグ




12年12月17日月曜日
Timeline




               ページの描画に費やされる時間の概要
               を確認




12年12月17日月曜日
Profiles




               CPUの実行時間やメモリ使用量を確認




12年12月17日月曜日
Audits




               ページを解析し、読み込み時間を短縮
               するための最適化を方法を確認




12年12月17日月曜日
Console




               ページと対話的にJavaScriptを使える




12年12月17日月曜日
Console API



               あわせて覚えて欲しい
               もともとはFirebugが持っていた機能
               便利すぎてChromeでも使えるように




12年12月17日月曜日
console.log/debug/info



               コンソール上にログを表示する
               本来は動作が異なるが、Chrome上では
               同じ




12年12月17日月曜日
console.warn/error




               console.logに比べて、コンソール上
               での表示が強調される




12年12月17日月曜日
console.time/timeEnd




               コンソール上にtimeからtimeEndまでの
               経過時間を表示することができる




12年12月17日月曜日
詳細はこちら




12年12月17日月曜日
もっと
               詳しく知りたい


12年12月17日月曜日
Google Developers




12年12月17日月曜日
Google Developers




12年12月17日月曜日
Google Developers




12年12月17日月曜日
Google Developers




12年12月17日月曜日
Google Developers




12年12月17日月曜日
これでもいいです




12年12月17日月曜日
まとめ



12年12月17日月曜日
手に馴染んだ工具を作るように、一番
               好きなブラウザを作ってください

               一番好きなブラウザのあらゆる機能を
               使って、作業効率を上げてみましょう




12年12月17日月曜日
ありがとうございました。



12年12月17日月曜日

Weitere ähnliche Inhalte

Ähnlich wie すごいぞ!Google Chrome

Unity3.5と4.0の違い
Unity3.5と4.0の違いUnity3.5と4.0の違い
Unity3.5と4.0の違いKeigo Ando
 
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪Junko Nukaga
 
セプテーニさんでのセミナー
セプテーニさんでのセミナーセプテーニさんでのセミナー
セプテーニさんでのセミナーTokusei Noborio
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみようJunko Nukaga
 
「LESS」ことはじめ
「LESS」ことはじめ「LESS」ことはじめ
「LESS」ことはじめEigoro Yamamura
 
Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Takuya Fujimura
 
「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた
「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた
「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみたNaoki Yamamoto
 
「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasualSATOSHI TAGOMORI
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらHiroaki Okubo
 
Chromium androidビルド
Chromium androidビルドChromium androidビルド
Chromium androidビルドHiroshi Sakate
 
iPhoneアプリを作ってみよう
iPhoneアプリを作ってみようiPhoneアプリを作ってみよう
iPhoneアプリを作ってみようNagao Shun
 
WEBアプリケーションビルド・ テストツール YEOMAN
WEBアプリケーションビルド・ テストツール YEOMAN WEBアプリケーションビルド・ テストツール YEOMAN
WEBアプリケーションビルド・ テストツール YEOMAN kamiyam .
 
Falconjsの始め方 (share)
Falconjsの始め方 (share)Falconjsの始め方 (share)
Falconjsの始め方 (share)Jun Funakura
 
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】Komei Otake
 
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組みとある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組みKei Nakazawa
 
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶHiroshi Oyamada
 

Ähnlich wie すごいぞ!Google Chrome (20)

Aiming study#6pdf
Aiming study#6pdfAiming study#6pdf
Aiming study#6pdf
 
Unity3.5と4.0の違い
Unity3.5と4.0の違いUnity3.5と4.0の違い
Unity3.5と4.0の違い
 
レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
 
セプテーニさんでのセミナー
セプテーニさんでのセミナーセプテーニさんでのセミナー
セプテーニさんでのセミナー
 
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
 
Heroku入門
Heroku入門Heroku入門
Heroku入門
 
「LESS」ことはじめ
「LESS」ことはじめ「LESS」ことはじめ
「LESS」ことはじめ
 
Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能Google IO 2012 つまみ食い(1) ADT r20 の新機能
Google IO 2012 つまみ食い(1) ADT r20 の新機能
 
「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた
「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた
「AIRネイティブ拡張」を使って、 AndroidでNFCを読み込んでみた
 
Code Anything
Code AnythingCode Anything
Code Anything
 
「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual「ほげエンジニア」の定義について #operationcasual
「ほげエンジニア」の定義について #operationcasual
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
 
Chromium androidビルド
Chromium androidビルドChromium androidビルド
Chromium androidビルド
 
iPhoneアプリを作ってみよう
iPhoneアプリを作ってみようiPhoneアプリを作ってみよう
iPhoneアプリを作ってみよう
 
WEBアプリケーションビルド・ テストツール YEOMAN
WEBアプリケーションビルド・ テストツール YEOMAN WEBアプリケーションビルド・ テストツール YEOMAN
WEBアプリケーションビルド・ テストツール YEOMAN
 
Falconjsの始め方 (share)
Falconjsの始め方 (share)Falconjsの始め方 (share)
Falconjsの始め方 (share)
 
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】
 
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組みとある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
 
PhoneGap Introduction
PhoneGap IntroductionPhoneGap Introduction
PhoneGap Introduction
 
Sinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶSinatraでwebアプリケーション開発を学ぶ
Sinatraでwebアプリケーション開発を学ぶ
 

Mehr von Eigoro Yamamura

Kotlin勉強会 in ehime
Kotlin勉強会 in ehimeKotlin勉強会 in ehime
Kotlin勉強会 in ehimeEigoro Yamamura
 
コストエクスプローラーをつかいこなそう
コストエクスプローラーをつかいこなそうコストエクスプローラーをつかいこなそう
コストエクスプローラーをつかいこなそうEigoro Yamamura
 
はじめてのクラウドサーバー AWSとGCEを使い比べてみた
はじめてのクラウドサーバー AWSとGCEを使い比べてみたはじめてのクラウドサーバー AWSとGCEを使い比べてみた
はじめてのクラウドサーバー AWSとGCEを使い比べてみたEigoro Yamamura
 
Twitter bootstrapのススメ
Twitter bootstrapのススメTwitter bootstrapのススメ
Twitter bootstrapのススメEigoro Yamamura
 
CMSについておさらいしてみよう
CMSについておさらいしてみようCMSについておさらいしてみよう
CMSについておさらいしてみようEigoro Yamamura
 
すだちハッカソン発表資料
すだちハッカソン発表資料すだちハッカソン発表資料
すだちハッカソン発表資料Eigoro Yamamura
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたEigoro Yamamura
 
よんでよんでよまれてよんで
よんでよんでよまれてよんでよんでよんでよまれてよんで
よんでよんでよまれてよんでEigoro Yamamura
 

Mehr von Eigoro Yamamura (8)

Kotlin勉強会 in ehime
Kotlin勉強会 in ehimeKotlin勉強会 in ehime
Kotlin勉強会 in ehime
 
コストエクスプローラーをつかいこなそう
コストエクスプローラーをつかいこなそうコストエクスプローラーをつかいこなそう
コストエクスプローラーをつかいこなそう
 
はじめてのクラウドサーバー AWSとGCEを使い比べてみた
はじめてのクラウドサーバー AWSとGCEを使い比べてみたはじめてのクラウドサーバー AWSとGCEを使い比べてみた
はじめてのクラウドサーバー AWSとGCEを使い比べてみた
 
Twitter bootstrapのススメ
Twitter bootstrapのススメTwitter bootstrapのススメ
Twitter bootstrapのススメ
 
CMSについておさらいしてみよう
CMSについておさらいしてみようCMSについておさらいしてみよう
CMSについておさらいしてみよう
 
すだちハッカソン発表資料
すだちハッカソン発表資料すだちハッカソン発表資料
すだちハッカソン発表資料
 
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみたプログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
 
よんでよんでよまれてよんで
よんでよんでよまれてよんでよんでよんでよまれてよんで
よんでよんでよまれてよんで
 

すごいぞ!Google Chrome