tampermonkey

キーボード入力をスクリプトに代行させるブラウザ上で実行されるアプリ（アメブロの編集画面や管理画面等）に対して、「キー入力した」と同等の事を代行させることがJavaScriptでは可能です。スクリプトのプログラムは、ユーザーのブラウザ上の殆どの操作を、代行する事が可能と思われます。悪用すれば危険な仕様と誰も想像出来ますが、実際にその様です。しかし、ネットに多くの情報がありますが、半分以上の情報は「使えない」という壁に当たりました。そこには、旧いIEの仕様の問題や、FirefoxC

部分的なリロードを実現する「Ajax」ネットのページは、最初は「URL」を指定してページを開きます。それが初めて開いたページなら、そのアドレスからページを構成する様々なデータを取得して、ページ全体が出来上がる様子を、ほんの僅かの時間ですが見守る形になります。一方ブログページの場合は、ちょっと違います。ページのかなりのデータは既にPC側にダウンロードされていて、ユーザーのページャー操作で記事本文の部分等が差し換えられて、ページが完成します。この「ページ上の一部を差し換える」技術は

私の「Tampermonkey」の使用状況 私の場合ですが、「アメーバブログ」ページでは、私自身が制作したスクリプトコード（ツール）ですが、「8個」程度を常時起動させています。このツール群は下の様なもので、私には毎日必要な「常駐型ツール」です。その他に、必要があれば起動する「非常駐型ツール」や、実験的な「テストコード」など20以上をインストールしていますが、それは通常はOFFにしています。私の様な環境は特殊と思いますが、これだけスクリプトコードを積んでいても、これ

「補助ミュート機能」の再点検JavaScriptはしたたかに動作するので、エラーが致命的でなければ表面上は無問題に見えます。こちらは何もしていないのにページ上でエラーが頻発していて、これで問題ないのかと思ってしまう事もあります。やはりノンエラーのページが理想です。スクリプトエラーが「溜まる」ことで、しまいにページ上のスクリプト動作の問題になる場合があるのでは？特別な条件が重なった時に、何度もエラーを出していた処理が、他に影響するエラーのきっかけにならないと断言できないのでは。

特定のページでJavaScriptを実行する拡張機能自作のスクリプトコードを任意の特定ページで実行させるには、ブラウザがChromeの場合は、前ページの様な拡張機能を自作し、ChromeWebStoreに登録する必要が有ります。しかし、修正や拡張の可能性があるコードを置き、再び更新を加える場所としては、ウェブストアはなはだ不適当です。そこで調べると、自作スクリプトを自分の為に利用するベース環境としての拡張機能が幾つかある事が判りました。その中で、多くのユーザーが利用し、信

まだまだ知らない事だらけ「BadIineMute」や「RankingBlocker」は、ローカルストレージに「排除リスト」を保存しています。この様なスクリプトツールの基本動作は、何処かにデータを登録し、それを使ってブラウザ表示をフィルターする事です。その保存先は安定していて、ブラウザから使い易い必要があります。ローカルストレージはとても適した保存先で、これらのスクリプトに限らず、今後にユーザースクリプトを考案していく場合に、必ず候補になるデータ記憶機能です。今回、「管理トップ

DOSという名前今頃はDOSと言えば「DoS攻撃」の事になりそうですが、昔は「MS-DOS」を意味するものでした。C言語の初歩的なプログラムを作っていた時代、フロッピーディスクに結果を保存出来た時には、画面のやりとりだけのプログラムから、ワンランク上に進んだ実感がありました。その時に、OSに「DiskOperatingSystem」と言う名前が付いている意味に気付きました。記憶媒体に記録する事は、今では当たり前の事ですが、コンピューターにとってそれが可能になった事は、月着陸の様に大き

SVGの「path」コード SVGのアイコンや画像を扱う様になりましたが、扱う上で一番問題になるのは、コードの文字数が増える事です。それだけを注意すれば、大変有難い機能です。SVGのコードは、ベクトル画像の設計図となる数値が「path」の「d属性」としてズラズラ並びます。これを精密にすれば線や辺縁が綺麗になりますが、有る程度簡素化しても、アイコン等の余り拡大しない用途なら充分です。従って、どこまで間引くかが、SVG画像を自製する場合のポイントになります。ネットを調べると、定番

〔追記〕2020.01.252020年にChromeベースの新Edgeがリリースされ、StylusをはじめとするChrome拡張機能が新Edgeで利用可能になりました。この記事は旧Edgeの環境を対象とした記事です。新EdgeでのChrome拡張のインストールや、ユーザーCSSの利用に関しては、以下のページを参照ください。新しいEdgeにChrome拡張機能をインストールする 「Tampermonkey」のユーザーCSS機能を試す以前よりEdge版「Stylus」

ユーザーのページ変更操作を知る ユーザーが閲覧しているアメーバのブログページをページャー等を押して移動した時、この「ページが変更された」事を知る方法は幾つか考えられると思います。例えば「URL窓」の内容はページ移動で変化しますから、これを取得してページが変更された事を察知できるはずです。こういったコードの作成は、これまで余り深く考えていなかった問題でした。「MutationObserver」は万能ではない ページ上の要素の変化に合わせて動作するプログラムを作るの

表示したページ全体を拡大表示する JavaScriptからブラウザの拡大率を直接コントロールするAPIは、現在のところ用意されていない様です。（注1）しかし、「transform」プロパティを使う事で、CSSでブラウザの拡大率の変更と同様の効果を得る事が可能です。画面全体の拡大については、IE専用の「zoom」のコードがネット上に多く、今回のテストをするまで半信半疑だったのですが、結果は上手く行きました。CSSコードは簡単で、以下の様な設定です。確認した限りでは、Chrome/

Win10のタッチキーボードで入力出来ない「異体字」の絵文字アメブロの記事を見て歩いていたら、警告マークの「⚠️」を使っている方がいました。私は「エッ！」と思ったのですが、Win10タッチキーボードで入力すると文字に色が無い「⚠」が表示され、これまで何度も使うのを諦めていたからです。画像を使ったアメブロ絵文字の場合も有り得るのでDevToolsで調べると、これは真正の「絵文字」（フォント）でした。アメブロの「編集画面」にコピーすると、ちゃんとこの記事の通りにカラーで表示されます。

絵文字のデザイン上での利用での問題Win10絵文字はカラフルなデザイン文字を「フォント」として扱えるので、スクリプトのツールやユーザーCSS（スタイルシート）で、デザイン上で色々と利用できます。例えばアイコン等に「✅/🟩」を使えば、デザインに要するコードが簡素化できます。さて、前ページの「AmebaSearchRepeat」で「⏏」（イジェクト）の絵文字を使ってアイコンを作りましたが、Edgeで動作をチェックすると思わぬ表示になり、しばし悪戦苦闘しました。Chromeでは

「MutationObserver」とは ページの閲覧者側で動作するJavaScript（ユーザースクリプト）の実用的プログラムでは、多くの場合に「MutationObserver」が必要になります。この機能は、ページ上の特定要素の状態を監視して、その変化を感知したら指定した関数を実行させる事に使います。現代のウェブページは、表示の一部が変化する構成のページが多く、その度にページ上に新しい要素が出現します。この新しい要素に対してJavaScriptは機能できず、いわゆる「発火しない

「pre枠」にペーストした時に出来るのか？ 先日、更新したスクリプトコードの公開記事を作り、掲載待ちになったのですが、その記事上の公開コードをコピーして他のブラウザの「Tampermonkey」に登録すると、全く動作しない事に気付きました。これはたまにある事で、危うく不良コードの掲載を事前に気付いたのですが...コードが不良になったのは、完成したスクリプトコードを「Tampermonkey」から、編集記事の「pre枠」にペーストした時に、そのコードの先頭に「\u200B」という特殊文字

ファビコンはサイトのペンダント ファビコンは色んなところでみかける、サイトを示すアイコンです。以下はWikiによる説明ですが、Wikiのファビコンは「」ですね。favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favoriteicon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したかばん語である。このアイコン画像を取得するには、以下のURLにアクセス

「Tampermonkey」のマニュアル「Tampermonkey」についての詳細なマニュアルは英語で以下のページにあります。使用方法の疑問については、私が未熟で頻出しているのですが、ブラウザの翻訳機能で比較的判り易く翻訳できるので、時々見に行く事になりそうです。Tampermonkeydocumentationページは下の様なもので、ここにはユーザースクリプトのヘッダー部分に書き込める「@match」などのパラメーターについての説明と、GM関連のAPIなどについて書

「&nbsp」は見えない文字で半角スペースに似てます「HTML表示」の編集画面を良く開く人は見慣れていると思いますが、編集画面で「Enter」を打つと「<p>&nbsp</p>」というコードが生成されます。「p要素」は段落を意味するので「<p>見えない文字</p>」で短い1行を作り、これは改行（空白行を入れる）ことになります。これをDevToolsで見ると、下の様に「<p><br></p>」と解釈される様です。良く判らないが、これがアメブロ編集画面の標準の「改行」の姿で