STAFFBLOG スタッフブログ

firefox を最新版 ( ver.50 ) にアップデート後、Bookmark Favicon Changer で設定したブックマークレットのアイコン(ファビコン)が初期化された!

fujie
2016/11/17
閲覧所要時間:約12

firefox-50
「Firefox 50」が安定版に。拡張機能のパフォーマンス改善や脆弱性の修正が行われる
http://forest.watch.impress.co.jp/docs/news/1030197.html

「Firefox 50」正式版がリリース、キーボードショートカットの更新やページ内検索機能を強化
http://gigazine.net/news/20161116-firefox-50/


firefox がとうとう バージョン「50」 になりました!
いろいろ強化・修正されたみたいで、

特に、

・border-radiusを用いて作成された角丸の点線と破線の描画に関する不具合を修正しました
という修正が入り、個人的に非常に高まっております!


border-radius とは角丸を表現する CSS で、
最近の Web サイトでは使わない方が珍しいくらい多用しているプロパティの一つです。

丸くした箇所に沿って線を引いたりなども多用しますが、たまにその線を点線や破線にすることもあります。
しかし角丸指定と点線や破線を同時に使うと、直線になってしまうというバグが firefox ではずーっと残っていて ( 2007年ごろから ) デザインを再現するには画像などで対応するしかなく、大変だったのですが、今回の新しいバージョンでは指定した通りになるようになった!ということです。
border-radius: 50%; などという円になる表現で点線や破線を指定した際が特にクリティカルなバグで、すべて直線になってしまいデザインを再現しにくいのが悩みでしたが、新しいバージョンが世の中に浸透していけばもっと楽しく・簡単に実装ができそうです!


今までの firefox の場合、これらは同じ直線でした…。
firefox-50-border-before-01
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
firefox-50-border-before-02
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
firefox-50-border-before-03
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定
しかし バージョン「50」 になったこれからの firefox の場合、ただしく描画されます!
firefox-50-border-after-01
border-radius: 50%;
border: 5px solid #2b2937;
直線を指定
firefox-50-border-after-02
border-radius: 50%;
border: 5px dotted #ED7994;
点線を指定
firefox-50-border-after-03
border-radius: 50%;
border: 5px dashed #00a1e9;
破線を指定




以上、嬉しい前置きでした。


本題(私のブックマークレット環境について)

さて、私はコーディング作業や確認作業、調べ物など、ブックマークレットを多用しており、これが無いと仕事に支障がでます…。

常時、ブラウザの右上に設置しており、ワンクリックで即座に動作させるようにしております。
( https 化してある Web サイト上で、たまに動作しないのが辛いところ…。 )

firefox-50-bookmarklet 右上はこんな感じに。

テキスト(ブックマークの名前)を空にし、アイコンのみにすることで、限られたブラウザのスペースを節約しております!

  • をクリックするとポップアップを表示し、日本語を入力すると Google 翻訳で英語に。
  • をクリックするとポップアップを表示し、英語を入力すると Google 翻訳で日本語に。
といった使い方をしています。




ただしこれはアイコンがあるから、簡単に見分けがつくわけで…
アイコンが無いと、下記の様な感じになります。

firefox-50-bookmarklet-noicon
これは大変ですね。
というわけで、アイコンを設定できるアドオンが存在します。

Bookmark Favicon Changer
https://sites.google.com/site/sonthakit/bookmarkfaviconchanger


こちらを使うと右クリックからのコンテキストメニューで、アイコンを簡単に変更したり保存したりができます。
バージョン「50」より以前まではこちらでまったく問題ありませんでした。

バージョンアップ直後は問題なかったのですが、「追加のツールと機能」のカスタマイズを行うと、アイコンが初期化されてしまい、以後変更ができなくなってしまいました。

いろいろ検証した結果、
  • http や https から始まる URL には今まで通り問題ない
  • javascript: から始まる URL には適用されない
ということがわかりました。

そこでハック的な考えで、
一度別の URL に変えてアイコンを設定し、また URL を戻すと上手くいくのでは…?
ということで実践しましたが、適用直後は想像通り上手くいきました。

が、やはり「追加のツールと機能」のカスタマイズを行うと、初期化されてしまい、無駄な作業の連続でした…。



解決策は…ユーザースタイルシート !


かなり右往左往しましたが、ユーザースタイルシート というのを思い出し、
Stylish
https://addons.mozilla.org/ja/firefox/addon/stylish/

こちらのユーザースタイルシートを管理できるアドオンを導入し、なんとかならないか挑戦しました。

実はユーザースタイルシートは Web サイトの調整だけでなく、ブラウザの外観も操作することができるのです!
ユーザースタイルシート自体は Google Chrome にも存在します。


DOM Inspector
https://addons.mozilla.org/ja/firefox/addon/dom-inspector-6622/

さらにこちらの DOM Inspector というアドオンで外観の要素 ( CSS を付与する箇所 ) を特定し、いざアイコン設定のスタイリングです。



要素の名前は「toolbarbutton」

toolbarbutton という要素 ( タグ ) にスタイルを付与していきます。

( ※未確認事項 ) 私の場合はブックマークツールバーという枠に、各ブックマークレットを収めているため、もしかしたらいくつか違いがあるかもしれません。

下準備として、名前を空にしていたブックマークレット達に、「bookmarklet_〇〇」といった形式で名前を付けてあげます。
〇〇は任意です。 先ほどの Google 翻訳だったら bookmarklet_google-translate-ja-to-en などの様に。
こうすることで追加したスタイルが toolbarbutton 全域に適用されるのを防ぐ書き方がをすることができます。

/* HTML */
<toolbarbutton label="bookmarklet_〇〇"></toolbarbutton>

/* CSS */
toolbarbutton[label^="bookmarklet_"] {
  background: no-repeat center center !important;
  background-size: 16px 16px !important;
  cursor: pointer;
  font-size: 0;
  overflow: hidden;
  text-indent: 100%;
  transition: background-color .175s, background-size .175s;
  white-space: nowrap;
}
toolbarbutton[label^="bookmarklet_"]:hover {;
  background-color: #fff !important;
  background-size: 13px 13px !important;
}
toolbarbutton[label^="bookmarklet_"] .toolbarbutton-icon {
  visibility: hidden;
}


この CSS で、toolbarbutton の label ( 名前 ) 属性の値の先頭に bookmarklet_ を含んでいる要素だけにスタイルを付与することができます。
background にはデフォルトのスタイルがいくつか入っていて綺麗に打ち消すのが手間なので !important で強制してあげます。

目指すのはアイコンのみの省スペースかつ分かりやすい表示で、テキスト ( 名前 ) は不要なので、テキストを消す処理も忘れずに入れます。
また、デフォルトのアイコンが toolbarbutton-icon というクラス名で子要素に存在するので、こちらも邪魔になるので非表示にします。

その際に display: none; に使用して要素を消してしまうと、画像の高さを横幅が失われて、幅が小さくなってしまうので、非表示専用のプロパティ「visibility」を活用します。

ここまでをベースとして、各々にアイコンを設定していきます。

アイコンは base64 形式にすると、画像としてどこかにアップロードする手間が不要でおすすめです。
変換には様々な手段がありますが、
画像をbase64エンコードするツール
https://syncer.jp/base64-encoder

こちらの Web サービスが動作も良く、気の利いたコピー機能を提供してくださるのでおすすめです!


最後に、やっとやりたかったアイコンの設定です。

/* Google 翻訳にて、日本語を英語に */
toolbarbutton[label="bookmarklet_google-translate-ja-to-en"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABcElEQVQ4jZ2SMWtUURCFn6ygiYmViorCIgtbLNy9c757eTzX4qUI5A/cJlXAEFIIFomgkiZNLFLkB6RYsNBCe8FWsBEEbS1EQhCSQCqxsLG5C9vE9+LAaQbOx5yZKbz3XeAX8AP4nnUs6Uld1xeLpvLedyW97ff785OepJWzAFVVzQALzrkb/wUAZs3sqZltDwaDuaIpAvB1qj/RUfY8O/cEdV1fNrMtSbvOuSsTwCdgPRtXgP2zAKPRaB5YjjHenGS6BbwCVqcAL4DllFKn8QoppU5ZlleLorgwPWZVVTON5jblve+a2UNJj2KM98xsHdjx3ndb/QkwBj7kPX3OV/mW+9daTRFCqCUtAe/NbANYbR2hLMs7wGHWH+AE+ClprW2EB8Cb/HAH3vv7wKaZ7QCzbQBjSS9z9t/AqaTXwDjGeLcRMBwOTdJzSe8kreUn2wshLPZ6vUv/NJvZbUkfgd0QgqWUOmZ2HXgMfHHOlX8B3QSQeDjyLakAAAAASUVORK5CYII=' ) !important;
}

/* Google 翻訳にて、英語をに日本語 */
toolbarbutton[label="bookmarklet_google-translate-en-to-ja"] {
  background-image: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABYElEQVQ4jb2Tv0ubYRDHX0ocCsVJsEiHDEqHhOTu+7m3ISLhAf8AF3ETbKfS2UIHh9LBoYV27vS21EXc3XQJdHFzcFHwJ+ggLu3SodDlTQkhRTPYg1uO5z58v8/dZSmliplVJX1y9/mIeAq8i4hlM6tmtwUwARTAoaRtYF/SMdAFilsBfaBXpZLvkt4Cc/96GxF1d39Zq9Ue9QqLwBVwCvwGroGLZrP5bBig1WqNS3ov6WOWUqoAq8CqmVWBS0DAlqSlRqPxRNIBcNyXZ8BP4ObvH0TEN+Bc0i/gCNgAina7/XBQgaRpSZ8jYiEDxty9A3yQtCvpOfAFWMvzfHaYhTzPH5uZAWOZJIAd4E05tgdmNgOsA2fuPnXnSdxblJ5XBrNer0/eFbAiaTMiXvSaga67d0YBvE4pVXo1oBgJ4O7rkqbNrFruy9aoCvaAr+XdFMDh/7Ug6QY46VvnH+7e+QMGaIYRE1OajgAAAABJRU5ErkJggg==' ) !important;
}


base64 形式に変換したアイコンを background-image で背景画像として設定します。
これで完成です!。



期待の効果は!?とまとめ

さて、今回の難関であった、アイコン初期化されないように維持できるかですが…。
「追加のツールと機能」のカスタマイズを開いたり、動かしたりしても全く問題ありませんでした!嬉しい!


実はバージョン「50」以前の Bookmark Favicon Changer を使用時でも、稀に初期化されてしまう現象に遭遇しており、何度か設定しなおしたことがありました。
その度にクリックでアイコンをひとつひとつ登録していく操作が面倒くさいと思っていたのですが、今回の件でまとめて解決したので、悩まされましたが最終的に満足いく結果になりました。よかったです。



firefox-50-bookmarklet-cmpletion 最後に私の右上の完成はこんな感じです。なぜか最近恒例の GIF。
無駄に、 transition ( 変形を滑らかにするプロパティ ) をつけて楽しめるようにしました!



以上です。みなさんも、よき firefox & ブックマークレット ライフを!!



ちょっと古くなりましたが、過去に紹介したアドオンとブックマークレットの記事

Adobe XDは想像以上にサクサクだった!

2016/08/15
閲覧所要時間:約3

Adobe XD

こんにちはー、ゾエです。今更ながらAdobe Experience Design(以下:Adobe XD)を使う機会があったので、簡単にですが感想を書いてみます。
今回はあくまでも感想であり、詳しい使い方は説明していませんのであしからず。


Adobe XDって何ができるの?

プロトタイプ作成

Adobe XDは、アプリ・Webサイトのワイヤーフレームやプロトタイプを作成するためのソフトウェア(アプリケーション)です。本格的にデザインやプログラミングを行う前に、サクッと設計図や試作品を作って試してみよう!って感じですね。


Adobe XDのココがサクサク!

Adobe XDを操作している様子を動画にしてみました。かなり適当ですが、サクサク制作を進められている様子は分かるかと思います。


操作が直感的にサクサク分かる

使ったことがないツールはどんなに便利でも、使い方を覚えるまでの学習コストがネックになります。しかし、Adobe XDは機能・インターフェース共にシンプルで、すぐに・直感的に操作が分かりました。
僕は今までもAdobe製品を幾つか使っているので特にそう感じのかもしれませんが、初めての方でもすんなり使い始められると思います。


動作が軽くてサクサク動く

同じAdobe製品でもPhotoshopやIllustratorなどは、PCのスペックによっては動作が重くなることがあります。しかしAdobe XDは非常に動作が軽く、アートボードをたくさん並べてもサクサク動いてくれます。


面倒な処理を自動でサクサクやってくれる

要素のサイズを変更した際、それに関連する要素も自動的にリサイズしてくれたり、角丸の処理なども簡単です。
特に便利なのが「リピートグリッド」機能。写真+キャプションを並べる場合など、水平・垂直に素早くコンテンツを繰り返すことができます


Adobe XDのココがおしい!

アニメーション機能がやや不足

カルーセルで画像が切り替わったり、タップ(クリック)すると色や形状が変わる、モーダルウィンドウを表示させるなど、その場でアクションを起こすことが現段階ではできないようです。


レイヤー機能がない

Illustratorとの相性はまずまずですが、レイヤー機能が無いためPhotoshopのデータでレイヤーを保持したまま配置することはできないようです。
個人的にデザインはPhotoshopで行うことが多いので、そのままコピペできたら便利なのですが、コピペでオブジェクトを持ってくると当然ですが統合されてしまいます。


閲覧にパスワード制限がかけられない

制作したプロトタイプを他の人と共有することができるのですが、現段階ではパスワードなどによる閲覧制限ができないようです。


さいごに

Adobe XDは、まだ開発中のアプリケーションです。今後更に使いやすく便利になることを期待しています。現状でも簡単なワイヤーフレームやプロトタイプであれば十分作成できるので、ぜひ一度使ってみてください。
Adobe XDのダウンロードはこちら(※現在はMac OSX のみ対応)

ChatWork を導入しました!!

fujie
2016/05/10
閲覧所要時間:約3

blog-10241
平成28年熊本地震からもうすぐ1カ月になりますが、
まだまだ余震が油断なりませんね_(┐「ε:)_

弊社の平成28年熊本地震関連のブログ
熊本のシンボル、熊本城がかなり被害が大きいのが、
県民へのメンタルが非常に心配されるところです。
中では 細い石の柱だけで、保っているところ もあって、びっくりしました。

未明の本震時には自宅で寝ておりましたが、ビクッと跳ね起きました。
40分程停電があり、大変恐ろしゅうございました。

さて、弊社では業務・日々のコミュニケーションを円滑にするために、
ChatWork を活用しています(導入から半年あまり程)

最初は社内公認のコミュニケーションツールではなかったのですが、
スタッフ間の草の根レベルでドンドン広がっていきました。やったねv(‘_’)v

自動で通知、したいよね?

なにごとも、自動で無料な ウェブ の世界。
ChatWork には API が備わっており、
チャットワークの機能を外部のプログラムから簡単に使用できるようになります!

弊社での活用例としては、
スタッフがブログを投稿時や、制作実績を追加時などに、
ChatWork に通知できると社員間に認知が広がって「いいのでは(?)」と思い、
WordPress の公開ボタンをトリガーに通知機能を盛り込みました。

ブログを書いた後にすぐスタッフにバレるので、
ドキドキしちゃうのがちょっと気になるところΣ(”)

また、サーバーの cron 機能を活用して、
ChatWork に定期投稿で弊社サービス MIERU への投稿漏れがないように投稿を促したり、
などなど、API 機能を大いに活用しております!

さらに使いやすく?アプリ、拡張機能!

5周年 を迎えられた ChatWork ですが、デスクトップ版アプリもリリースされています!
私は試したことないですが、Mac 版では、未読数バッジが付くためになかなか良いらしいです。

もちろん、Android・iOS アプリもリリースされており、
いつでもどこでも確認が可能です(‘_’)bグッ

また、デスクトップ版の Google Chrome にはユーザーが開発された、
拡張機能 Chat++
追加のエモーティコンは日本人にはなじめませんが…、コードがハイライトされる機能が気に入っており、オススメです!

災害時の連絡にも

熊本地震の時にも ChatWork を活用して、
安否確認や、会社・自宅の被害状況などの連絡行いました。

クラウドサービスなので、安定して連絡を取り合うことが可能でした。
履歴もきちんと残るので、過去の例を参考に対応力を強化していければと思います。

最後に

とはいえ、まだまだより良い使い勝手を模索中です!
社内向けにいろいろやりたいことはあるので、どんどこ開発していけたらと思います。(‘_’)ノシ

MacでThunderbirdのデータ移行

shuhei
2016/03/22
閲覧所要時間:約3

thuderbird

先日、歴代の先人様方から受け継いだMacに別れを告げ、新しいMacを買ってもらいました(ワーイ
設定やデータは「TimeMachine」で楽々移行♪

のはずがなぜかバックアップデータを認識しやがりませんでした(白目)
まぁせっかくですし無駄なデータは断捨離の精神でバッサリ捨ててしまおうと思い手動で作業を行うことにしました。

今回はその中でメール(Thunderbird)の移行の手順をまとめてみました。

ライブラリへのアクセス

移行するために必要なデータは「/ユーザー/ユーザー名/ライブラリ/Thunerbird/Profiles/」に入っています。
ですが、「/ユーザー/ユーザー名/ライブラリ」はFinderで見ても、通常は非表示になっており、アクセスできません。
※「/ユーザー/」と同じ階層にある「/ライブラリ/」や、「/システム/ライブラリ/」とは別物ですので注意してください。

スクリーンショット 2016-03-22 17.47.38
表示させる簡単な方法として、Finderメニュー内の「移動」をクリックで開き、optionキーを押すとライブラリがメニュー内に追加されます。(画像内では出ていませんが、ホームの下部に出てきます)

移行用データの取得と復元

データの取得

「/ユーザー/ユーザー名/ライブラリ/Thunerbird/Profiles/」の中に「.default」という拡張子のついたディレクトリがあります。これが必要なデータになりますので丸ごとコピーして、移行先のMacに送りましょう。

データの復元

移行先のMacであらかじめThunderbirdはダウンロードしておき、起動させている場合は終了させてください。
移行先にも、移行用データと同じ階層のディレクトリに、同じく「.default」の拡張子が付いたディレクトリがあります。
これを削除して、コピーしておいた「.default」を代わりに設置します。


以上で移行作業は完了です。
Thunderbirdを起動すると受信BOXやフィルターなど、きちんと復元されているか確認してみてください。

おわりに

今回ご紹介したのは、移行先があたらしいMacの場合の設定方法です。
既にアカウントが登録されている環境で作業を行うと、既存のデータが消えてしまいますので注意してください。
また、パスワードの管理はキーチェーンで行われている可能性もありますので、キーチェーンをあらかじめ移行しておかないと上手くいかないかもしれません。(先に移行してたので検証ができませんでした・・・)
キーチェーンの移行もThunderbirdと似たような形で移行できますので、下記のURLを参考にしてみてください。
キーチェーンアクセス: キーチェーンを別の Mac にコピーする
https://support.apple.com/kb/PH20120?viewlocale=ja_JP&locale=ja_JP


普段はやることのない移行作業ですが、やってみるとそんなに難しい作業ではありません。
パソコンがぶっ壊れた!みたいな緊急時でもスマートに対応できるよう、覚えておいて損はないかもしれません。

最近何かしらと使う頻度が高くなったEvernote

araki
2016/02/12
閲覧所要時間:約3

Evernote
はいっ!
みなさんこんにちは!
最近特に何かあればEvernoteで情報を共有しようとする荒木です。

今週末も天気が悪いみたいですね。。。
やはり天気が悪いだけでどうしてもテンションが下がってしまうという方がほとんどだと思います(~_~;)

僕もその中の一人です。笑

僕の場合なぜ天気が悪いだけでテンションが下がってしまうかといいますと、、、
僕は晴れの日はできるだけ外に出て日光を浴びながらのんびりしたり、
写真を撮るのが趣味だからです!!!

みなさんは晴れの日にはどんな過ごし方をされていますか?

「こんな休日を過ごしていますっ!!!」
「晴れの日にはここの場所がオススメですよ!!」

などなどあればぜひ教えてください( ´ ▽ ` )ノ

っということで余談ばっかりしてしまいましたが、
今回は最近個人的に使う頻度が尋常じゃないぐらい増えた「Evernote」についてご紹介しようと思います!

Evernoteとは

すでにEvernoteについてご存じの方もいるかもしれませんが、
「名前だけは聞いたことあるけど、実際に使ったことがない」や
「そもそもEvernoteって何?」という方も少なからずいらっしゃるかと思いますので、
簡単にご紹介したいと思います。

Evernoteとは
ノートを取るように情報を蓄積するソフトウェアないしウェブサービスである。


Evernoteってどんな時に便利なの?

例えば外出中にパッと思いついた事をメモしたり、画像や音声、 仕事で使うPDFなど
とにかくさまざまなものを共有できるのです!
また外出先ではスマートフォン、家の中ではPC、ちょっと友達のスマートフォンやPCを借りた場合など
さまざまな端末で自分のアカウントへログインするだけですぐ共有ができちゃうんです!!!

もぉこれを聞いただけでめちゃくちゃ便利だなぁ〜って思った方はすぐにEvernoteを始めてみましょう*\(^o^)/*

例えば、、、
  • Web上の記事でこれは勉強になるなぁ〜って思ってあとでじっくり見たい
  • 1つの端末にしか入っていない資料や画像などのデータをすぐに共有したい
  • 会議や打ち合わせなどの議事録を共有しどこでも確認できるようにしたい
  • 名刺がたまって管理がしづらい
  • 旅行でこんなところ行きたくて、その事についての情報をまとめたい
  • 今までは自分の机やPC、他には冷蔵庫などへ付箋を貼って、不要になったらはがして捨てるといった作業をデジタル化したい
  • 思い出の写真をストックしたい
などなどいろいろな生活シーンの中でEvernoteを取り入れれば、
それだけで全ての情報をまとめる事ができるんです!!!!

またあの前ストックしたWebの記事はどこ?といったように
Evernoteへ書き込む情報が増えればそれだけ管理も大変になります。。

そういった時にはノートに残す際にタグを付ける機能がついておりますので、
それを活用すればすぐに探したい情報が探せるのです!!!!!

Evernoteは使い方次第では、
本当に便利なツールなので皆さんもぜひ日々の生活に取り入れてみてください( ´▽`)


最後に。。。

みなさんどうですか?
Evernoteを使った事がない方はほんの少しだけでも
使ってみたくなったのではないですかぁ〜ε-(´∀` )

僕もまだまだ使いこなせてはいないので、
たくさんの事はブログでは書けませんが、
これからもさまざまな場面で取り入れてみたいと思います!

▼Evernoteのダウンロードはこちらから
Evernote公式ホームページ
https://evernote.com/intl/jp/


▼基本的な使い方についてはこちらをご参照ください♪
Evernote 使い方ガイド
https://evernote.com/intl/jp/evernote/guide/mac/

手軽に使える便利な firefox のアドオン!

fujie
2014/08/04
閲覧所要時間:約5

はじめまして。こんにちは、藤江です。
4月末にフロンティアビジョンへ入社して、3ヵ月と1週間程になるマークアップエンジニアです。
熊本電子ビジネス専門学校を卒業して佐賀のWeb制作会社で3年3ヶ月従事しておりましたが、
ご縁があって熊本に戻ってきました!
これからよろしくお願い致します。

さて今日はブログ更新担当日ということで、
ご存じ、モダンなブラウザ『Firefox』のマークアップ実務で使えるオススメアドオンのご紹介を致します。

多機能で軽量なカラー情報を取得出来る『ColorZilla』

ColorZilla

ColorZilla :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/colorzilla/


サイト上の色をワンクリックで調べてくれたり、その際にカラーコードをコピーしてくれたり、ブラウザ上でカラーピッカーを表示して色を変更したりなど、とっても便利なアドオンです。
動作も軽量で、画像編集ソフトなど起動しなくてもカラーピッカーを使うことが出来て捗りますよ!

スタイルシートだけ更新出来る『CSS Reloader』

CSS-Reloader

CSS Reloader :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/css-reloader/


ページは更新したくないが、CSSだけ反映させたい場合などに有効なアドオンです。
お問い合わせフォームなどを構築する際に活用します!

モバイルシミュレーター『FireMobileSimulator』

FireMobileSimulator

FireMobileSimulator :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/


最近はあまり出番がありませんが、モバイルサイトを気軽に閲覧することが出来るアドオンです。
大まかな制作・確認はシミュレーターで、最終確認は実機で、の様なときには重宝しますね!

サーバーの場所が一目でわかる『Flagfox』

Flagfox

Flagfox :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/flagfox/


ロケーションバーに国旗が追加されます。
そこから右クリックのメニューからwhois情報やIPアドレスのコピーなどが簡単に出来るようになります。

HTML構文が正しいか逐一わかる『Html Validator』

Html-Validator

Html Validator :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/html-validator/


ページを表示するたびにチェックしてくれます。
正しければ緑マークにチェックが、
エラーがあれば赤マークに×が、
警告があれば三角アイコンにびっくりマークが表示されます。
また、ページのソースを表示すると、エラーの内容や問題がある場所を示してくれます。

スクリーンショットとものさし代わりにも?『Lightshot』

Lightshot

Lightshot (screenshot tool) :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/lightshot/


該当箇所のスクリーンショットだけ撮って文字などを入れたり出来るアドオンですが、
ピクセル数も表示出来るので、サイト上ものさし代わりとしても利用可能!

リンクチェックを可視化『LinkChecker』

LinkChecker

LinkChecker :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/linkchecker/


リンクを一つひとつ調べるのが大変なときはこのアドオン。
リンクが正しい場合は場合は緑色に、
リンク切れの場合はピンク色に、
アクセスに制限がある場合(Basic認証等)などは黄色になります。

今開いているページを他のブラウザで開く『Open With』

Open-With

Open With :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/open-with/


Firefoxで現在開いているページを、ワンクリックで他のブラウザで開くことが出来ます。
URLをコピーペーストする作業からおさらばです!

ページのソースを比較する『PageDiff』

PageDiff

PageDiff :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/pagediff/


Web上で見ることが出来るページのソースコードを比較することが出来ます。
本番環境と開発環境の差異をさくっと知りたい場合によく使います。

CSSやJavaScript等をお気軽ON・OFF『QuickJava』

QuickJava

QuickJava :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/quickjava/


CSSやJavaScript等をワンクリックでお気軽にON・OFF出来ます。
最近ではトップページにjQueryを使った画像のスライダーが良くありますが、
JavaScriptがOFFの場合は当然動作しません。
そんな時の代替えコンテンツの設置もこのアドオンのおかげで、楽に確認出来ます。

ユーザー独自のスタイルシート『Stylish』

Stylish

Stylish :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/stylish/


サイト上にユーザー独自のスタイルシートを反映することが出来ます。
私は、画像が無い場合良く目立つように、赤背景を出すような使い方をしています。

最後に

いかがでしたでしょうか。
記事を書く前は5・6個ぐらいかな、と思っていましたが終わってみれば11個もありました。
ご紹介したアドオン達に毎日助けられて仕事に励んでいます。
制尺者の方々に感謝!

ありがとうございました。

お次は 手軽に使える便利なブックマークレット! です!

フロンティアビジョンのFacebook

デンタルWEB

求人情報

スタッフ紹介