RPAと人が協働する、Attendedなシナリオを運用中です
ユーザーが見やすいように工夫を重ねてきました
今回はChromeで指定要素をスケール、拡大/縮小しました
最近の文字は小さくて困りますよね
Windowsキー＋「＋」とか、OSの設定でディスプレイの拡大率を125％とか150％にすることがあるかたにも興味を持っていただけると思います
高齢化社会向けに、わたし自身の備忘録も兼ねてお裾分けです
フォーカスやハイライトのスレッドをすでにご覧になってるかたは③のスケールからどうぞ
　
　
見やすくする工夫
　
　
① フォーカス（復習）
　
IE時代のオレンジ枠が恋しいかた向け
フォーカス箇所のハイライト
ブラウザの機能を使ったハナシ

https://winactor.com/questions/question/chromeでクリック箇所をハイライトしてみた/

見栄えはフォーカスの語感が近い
ダイレクトで有効にする既製ライブラリ等は見つけられず
最新のWinActorならスクリプトを加工して攻めたい

https://winactor.com/questions/question/winactorからjavascriptを実行する方法/

　
　
② ハイライト（復習）
　
JavaScriptでダイレクトにハイライトしてみたハナシ

https://winactor.com/questions/question/フレームを可視化してみた/

これぞハイライト
使ってるコード

document.getElementById("TopLink").style = 'background-color: khaki';

　
ChromeでYahoo! JAPANを開く
Ctrl＋Shift＋Jでコンソールを開く
カーソルの点滅位置にペーストしてEnter
検索ボックスの直下、トップリンクがハイライトされる
F5でリロードするとハイライトなしの状態に戻る
　
ダイレクトに効果を得るために使うのは「属性値の設定」や「プロパティ値の設定」
最新のWinActorならスクリプトを加工して「クリック」と「マウスイベント」をがっちゃんこ

https://winactor.com/questions/question/「マウスイベント」・「マウス移動」ライブラリ/

　
IE時代のオレンジ枠を忠実に再現するなら、、

document.getElementsByClassName('single-headline')[0].style="border: solid 4px orange;";

このスレッドのタイトル部分です
コンソールに貼り付けてEnter
　
クリック等の瞬間だけハイライトさせたいなら、スクリプト内で直列に続ける
ハイライト、クリック、ハイライト戻す（border: none）
　
リファレンス

任意の要素(ブロックなど)の背景色を動的に変更する方法 - JavaScript TIPSふぁくとりー
https://www.nishishi.com/javascript-tips/element-bgcolor.html

【HTML】borderで枠線のスタイルや太さをカスタマイズする方法まとめ | ポテパンスタイル
https://style.potepan.com/articles/20592.html

　
　
③ スケール（初出し）
　
同じくYahoo! JAPAN
コンソールでこれを実行

document.getElementById("TopLink").style.transform = "scale(2, 2)";

トップリンクが2倍に拡大される
0.5とかでも動く
　
ズームやルーペも近い語感
拡大/縮小の両方向で使える
やっぱりscaleが名が体を表してる
　
リファレンス

【JavaScript】要素を拡大、縮小させる方法 | CODE CLUB965
https://codeclub965.com/?p=2406

　
優しめの段取り

Yahoo! JAPAN
https://www.yahoo.co.jp/

検索ボックスの直下
9/20現在、こんな3つのリンク

もう買い物した？ 条件を満たすと9/22・23がお得
「お彼岸」と「お盆」の違い、知ってる？
1万円相当あたるスクラッチに挑戦

これの実行で

document.getElementById("TopLink").style.transform = "scale(2, 2)";

このタグの末尾に

<section id="TopLink" class="_2Pb7ROIJrC3Wj9bPxN4J7D ult__mods">

style属性と値が追加された

<section id="TopLink" class="_2Pb7ROIJrC3Wj9bPxN4J7D ult__mods" style="transform: scale(2, 2);">

その結果、section要素が縦横2倍になった
　
今のところ、クリック、値の取得、値の設定等、主なアクションも安定してます
Chromeの制御でネガティブな影響があれば続報します
　
　
id以外のgetElement〜の書きかたは、適宜分かりやすいリファレンスを当たる

https://www.google.com/search?q=getElementBy

Copy JS Path / JS Path のコピーで取得したquerySelectorも使える
　
今回のパトロールで、idに加え、classも改めて学べた

HTMLのclass属性とid属性について | 職業訓練のエンプロス｜姫路・加古川・明石・神戸の就職に強い職業訓練校
https://emplos.jp/webdesign/id-class/

　
　

高齢化社会向けシリーズ

https://winactor.com/questions/question/シナリオ実行中にブラウザのズームを変更したい/

https://winactor.com/questions/question/なんでもランチャーを作ってみた/