Chromeの画面を録画する拡張機能【Awesome Screenshot】
Chromeの画面を録画する方法について解説します 今回紹介する『Awesome Screenshot』はChromeの拡張機能として利用が出来る、WEBブラウザのプラグインです。このAwesome Screenshotを利用すれば、WEBブラウザの画面全体・タブといった選択肢から、好きな方法で動画の録画が可能となります。 Awesome Screenshotの導入方法 Awesome Screenshotを導入する方法について解説を行います。 ※Awesome Screenshotを利用するにはWEBブラウザ『Chrome』をあらかじめインストールしておく事が前提となります。 Chromeに拡張機能をインストールする方法 Chromeに拡張機能を追加する方法はとても簡単です。以下のリンクからChromeウェブストアの『Awesome Screenshot』のページに移動して、『Chrom
Chrome で記事を読む事に集中する為の拡張機能 Mercury Reader
ブログやニュースサイトといった Web サイトで記事を読む際、記事本文以外にも関連リンクやメニュー、広告といった要素なども一緒に表示されてしまいます。リンクやメニューは他の関連情報を表示する為便利な事もありますし、広告は Web サイトを運営するのに重要な項目の1つです。 しかし、場合によっては記事を読むことに集中したい時もあるでしょう。 そういった場合は Mercury Reader のような拡張機能を利用してみると良いでしょう。 この拡張機能を利用すると Web ページ上の不要な要素を排除し、記事本文を読む事に集中する事ができます。 例えばこのブログ上で記事を表示してみると、以下のように記事本文以外にも様々な要素が表示されています。 この状態でメニューバーより Mercury Reader のアイコンをクリックすると以下のように余計なものが排除され記事本文が読みやすく表示されるようにな
フォームの入力内容を保存するChrome拡張機能【Autofill】
Chrome拡張機能『Autofill』の導入方法 今回紹介する『Autofill』は、Chromeの拡張機能として利用する事ができる、プラグイン的な位置づけの作業系ツールです。 『Autofill』をChromeに追加する方法 Chrome拡張機能の追加方法は簡単で、以下のリンクから『Autofill』のページへ移動し、『Chromeに追加』ボタンを押せば完了します。（※逆に削除をしたい場合は、追加後に表示される『Chromeから削除します』ボタンを押せばOKです） ▼公式サイト Chromeウェブストア - Autofill Chrome拡張機能『Autofill』の使い方 基本的にはWEBフォームの内容を『保存する』事と『読み込む』事がこのツールの主な使用方法になります。それぞれ順番に解説してゆきますね。 1.フォームの内容を保存する Autofillを使ってフォームの内容を保存する
Vimiumを使ってブラウザ操作を快適にする｜TechRacho by BPS株式会社
はじめに ブラウザ操作をキー入力だけで済ませたいと思ったことはありませんか？ そんなときに便利なのが、Chrome拡張のVimiumです。 VimiumはVimライクなキーバインディングでChromeを操作できます。 簡単なブラウジング程度なら、トラックパッドやマウスを使わずにキーだけで操作できるのが魅力です。 また個人的には、手軽に導入できて、それなりにブラウジングが快適になるのも魅力の一つだと思っています。 数多くのキーバインドを記憶したり、面倒くさい設定をしたりしなくても、楽にVimiumの恩恵にあずかることができます。 この記事は「あまりカスタマイズはしたくないけどトラックパッドやマウスも極力使いたくない」という私のような方に向けて、Vimiumをゆるく使ってブラウジングを快適にする方法をご紹介します。 注: 本記事はVimiumの安全性・信頼性は保証していません。インストールはご
Chromeのタブを保存する拡張機能が便利すぎてクラッシュすら怖くない「Session Buddy」 | Ledge.ai
普段ブラウザはChromeを使って、色んなサイトを比較したり、同時進行するときなど、タブをいくつも開いています。タブは便利ですが、間違ってChromeを終了させてしまったり、クラッシュしたときに誰にも怒りをぶつけられずファビョることになります。 そんな不安を解消、解決してくれる拡張機能に出会えましたので、今回はそちらをご紹介したいと思います。 参考：Chromeブラウザを拡張機能するおすすめExtensions8選「Streamus」「AutoPatchWork」など 拡張機能「Session Buddy」でタブ管理 まずはChromeの拡張機能「Session Buddy」をインストールします。 インストールは一瞬で終わり、ツールバーにアイコンが表示されます。 このアイコンをクリックすると、新しいタブが開くと同時に、管理画面が表示されます。 開いていたタブの履歴は自動保存されている 管理
【Chromeメモリ解放】やり方 【公式の自動解放と、拡張機能の２種類の方法がある】JavaScript/Timeline便利 - 新作ソシャゲおすすめランキング｜事前登録リリース日まとめ一覧｜新作アプリ最新スマホゲーム
更新日時：2022年4月4日 動作も早い、セキュリティ面も優秀、人気も一番。 でもメモリ消費量が多い。 そんなGoogle Chromeの、メモリ解放の方法について記載しています。 メモリ解放が、できないという方や、ボタン表示されないという方にも、分かりやすく説明します。 メモリー食い過ぎでも有名なChrome。技術が進歩しハードウェアの物理メモリが増えてきているので、それらを活用したい気持ちも分かりますが。。。 Google Chrome（Webブラウザ）のメモリーを解放するには、大きく分けて２つの方法があります。 まず１つ目は、Google Chromeが、公式に実装している機能を使用して、Chromeのメモリーを解放する方法です。 私はGoogle Chromeを８年以上使用しておりますが、こちらの、Google Chrome公式による機能（試運転中ですが）を使う方法を、おすすめ致し
トラッキングを防止できるChromeの拡張機能「Ghostery」 | UX MILK
普段インターネットを利用していると、様々なWebサイトを閲覧すると思います。企業などのWebサイトでは、ほとんどが、閲覧しているユーザーの行動を監視（トラッキング）して、その情報を販売したり提供したりしています。 よく、自分が検索したものや購入を検討して閲覧していた商品などが、関係ないページを見ているのに広告に表示されたりするのを見かけると思いますが、その正体は先ほど書いたトラッキングによるものだったのです。 このトラッキングを検知して、ブロックしたりすることができるChromeの拡張機能「Ghostery」を今回はご紹介します。 ChromeウェブストアでGhosteryをダウンロードし、拡張機能に追加します。Ghosteryにアクセスしたら、＋CHROMEをクリックします。 確認画面が出るので、内容を確認して大丈夫だったら拡張機能を追加をクリックします。 アドレスバーの右側にアイコンが
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
Webサイトで使われている技術を解析するツール「Wappalyzer」 - JavaScript勉強会
Webサイトをどうやって作っているか？を調べるツールがありました。 「Wappalyzer」というツールです。 www.wappalyzer.com Wappalyzerは、ChromeやFirefoxのプラグインとして提供されており、インストールすると使えます。 ブラウザーでWebサイトを閲覧したとき、Wappalyzerのアイコンをクリックすると、そのWebサイトで使われているソフトやサービスなどが表示されます。 （例）はてなブックマークを見たときは、以下のような内容が表示されました。 Webサーバーソフトは「Nginx」、キャッシュソフトには「Varnish」を使っていることなどが分かります。 これでいろんなWebサービスを調査してみれば、Webサイト制作の参考になりそうですね！ Wappalyzerの参考情報 forest.watch.impress.co.jp www.leon-
Redux Devtools Extensionを使った時のこの感動を伝えたい - Qiita
Reduxというものを知って、さらにこのツールに出会った時に感動したので、ぜひ伝えたいと思います。 Reduxについて 色々解説してくれてますので、それを参考にしてください。 https://qiita.com/kiita312/items/49a1f03445b19cf407b7 ようはUIの状態を管理するフレームワークだそうです。 Redux Devtools Extensionについて Reduxアプリの開発ツールの一つで、 ブラウザの拡張機能からReduxの状態管理を可視化してくれます。 chromeやfirefoxで使えるようです。 デモ 何がいいのか？ 1. デバッグが便利 どのアクションでどの状態になり、どんな値を持つのか一発でわかります。 状態遷移後の値の差分もみれたりします。 2. テストでも活躍するかも テスト時にバグを発見した場合、そのバグを開発者側で再現したい時があ
Chrome を全てをキーボードで操作する拡張機能 Vimium | Lonely Mobiler
ブラウザを操作する際、多くの人はマウスやトラックポイント、トラックパッドを使っていると思う。カーソルを動かすだけの簡単な動作でブラウザを操作する事ができる。 しかしマウスカーソルを動かすという行為はムダが大きい。いやそもそもマウスを持つためにキーボードから手を離す行為がムダだ、と考える人までいる。しかし全ての操作をキーボードで行うには Chrome 標準のキーバインドでは貧弱だ。 Google Chrome の全ての操作をキーボードで操りたい場合には Vimium という拡張機能を利用すると良いだろう。 これは Vim というカルト的な人気を誇る古来より伝わるテキストエディタと同じように Google Chrome を操作する為の拡張機能だ。これをマスターすればマウスはおろかカーソルキーすら不要になり、手をホームポジションに置いたまま Chrome を操作できるようになるだろう。
Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール
DHC REST Client - RESTのAPIを実行するならこのツール - 覚えたら書く
追記： DHC REST Clientは名称がRestlet Clientに変わったようです。（以下、DHC REST Clientと記載している部分は読み替えてください） 昨今、アプリ間の連携のためにRESTでのAPIを公開することも多いと思います。 そのようなREST（やWebの）APIを開発する場合に、動作確認のためには、そのRESTのAPIを実行するためのクライアントが必要になります。 もちろん自前で作ることもできますが正直大変です。 こういう場合には、Chromeのアドオンとして提供されているDHCがとても便利です。 DHC REST Client（DHC）は、その名の通りRESTを実行するためのクライアントのツールです。 インストールから起動まで 導入手順は一般的なChromeのアドオンと同じです 先に示したDHCのページにアクセスして「CHROMEに追加」をクリックします 以
Chromeのエンコード機能が消えた！が拡張機能が公開されていた | ビギブ
Chromeのエンコード機能が消えた！が拡張機能が公開されていた※ 本ページはプロモーション・広告が含まれています。 google 昨年12月にChromeのバージョンアップの時に、エンコード機能がなくなりました。 ほとんどのサイトページがUTFで作成されるようになった現在、エンコード機能を使用する人は少なくなってきたと思いますが、旧いサイトの中には、shift-jisやeucにしないと文字化けするページが存在します。 また、Web制作の仕事を行っているは、旧サイトのメンテナンスも行う場合があります。 Chromeのエンコードが消えたとして、FIREFOXを使えばいいのですが、 Chromeのデベロッパーモードのついでに使えれば、効率が良いのです。 Chromeエンコード拡張機能が公開されていた情報を集めようかと思い、フォーラムを見ていましたら、拡張機能に「テキストエンコーディング」が追加
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
Webデザイナー必見！Webデザインに便利なGoogle Chromeの拡張機能4選まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
それぞれのボタンをクリックすると別タブが開き、編集画面になります。 フロッピーディスクのアイコンをクリックすると、PNGまたはJPGで画像が保存されます。ちなみにフロッピーディスクって現在使われているんでしょうか^^;。 （画像の保存形式は「ツールバーのアイコンを右クリック→オプション」から変更できます） その右のボタンではそれぞれ、「PDFで保存」「クリップボードにコピー」「サムネイル画像として保存」「印刷」が可能です。 「PDFで保存」「クリップボードにコピー」は地味に使えるので便利ですね。 下のボタンからは、Gmail・Dropbox・Evernoteなどに共有ができます。 また、キャプチャして保存する前に、左上のツールで直接画像を編集することができます。 気になったサイトを画像保存してアーカイブとして残しておきたいという時に重宝しますね。 DLリンク：Openscreenshot
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NICOA | Techとモノの情報ブログ
Session Buddy
Chromeでページを自動更新（再読込）する方法を解説！自動リロード/拡張機能 | Aprico
指定したWebページから、PhotoshopやSketchのカラーパレットを生成できるChromeの機能拡張 -Site Palette
