Memo

メモ > 技術 > ツール: Browser

■ブラウザ操作
■初期設定 「Windows.txt」の「初期設定メモ」も参照 ■キャッシュ 【Chrome】ブラウザの頑固なキャッシュを完全に削除するスーパーキャッシュクリア方法 | CMSマニュアルサイト http://cms.aiosl.jp/manual/kowaza/1077/ Google Chromeで素早くキャッシュをクリアしてページを正しく表示させる:Google Chrome完全ガイド - @IT https://www.atmarkit.co.jp/ait/articles/1811/14/news038.html Chromeがキャッシュしているfaviconを削除する。 - Qiita https://qiita.com/chocodoughnut/items/691a4a768124028bedb5
■開発者ツール
■Chrome シニアフロントエンド開発者みたいにChromeデベロッパーツールを使おう - Qiita https://qiita.com/baby-degu/items/6f367b61d245d5bc217b 開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools - Speaker Deck https://speakerdeck.com/cybozuinsideout/chrome-developer-tools Chrome DevTools の知っておくと便利かも機能 - Qiita https://qiita.com/gen_abe/items/185445cc0f9f326eee72 ■Safari MacOSでSafariの場合、メニューの 「開発 → レスポンシブ・デザイン・モードにする」 を選択することで、色々な端末のサイズで表示できる Simulate responsive web content on Apple devices - Apple サポート https://support.apple.com/ja-jp/guide/safari-developer/dev84bd42758/mac
■Chrome設定
■セーフブラウジング 設定 → プライバシーとセキュリティ → セキュリティ → セーフブラウジング 「標準保護機能」を「保護強化機能」に変更 ■カーソルブラウジング F7キーを押すことで切り替えられる 【Chrome】点滅するカーソルの正体と解除方法を解明! | マイペース革命 https://wariichi.com/what-is-this-flashing-cursor/ ■リモートデスクトップ 「Google.txt」の「Chromeリモートデスクトップ」も参照
■Chrome拡張機能
■画面のスクリーンショットを撮る GoFullPage - Full Page Screen Capture - Chrome ウェブストア https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl... この拡張で撮影できた 長いページでも、一つの画像として保存してくれる ■画面の操作内容を録画する Google Chrome用スクリーンレコーダー - Chrome ウェブストア https://chrome.google.com/webstore/detail/screen-recorder-for-googl/eclbecdgdoahkliaijlpkigldlkojjdn... この拡張で録画できた (似たような拡張は、他にもあるみたい) 1. 拡張をインストールすると、拡張の中に「Google Chrome用スクリーンレコーダー」が追加されるのでクリック 2. 「キャプチャ画面」をクリックする 3. 「画面を共有する」ダイアログが開くので、「Chromeタブ」から録画したい対象のタブを選択 4. 「共有」をクリック 5. 対象のタブが開き、録画が開始される 6. 任意の操作を行い、完了したら元のタブで「キャプチャの停止」ボタンをクリック 7. 画面下部に「コンピュータにダウンロードする」が表示されているので、ここからダウンロードする で操作内容を保存できた また、保存したファイルをChromeにドラッグ&ドロップすると再生された 上記はChrome想定になるので、もし「こういう環境でこういう操作をしたい」をいただければ、引き続き調査いたします。 ■マウスジェスチャー 長く「crxMouse Chrome」を使用していたが、意図しない二重リクエストなどが発生して余計な混乱を招くことが多かった simpleGesturesを導入してお試し中 Chromeでおすすめのマウスジェスチャー拡張機能を紹介! | Apple Geek LABO https://apple-geeks.com/chrome-mouse-gesture-54351 [Mac]Google Chromeで右クリックメニューが出ない人はエクステンションをチェックすべし | Exception Code. http://www.hawk-a.com/exception_code/archives/1309 Chromeの右クリックで表示されるメニューが表示されなくなった時の対処法 - 強火で進め https://nakamura001.hatenablog.com/entry/20110610/1307718964
■Chrome拡張機能の作成
■拡張機能の作成 Chrome拡張機能の作り方。誰でもかんたんに開発できる! https://original-game.com/how-to-make-chrome-extensions/ Google Chrome Extensionの作り方 第1回 〜Hello World編〜 | Risaiku リサイク https://risaiku.net/archives/1653/ Chromeの拡張機能を自作する - 虎の穴開発室ブログ https://toranoana-lab.hatenablog.com/entry/2020/04/23/174421 Getting started - Chrome Developers https://developer.chrome.com/docs/extensions/mv3/getstarted/ Chrome拡張作ったら異世界転生した件 - Qiita https://qiita.com/zakuroishikuro/items/5275f783a2d8b37db212 ボタンをクリックすると、アラートが表示されるだけの拡張を作成する manifest.json
{ "name": "Hello World", "description": "クリックするとアラートを表示します。", "version": "1.0.0", "manifest_version": 3, "permissions": ["activeTab","scripting"], "background": { "service_worker": "background.js" }, "action": { "default_icon": { "16": "img/icon_16.png", "24": "img/icon_24.png", "32": "img/icon_32.png" }, "default_title": "アラートを表示" } }
background.js
chrome.action.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target: {tabId: tab.id}, function: () => { alert('ハロー!ワールド'); } }); });
また、以下にアイコン画像を配置する icon_16.png icon_24.png icon_32.png Chromeで「chrome://extensions/」を開き、右上のスイッチで拡張機能を有効にする 「パッケージ化されていない拡張機能を読み込む」から、上の手順で作成した拡張機能を読み込む アイコンをクリックすることで実行できるが、「chrome://extensions/」のページで実行すると 「Uncaught (in promise) Error: Cannot access a chrome:// URL」 というエラーになるので注意 通常の http や https から始まるページを開いた状態で実行する必要がある ■タブを参照 Chrome拡張機能でタブの情報を取得する方法 - Qiita https://qiita.com/plumfield56/items/99f5cfc1bf5fd03e8040 ChromeのアクティブなタブのURLを取得する | e-JOINT.jp https://e-joint.jp/1041/ ■公開 自作したChrome拡張を公開する方法!【画像付き解説】 | すずきライフ https://belltree.life/chrome-extension-release/ Google Chrome Extensionの作り方 番外編 〜ストアへの公開編〜 | Risaiku リサイク https://risaiku.net/archives/2162/ manifest.json が入った CloseRightTabs フォルダをZIP形式で圧縮する 以下から公開作業を行う デベロッパー ダッシュボード https://chrome.google.com/webstore/devconsole 公開しようとすると、以下のエラーになった ・詳細な説明が短すぎるか、指定されていません。25 文字以上で指定してください。 ・アイテムを公開する前に、連絡先メールアドレスを指定する必要があります。[アカウント] タブで連絡先メールアドレスを入力してください。 ・少なくとも 1 つのスクリーンショットまたは動画が必要です。 ・アイテムを公開するには、データの使用が Google のデベロッパー プログラム ポリシーに準拠していることを表明していただく必要があります。この表明は、アイテム編集ページの [プライバシーへの取り組み] タブで行うことができます。 それぞれ以下のように対応した ・「ストアの掲載情報 → 商品の詳細 → 説明」を充実させた ・「ハンバーガーメニュー → アカウント → 連絡先メールアドレス」を登録した ・「ストアの掲載情報 → 画像アセット → スクリーンショット」を登録した ・「プライバシーへの取り組み → データ使用」で「私は以下の開示が正しいものであることを表明します。」の各回答にチェックを入れた 審査に提出できたが、以下の理由で承認されなかった 違反の参照 ID: Purple Potassium 違反事項: アイテムに実装されている方法 / プロパティでは、次の権限をリクエストする必要がない。 tabs 修正方法: 上記の権限を削除します。アイテムで使用するプロパティは、これらの権限をリクエストしなくても引き続き機能します。 不要な権限を削除して再度申請すると公開できた 以下に公開された https://chrome.google.com/webstore/detail/close-right-tabs/ahdnifnjcpeklloobmgkkidkaedkodii?hl=ja …が、ブラウザに導入してしばらくすると、強制的に無効化される? 拡張機能一覧を確認すると、 「この拡張機能は Chrome ウェブストアのポリシーに違反しています。」 と警告が表示されている キャッシュの問題なのか、承認されて公開もされたのに何か違反があるのか ブラウザを再起動すると警告は非表示になる 引き続き確認する また、インストール時も 「この拡張機能は、セーフ ブラウジング保護強化機能で信頼されていません。」 のように警告が表示され、導入後も同メッセージが表示されている ポリシー違反と関係があるかは不明だが、引き続き確認したい 「Google Chrome」の「保護強化機能」を有効化して鉄壁のセキュリティに - 窓の杜 https://forest.watch.impress.co.jp/docs/news/1329712.html 数日経つと、いつの間にか 「この拡張機能は Chrome ウェブストアのポリシーに違反しています。」 の警告は表示されなくなっていた いったん違反状態になると、キャッシュの影響でしばらく同状態が続く…という仕様なのか 「この拡張機能は、セーフ ブラウジング保護強化機能で信頼されていません。」 の警告は表示されたままなので、これは引き続き確認したい 拡張機能をインストールして管理する - Chrome ウェブストア ヘルプ https://support.google.com/chrome_webstore/answer/2664769 「セーフ ブラウジング保護強化機能を利用したインストール」 の項目にて 「Chrome でセーフ ブラウジング保護強化機能を有効にした場合、インストールする拡張機能が信頼できない場合に警告が表示されます。」 「拡張機能は、Chrome ウェブストアのデベロッパー プログラム ポリシーを遵守するデベロッパーによって作成されている場合に信頼できると判断されます。」 「新しいデベロッパーの場合、通常は信頼できると判断されるまでに数か月かかります。」 のように紹介されている いったんはストアの掲載内容を充実させるくらいか まずはブラウザの拡張機能一覧にアイコンを表示させたい 一週間ほど経つと、何もしていなくても 「この拡張機能は、セーフ ブラウジング保護強化機能で信頼されていません。」 が表示されなくなっていた …が、環境によっては表示されたままだった。謎
■ChromeRecoder
Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ https://toranoana-lab.hatenablog.com/entry/2021/11/18/121835
■プッシュ通知
未検証 Web Pushでブラウザにプッシュ通知を送ってみる - Qiita https://qiita.com/tomoyukilabs/items/217915676603fda73b0a [改訂版] Web Pushでブラウザにプッシュ通知を送ってみる - Qiita https://qiita.com/tomoyukilabs/items/2ae4a0f708a1af75f13e Webブラウザのプッシュ通知を簡単に実装!「Push.js」の使い方を徹底解説|ferret https://ferret-plus.com/6035 意外とカンタン!流行のWebプッシュ通知はJavaScriptでサクッと実装できる - WPJ https://www.webprofessional.jp/browser-notification-api/ ブラウザでプッシュ通知を実装してみた | キャスレーコンサルティング株式会社 https://www.casleyconsulting.co.jp/blog/engineer/293/ ServiceWorker を使ってプッシュ通知実装 - Qiita https://qiita.com/OMOIKANESAN/items/3fa9c84b6d388b06e02e
■EDGE
EDGEがAI対話に対応したので試したメモ 「Bing」のAIチャット機能が組み込まれた「Microsoft Edge」を一足先に試してみる - やじうまの杜 - 窓の杜 https://forest.watch.impress.co.jp/docs/serial/yajiuma/1484691.html 以下、ChatGPTと同じ質問を行ったときの内容 ■Javaのフレームワーク refirio: Javaの有名なフレームワークについて教えてください。 Bing: こんにちは、これはBingです。 Javaの有名なフレームワークについては、様々なものがありますが、2023年現在ではSpring Bootが最も人気のあるものと言えます。 Spring BootはSpring Frameworkをベースにしたフレームワークで、簡単にWebアプリケーションを作成することができます。 他にもJSFやJakarta EEなどのJava EE系のフレームワークや、StrutsやPlayなどのアクションベースのフレームワークもあります。 それぞれにメリットやデメリットがあるので、自分の目的やスキルに合わせて選択することが大切です。 refirio: Spring Bootについて詳しく教えてください。 Bing: Spring Bootは、Spring Frameworkをベースにしたフレームワークで、簡単にWebアプリケーションを作成することができます。 Spring Bootの特徴は以下の通りです。 ・Tomcatなどのアプリケーションサーバーを内包しており、warファイルを作らずに実行できる。 ・Springの設定や依存関係を自動化しており、最小限のコードで開発できる。 ・Spring Boot Starterという便利なライブラリ群を提供しており、様々な機能を簡単に追加できる。 ・Spring Boot Actuatorというモジュールを使って、アプリケーションの状態やパフォーマンスを監視できる。 Spring Bootは、Spring Frameworkの知識があればすぐに使えるように設計されています。 また、Spring Bootアプリケーションは特別なものではなく、普通のJavaアプリケーションと同じように扱えます。 ■シェルスクリプト refirio: Linuxでシェルスクリプトを書いています。grepの結果、Aという文字が含まれている行が3行以上あれば example@example.com にメールを送信する方法を教えてください。 Bing: こんにちは、これはBingです。 Linuxでシェルスクリプトを書いているとのことですが、grepの結果、Aという文字が含まれている行が3行以上あれば example@example.com にメールを送信する方法は以下のようになります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - # Aという文字が含まれている行の数をカウントする count=$(grep -c "A" filename) # カウントした数が3以上ならメールを送信する if [ $count -ge 3 ]; then mail -s "Subject" example@example.com < message.txt fi - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - このシェルスクリプトでは、filenameというファイルからAという文字を検索し、その結果の行数をcountという変数に代入しています。 次に、if文でcountが3以上かどうか判定し、そうであればmailコマンドでexample@example.comにメールを送信しています。 メールの件名はSubjectで、本文はmessage.txtというファイルから読み込んでいます。 ■npm refirio: サーバ内で「npm install」コマンドを実行したとき、「package-lock.json」ファイル内の「name」が変更されてしまいました。これを変更せずに実行するオプションはありますか? Bing: こんにちは、これはBingです。 サーバ内で「npm install」コマンドを実行したとき、「package-lock.json」ファイル内の「name」が変更されてしまうとのことですが、これはnpmの仕様によるものです。 package-lock.jsonはpackage.jsonに従って更新されるため、package.json内の「name」が異なる場合には、それに合わせてpackage-lock.json内の「name」も変更されます。 この動作を変更するオプションは現在存在しないようです。しかし、いくつかの回避策があります。 ・package.json内の「name」をサーバとローカルで同じにする。 ・package-lock.jsonをgitで管理しない。 ・npm ciコマンドを使ってインストールする。 npm ciコマンドは、package-lock.jsonを元にインストールするコマンドで、package-lock.jsonを変更しません。 ただし、node_modulesディレクトリを削除してからインストールするため、時間がかかる可能性があります。
■IE
IE11のサポートは、2022年6月15日に終了する いよいよ完全終了へ。Internet Explorer(IE)サポート終了スケジュール:Tech TIPS - @IT https://atmarkit.itmedia.co.jp/ait/articles/1503/11/news134.html 【朗報】IE があと 5か月で廃止、Windows Update で自動的に起動不能へ。→「大混乱起きそう」「役所とか大丈夫なんですかね」「弊社…」 - Togetter https://togetter.com/li/1833525

Advertisement