弊社のテクニカルディレクターの梅津と岡部がこれまで制作したツールをまとめました。 皆さんも活用していただけるChromeエクステンションのご紹介だけでなく、過去案件の中で開発したツールも振り返っていますのでぜひご覧ください。 みんなが使える便利ツールTD岡部が制作・リリースしているChromeエクステンションやその他ツールをまとめました。皆様も使用できますので、ぜひ活用してくださると嬉しいです。 ■ Chromeエクステンション 1. crawl sitemap generatorサイトマップが簡単に生成できるChromeのエクステンションです。表示しているサイトをクロールし、ページの一覧を出力します。出力結果をスプレッドシートやエクセルに貼り付ければ、高速・簡単にサイトマップを作成できます。 左：出力結果後の画面 右：出力結果をコピペしたスプシの画面 2. Capture Assistサ

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

はじめに こんにちは、都内でソフトウェアエンジニアをしているYSasagoです。 私はフロントエンドの開発時に、Chromeのブラウザを使うことが多いです。 Chrome には開発を便利にするchrome 拡張機能がたくさんあります。 普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。 UI Build Assistant アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。 また、作成者のしまぶーさんの Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。 OFF ON Responsive Viewer 次に紹介するのは、Responsive Viewer です

Testing Library Extension for Chrome DevTools Recorder Export tests from the DevTools Recorder panel to Testing Library test scripts using Jest. Open a recording and click export to use the Testing Library script option.

概要 3DCGやゲームエンジンのチュートリアル動画は英語の場合が多く、字幕が用意されていても、字を読みながら、操作手順を把握するのはなかなか大変です。 そんな時に、このChrome拡張機能「CaptionSpeaker」がとても便利です。 動画の字幕を指定の言語に 自動翻訳して読み上げる 機能になります。 字幕をガン見せずに操作手順を注視できるのはとても学習効率が上がります。 英語が苦手なアーティストやエンジニアなどに、もう少し普及した方が良いと思いますので、おすすめの設定方法などを紹介したいと思います。 紹介動画も作ってみました。 なお制約としては、 Chrome系のブラウザーを使用。 YouTube動画で、字幕（自動字幕可）がついている事。 合成音声にアレルギーが無い方。 になります。 Macでも使えます。≫インストールはこちら

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ファイルにタグをつけて管理できるオープンソースのファイル管理ソフトが「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

Chrome拡張機能には便利なものが多く、特にWeb制作時には積極的に利用しています。昨年も紹介しているのですが、2022年に入ってChrome拡張機能の見直しをして現在よく利用しているものだけで再構成してみたところ、無駄が減り使いやすくなりました。2022年版のおすすめChrome拡張機能を14個紹介します。 Toby for Chrome Chromeを利用しているとかならず出てくるタブ開きすぎ問題。パソコンが重くなる原因の一つで、タブは開きすぎない方が良いです。その問題を解消するのがChrome拡張機能 Toby for Chrome。ついつい増えがちなタブを一括で管理することができます。 私は、案件ごとにSPACESを用意し、関連ページや参考ページをタブで開いてまとめてブクマしています。ドラッグ&ドロップで並べかえができたり、SPACES内に複数のフォルダを用意できるので、タブ管理

<

こんにちは。虎の穴ラボのH.Hです。 今回は先日発表されたChromeの開発中の新機能であるRecorder機能について使用方法や利用する際の注意点などをまとめました。 Recoder機能とは ブラウザのChrome97で追加される予定の機能で、ブラウザの画面上で操作した記録を取得してくれる機能になります。 この記事を書いている2021年11月17日では一般に提供されているChromeの最新版は96となり、開発中の「Chrome Dev」もしくは「Chrome Canary」でRecorder機能を使用することができます。 利用している時の様子はChromeの開発者向けのページに公開されています。 developer.chrome.com 主な機能は以下の通りです。 ・操作の記録及び再実行(リプレイ)できる ・再実行時にパフォーマンスの記録・確認できる ・記録した内容の編集ができる ・操作

How can this tool help me?We built Core Web Vitals Checker so you can see how people experience your website without setting up complex dashboards or processes. Core Web Vitals Checker reports four site speed metrics based on real Google Chrome browsing data. Each metric focuses on a different aspect of user experience, such as loading, interactivity and visual stability, so you know where to focu

共有資料や手順書の作成で、スクリーンショットを撮りながら進めるのはちょっと面倒です。 身内への手順共有であれば画面録画を活用する手もありますが、それにしても編集したり考えながら操作を進めたり…といった要望がありますよね。 ウェブブラウザ上の操作をキャプチャするのなら、Chrome拡張機能『Tango』を追加すれば効率化が叶います。 ステップ・バイ・ステップの操作を、キャプチャ・説明してくれる自動化ツールをご紹介します。 一通り操作するだけでOK！Screenshot: 山田洋路 via TangoTangoを追加すれば、いい感じの操作説明資料が一瞬で作れるようになります。 説明対象のウェブページを開いたら、拡張機能アイコンをクリック。 「CAPUTURE WORKFLOW」ボタンを押せば、キャプチャ開始です。 Screenshot: 山田洋路 via Tango説明したい操作を一通り行ない

開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools

GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック

Chrome拡張機能にはWeb制作に便利なものが多く、私もよく利用しています。特に1〜2クリックでさっとチェックできるものは頻繁に使い制作の中で馴染んだものであるため、これらがないと手間どってしまうくらい依存性の高いものばかり。今回は私がよく利用しているChrome拡張機能を12個紹介します。初見のものがありましたら、ぜひ試してみてください。 Eagle – 効率的に画像を保存する Eagle サイト上にある画像をドラッグ＆ドロップだけで保存できるChrome拡張機能。あとで見返したい画像を効率的に保存できるのは嬉しい。ページ全体のスクリーンショットの撮影も可能。撮影後は専用のアプリに保存されます。この手のものは他にもあったのですがサービス終了してしまい、他を探してようやく見つけたのがEagleでした。重宝しています。 Eagle – 効率的に画像を保存する 専用アプリのダウンロードはこち

キーワード検索ボリューム、CPC、全検索キーワードのインサイト。Google、YouTube、Amazonに対応。Neil PatelのSEOツール。 Ubersuggestは、無料のchrome拡張機能で、毎月検索ボリューム、CPC、競合データのキーワードを表示するパワフルなSEOツールです。 このUbersuggest拡張機能は、Google™における特定のキーワードクエリに関連した洞察に満ちたデータを提供するだけではなく、YouTube™やAmazon™などのデータも提供します。はい！YouTubeやAmazonで検索すると、推奨キーワードでデータを見ることができます。 Ubersuggestキーワード検索ツールをインストールしたら、GoogleやYouTube、Amazonを訪問して検索するだけです。ここでキーワードや言葉に関するデータを見ることができます。検索したキーワードのいず

DeepLopener はDeepL翻訳のAPIを利用したGoogle chrome の拡張機能です。 ページ翻訳やドキュメント翻訳、PDF上に翻訳結果を表示することができます。 下の記事に移行しました． t3ahat.hateblo.jp 【2022/2/14追記】 Android版をリリースしました！ まだ機能は少なめですが、よかったらお試しください． play.google.com

近年、技術系の情報をググると検索結果にStack Overflowの機械翻訳サイトが表示されることが多くなってきました。1 ひどいときには、オリジナルのページよりも上位に表示されていることさえあります。 Googleの検索結果の精度は年々悪化の一途をたどっているように思いますが、そういった状況の中で僕が取っている自衛手段をご紹介します。 uBlacklistで検索結果から除外 uBlacklistは、正規表現やマッチパターンで指定した任意のウェブサイトをGoogleの検索結果から除外するためのChrome拡張です。 自分でフィルタを書くこともできますが、ありがたいことにStack Overflowの機械翻訳サイトの除外用フィルタを公開している人がいるので、そちらを購読しています。 2020年7月31日現在のフィルタのURLは、以下の通りです。 https://raw.githubuserc

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert