コーディング、Web制作に使えるアドオン 10選 !!

コーディング、Web制作に使えるアドオン 10選 !!

  • このエントリーをはてなブックマークに追加

こんにちは。キテレツです。早いもので今年も3分の2が終了してますね。
悔いの残る2014年とならぬよう、便利なアドオンは入れときましょう。
と、無理矢理な起承となりましたが、今回はコーディングに便利なアドオンをご紹介します。

※コーダーチームのメンバーにざっくり聞いた集計となっています。

Firebug・Web Developer

Firebug:https://addons.mozilla.org/ja/firefox/addon/firebug/
Web Developer:https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
この2つのどちらも使っていないコーダーはいないと思いますが、念の為…
HTML、CSS、JavaScriptなどをリアルタイムに編集・デバッグをする為のツールです。

firebug
Web Developer

ColorPick Eyedropper (Chrome

https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
Webサイトで使われているカラーを調べるアドオンです。
マウスオンでカラーコードを調べられます。

ColorPick Eyedropper

続きを読む

JSONView (Chrome

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
JSONファイルを扱った制作をしている時、データ確認をする際に圧縮されたJSONを展開した状態で見る事ができます。
要素にマウスオンすると画面下に要素へアクセスするためのパスが表示されます。
ノードツリーの先頭にある「+」、「-」で折り畳みも行えます。

JSONView

Markdown Preview Plus (Chrome

https://chrome.google.com/webstore/detail/markdown-preview-plus/febilkbfcbhebfnokafefeacimjdckgl
マークダウンファイルをきれいに表示
エディタなどで適当にマークダウンを書き、Chromeにドラッグ&ドロップします。
その後はマークダウンを保存する毎にHTMLに変換されたものが表示されます。

Markdown Preview Plus

XV XML Viewer(Chrome

https://chrome.google.com/webstore/detail/xv-%E2%80%94-xml-viewer/eeocglpgjdpaefaedpblffpeebgmgddk
高機能なXMLリーダーです。アウトラインも表示してくれるので、使いやすいです。
XMLファイルをざっと見たい時に使えます。

XV XML Viewer

user agent switcher(Firefox

https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
名前の通り、ユーザエージェントを切り替えるアドオンです。
下記サイトでUser Agent Switcher用XMLも配布されているので最近のUAまで追加する事も可能です。

user agent switcher

Awesome Screenshot(Chrome

https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja
軽量、シンプル、ページ全体を撮れる最小限でありつつ役に立つキャプチャ系アドオンです。
切り取り、図形挿入といったオプションも付いています。

Awesome Screenshot

Postman(Chrome

https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm
post処理を簡単にリクエストできるアドオンです。
Rest APIなWebサービスの開発時にアプリを起動せず、簡単にテストが行えます。
履歴機能も付属しています。

Postman

FireGestures(Firefox

https://addons.mozilla.org/ja/firefox/addon/firegestures/
マウスジェスチャ拡張機能です。
外部サイトのページURLやタイトル、リンクなどをタグ付きで素早くコピペできるなど、6種類のマウスジェスチャによって様々なブラウザ機能やユーザスクリプトを実行することができます。

FireGestures

Tag Assistant(Chrome

https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk
どちらかと言えば、ディレクター向けですが、Google系サービスの配信状況を確認できるアドオンです。
Googleの提供しているアナリティクスやアドワーズ、Googleタグマネージャー等のタグが正常に動作しているかを確認できます。これらのタグはマストなものなので、漏れがないようチェックしたいですね。

Tag Assistant

いかがでしたでしょうか?普段自分が便利に使っているもの、実は他のチームメンバーは知らなかったりする事があるかもしれません。たまにこんな便利なアドオンあるよ!と交換会をしてみるのも宜しいかと思います。
今回は以上となります。

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

キテレツ(フロントエンドエンジニア)

ソリューション事業部 コーディング担当のキテレツです。 キテレツというのは入社時に決めたあだ名ですが全く浸透してません‥

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation