みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

Google Chromeオススメ拡張機能 3選!WEB担当必見です!

ブラウザとは?からGoogle Chromeのダウンロード方法・オススメ拡張機能を画像付きで解説!

こんにちは、かなきち(@kanakichi0801)です


技術系記事、第3回目です。


↓この記事の続きです
blog.mimipen.net


今回は、web業界の方だけではなく、仕事でパソコンをという方全てに向けての記事になります。



かなきち

この記事を読むと次のことがわかるよ!

  • ブラウザとは?
  • グーグル クロームのインストール方法
  • グーグル クロームのデベロッパーツールと拡張機能の紹介




ブラウザとは?

「ブラウザ」っ聞いたことありますか? 聞いたことない人もこの言葉は覚えてくださいね。


ブラウザとは、インターネット上にあるウェブページの情報、表示する閲覧ツールのことです。


ホームページを作るものとして、このツールが使えない、またはネットが使えないと仕事になりません。ホームページを作る上で最重要ツールと言っていいでしょう。


Windowsであればパソコンを購入した時点で[Internet Explorer(IE)]が、macであれば[Safari(サファリ)]が標準搭載されています。


しかし、この2つはWEB開発者にとって使いにくいブラウザとなっております。。。


そこでオススメするのが「Google Chrome(グーグル クローム)」と言うブラウザです。WEB業界で仕事をしている方の9割は、こちらのブラウザを使っていることでしょう。それぐらい使いやすく、WEB開発者向けの便利な機能がそろっています。


※今後このブログでは、Google Chrome(グーグル クローム)ではなくChrome(クローム)と略します。

Chrome(クローム)をインストールしましょう

さっそく、Chrome(クローム)をインストールしてください。
インストールリンク


URLをクリック後、【Chromeをダウンロード】をクリックします。

【Chrome(クローム)のインストール画面】
【Chrome(クローム)のインストール画面】


画像を見てもダウンロードの仕方がわからないという場合は、以下に参考サイトを載せておきます。
参考リンク


ダウンロードしたらChrome(クローム)を開いてみましょう。


【Chrome(クローム)最初の画面】
【Chrome(クローム)最初の画面】
このような画面が立ち上がりましたか?
立ち上がったら[Googleで検索またはURLを入力]部分に文字などを入力して検索をしてみましょう。検索ができましたら、これでChrome(クローム)の準備は完了です。


よく使いますので、Chrome(クローム)を既存ブラウザに設定しておきましょう。
既存ブラウザに設定する方法は、以下を参照してください。
参考リンク

知らないと損!Chrome(クローム)の便利機能

Chrome(クローム)には、便利な機能が検索やブックマークなどの標準機能の他にもたくさんの機能が備わっています。その中でもよく使う機能のさわりを2つ説明して今回は終わりにしたいと思います。


  • デベロッパーツール(開発者ツール)
  • 拡張機能(Extensions)

デベロッパーツールとは?

全部説明すると本が書けるので、簡単に説明するとホームページを表示させるためのコード(文字列)を表示し、どのようにコードがブラウザに反映させているか一目でわかるようにする機能です。


例えば機械を組み立てるとして、機械の中身がどんな部品で出来ていて、どのように配置されているかわからないと作れませんね。ホームページも同じで中身がわからないと作れません、ではどのように中身を知るのか?


デベロッパーツールが、ホームページの部品や配置を教えてくれる役割をします。


デベロッパーツールには、他にもたくさんの機能がありますが、またの機会に説明させていただきます。

拡張機能とは?

簡単にいうと、Chrome(クローム)の機能を増やしたり強化したりする追加ツールです。ツールの種類は、ショッピングやブログ、仕事の効率化まで様々。


私がよく使うツールを3つピックアップしました。

Awesome Screenshot

chrome.google.com
ページをキャプチャーする拡張機能ですが、キャプチャーした画像にその場で文字を入れれるすぐれもの。仕事の効率化に一役買っています。


ページをキャプチャーし、指示をそこに直接書いて、外注さんとやり取りしています。文章でやり取りするよりもわかりやすく時短にもなります。

The QR Code Extension

chrome.google.com
ページのバーコードを表示してくれる優れもの。


パソコンで見ていたサイトをスマホでも見たいそんな時ありませんか?スマホのカメラ機能か、バーコード読み取り機能を使えば簡単にそのサイトにアクセスすることができます。


スマホで同じサイトをまた調べたり、URLをいちいち入力する手間が省けますね。

Chrome Add-on for Hatena

chrome.google.com
はてなブログユーザー専用ですが、ブログの装飾やSEO対策にもなるちょっとした拡張機能。


はてなブログの記事で[大見出し]をクリックするとタイトルがh3タグになり、h1→h3と並んでしまいます。タグの順番として、h1→h2→h3の順番にしないとGoogleがらペナルティを受けます。


この拡張機能はh2に設定してくれる機能や背景をグレーにしてくれるなど、痒いところに手が届く拡張機能です。


他にも拡張機能はたくさんあるので、気になった方はぜひ、以下のリンクから見てみてください。
参考リンク


最後までご覧いただきありがとうございます。


この記事がいいなっと思ったら読者登録をお願いいたします♪


【ツイッターでは、仕事のことなどをつぶやいています】
技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち
かずん