refirio.org

ブラウザ操作

■初期設定 「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にドラッグ＆ドロップすると再生された。 ■マウスジェスチャー 長く「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拡張機能によるページ操作

■Greasemonkey GreasemonkeyはFirefox用の拡張機能。 任意のページ閲覧時、JavaScriptをさせることができる。 初めてのGreasemonkey #Greasmonkey - Qiita https://qiita.com/toshihirock/items/1b8cc54f732de49bc836 ■Tampermonkey TampermonkeyはChrome用の拡張機能。 Greasemonkeyを意識して作られており、スクリプトも互換性がある。 Tampermonkey - Chrome ウェブストア https://chromewebstore.google.com/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=ja 【初心者向け】Tampermonkey で JavaScript に触ってみよう https://zenn.dev/awtnb/articles/9f4d75f1672f90 UserScript（ユーザースクリプト）の概要と使い方 https://shukapin.com/blog/how-to-use-userscript UserScript #JavaScript - Qiita https://qiita.com/aoirint/items/3467427c28fe71d3cd57 ■Chrome拡張機能 専用の拡張機能として作ることで、他の拡張機能に依存しないスクリプトを作ることができる。 ただし拡張機能自体が徐々に仕様変更されていくので、それに追随する必要はある。 Google chrome Extension(v3)でユーザスクリプト/ユーザスタイルシートを使いたい #userscript - Qiita https://qiita.com/tkmry/items/47581e4a656d5b81387e Chrome拡張機能の開発をサクッと理解する https://zenn.dev/irsc/articles/walk-through-chrome-extension 以前Chrome拡張機能を作成したときのメモが以下にある。 Dropbox\Chrome拡張機能。 実際にリリースしているものとして以下がある。 かなり昔のマニフェストバージョンのままかと思ったが、一度作り直した際に「"manifest_version": 3」としている。 Close Right Tabs - Chrome ウェブストア https://chromewebstore.google.com/detail/close-right-tabs/ahdnifnjcpeklloobmgkkidkaedkodii?hl=ja Chrome拡張機能の具体的な作成手順については、後述の「Chrome拡張機能の作成」を参照。

Chrome拡張機能の作成

以下を参考に進めてみる。 とほほのChrome拡張機能開発入門 - とほほのWWW入門 https://www.tohoho-web.com/ex/chrome_extension.html ■Hello World 以下で作業する。 C:\Users\refirio\Chrome\HelloWorld 以下のファイルを作成する。 manifest.json - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { "name": "Hello World", "description": "これは拡張機能のサンプルです。", "version": "1.0.0", "manifest_version": 3, "action": { "default_popup": "popup.html" } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - popup.html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>ハロー！</p> </body> </html> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Chromeで「chrome://extensions」を開き、ページ上部の「パッケージ化されていない拡張機能を読み込む」をクリック。 これで拡張機能が追加され、追加した拡張機能のアイコンをクリックすると popup.html の内容がポップアップで表示される。 ■ショートカットキーを設定する manifest.json - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { "name": "Hello World", "description": "これは拡張機能のサンプルです。", "version": "1.0.0", "manifest_version": 3, "action": { "default_popup": "popup.html" }, "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+H", "mac": "MacCtrl+Shift+H" }, "description": "Run extension." } } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Chromeで「chrome://extensions」を開き、対象の拡張機能の右下に表示されている更新ボタンを押す。 「再読み込みされました」と表示される。 これで「Ctrl + Shift + H」のショートカットで popup.html の内容がポップアップで表示される。 ■アイコンを設定する 今回は 60px×60px のサイズでアイコンを作成。 作成後、16px×16px のサイズで icon/16_16.png に書き出した。 manifest.json - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { "name": "Hello World", "description": "これは拡張機能のサンプルです。", "version": "1.0.0", "manifest_version": 3, "action": { "default_popup": "popup.html", "default_icon": "icon/16_16.png" }, "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+H", "mac": "MacCtrl+Shift+H" }, "description": "Run extension." } } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 拡張機能を更新すると、アイコンが反映される。 ■スクリプトを実行する manifest.json - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { "name": "Hello World", "description": "これは拡張機能のサンプルです。", "version": "1.0.0", "manifest_version": 3, "permissions": ["activeTab", "scripting"], "action": { "default_popup": "popup.html", "default_icon": "icon/16_16.png" }, "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+H", "mac": "MacCtrl+Shift+H" }, "description": "Run extension." } } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - popup.html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { width: 100px; } </style> </head> <body> <p>ハロー！</p> <button id="exec">実行</button> <script src="popup.js"></script> </body> </html> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - popup.js - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - document.getElementById('exec').addEventListener('click', async () => { let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: onRun, }); }); function onRun() { document.body.style.backgroundColor = '#fcc'; } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 拡張機能を更新すると、ポップアップに「実行」ボタンが表示される。 クリックすると、ページの背景色が変わる。 ■オプション設定画面を作成する manifest.json - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { "name": "Hello World", "description": "これは拡張機能のサンプルです。", "version": "1.0.0", "manifest_version": 3, "permissions": ["activeTab", "scripting", "storage"], "options_page": "options.html", "action": { "default_popup": "popup.html", "default_icon": "icon/16_16.png" }, "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+H", "mac": "MacCtrl+Shift+H" }, "description": "Run extension." } } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - options.html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .color { margin: .5rem 0 1rem; padding: .5rem 1rem; color: #666666; border: 0; } </style> </head> <body> <p>オプション</p> <div> <button class="color" style="background: #fcc">ピンク</button> <button class="color" style="background: #cfc">グリーン</button> <button class="color" style="background: #ccf">ブルー</button> </div> <div id="message"></div> <script src="options.js"></script> </body> </html> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - options.js - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - document.querySelectorAll('.color').forEach((elm) => { elm.addEventListener('click', (e) => { var options = { colorValue: e.target.style.backgroundColor, colorName: e.target.innerText } chrome.storage.sync.set(options); document.querySelector('#message').innerText = `色「${options.colorName}」が選択されました。`; }); }); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - popup.js - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - document.getElementById('exec').addEventListener('click', async () => { let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: onRun, }); }); function onRun() { chrome.storage.sync.get(null, (options) => { document.body.style.backgroundColor = options.colorValue; }); } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 拡張機能を更新すると、ポップアップに「実行」ボタンが表示される。 クリックすると、ページの背景色が変わる。 ※何らかの色を選択するまで色情報が無いので、初期値を持たせておくと良さそう。

Chrome拡張機能の作成（2021年ごろに調べた旧メモ）

■拡張機能の作成 Chrome拡張機能の作り方。誰でもかんたんに開発できる！ https://original-game.com/how-to-make-chrome-extensions/ Google Chrome Extensionの作り方 第１回 〜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 background.js また、以下にアイコン画像を配置する。 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」パネルを使ってみた | DataCurrent https://www.datacurrent.co.jp/column/chrome-devtools-recorder_20220421/ Chromeに入るRecorder機能の利用と注意点 - 虎の穴開発室ブログ https://toranoana-lab.hatenablog.com/entry/2021/11/18/121835 ■実際に試したメモ F12キーを押して開発者ツールを開く。 さらに「ツール右上の3点マーク → その他のツール → レコーダー」へ移動。 ここから操作の記録と再現ができる。 「新しい記録を作成」ボタンを押す。 必要に応じて記録名などを入力し、「記録を開始」ボタンを押す。 ブラウザを操作する。 操作を終えたら「停止」ボタンを押す。 「リプレイ」ボタンを押すと、操作が再現される。 少し使ってみて、以下については気になった。 Seleniumでの自動テスト代わりに使うことは不可能では無さそうだが、自動テスト用に操作方法を考えるなどの対応は必要かもしれない。 ・日本語の入力は、変換時の挙動がおかしいような。半角英数字のみの入力が好ましいかもしれない。 ・マウスオーバーがあると、上手く動かないみたい。 ・「パスワードを変更してください」ダイアログが表示されると、操作が中断されているみたい。

プッシュ通知

※未検証。 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