Tampermonkey

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

「onclick」イベントを設定すると持続するJavaScriptで「onclick」イベントは良く使われます。例えば指定した要素をクリックしたら背景色が付くといったイベントを設定すると、スクリプト終了までその機能が持続します。関数やメソッドは、呼んだ時に1度だけ実行されるものが多いですが、イベントの指定をすると何度でも実行されます。あたりまえと思って扱っているイベントの設定ですが、これをキャンセルする必要が出て来ると、どうしたものかと迷います。これはけっこう嵌る問題です。

「@match」パラメーターはワイルドカード「*」に対応 「Tampermonkey」の「@match」パラメーターは、スクリプトを動作させるページを選択する重要なパラメーターです。このパラメーターは複数行に分け、つまり複数の「URL」のページに対して設定する事が出来ます。しかし、例えばアメブロの「記事一覧」のリストページで動作させたいが、一般のブログページでは動作させたくない場合、「@match」パラメーターは正規表現が使えませんが、ワイルドカード「*」が使えます。▪ブログ

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

「Pause+Shift➔Fn」のショートカットを追加「ElementsPalette」は編集入力を援助する幾つもの小機能を纏めたツールです。複数の機能を「Pause➔Fn」のショートカットで素早く選択でき、編集の機能と能率がとても向上します。ショートカットは秀逸 このツールのショートカットは独特です。「Pause」キーを押して「Fn」キーを押す（正確には同時押しではない）方式で、この仕様は一般に多用される「Ctrl+Fn」などのショートカットに被りません。しかし、これま

日本語字幕に切替える方法 YouTube動画プレーヤーは、英語の音声を自動で拾って英語の字幕を表示する機能があります。更に、この字幕を自動翻訳する機能があり、動画がおうよそ何について言っているのかを理解する手助けになります。ただ、メニュー階層を幾つか指定する必要があり、翻訳先の選択で日本語は長いリストの最後になるので、日本語に設定するのが手間です。おまけに、動画ごとにこの指定操作が必要で、かなり大変。ネットを調べると、この設定をしてくれる拡張機能がある様なのですが、こんなの「Tam

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

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

「 AmbTVOnAir」は「AbemaTV」サイトの「TV放送型」の動画画面で機能する、CMの自動ミュート機能です。このツールは「 AmbTVComfy」のサブツールで、両方を同時に併用できます。 「AmbTVOnAir」操作マニュアルver.0.9以降に対応2024.06.21更新CMのミュート設定  ミュート機能の設定はCookieに登録され、動画画面を開く度に、保持期限がその時点から30日間に更新されます。（30日を超える

設定パネルのデザイン更新設定パネルのデザインを更新しました。機能はver.0.8から変化はありません。パネルのデザインは、「音声ミュート」が全てのミュート機能の「有効/無効」を決める仕様だと、なるべく自然に判る様にしました。また操作マニュアルを纏めて、パネルタイトル部の「」ボタンでアクセスできる様にしました。「 AmbTVOnAir」の操作マニュアルこのツールは「 AmbTVComfy」のサブツールで、両方を同時に併用できます。「ミュート」

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

デフォルトデザインの「HOME」画面にも対応 「HOMEWatch」は、「AmebloManagement」のアレンジ下の「HOME」画面に配置する事がお勧めです。デフォルトの「HOME」画面のデザインでは、ユーザーのプロフィールアイコンに年度の表示が重なるかも知れません。この点が少し気になっていたのですが、「年度」の表示は省略しても良い場合が多いと思われるので、下の3種の表示デザインを選択出来る様にしました。「HOMEWatch」のデザインを切り換える ◎全てを表

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

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

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

「iframe」の再表示でスクリプトが無効になる前ページのスクリプトは、「通常表示」の編集枠が最初に表示された時には、正しく動作しました。しかし「HTML表示」を一度開き「通常表示」に戻ると、もはや全くスクリプトが実行されなくなります。下は「通常表示」から「HTML表示」タブを押して移動した瞬間のHTMLです。青枠の「#cke_1_contents」の中に、赤枠の「textarea」が表示されようとしています。下は、逆に「通常表示」タブを押した直後で、「#cke_1_con

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

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

「クラス名」が再び変更されました「エンドロール」で次の動画への案内をする「お勧め動画表示」を、このツールで調べ始めて1ヵ月ほどになりますが、昨日3度目のクラス名の変更がありました。次々と変更されているのは、シリーズ動画の最新話の動画サムネイル付きのタイプです。監視要素とボタンのクラス名 「エンドロール機能」の動作は、この案内表示の取得が生命線です。取得に使用する「監視要素」「キャンセル」「次のエピソード」のクラス名を、前日に続き、もういちど纏めなおしました。

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

「AmbTVComfy」は「AbemaTV」の閲覧を快適にするツールです。このツールの主要な機能は動画プレーヤーの機能拡張ですが、動画サムネイルの拡大表示機能も合わせ持ちます。 「AmbTVComfy」操作マニュアルver.4.1以降に対応2024.06.25更新「AmbTVComfy」の常駐「AmbTVComfy」は「常駐型」のツールです。「Tampermonkey」にインストールしてダッシュボードで常に「ON」にしておくと、「AbemaT

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

「エンドロール機能」の監視対象の変遷「AmbTVComfy」は、AbemaTVサイトの「書庫型」の動画ページで複数の機能を提供します。その中で「エンドロール機能」は、シリーズ動画を連続した閲覧を快適にします。「エンドロール」は、動画本編の最後に制作関連のスタッフや使用楽曲等を表示するあの部分です。現在のAbemaTVでは、通常「エンドロール」の入口と、エンドロール（次編の予告を含む）の最後の2ヵ所で、次の動画を案内する「案内パネル」が表示されます。ただしエンドロールの後に、

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

〔お知らせ〕AbemaTVはシステム更新が早く、動画エンドロールの「キャンセル/▶」のパネルが更新されました。現在対応版のテスト中で、近日にアップロード出来ると思います。ツール更新は、次記事のバージョンがお勧めです。「ワイド表示」の影響を抑止一般の「書庫型」の動画ページのプレーヤーは、「サブウインドウ表示」「ワイド表示」「フルスクリーン表示」の3種の表示形式が選択できます。「AmbTVComfy」を使用すると、おそらく「サブウインドウ表示」「フルスクリーン表示」しか

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