強みを持つトライコーン技術者によるブログです。Labsでは初めましての登場です。メール制作系の案件の納品チェック(主に、WEBページやフォーム、HTMLメールのテスト)をやっておりました。今回は個人的に超便利だったブラウザの拡張機能や、ツールについてご紹介しようと思います!※各コメントは個人の感想です。ChromeWEBページがPCとスマホとガラケーでHTMLソースが全部違う。スマホ&ガラケーからはソースが確認できない。いう時に、PC上からこの拡張機能を起動してソースを確認していました。User-Agentの設定はググるとインポートファイルが出てくるのでそれを使うと便利です。Generator開いてるページのURLをQRコード化してくれます。スマホでこのページ確認したいなって時に、スマホにQRコードリーダー機能やアプリがあれば、読み取って一発でページを開けます。URLぽちぽち手打ちしなくても良いのでとても便利です。・Sizzy画面幅で文字や画像の大きさが変わるレスポンシブ対応のWEBページやフォームの確認に使っていました。メジャーな端末の大きさで表示確認ができるので便利です。表示確認は実機でのチェックがメインでしたが、レスポンシブが効く幅が端末ごとでミスってないかなどを確認するのに使ってました。制作中などでざっくり表示確認したいなって時にはちょうど良いと思います。・テキストエンコーディング右クリックのメニューから使える便利なエンコーダー。ソース開いてコピーしてテキストエディタ開いてペーストして変換して・・の手間を減らせます。Dropper色指定便利ツール。企業のブランドサイトとかは文字色とか背景色とかはHTML、CSSのレギュレーション指定があること多いんですが、ちゃんと指定通りのコードが入ってるか、カラーピッカーで簡単に確認できちゃいます。(色もコードも表示してくれる)それと「なんか同じ色指定のはずなのに上下のボタンの色が違うような気がする...」という時の確認に使ったり「#eb6b8dってRGBなんだっけ、どんな色だっけ」という時に使ってました。開いてるページの色指定を小窓で一覧化してくれます。こちらも文字色や背景色のチェックに使えます。Linksページの中にあるURLのリンク切れを探してくれます。指定した場所にURLがあるかどうかのチェックまではしてくれません。いつも自分がURLをチェックする時は社内用のツールをメインで使っていました。Ruler幅や高さなどをpixel単位で測れます。ページ幅の指定やロゴの大きさの指定があるときなどに使っていました。DeveloperWEB開発の方はブラウザの開発者ツール(F12を押すと出てくるやつ)を使ってる方が多いと思いますが、こちらはALT属性値を視覚的に表示できたり、フォームの入力欄をリロードぜずに全消ししたり、チェックボックスのON、OFFを一括で操作できたりと何かと優れものです。WEBサイトだけでなく、Gmailなどのメールアプリでも機能してくれるので、ALT属性値の確認などでとても役に立ちました。Explorer・FireShotIEでもスクリーンショット撮れちゃう素敵拡張機能です。IEで拡張機能を使う方法はググると出てくるかと思います。ツールバーにアイコンが表示されなくて詰まったことがあります。こちらのページを参照したら解決しました。ツール系WEBサイト以下は拡張機能ではないですが、便利だったWEBサイトについて記載しています。・Javascriptのescape関数エンコード、デコードツール・URLエンコード・デコードフォーム・レスポンシブ表示の確認チートシートときどき使ってたチートシートです。スタイルシートリファレンスは特に使っていました!ご参考までに。超便利だった拡張機能とかツールのご紹介でした。Ieiri採用情報トライコーンでは一緒に働く仲間を募集中です!興味を持たれた方はぜひご応募ください。v0.3.2最近ミニストップに浮気しつつあるwata19です。等幅フォントで表示してみた。製品候補版こんにちは。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。タイトルが長くてすいません。...キーボード&マウスの支給制度ができましたこんにちは。先々月以来ですが開発グループのozakiです。...IT未経験からWebエンジニアになるまでとその後の学習について開発グループのozakiです。入社してもうすぐ1年になります。Tipsこんにちは、uzukiです。