Web制作が捗るChrome拡張機能12選 – おすすめの拡張機能を集めてみた | Pulp Note
Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち
Webサイトの画像を編集してダウンロードできるChrome拡張機能「Download & Edit All Images」
Webサイトの画像を編集してダウンロードできるChrome拡張機能「Download & Edit All Images」 ◆ Download & Edit All Images https://download-and-edit-all-images.pop9.io/ 紹介 「Download & Edit All Images」は、開いたWebサイトの画像を編集したりダウンロードできるChrome拡張機能です。 Webサイトを開いて拡張ボタンをクリックすると、サイト上にある全ての画像がリストアップされます。 あとは編集したい画像を選ぶと このような画像編集画面が開きます。 画像を切り取ったり エフェクトをかけることも可能。 DOWNLOADボタンから編集した画像をダウンロードすることもできます。 簡単な修正のためだけにphotoshopを起動する必要がなくなるので、非常に重宝しそうな
ブラウザでマイク入力から書き起こしを行うツールを作った - mizchi's blog
Chrome でマイクからの音声を録音して、その音声認識で書き起こしも同時に行うツールを作った。 recording-studio.netlify.com で遊べる。 Chrome に搭載されてる Web Standard Proposal? の SpeechRecognition API を使っている。 developer.mozilla.org Chrome のみだが、 PC Chrome だけではなく Android Chrome でも動作確認済み。 ブラウザをオフラインにすると動作しないので、このAPI の 中身はたぶん Google Speech to Text API だと思われる。 出力 録音したものは webm ファイルとしてダウンロードできる。認識されたテキストも、タイムスタンプ付きのプレーンテキストなので、適当にもっていって、ぐらいの気持ち。 クラウドで音声認識してるこ
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
色盲・色弱の人にWebページがどのように見えているかシミュレートできるChromeの機能拡張 -Colorblindly | コリス
色盲や色弱の人がどのように見えているかシミュレートできるオンラインサービスはいつかありますが、テストサーバーやローカルで利用できないのが残念なところです。 色盲・色弱の人の見え方をシミュレートできるChromeの機能拡張を紹介します。
安全性を示すHTTPSのラベルとアイコンがGoogle Chrome 69から削除、一方で非HTTPSページでは赤色反転で危険性を強調
[レベル: 中級] セキュリティに関する Chrome ブラウザの UI 変更を Google はアナウンスしました。 HTTPS および HTTP ページのインジケータが将来のバージョンの Chrome で変わります。 鍵アイコンと「保護された通信」ラベルの削除 HTTPS で配信されるページに対して表示されるラベルとアイコンが削除されます。 現在は、HTTPS ページにアクセスしていると鍵アイコン🔒と「保護された通信」ラベルがアドレスバーの先頭に表示されます。 2018年9月にリリースされる Chrome 69 ではラベル表示がなくなり、鍵アイコンだけになります。 「https://」のスキームもなくなります。 最終的には鍵アイコンも表示しなくなる予定とのことです。 HTTPS 通信であることがわからなくなりますが、セキュリティが守られていることがウェブでは当たり前だとユーザーは想定
日本語の読み上げをするChrome拡張機能を作ってみた - Qiita
. 同内容で画面キャプチャ付きの記事はこちらにあります。 . 長ったらしい業務メールや、読んでおきたいけど分量に及び腰になっちゃうBlog記事を、読み上げてもらって文章を眺めながら聞くというやり方で、集中力が低下している時にもとりあえず処理できるようにして生産性を上げたい（上がる？）。 ちょっとググるとなかなか良いサービスがある。 http://imtranslator.net/translate-and-speak/speak/japanese/ 読み上げも我慢して使えるレベル。一昔前と比べるとかなり良くなった 読み上げのスピードを選べるところがGood ちんたら読まれたらイラつくからね フォームにテキストをコピーして[Speak Japanese]をクリックすると、音声ファイルが生成されて画面上で再生可能となる ちょっと面倒臭い （無料では）文字数制限がある。自動的に可能な範囲で良い上
title,description,keyword等を確認するChrome拡張機能！
こんにちは、佐々木です！ title,description,keyword等を確認する拡張機能が前々から欲しいと思っていたので、少し前に作成してみました！ 試しに非公開で社内用に使っていたのですが、今回Chrome拡張機能として一般公開しましたので、ご紹介させて頂ければと思います。 tdk (Chrome拡張) ダウンロードは上記から。 使い方は簡単！※ダウンロード前に開いているページで利用する場合には更新を行ってから利用してください。 Macの場合：control+shift+command+tで利用できます。 Winの場合：control+shift+alt+tで利用できます。 なんでこんなに指がつりそうなレイアウトかというと、元々ブラウザで持っている機能と被ったりという声が社内からあったので、絶対になさそうなショートカットキーに変更しました・・・。 （社内ではマウス等にショートカッ
なにこれ、スゴすぎる！ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張 -Wildfire
ページをどのくらいスクロールし、どこをクリックするのか、マウスやキーボードをどのように操作し、コンテンツを見るのか、ブラウザで行った操作を記録し、さらに完全再生もできるChromeの機能拡張を紹介します。 ユーザビリティテストに利用するだけでなく、操作を編集・再生することもできるので、プレゼンなどでページの操作を再現することも可能です。 Wildfire Wildfireの特徴 Wildfireのインストール Wildfireの使い方 Wildfireの特徴 Wildfireはユーザーがページをどのように操作するのか、どのように見るのか、手軽にユーザビリティテストができるChromeの機能拡張です。また、アクションをシミュレーションし、新しいデザインの確認にも利用できます。 ブラウザで表示したページのアクションを記録します。 記録したアクションは、すべて再生可能。 アクションを編集し、シミ
最高にわかるChromeデベロッパーツールの使い方(チートシート付き)
作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク
素晴らしい画面の並べ替えとスクリーンショット - Chrome ウェブストア
リモートワークに最適なスクリーンレコーダーとスクリーンキャプチャおよび注釈ツール。 技術的な問題の報告、製品のデモや、ハウツーチュートリアルの作成などで画面を共有したいことはありませんか？ Awesome Screen Recorder＆Screenshotを使うべき🔟の理由は次のとおりです 1️⃣ 10年以上安定したサービスを提供 2️⃣ さまざまなプラットフォームで300万人以上のユーザーに愛されています 👍 3️⃣ ローカルスクリーンレコーダーとクラウドスクリーンレコーダー2in 1 4️⃣ スクリーンショット/スクリーンキャプチャ＆スクリーンレコーダー2 in 1 5️⃣ 素早いカスタマーサポート 6️⃣ 仕事や教育のシナリオ向けに特別に設計された強力な機能 7️⃣ 広告なしであなたのプライバシーを尊重します 8️⃣ 簡単に使用可能 9️⃣ スクリーンショットと画面記録を即座に
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
エンジニア必見！作業効率が格段に上がる無料のChrome拡張機能8選
GoogleChrome拡張機能は、ブラウザ上で手軽に追加できる便利なツールの一つとして多種多様な機能が存在し、あまりの多さに迷ってしまうほどです。 弊社エンジニアの間でもChrome拡張機能は活用されていますので、その中から実際に使っているオススメ拡張機能を厳選してご紹介します。 中には、エンジニアの方に限らず、Webサイトに携わる方であればインストールして欲しい拡張機能もありますので、ぜひ参考にしてみてください。 ※執筆時(2015年9月24日)時点では、どれも無料で使用することができます。 エンジニアにオススメのChrome拡張機能まとめ 1.JSONView https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONデータを自動で整形してくれるChrome拡張機能で
ビジネスに効く！Chromeアプリと拡張機能で業務効率を今すぐ爆速に変える方法 - リクナビNEXTジャーナル
ドキュメント、スプレッドシート、スライドで Officeファイルを編集 [Chromeアプリ] https://goo.gl/sk2CaS 複数ユーザーによって同時にファイルの編集が可能で、その履歴を全て保存することができるGoogleドライブ。便利そうだなーと思いながらも、「まだ導入できないんだよねー」という方も多いのでは？ というわけで、まずはこれを気楽に導入してみることが可能な『ドキュメント、スプレッドシート、スライドで Officeファイルを編集』というそのまんま過ぎる名前のChrome拡張機能から。 Chromeに追加するだけで、既存のWord、Excel、PowerPoint などのOfficeファイルを Google ドキュメント、スプレッドシート、スライドで表示・編集することが可能になります。 編集後は元のフォーマットで保存もできるし、Googleドライブのファイルとしても
Chromeデベロッパーツール（検証モード）の基本的な使い方を解説
Google Chromeのデベロッパーツール（別名：検証モード）は、Web開発者にとって非常に便利なツールです。 特に便利なのが、スマートフォン向けの開発を行っている時の表示エミュレーション機能で、PC画面にも関わらず擬似的にスマホ画面にして表示してくれます。 Google Chromeデベロッパーツールを知っておくことで、HTML/CSSの編集やデバッグ、スマートフォンでの表示チェックが容易にできるようになります。 今回は、Google Chromeデベロッパーツールの基本的な機能と使い方をまとめました。 Chromeデベロッパーツールの使い方 1.起動方法 デベロッパーツールは、Google Chromeブラウザを使っている方であれば、誰でも無料で利用することができます。 利用方法は、調べたいページを右クリックし、「検証」の項目がありますので、それをクリックします。 ショートカットキ
【ライター必見】記事を書くときに便利なクロームの拡張機能15選
業務を効率的に遂行することは、ビジネスにおける基本と言えます。 それは、記事を執筆するライターやブロガーであっても同じことです。 今回はライターやブロガーにオススメしたいChromeの拡張機能をまとめました。特に、記事の執筆における情報収集など、時間が必要とする行程を少しでも効率よく進めたい方にオススメします。 便利なクロームの拡張機能15選 1.Buffer ダウンロードURL TwitterやFacebookなどのSNSへの投稿が同時予約できる機能です。 BufferのChrome拡張機能をインストール後、SNSの投稿ページを見ると、新しいBufferボタンが出てきます。これのボタンを使って投稿すると、時間指定ができるというシステムです。 無料で利用できるのは10回までで、以降は有料となります。 参考： 連携できるSNSはTwitterやFacebookを含めて6種類！自動投稿ツール「
仕事の業務効率がアップ！オススメのChrome拡張機能20選
ビジネスにおいて、情報収集は欠かすことができません。 そのためには、日々、少しでも多くの情報に触れ、効率よく短時間で情報を得ることが重要になります。 今回は、情報収集をする際に有効活用できる、Google Chromeの拡張機能20選をご紹介します。 どの拡張機能も、インストールするだけで直感的に使用できる便利な機能ばかりなので、気に入ったものがあれば活用してみてください。 オススメのChrome拡張機能20選 1.情報収集編 ●Black Menu https://chrome.google.com/webstore/detail/black-menu-for-google/eignhdfgaldabilaaegmdfbajngjmoke?hl=ja Googleの各種サービスにすぐにアクセスできるChrome拡張機能です。 ツールバーに配置されているボタンをクリックするだけでメニューが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
危険なユーザー名・パスワードを警告してくれるChrome拡張機能「Password Checkup」、Googleが無償公開 
【2019年版】これは便利！おすすめのChrome拡張機能32選
「Google Chrome」に保存されているパスワードを取り出したい！ 時に便利な試験的機能／保存済みログイン情報をCSV形式でエクスポート。インポート機能も利用できる【やじうまの杜】
