コーディング、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などをリアルタイムに編集・デバッグをする為のツールです。
ColorPick Eyedropper (Chrome
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
Webサイトで使われているカラーを調べるアドオンです。
マウスオンでカラーコードを調べられます。
目次
JSONView (Chrome
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
JSONファイルを扱った制作をしている時、データ確認をする際に圧縮されたJSONを展開した状態で見る事ができます。
要素にマウスオンすると画面下に要素へアクセスするためのパスが表示されます。
ノードツリーの先頭にある「+」、「-」で折り畳みも行えます。
Markdown Preview Plus (Chrome
https://chrome.google.com/webstore/detail/markdown-preview-plus/febilkbfcbhebfnokafefeacimjdckgl
マークダウンファイルをきれいに表示
エディタなどで適当にマークダウンを書き、Chromeにドラッグ&ドロップします。
その後はマークダウンを保存する毎にHTMLに変換されたものが表示されます。
XV XML Viewer(Chrome
https://chrome.google.com/webstore/detail/xv-%E2%80%94-xml-viewer/eeocglpgjdpaefaedpblffpeebgmgddk
高機能なXMLリーダーです。アウトラインも表示してくれるので、使いやすいです。
XMLファイルをざっと見たい時に使えます。
user agent switcher(Firefox
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/
名前の通り、ユーザエージェントを切り替えるアドオンです。
下記サイトでUser Agent Switcher用XMLも配布されているので最近のUAまで追加する事も可能です。
Awesome Screenshot(Chrome
https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=ja
軽量、シンプル、ページ全体を撮れる最小限でありつつ役に立つキャプチャ系アドオンです。
切り取り、図形挿入といったオプションも付いています。
Postman(Chrome
https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm
post処理を簡単にリクエストできるアドオンです。
Rest APIなWebサービスの開発時にアプリを起動せず、簡単にテストが行えます。
履歴機能も付属しています。
FireGestures(Firefox
https://addons.mozilla.org/ja/firefox/addon/firegestures/
マウスジェスチャ拡張機能です。
外部サイトのページURLやタイトル、リンクなどをタグ付きで素早くコピペできるなど、6種類のマウスジェスチャによって様々なブラウザ機能やユーザスクリプトを実行することができます。
Tag Assistant(Chrome
https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk
どちらかと言えば、ディレクター向けですが、Google系サービスの配信状況を確認できるアドオンです。
Googleの提供しているアナリティクスやアドワーズ、Googleタグマネージャー等のタグが正常に動作しているかを確認できます。これらのタグはマストなものなので、漏れがないようチェックしたいですね。
いかがでしたでしょうか?普段自分が便利に使っているもの、実は他のチームメンバーは知らなかったりする事があるかもしれません。たまにこんな便利なアドオンあるよ!と交換会をしてみるのも宜しいかと思います。
今回は以上となります。