WEB制作で個人的に超便利だった拡張機能とかWEBサイト
情報セキュリティ推進室のIeiriです！Tricorn Tech Labsでは初めましての登場です。( 'ω’ و(و "
2015年に入社し、今年1月に情報セキュリティ推進室に異動するまで、品質管理グループで
Web制作、HTML メール制作系の案件の納品チェック（主に、WEBページやフォーム、HTMLメールのテスト）をやっておりました。
今回は個人的に超便利だったブラウザの拡張機能や、ツールについてご紹介しようと思います！
※各コメントは個人の感想です。
ブラウザ拡張機能
Chrome
・User-Agent Switcher for Chrome
WEBページがPCとスマホとガラケーでHTMLソースが全部違う。。
でもスマホ＆ガラケーからはソースが確認できない。。
という時に、PC上からこの拡張機能を起動してソースを確認していました。
User-Agentの設定はググるとインポートファイルが出てくるのでそれを使うと便利です。
・QR Code Generator
開いてるページのURLをQRコード化してくれます。スマホでこのページ確認したいなって時に、
スマホにQRコードリーダー機能やアプリがあれば、読み取って一発でページを開けます。
URLぽちぽち手打ちしなくても良いのでとても便利です。
・Sizzy
画面幅で文字や画像の大きさが変わるレスポンシブ対応のWEBページやフォームの確認に
使っていました。メジャーな端末の大きさで表示確認ができるので便利です。
表示確認は実機でのチェックがメインでしたが、
レスポンシブが効く幅が端末ごとでミスってないかなどを確認するのに使ってました。
制作中などでざっくり表示確認したいなって時にはちょうど良いと思います。
・テキストエンコーディング
右クリックのメニューから使える便利なエンコーダー。
ソース開いてコピーしてテキストエディタ開いてペーストして変換して・・の手間を減らせます。
・Eye Dropper
色指定便利ツール。企業のブランドサイトとかは文字色とか背景色とかは
HTML、CSSのレギュレーション指定があること多いんですが、ちゃんと指定通りのコードが
入ってるか、カラーピッカーで簡単に確認できちゃいます。（色もコードも表示してくれる）
それと「なんか同じ色指定のはずなのに上下のボタンの色が違うような気がする…」
という時の確認に使ったり
「#eb6b8dってRGBなんだっけ、どんな色だっけ」という時に使ってました。
・Color Thief – 色泥棒
開いてるページの色指定を小窓で一覧化してくれます。すごく見やすいです。
こちらも文字色や背景色のチェックに使えます。
・Check My Links
ページの中にあるURLのリンク切れを探してくれます。
リンクされているかどうかのチェックしかしてくれないので、
指定した場所にURLがあるかどうかのチェックまではしてくれません。
いつも自分がURLをチェックする時は社内用のツールをメインで使っていました。
チェックツールについては katsuraさんの記事 を覗いてみてください(*´ω`*)
・Page Ruler
幅や高さなどをpixel単位で測れます。ページ幅の指定やロゴの大きさの指定があるときなど
に使っていました。
Firefox
・Web Developer
WEB開発の方はブラウザの開発者ツール（F12を押すと出てくるやつ）
を使ってる方が多いと思いますが、こちらはALT属性値を視覚的に表示できたり、
フォームの入力欄をリロードぜずに全消ししたり、チェックボックスのON、OFFを
一括で操作できたりと何かと優れものです。WEBサイトだけでなく、
Gmailなどのメールアプリでも機能してくれるので、ALT属性値の確認などで
とても役に立ちました。
Internet Explorer
・FireShot
IEでもスクリーンショット撮れちゃう素敵拡張機能です。
IEで拡張機能を使う方法はググると出てくるかと思います。が、
ツールバーにアイコンが表示されなくて詰まったことがあります。。。
こちらのページを参照したら解決しました。
ツール系WEBサイト
以下は拡張機能ではないですが、便利だったWEBサイトについて記載しています。
拡張機能と違ってブラウザを選ばないので逆に便利でした～！(*´∀｀*)
・Javascriptのescape関数エンコード、デコードツール
チートシート
ときどき使ってたチートシートです。スタイルシートリファレンスは特に使っていました！
ご参考までに。
・・・以上、個人的に超便利だった拡張機能とかツールのご紹介でした。
読んでくれた方のお役に立ちますと幸いです！m(_ _)m