無料でページを保存＆完全オフラインで動作＆ユーザー登録不要のChrome・Firefox・Edge拡張「TagSpaces Web Clipper」
ファイルにタグをつけて管理できるオープンソースのファイル管理ソフトが「TagSpaces」です。このTagSpacesのブラウザ拡張機能「TagSpaces Web Clipper」を使えば、ウェブページをタグ付けでローカルに保存でき、TagSpacesと併用することで保存したページの内容を強調表示したり、テキストを追加したりと、簡単に編集することが可能になります。 TagSpaces Web Clipper - Chrome ウェブストア https://chrome.google.com/webstore/detail/tagspaces-web-clipper/ldalmgifdlgpiiadeccbcjojljeanhjk TagSpaces Web Clipper – Get this Extension for ???? Firefox (en-US) https://addo
閲覧中のウェブページ全体を単一のhtmlファイルとしてダウンロード＆注釈付けも可能な「SingleFile」レビュー
ウェブブラウザで閲覧中のウェブサイトをページ中の画像も含めて保存したいと思ったときに、HTMLファイルと画像ファイル・スタイルシートが別フォルダになることなく、単一のHTMLファイルとして保存できるブラウザ拡張機能が「SingleFile」です。 SingleFile – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/single-file/ SingleFile - Chrome ウェブストア https://chrome.google.com/webstore/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle SingleFile - Microsoft Edge Addons https://microsoftedge.microsoft.com
JSで想定外に画面遷移するとき、消えてしまうログを残してデバッグする（ひとり DevTools Advent Calendar 2020 – 20日目） | Ginpen.com
20 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ログ類は画面や DevTools を再読み込みすると全部消えちゃいます。普通はそれでいいけど、画面移動直前の様子を知りたい場合には不便です。 そんなときは Preserve log をオンしておくと記録が残るようになります。Console パネルと Network パネルで利用できます。 コンソールのログを残す Console パネルを開く Console パネル右上のコンソールの設定ボタンを押し、設定欄を開く “Preserve log” のチェックを入れる これで、例えば beforeunload イベントとか pagehide イベントとか、そういうイベントでの処理のログも残るようになります。 const eventLogger = (event) => console.lo
CSSじゃなくて実際にレンダリングで使われるフォントの調べ方（ひとり DevTools Advent Calendar 2020 – 11日目） | Ginpen.com
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ？ 指定したやつちゃんと利いてる？ フォールバックになってない？ みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。
無料でウェブページの文章を翻訳してくれる＆発音も教えてくれるアドオン「Mate Translate」を使ってみた
インターネットで情報収集をしていると、外国語で記されたウェブページに行き当たってしまい、文章が読めずに困ってしまうこともあります。ブラウザ向けの拡張機能である「Mate Translate」は、FirefoxやChromeで開いた外国語のウェブページを無料で翻訳できる上、外国語の発音を教えてくれたり、日本語の文章を外国語に翻訳してくれたりするとのことで、どのような拡張機能になっているのか実際に使ってみました。 Mate Translate - translator, dictionary - Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/instant-translate/ 今回は、ブラウザにデフォルトの翻訳機能が搭載されていないFirefoxでMate Translateを使ってみることにします。Fi
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ボタンを押すとタイトル・description・OGPが確認できるChromeの拡張機能作ったよ！【LIGアドベントカレンダー16日目】 こんにちは、ハルです。推してるアイドルが新曲を出してイベントをするたびにCDを買うので、どんどんCDが増えています。 Google Chromeの拡張機能を作ったので、「こんなの作ってみたよ！ よかったら使ってね！」という記事を書きたいと思います！ アドベントカレンダーでの記事ということもあり、「ワイからの皆さんへのプレゼントやでっ！」というよくわからない意気込みで作りました（ただ拡張機能を何か作りたかっただけ）。 LIGアドベントカレンダー2019は こちら！ どんなものを作ったか TDK Meta Checker TDK Meta Checkerという拡張機能をつくりました！ 閲覧中のheadタグ内のtitleタグやmetaタグのdescriptio
QR-Code - 今表示しているURLのQRコードを表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webブラウジングしていて、そのURLをスマートフォンやタブレットで表示したいと思うことが良くあります。そんな時に便利なのがQRコードで、カメラを使ってURLが送信できます。かつてはGoogleチャートが使えたのですが、QRコードは非推奨になってしまっています。 そこで使ってみたいのがQR-Codeです。Google Chrome機能拡張として今表示しているタブのURLをQRコードで表示してくれます。 QR-Codeの使い方 実行したところ。巨大なQRコードが表示されます。 QR-Codeは非常に大きなQRコードが表示されます。これならば少し離れた人でもコードが読み取れるでしょう。便利なのは外部のWeb APIなどを実行している訳ではないのでサービスがオフライン時でも使えます。 Q
jsoff - JavaScriptオンオフを切り替えるGoogle Chrome機能拡張
JavaScriptが高機能化し、もはやJavaScriptを使っていないWebサイトが見当たらないくらいです。しかし、だからこそJavaScriptをオフにした状態でどう表示されるのか気になることがあります。 Google ChromeでJavaScriptをオフにするのは開発者ツールを使わないといけないですが、jsoffを使えば簡単に設定を切り替えられます。 jsoffの使い方 インストールするとツールバーにアイコンが表示されるようになります。 オンオフすると、リロードなしに反映されます。 リロードせずにJavaScriptのオンオフを切り替えられるのは意外と便利です。Webアプリケーションとして開発している場合は気になりませんが、メディアサイトなどの場合はJavaScriptが無効になった状態でも閲覧できるかどうかは大事でしょう。そんな時に確認に便利です。 jsoffはGoogle
任意のWebページの表示や内容を1つのファイルで魚拓ライクに保存するOSSのブラウザ拡張・「SingleFileZ」
SingleFileZは任意のWebページの表示やコンテンツを1つのファイルだけで保存する魚拓ライクなChromeエクステンションです。当ブログでもテストしましたが日本語でも問題なく、完璧に保存できました。 OSSとしてもソースコードが公開されています。先発のSingleFileのフォークだそうで改良されて改めてOSSとして公開されています。 永久保存の保障が無いWebサイトを保存したい事もあると思います。Webサービスの魚拓やアーカイブサービスが良く使われますが、やはり保証はないのでこのようにダウンロードできるツールの選択肢もあると良いかもしれませんね。 注意点 ダウンロードしたファイルの扱いに関する注意点はここでは割愛しますが、本エクステンションを使う際の注意点が一つだけ。 上図のように、セッティング項目の「ファイルの URL へのアクセスを許可する」をONにしておかないと閲覧できませ
Firefoxで見ているページをChrome・Edgeなど他のブラウザで一発で開ける拡張機能「Open With」
FirefoxやGoogle Chromeなどさまざまなブラウザがある中、特定のブラウザでしか動作しないウェブアプリや画像データがあったとき、いちいち別のブラウザを立ち上げてURLをコピペするのは少々面倒です。Firefoxの拡張機能である「Open With」をインストールすると、最短2クリックで別ブラウザを立ち上げることができ、URLをコピペする必要もありません。 「Open With」でFirefoxからChrome・Edge・Operaブラウザを開く様子は以下のムービーから。 Firefoxの拡張機能「Open With」を使ってChrome・Edge・Operaを開く - YouTube Open With – Firefox (ja) 向け拡張機能を入手 https://addons.mozilla.org/ja/firefox/addon/open-with/ Open Wi
Chromeでタブをたくさん開きがちな人に届け！作業効率を上げまくる拡張機能4選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ 広報室のたびちん（@takiyoro）です〜。 今回はこれがないと暮らしていけない！ とまでなったChrome拡張機能を４つ厳選してお伝えします。 ▼以前ご紹介した、タスク管理に便利な拡張機能＋アプリの使い方はこちら 開けているタブをリスト化！ 「GetTabInfo」 ダウンロードURL あらゆるオフィスワーカーに知ってほしい！ タブで出したページのURLやタイトルなどの情報がリストになって出てきます。表示方法はテンプレート化が可能です。URLだけのリスト、タイトルとURLで間にタブを入れる、タイトルを＜＞などで囲むなど、柔軟に設定できます。 こういう感じで、同じウインドウ内で開いている複数タブをリスト化できます。 「ちょっとこの業界のURL調べてリスト化しといて」なんて命が下ったときに何度か救われた拡張機能です。複数タブを開けておき、これでリストにするだけなので、個人的な
1クリックでページタイトルとURLをコピーできるChrome拡張機能「Simple URL Copy」
ブラウザで閲覧したサイトをSNSなどで誰かに伝えようとサイトのタイトルとURLを取得しようと思ったときに、長いページタイトルを手動でタイピングするのは大変です。「Simple URL Copy」は1クリックするだけでページタイトルとURLをクリップボードできる、シンプルな見た目のGoogle Chrome拡張機能です。 【Chrome Extension】簡単にURLとタイトルをコピーできる「simple-url-copy」作りました - フリーランチ食べたい https://blog.ikedaosushi.com/entry/2019/02/25/012319 Simple URL Copy - Chrome ウェブストア https://chrome.google.com/webstore/detail/simple-url-copy/cefkgjbbpagcilodnhboolbp
ウェブページに簡単にカスタムCSSを適用できる拡張機能「Amino」
CSSはウェブページにおいてレイアウトやスタイルを決めるための言語ですが、「Amino」はそのCSSを簡単に書き加えることができ、サイトを自由にカスタマイズできるというChromeの拡張機能です。 Amino: Live CSS Editor for Chrome https://aminoeditor.com/ Amino: Live CSS Editor - Chrome ウェブストア https://chrome.google.com/webstore/detail/amino-live-css-editor/pbcpfbcibpcbfbmddogfhcijfpboeaaf Chromeウェブストアのページを開き、右の「Chromeに追加」ボタンをクリックします。 アクセスするウェブサイトへの権限を求められます。確認して「拡張機能を追加」をクリック。これでインストールは完了です。 C
任意のWebページのテキストを読みやすく、見やすくしてくれるChrome拡張・「Clearly」
Clearlyは任意のWebページのテキストを読みやすくしてくれるChromeエクステンションです。上SSは昨日の記事ですが、広告やメニュー等が非表示となり、テキストがセンターに、左ペインには見出しに対して自動でページ内リンクが作成され、右ペインには音声読み上げやページ内スタイル調整、フルスクリーンモードボタン等が追加されます。正直かなり見やすくなりますね。広告が非表示となるのは運営者としては正直なところ、かなり辛い仕様ではありますがユーザーとしてはまぁあるより無い方が見やすいのは確かではあります。年のせいか最近読むのも少ししんどい日もあるので個人的にも利用していこうと思います。 Clearly 本年は本記事が最後となります。今年も大変お世話になりました 来年は4日くらいから再開する予定です。来年もどうぞ宜しくお願いいたします。 良いお年をお迎えください
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
Open-in-Chrome - Safariで見ているページをGoogle Chromeで表示する
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 誰得だと言えば、まさに筆者のためにあるようなソフトウェアなのですが。多くの人がGoogle Chromeをメインブラウザにしていると思いますが、筆者はSafariです。Google Chromeは速いのですが、メモリを食いすぎます。その点、Safariは普段のブラウジングには十分だったりします。 しかし、時にGoogle Chromeで確認したい場合もあり、そんな時に使えるのがOpen-in-Chromeになります。 Open-in-Chromeの使い方 Open-in-Chromeをインストールすると、ツールバーにアイコンが表示されます。これをクリックすると、確認のプロンプトが表示されます。 そしてOKするとSafariで表示しているページをGoogle Chromeで確認できま
怪しいリンク先を簡単に「VirusTotal」でチェックできるChrome用アドオン「VTchromizer」を使ってみた - GIGAZINE
ネットサーフィンをしていると、必ずと言っていいほど出会ってしまう「怪しげなリンク」。クリックすると目的の情報にアクセスできそうですが、フィッシングサイト(詐欺サイト)にアクセスしてしまったり、マルウェアやウイルスに感染してしまうリスクがあります。また、セキュリティソフトが入っていれば、必ずしも大丈夫ということではなく、ソフトによっては検知の精度もバラバラで、知らないうちに被害を受けているなんてことも。無料でインターネットのURLやファイルを検査してくれるウェブサービス「VirusTotal」を使えば、60以上のウイルス対策ソフトやセキュリティソフトで一度に検査してくれますが、怪しいリンクに遭遇する都度、アクセスするのは手間でしかありません。そこで、簡単な操作で怪しいリンクを「VirusTotal」でチェックできる、Chrome用アドオン「VTchromizer」を使ってみました。 VTch
ウェブページにコメントやハイライトを付けて他人と共有できる「Hypothesis」を実際に使ってみた
ウェブサイトの文章を読んでいると、分からなかったことや疑問に思ったことをメモしたり、誰かに聞いてみたりしたいと思うことがあります。そんな時にウェブページ上の任意のテキストに対し、自由に「ウェブ・アノテーション」を付与＆閲覧ができる「Hypothesis」を実際に使ってみました。 Hypothesis – The Internet, peer reviewed. https://web.hypothes.is/ 本来「アノテーション（Annotation）」とは英語で「注記、注釈」という意味を持ちますが、ここでのアノテーションとは注釈だけにとどまらず、ハイライトやタグ付けなどの情報も含む広い意味を持ちます。テキストや動画、画像などのデジタルコンテンツに、作者や管理者以外もアノテーションをつけられるようにする枠組を「オープン・アノテーション」と呼び、この枠組をインターネット上に応用し、ウェブサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Fuzbal - ページ内でファジーな検索を可能にするGoogle Chrome機能拡張 MOONGIFT