こんにちは。ECプロデュース部の岡本です。
突然ですが、皆さんはWebサイトのコーディングをどこで実施されていますでしょうか？
私はもっぱらWebブラウザ上、厳密にはGoogleChromeのDeveloperToolsを使っています。
今回はChromeでコーディングをやりたいと思う理由の１つ、「便利な拡張機能」を３つご紹介します。
拡張機能１：FireMobileSimulator for Google Chrome
端末（UA）偽装に欠かせない拡張機能「FireMobileSimulator」です。
元々firefox向けのプラグインなのですが、GoogleChrome向けにもリリースされています。
「UA偽装ならGoogleChromeのDeveloperToolsでできるじゃないか」という意見もあるかと思いますが、それはスマートフォン・タブレットの話です。
弊社ASPではフィーチャーフォンにも対応していますので、フィーチャーフォン向けのブラウザチェックに活用しています。
サーバーサイドで不要なタグを整理する仕様のため、ソースコードを見ながら編集できるようになるのはとても助かっています。
Chrome ウェブストア – FireMobileSimulator for Google Chrome
拡張機能２：Tag Assistant (by Google)
Googleサービスの配信状況を確認できる拡張機能「Tag Assistant (by Google)」です。
(by Google)の文言の通り、Google自らがリリースした拡張機能の１つです。
今やWEBサイトに欠かせない機能となったGoogleAnalyticsやAdwords、そして昨年リリースされたGoogleタグマネージャーなどのタグが正常に動作しているかを確認することができます。
トラッキングコードの入れ忘れや記述ミスなどがあった場合には、ひと目でわかるようになっています。
アクセス解析や広告などは、正常に動作していないと洒落にならない機能です。
そのため実装させた際は、必ずこの拡張機能で動作を確認するようにしています。
拡張機能３：HTML5 Outliner
この拡張機能はかなり地味です。
ソース内の構文を解析し、hxタグの順位に基づいてアウトライン化するだけの機能となっています。
しかし内部SEO対策の面から、htmlの構造は可能な限りセマンティックにしたいものです。
そこでこの拡張機能を利用し、見出しに使用するタグがセマンティックかどうかを確認するようにしています。
ECサイト（特にサイト移行の場合など）は規模が大きいため、htmlの文章構造を見失うことがあり、マークアップの最終確認に活用しています。
まとめ
いかがでしたでしょうか。
この他にも便利な拡張機能はまだまだ存在します。
また機会があれば、コーディング以外のサイト制作に役立つ拡張機能などをご紹介したいと思います。
