記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

これがないと不便!コーディングに便利なChrome拡張機能3選

  • 2014.01.22
  • 2020.07.01
  • 技術
これがないと不便!コーディングに便利なChrome拡張機能3選

Chrome拡張機能

こんにちは。ECプロデュース部の岡本です。

突然ですが、皆さんはWebサイトのコーディングをどこで実施されていますでしょうか?

私はもっぱらWebブラウザ上、厳密にはGoogleChromeのDeveloperToolsを使っています。

今回はChromeでコーディングをやりたいと思う理由の1つ、「便利な拡張機能」を3つご紹介します。

ECサイトは1つでいい

拡張機能1:FireMobileSimulator for Google Chrome

firemobilesimulator

端末(UA)偽装に欠かせない拡張機能「FireMobileSimulator」です。

元々firefox向けのプラグインなのですが、GoogleChrome向けにもリリースされています。

「UA偽装ならGoogleChromeのDeveloperToolsでできるじゃないか」という意見もあるかと思いますが、それはスマートフォン・タブレットの話です。

弊社ASPではフィーチャーフォンにも対応していますので、フィーチャーフォン向けのブラウザチェックに活用しています。

サーバーサイドで不要なタグを整理する仕様のため、ソースコードを見ながら編集できるようになるのはとても助かっています。

Chrome ウェブストア – FireMobileSimulator for Google Chrome

拡張機能2:Tag Assistant (by Google)

Googleサービスの配信状況を確認できる拡張機能「Tag Assistant (by Google)」です。

(by Google)の文言の通り、Google自らがリリースした拡張機能の1つです。

今やWEBサイトに欠かせない機能となったGoogleAnalyticsやAdwords、そして昨年リリースされたGoogleタグマネージャーなどのタグが正常に動作しているかを確認することができます。

対応しているタグリスト

トラッキングコードの入れ忘れや記述ミスなどがあった場合には、ひと目でわかるようになっています。

アクセス解析や広告などは、正常に動作していないと洒落にならない機能です。

そのため実装させた際は、必ずこの拡張機能で動作を確認するようにしています。

Chrome ウェブストア – Tag Assistant (by Google)

拡張機能3:HTML5 Outliner

HTML5 Outliner

この拡張機能はかなり地味です。

ソース内の構文を解析し、hxタグの順位に基づいてアウトライン化するだけの機能となっています。

しかし内部SEO対策の面から、htmlの構造は可能な限りセマンティックにしたいものです。

そこでこの拡張機能を利用し、見出しに使用するタグがセマンティックかどうかを確認するようにしています。

ECサイト(特にサイト移行の場合など)は規模が大きいため、htmlの文章構造を見失うことがあり、マークアップの最終確認に活用しています。

Chrome ウェブストア – HTML5 Outliner

まとめ

いかがでしたでしょうか。

この他にも便利な拡張機能はまだまだ存在します。

また機会があれば、コーディング以外のサイト制作に役立つ拡張機能などをご紹介したいと思います。


                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

技術カテゴリの最新記事