Web制作初心者さん向けの、Google Chrome拡張機能13個＋α

2013/03/22　　便利ツール・ Chrome・初心者

前の記事「Mac歴３ヶ月の私が最初にやった設定と入れたアプリ色々」の続きです。Google Chrome拡張機能のお話。これも姫路IT系勉強会でお話したことのまとめになります。勉強会でお話したことに加え、その後教えて頂いた便利な拡張機能も含めてまとめました。Web制作関連の機能が多いかな…色々教えて頂いて、実際自分で試してみて「使いやすい！」と思ったものを主に紹介しています。私はWeb制作技術が高くないので、そんな私でもできました！という感覚の、初心者さんに優しい内容となっております。

ちょろめー、ちょろめー、と呼んでて思い出したのですが、ア太郎さんとこのニャロメ先生は元気でしょうか…。

なぜChromeを使うのか

私の場合は「なんや知らんけどみんなChrome使っとる…」というところから始まっています。それ以外に特に意味はないです。このブログを見て下さる方もChromeユーザーさんが一番多いです。そんなにアクセスはないんですが(；´Д｀)。今はMac使っていますが、Windowsを使っていた頃はInternetExplorerとFirefoxを使っていました。それに比べるとChromeは余計なものがなくて見やすくてサクサク使えるところがいいのかな、と。InternetExplorerは動作も遅かったしごちゃごちゃしていたような印象があります。Firefoxは動作が遅い印象がありますが、それ以外は特に不便を感じていません。今もChromeがちょっと調子悪い時などはFirefox使っていますが、拡張機能をこんだけ揃えてしまったので、乗り換えする気はあまりないです…。

現在の状態

元々使っていたもの、勉強会で教えて頂いたものを含めて、現時点でこのように落ち着いております。計13個です。

左からいきまーす！

Chrome Sniffer

現在見ているWebサイトがどのようなもので構成されているかをアイコン表示してくれるツール。

GoogleAnalytics、WordPress、JQuery、facebook…左のように色々なアイコンが出てきます。

Speed Dial

よくアクセスするページを登録することで、ワンクリックでそのページに飛ぶことができます。新しいタブを開いた時にSpeedDialのページを表示するようにしておけば便利です。↓こんな感じで。

その横の☆マーク…Chromeのブックマークアイコンは飛ばします。

はてなブックマーク

人気のはてなブックマーク。気に入った記事を登録（オンライン上でブックマーク）しておけるシステムですね。オンラインなので、外出先でスマホ等で確認できるのもいいところ。スマホアプリもあります。このアイコンをクリックすることで、今見ているWebサイトを簡単にはてなブックマークに登録できます。Chrome拡張機能ではなく、ブックマークレットとかでも登録はできるのですが、Chrome使ってるので入れちゃいました。

Web Developer

フバタロウ（@foobartaro）さんに教えてもらった機能。その名の通りWebをDevelopするツールです。クリックすると…

こんな表示が出てきます。英語ー！えいごなのです…(´Д⊂ｸﾞｽﾝ。大丈夫！英語が理解しやすくなる拡張機能も教えてもらったよ(*・ω<)☆！ていうかWebDeveloperはそんな難しい単語はないので、見たら何となく分かると思いますが…。これで今見ているサイトのCSSをオフにしたり、そのWebサイトのカラーパレットが表示されたり、idやclassの振り分けが分かります。

他にも色んな機能があるようで、レスポンシブデザイン（パソコンやタブレット、スマートフォンの画面サイズでも最適なWebサイトを表示する）のための画面の大きさ切り替え機能とかもあります。左はyahoo!JAPANのトップページをCSSをオフにして、idとclassを表示させてみました。CSSを読み込んでないとこんな感じなんですね…(ﾟＡﾟ;)ｺﾞｸﾘ

ちなみにChromeユーザーさんは、右（副ボタン）クリックメニューにある「要素の検証」でソースを見て検証される方も多いようです。選択した部分にどんなCSSが適用されているかを一覧で見ることができたりとか、便利です。

MeasureIt

定規ツール。Webサイトの大きさや画像の大きさをその場でサクッと測りたいときに使っています。ソース見たらいいんですが、ほら…ソースってなんかややこしいし…ってことで。

選択すると青い枠が表示され、枠の大きさが出ます。見た目の感覚でサクッと測れるので便利です。

webページショット – Webpage Screenshot

Webページをまるまる撮れるスクリーンショット機能。普段スクリーンショット撮る時はSkitch使っていますが、それだと画面に表示されている部分しか撮れないので、Webページ全体を撮る時に使っています。【追記・2015年７月現在で使えなくなってるみたいです…】

Evernote Web Clipper

Evernote。これはあまり説明いらないんじゃないかと思いますが…。ブログ記事を書く時や、ちょっとしたメモを取る時にEvernoteを使っています。これはWebページのクリップの拡張機能です。保存したいWebページでアイコンをクリックするとEvernoteに保存してくれます。私は、はてブ→技術系の記事、Evernote→行きたいお店とかその他プライベート系、のWebページを保存する、といった風に使い分けています。

Create Link

tatsuさんのブログで知った拡張機能。Webページ上で右クリック（副ボタンクリック）すると、そのページのタイトルとURLをテキスト形式やHTML形式で書き出してくれます。そのままクリップボードにコピーしてくれるので、あとはペーストするだけでOK！主にブログを書く時、リンクをはることが多いので重宝しています。

Facebook Share Button (by Shareaholic)

見ているWebページをfacebookにシェアする機能。「いいね！」された数も表示してくれます。ブログ書いた時に自動的にfacebookにお知らせする機能をつけていないので、これで手動でしています。facebookの友達はWebやデザイン関係ではない人もいるので、あまりにこのブログの更新情報が流れるとウザいかな…と思ったりするので、手動でたまにシェアしてます。赤枠の数字はそのページが「いいね！」された数です。他のページがどれくらい「いいね！」されているかも分かるので、結構役立ってます。

(un)clrd

ワテ（@aWebprogrammer）さんに教えてもらったもの。これが…！目からウロコ…！！Webデザインの勉強を独学でしていますが、アクセシビリティとか、Webに最適な配色、とかよく分かっていないのが現状でして。これはクリックするだけで見ているWebページを白黒（グレースケール）に変えてくれます。白黒で見ることによって、背景に文字が溶け込んでしまって見づらくなっている部分とかが分かる…！デザイン性と見やすさのバランスって実に微妙で難しいところがあると思うんですが、色に左右されている部分も大きいです。これによって、色使いを考えさせられることもあるかな、と。ただ白黒になっただけで、色々発見があるもんだ。