2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 はじめに 「update」クエリの基礎知識 新しいメディアクエリ「update」を使用したデモ リソース はじめに CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。 updateクエリは、デバイスのリフレッシュレートに適応することが
ブラウザ上でローカルファイルの読み書きができる Native File System API が ChromeCanary で実装された。 前々から欲しかった機能なので、自分が作ってる markdown preview ツールに実装してみた。 Intent to ship https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/noan0cgEBGQ/t8DuK8_hDwAJ 仕様 http://wicg.github.io/native-file-system/ 動かすとこんな感じ https://mdbuf.netlify.com/ で Meta+O/Meta+S のキーバインドを振ってる。 有効化 https://www.google.com/intl/ja/chrome/canary/ をダウンロード chrom
[レベル: 上級] Chrome 81 の安定版を Google はリリースしました。 Chrome 81 に追加された新機能の 1 つに、リンク先の特定の場所に直接スクロールし指定したテキストをハイライト表示する機能があります。 #:~:text= で移動&ハイライト Chrome 80 で実装したと Google はアナウンスしていましたが、実際に利用できるようになったのは Chrome 81 です。 ページの URL に #:~:text=○○○ を追加します。 ○○○ は、リンクをクリックしたユーザーをダイレクトに連れていきたい場所のテキストです。 たとえば、次のような URL としてリンクします。 https://webmaster-ja.googleblog.com/2020/04/how-to-pause-your-business-online-in.html#:~:tex
CSS Text モジュール レベル 4 の 4 つの国際化 CSS 機能が Chrome に導入されます。この投稿では、すでに発送済みのサービスと今後の予定について説明します。 Chrome 119 以降: 日本語のフレーズが word-break: auto-phrase で改行されるようになりました。 Chrome 120 以降のフラグの背後: text-autospace プロパティによるスクリプト間のスペース 開発中: text-spacing-trim プロパティによる中国語、日本語、韓国語(CJK)の句読点カーニング。 言語間で最小フォントサイズが統一されます。 日本語のフレーズ改行: word-break: auto-phrase 日本語のテキストが読みやすくなるこの機能は Chrome 119 から利用可能 中国語や日本語などの東アジア言語では、単語の区切りにスペースを使
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
その他、オーバーフローを起こしている箇所やUIの不具合など、緊急度高を含む33のセキュリティ修正も行った。 近日中には、最近閲覧したページや関連コンテンツを表示する「カード」機能を、新しいタブのページに追加する。うっかり閉じてしまったサイトを表示したい場合の時間を節約できるとしている。 関連記事 検索とブラウザのシェアが計測できなくなるのはGoogleのせい? 14年にわたってWebブラウザや検索の市場調査を報告してくれていたNetApplications.comが10月でサービスを終了します。ブラウザの変更で同社のデバイス検出技術が使えなくなるので、としています。 ニセモノ「Google Chrome」アプリに誘導、配送業者かたる詐欺メールから ソフトバンクが注意喚起 配送業者などを装ったメールやSMSに記載されたURLにアクセスすると、「Google Chrome」の偽アプリがインスト
「Chromeウェブストア」から拡張機能をインストールすると、ブラウジングを快適にしてくれる機能を簡単にChromeに導入可能ですが、中には便利なツールを装って不正な動作をする拡張機能も存在しており、過去には200個もの拡張機能が一斉に削除されたこともあります。今回新たに、合計500個以上のChrome拡張機能が不正に個人情報を入手していたことが、セキュリティ研究者らの調べにより発覚しました。 Security researchers partner with Chrome to take down browser extension fraud network affecting millions of users. | Duo Security https://duo.com/labs/research/crxcavator-malvertising-2020 500 Chrome E
DevTools とはElementsStylesComputedEvent ListenersDOM BreakpointsPropertiesAccessibilityConsoleメッセージスタッキングコンソールの履歴実行コンテキストの選択コンソール出力のフィルタリングコンソールの設定Sourcesコード行ブレークポイント条件付きコード行ブレークポイントコード行ブレークポイントの管理DOM 変更ブレークポイントXHR ブレークポイントイベントリスナーブレークポイント例外ブレークポイント関数ブレークポイントNetworkネットワークリクエストの記録読み込み動作の変更リクエストのフィルタリングリクエストの並び替えリクエストの分析リクエストデータのファイル出力Performance概要ペインフレームチャートペイン詳細ペインMemoryHeap snapshotAllocation inst
警察庁は6月9日、マルウェア「Emotet」の最新の解析結果を公表した。同庁によると「Google Chrome」に保存されたクレジットカード番号や名義人氏名、カードの有効期限を盗み、外部に送信する機能が追加されたことを確認したという。 Chromeは個人情報を暗号化して保存しているが、Emotetの新機能は、暗号化されたデータを復号するための鍵も同時に盗み出すため、保存したクレジットカード情報が第三者に知られるおそれがあるとしている。 2022年に入ってからEmotetの感染拡大は続いており、直近では埼玉大学や京都大学大学院が教職員用PCに感染したと発表している。トレンドマイクロによると、2022年第1四半期のEmotet感染状況は、他の地域と比べて日本が突出していたとしている。 関連記事 京大大学院のPCがEmotetに感染 不審メールを大量送信 京都大学は、同学大学院の工学研究科に所
この記事について 先日、@catnoseさんがカメラ映像の代わりに絵文字(Emoji)を配信するためのサービスを公開されました。凄く完成度が高くて良いサービスだと思ったので、さっそく使ってみたのですが、仮想カメラとして使用するためには OBS Studio が必要でした。[1] サービスを使うには全然申し分無いのですが、「 もっと簡単にできたらなぁ~ 」と思ってしまうのが私の悪い所で、すぐさまブラウザのみでどうにかできないかと調べてみると、色々な制約はありますが、Chrome 拡張を使うことで OBS Studio を使わずとも仮想カメラを使用できることが分かりました。 実装も簡単にできるので、 今回は Google Meet で、画面キャプチャを仮想カメラとして表示する Chrome 拡張を作って行こうと思います 💪 今回作るモノについて 今回この記事で作る Chrome 拡張は、上記
かびら(教育系ITエンジニア)@ステックアップ @StechUp_kawa サードパーティークッキー廃止の動きにより、ネット広告業界は大きな変革を迫られそうですね。GoogleのブラウザであるChromeは、サードパーティークッキーの段階的な廃止に取り組んでいるようです。 そもそもサードパーティークッキーとは何か、改めて整理したいと思います。まずWebサイトには、クッキーと呼ばれる簡単なメモ帳のようなものを紐づけることができます。クッキーには簡単なテキストを保存できます。そのクッキーですが、ファーストパーティークッキーとサードパーティークッキーと呼ばれるものが存在します。それぞれ簡単なテキストを保存できるという意味で役割が一緒ですが、使われ方が異なります。 ファーストパーティークッキーは、訪れたWebサイト内だけで使用するメモ帳です。主な用途としては、ユーザーのログイン情報などを記録し
はじめに はじめまして、@nkato_です! 普段は機械学習寄りのソフトウェアエンジニアとして、PythonでMLパイプラインを記述したりGoでバックエンド処理を記述しています。 便利アプリや各種ツールの拡張機能が好きで、これまでにも様々な機能を取り入れて試してきました。 自社エンジニア向けにそういったツールを共有したいと思ったのですが、どうせなら公開情報としてQiitaに投稿しようと思い立ち、まとめてみることにしました。 量は多いですが、どれもおすすめです! アプリ Alfred ショートカットキーで検索窓を開いて、アプリ名で検索してアプリを起動するやつ アプリの起動以外でも、ファイルを開いたり計算したりできる 僕はアプリはAlfred経由でしか開かないので、ドックもランチャーもあまり使ってない App Storeのやつは古いので公式サイトからダウンロードする The Unarchive
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads 71 Ads API 11
なか子こんにちは! 起業支援をしている なか子(⇒プロフィール)です^^ 大学生の頃バイトが見つからず困ったあげく 起業して 月収50万達成しました。 最速で物販だけで食べる情報を無料公開しています! 物販に取り組んでいると、 商品のリサーチや仕入れに一番時間を使いますよね。 物販では仕入れて倉庫に納品するだけなので リサーチの効率化が一番大事です。 今回は、私がAmazon物販で使っているリサーチツール、 chrome拡張機能(すべて無料)をご紹介します。 ページ速度が遅くならない、一番シンプルな機能だけをご紹介します。 「chrome拡張機能、どれがいいのか迷う…」 「重くなるから、あんまり入れたくない…」 と、思った方も必見です^^ ページ速度を重視した結果 多機能な拡張機能は、ほとんど使っていません。 色んな機能を知りたい!という場合は、 別の記事を参照ください。 あわせて読みたい
「ブラウザの操作を自動化したい」 仕事中にこういう風に考えることがありました。 なぜこういう風な事を思ったのか。 それは申し込みのテストを毎回手動で行なってるOPさんに申し訳ないと思ったから。巷では自動テストだの言っていますが、人間でテストしなきゃいけない部分も沢山あります(ブラウザ操作が伴う物は余計に)。 そして自分も面倒くさがりなので基本的に手動でテストなんかしたくない。って事で上記に思い立ちました。 自動化といっても大層なことじゃなく、軽い条件でブラウザ操作したい人向け。 何せChromeの拡張機能を使うだけで出来るので。 複雑な事をしようと思えば、PythonとSeleniumで出来ますが、今回はそんな難しいことは望みじゃないです。 必要な入力項目に入力したり、特定のチェックボックスにチェックを入れてsubmitボタンを押すとか軽い感じ。 ブラウザの自動操作で使用するChromeの
Amazonプライム・ビデオを見ながら語学を学べるChrome拡張機能、「Subtitles for Language Learning」が登場しました。動画に外国語字幕を追加し、随時翻訳しながら視聴できます。 お気に入りの作品を視聴しながら外国語を学習。対応言語はなんと79カ国語 導入後にプライム・ビデオをChromeで開くと、再生ボタン脇に「Subtitles for LL」ボタンが出現。ここから再生を開始すると、動画の右側に字幕が表示されるという仕組みです。単語にカーソルを合わせると訳語がポップアップし、そこからWeblioなどの辞書サイト検索も可能。字幕の右にあるアイコンをクリックすれば、一文をまとめてGoogle翻訳で訳すこともできます。英語はもちろん、中国語やスペイン語など79カ国語に対応しており、外国語学習が大いにはかどりそうです。 単語をクリックし、ポップアップウインドウ上
よくある運用 マスタデータの管理方法として多いのは、Excelなどの表計算ソフトを使ってデータを作成し、それをGitHubで管理しつつ、実際にDBなどへデプロイさせる方法かと思われます。 そしてこれを実現するにあたって、出来るだけエンジニアの負担を減らせるよう、データ作成者にGitクライアントの使い方やデプロイ方法をレクチャーします、が... マスタデータ管理ツールの誕生 ただ、そこで気になるのは、結果的にデータ作成者の負担が増えてしまうことです。 大体の場合、表計算ソフト以外のツールも触ることになり、もう少し手軽にできないかと考えていました。 そこで今回は、Chrome拡張とSpreadsheetを用いて、データ作成者がChromeだけでデータの作成から反映までできるツールを作成しました。 少し前から、Spreadsheetでデータを作成後にデプロイツール実行一つでデータを反映する、とい
ウェブ記事のテキストに直リンクが張れるChrome拡張機能が完全に神!2020.06.22 13:0031,597 Victoria Song - Gizmodo US [原文] ( そうこ ) 考えた人、神寄りの人。 え…、もしかしたら、人寄りの神なの? とんでもなく便利な拡張機能がChromeにやってきました。「Link to Text Fragment 」は、ウェブ記事のテキストに直リンクできる機能。記事のページへのリンクじゃないですよ、記事中の特定箇所をハイライトし、そこに直接飛ばせるURLを作れる機能なんです。しかも、使い方がめちゃくちゃ簡単。 1:リンクをつくる拡張機能をインストール後、リンクを張りたいテキストをハイライトして右クリック。オプションに表示されるLink to Text Fragmentのアイコンと「Copy Link to Selected Text」をクリック
by StartupStockPhotos ブラウザのユーザーエージェント文字列とは、アクセスするウェブサイトのホストサーバーに対してブラウザが送信する、使用しているOSやデバイスのアーキテクチャ、ブラウザの情報などを含んだテキストです。ノルウェー発のブラウザ・Operaを開発するオペラ・ソフトウェアの元CEOであるヨン・スティーブンソン・フォン・テッツナー氏らが開発するブラウザの「Vivaldi」は、このユーザーエージェント文字列を「Chromeと同じものに変更する」と発表しました。 User Agent Changes | Vivaldi Browser https://vivaldi.com/ja/blog/user-agent-changes/ ユーザーエージェント文字列は本来、ウェブサイトがユーザーに対してよりよいエクスペリエンスを提供するために用いられます。たとえばユーザーエー
非アクティブ状態のタブを一時停止してくれる拡張機能「The Great Suspender」が、新たな所有者のもとで不審な更新が行われたということが指摘されており、ソフトウェア開発者のデビッド・フォスター氏が対策を示しています。 I no longer trust The Great Suspender | DaFoster https://dafoster.net/articles/2021/01/20/i-no-longer-trust-the-great-suspender/ I no longer trust The Great Suspender | Hacker News https://news.ycombinator.com/item?id=25846504 [Open Source Development] The Great Suspender Saga, or, “I
たいていWebページの長さに比べるとディスプレイの高さが足りないため、そこに表示されるWebブラウザではページ全体を見るのにスクロールを繰り返す必要があります。しかしOS標準のキャプチャー機能では、撮る瞬間に表示されている領域しかキャプチャーできず、スクロールするまで隠れている(表示されていない)領域は撮れません。 かといって、手動でスクロールしながらキャプチャーを繰り返し、後で全スクリーンショットをつなぎ合わせる、なんて作業は非常に面倒です。 そこで本稿ではWindows OS版およびmacOS版Google Chrome(以下、Chromeと略)を対象として、Webページ全体をキャプチャーする方法を紹介します。拡張機能は使わず、Chrome標準装備の「デベロッパーツール」のみ用います(デベロッパーツールは開発者に限らず、利用者でも使用できます)。またPC向けとスマホ(スマートフォン)向
ウェブサービスへの新規登録やオンラインショッピングの際にメールアドレスを入力すると、メールアドレスの流出や悪用などの被害を受ける可能性があります。この問題に対応するべく公開されたFirefoxの開発元・Mozillaのメール転送用の捨てメールアドレス生成サービス「Firefox Relay」が、2022年3月10日(木)に「転送可能容量の増加」「Google Chrome向け拡張機能の提供」「メールマガジンのフィルタリング機能」などの新機能に対応しました。 Latest Firefox Relay includes bigger attachment size and filters for promotional emails https://blog.mozilla.org/en/mozilla/latest-firefox-relay-includes-bigger-attachme
おすすめのGoogle Chrome拡張機能①pushbullet パソコンで見ているページを簡単にスマホで見られる機能 パソコンで見ているページをスマホで見たい時ってありませんか。 例えば、住所をパソコンで調べていて、移動する時になってスマホで情報がみたくなったとき。 新しく公開したページをスマホ画面で確認したいときなど。 そんなときにこの拡張機能を使えば、アイコンを押すだけで、登録しているスマホやタブレットにプッシュ通知を送ることができます。 ダウンロードはこちらから⬇️ https://chrome.google.com/webstore/detail/pushbullet/chlffgpmiacpedhhbkiomidkjlcfhogd おすすめのGoogle Chrome拡張機能②Awesome Screenshot: キャプチャーと注釈 簡単にスクショを保存・共有できる機能 ブ
1. はじめに ChromeやFirefoxで使えるストレージ永続化機能はご存知でしょうか。 https://developers.google.com/web/updates/2016/06/persistent-storage に Persistent Storage という題で詳しく触れられていますが、通常 LRU で消去されてしまう IndexedDB や CacheStorage の内容を永続化してくれる機能だと理解しています。 CacheStorage と Persistent Storage の組み合わせは強力で、理論上大容量のアセットを永続化できるようになることから、PWAでのオフライン戦略や通信量削減戦略に対して強力な武器になると考えています。 しかし残念ながら、例によって Safari はサポートしていません。そのため、WebKit の利用を強制される iOS では、例
Bundling a full website as a single file and making it shareable opens up new use cases for the web. Imagine a world where you can: Create your own content and distribute it in all sorts of ways without being restricted to the network Share a web app or piece of web content with your friends via Bluetooth or Wi-Fi Direct Carry your site on your own USB or even host it on your own local network The
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω`*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω`*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
科学論文のPDFファイルを読みやすくするChrome拡張機能「Google Scholar PDF Reader」をGoogleが公開しました。論文の内容読解にめちゃくちゃ役立ちそうだったので、インストール手順や搭載機能をまとめてみました。 Google Scholar Blog: Supercharge your PDF reading: Follow references, skim outline, jump to figures https://scholar.googleblog.com/2024/03/supercharge-your-pdf-reading-follow.html ◆Google Scholar PDF Readerのインストール手順 Google Scholar PDF Readerをインストールするには、まずChromeで以下のリンクをクリックして配布ペー
試した方がいいGoogle Chrome experiments はじめに Chromeデベロッパーツールは、ウェブ開発者間で最も使われているツールの1つです。しかし、ほとんどの開発者が知らない素晴らしい機能があります。 この記事では、すべての開発者が試すべきChromeデベロッパーツールの実験的機能トップ5について説明します。 1. CSS Overview - すべてのスタイルの詳細情報を表示する CSS Overviewは、ウェブページで使われているすべてのスタイルの概要を表示します。 この機能は、色、フォント、メディアクエリ、未使用の宣言に関する詳細情報を含んでいます。UIにCSSの修正を加える時に便利で、カラーピッカーなどのサードパーティツールを使う必要がなくなります。 ChromeデベロッパーツールのCSS Overviewタブ この機能を有効にするには Google Chro
技術同人誌やブログを書く上で外せないのがスクリーンショットを取ることです。 同人誌を5冊書いていく経験の中で慣れてきたので、自分がスクリーンショットを撮る時に使っている方法を紹介します。 > Commandからスクリーンショットを撮るCommandからスクリーンショットを撮る Chrome DevToolsに慣れている方はご存知かもしれませんが、ChromeにはCommandという概念があります。 Cmd + Option + iでDevToolsを開きCmd + Shift + Pを押してください。 すると次のような入力フォームと項目が出現します。 フォームに文字を入力すると、Commandを絞りこむことができEnterで指定したアクションを実行することが出来ます。 ここにある、「Capture area screenshot」、「Capture full size screenshot
超強力翻訳エンジン「DeepL」で英語サイトをまるっと翻訳できるChrome拡張機能2021.02.16 11:0076,076 塚本直樹 課金制ですが…! 正確な翻訳であっという間に人気ツールにのし上がった「DeepL」ですが、そのAPIを使ってページ翻訳やPDF翻訳ができるChrome拡張機能「DeepLopener PRO」が登場しました。 DeepLには無料翻訳機能や有料プランのDeepL Proだけでなく、開発者向けの「DeepL API」というプランもあります。記事執筆時点では月額630円+100万文字あたり2500円のこのプランでは、DeepLの機能をAPIとしてサードパーティー製のツールに組み込めます。 そしてDeepLopener PROではこのAPI機能を使い、ページ全体を翻訳する「レイアウト重視互換モード」や「ページ翻訳」、それにPDFモードやテキスト重視置換モード、
こんにちは! 広報室のたびちん(@takiyoro)です〜。 今回はこれがないと暮らしていけない! とまでなったChrome拡張機能を4つ厳選してお伝えします。 ▼以前ご紹介した、タスク管理に便利な拡張機能+アプリの使い方はこちら 開けているタブをリスト化! 「GetTabInfo」 ダウンロードURL あらゆるオフィスワーカーに知ってほしい! タブで出したページのURLやタイトルなどの情報がリストになって出てきます。表示方法はテンプレート化が可能です。URLだけのリスト、タイトルとURLで間にタブを入れる、タイトルを<>などで囲むなど、柔軟に設定できます。 こういう感じで、同じウインドウ内で開いている複数タブをリスト化できます。 「ちょっとこの業界のURL調べてリスト化しといて」なんて命が下ったときに何度か救われた拡張機能です。複数タブを開けておき、これでリストにするだけなので、個人的な
Windows 10の標準ブラウザアプリは「Microsoft Edge(マイクロソフト エッジ)」である。しかし、ウェブレッジの調査によれば、日本国内でのパソコンのブラウザアプリのシェアトップは34.81%のChromeで、Microsoft Edgeは15.93%で2位なのだ(2021年6月時点)。 確かにChromeを使っていても何の不満もないだろうが、Chromeはパソコンのメモリ消費量が大きいことが知られている。これに対し、Microsoft Edgeならメモリの消費も少なくChromeにはない便利機能もたくさん搭載されているのだ。そこで今回は、Microsoft Edgeを使いたくなるような7つ便利機能を紹介しよう。 ただし、Microsoft Edgeは頻繁に更新されている。Windows 10を普段から利用していれば自動的にChromium版のEdgeにアップグレードされて
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く