みなさんこんにちは。

前原です。

 

改めて先人たちの記事を読み返すと、中身の無さ（ハッキリ言う）に衝撃を受けます。

 

 

さてさて、そのDNAを受け継がんために、今回は中身のある素晴らしい記事を書いていこうと思います。

自分のライティングスキルアップも兼ねてね、、、

 

 

というわけで今回は、

 

webやるなら必須！作業が捗るブラウザアドオン3選

 

をご紹介します！

 

 

 

そもそもアドオンとは？

 

アドオンとは拡張機能のことです。

アドオンを入れるかどうかでその日の作業効率が1.5倍早くなることだってあり得ます。

 

何か分かりやすいので例えると…

 

思い付かない。

 

 

 

ファイアフォックスやグーグルクロームが今やweb開発としてメジャーなブラウザですので、この２つブラウザのみ選定していきます。

また、仕事上２つとも使ってるという僕みたいな人もいると思いますので、やっぱりどちらのブラウザでも同じアドオンを備えていた方が便利かと思います。

 

 

 

ちなみに私はwebデザイン、HTML/CSSコーディング、フロントエンドエンジニアっぽいことがギリギリ可能な人材です。

 

 

おすすめアドオン①すぐにスマホからアクセス！「QRコード作成」

みなさんスマホ使ってると思います。

さて、今PCで見てるこのサイトを、「スマホでも見たいなぁ」と思った時、あなたならどうしますか？

 

「とりあえずスマホでブラウザ開いて、http…から頑張って入力します！」

と答えた健気（けなげ）なあなた。

 

 

イライラするぜ。

 

 

URL直打ちは時間がかかる以前に、そもそもミスを誘発するので絶対におすすめしません！

 

 

もしこの「QRコード作成」アドオンを入れていたら、スマホで見たいページをPCで開いた状態で、右上のボタンを押せばすぐさまQRコードが表示されます。

 

使い方（チョロメ）

※上記画像では②が２つあります。間違えてます。「QRコードが表示されるﾖ!」は正しくは③です。

 

上記の手順で表示されたQRコードを、スマホのQRカメラで読み込めばOK。完璧ですな。

 

QR系のアドオンはいくつもありますが、以下が簡単でおすすめです。

 

Firefox（以後FF）の場合

Mobile Barcorder

 

Chrome（以後チョロメ）の場合

goo.gl URL Shortener

 

チョロメの方は、「短縮URLを取得する」というのがメインのアドオンですが、QRコード機能も備えているので便利です。

 

 

そもそもアドオンのインストールの仕方が分からない？

めんどくさいので細かくは教えませんが、

上記URLをクリックした後、FFなら「ファイアフォックスに追加」、チョロメなら「CHROMEに追加」をクリックすればOKです。

 

そしたらブラウザの右上に、今までなかったマークが追加されてます。

もし追加されてなかったらオプションで追加する必要があります。

 

 

QRコード作成を入れておくと捗ることまとめ

 

・スマホで簡単にページ確認ができる

 

 

次！

 

おすすめアドオン②これって何色？？「カラーピッカー！」

 

さて、次もまた鬼のように便利なアドオンです。

 

まず既存のサイトを見て、「これ良いデザインだな。。。真似したろ。。。でも、この黄色はどういう黄色を使ってるんだろう？？？」って思うこと、あると思います。

 

例えばカロリーメイトのサイトを見て、同じ背景色と同じ色を使いたくなった場合・・・。

 

webをやる人であれば、一口に「黄色」と言っても#FAC014というような16進数カラーコードで知りたいはずです。

 

だって、その情報が手に入ればフォトショのカラーピッカーにコピペすれば全く同じ色がパクれるし、CSSに入力する場合はこのカラーコードが必要になりますからね。

 

 

Firefoxの場合

ColorZilla

 

Chromeの場合

ColorPick Eyedropper

 

「ColorZilla」の場合の使い方

 

上記の手順だけで、勝手にクリップボードに#FAC014がコピーされてます。

 

若干チョロメの方が使い方に癖がありますが、慣れれば一緒です。

 

FFの場合は、コピーする形式を設定できます。（チョロメもできると思うけど知りません）

 

 

やっぱり「FAC014」という形式でのコピーが、フォトショに一瞬でコピペができるから便利ですね。

 

 

頭に＃が入るとフォトショにコピペできません。

#FAC014

でコピペしようとすると、

 

＃FAC01

と下一桁が切れて全く意味を成さない数列となるため、いい感じにお腹が立ちます。

 

 

カラーピッカーを入れておくと捗ることまとめ

 

・フォトショにコピペできる

・簡単にCSSにカラーコードを貼り付けられる

・デザインの勉強が捗る

 

 

おすすめアドオン③FFとチョロメでブクマを同期させたい！なら「xmarks」

 

ブラウザ同士ブックマークを同期させとくと何かと便利です。

というか便利なことしかありません。

 

メインブラウザ、サブブラウザと使い分けて、それぞれブクマ内容を分けたいなら話は別ですが、僕のように、同じURL（例えば楽天ショップなど）で、ログインアカウントだけを切り替えて使う場合、

 

ひとつのブラウザでいちいちアカウントを切り替えながら使うのは不便です。

 

というか無理です。

 

だから、最低でも２つのメインブラウザが必要になります。

 

 

 

Firefoxの場合

xmarks

 

Chromeの場合

xmarks

 

 

同期させるために若干設定が必要です。

設定については既に紹介記事（別サイト）があるので、「Xmarks の使い方 – 異なるブラウザーのブックマークを同期」をご参照ください。

 

 

 

xmarksを入れておくと捗ることまとめ

 

・登録ブクマごとに一々ブラウザを切り替えなくていい

・同じサイトにログインアカウントが複数ある人にオススメ

 

 

 

まとめ

本当はまだまだあるんですが、とりあえず以上です。

もっと便利なアドオンがあればぜひ教えてください。