Edgeの「Tampermonkey」でユーザーCSSを適用する / JavaScript

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

　　　新しいEdgeにChrome拡張機能をインストールする  

 

 

「Tampermonkey」のユーザーCSS機能を試す

以前よりEdge版「Stylus」が出来ないか、あるいは同等機能のEdge版拡張機能が出来ないかと、リサーチしていました。 というのは、今までに作ってきたユーザースタイルシート（ユーザーCSS）が、Edgeで使える事を期待していたからです。

 

しかし、なかなか適当な拡張機能が見当たらない内に、EdgeのレンダリングエンジンをChromeと同等のものに変更する「Chrome化」の話題が報じられる様になりました。 最近のニュースの中には、以下のリンクの様に Chrome版「拡張機能」が使えるという情報が既に出て来ています。

 

　　　　新Microsoft EdgeはChrome拡張機能をサポート   

 

こうなれば、Chrome化したEdgeの正式リリースを待った方が早そうです。 でも、少し気になっていた「Tampermonkey」のユーザーCSS機能を試してみる事に。

 

Edge版「Tampermonkey」のインストールから始める

「Tampermonkey」は、本質はユーザースクリプトの実行環境を提供する拡張機能です。 しかしこれが「Stylus」の様にユーザーCSSを適用させる事が可能とされています。 この間、JavaScriptでCSSを適用させるコードを作りましたが、この方法を調べれば、スクリプトでデザイン適用を行う場合の参考になるはずです。

 

そして「Tampermonkey」にはEdge版があります。 上手く行けば「Stylus」のために作ったユーザーCSSを Edgeのページアレンジに使えるかも知れません。「Stylus」があればそれが良いに決まっていますが、Edgeではこの方法しかありません。 そんなわけで、先ずEdgeに「Tampermonkey」をインストールしました。

 

ユーザーCSSのサンプルは、長いコードのユーザーCSSより、シンプルな方が良いだろうと、「Ameblo Force Meiryo」を使いました。 これは、以下のページにユーザーCSSとして公開している、全てのアメブロページを「Meiryo優先にするCSS」です。

 

　　　「Ameblo Force Meiryo」の公開ページ / userstyles.org  

 

ユーザースクリプトとしてスタイルをインストールする

このページは、「Stylus」にユーザーCSSを配布するページですが、ページの下の方に「Install style as userscript」というリンクがこっそり置かれています。

 

〔追記〕2023.02

以下のページ内容は 2019年の状態で、現在は削除変更されています。

 

 

「Tampermonkey」のダッシュボードを開いた状態でこれをクリックすると、下の様に「エラー表示の画面」が出ます。（Edgeの画面です）

 

 

しかし、ダッシュボードを開くと「インストール」の確認画面が表示されています。

 

 

「インストール」を押すと再び「エラー表示の画面」が出ます。 しかし気にせずダッシュボードを開いてブラウザ画面をリロードすると、「Ameblo Force Meiryo」がスクリプトとしてインストールされています。

 

「エラー表示の画面」は意味ありげで、実際のブログページを見ても「Meiryo」のスタイルは反映していません。「ユーザーCSSをユーザースクリプトとして開く」という事が、安定した機能ではないので、小さく書かれているのでしょう。

 

インストールされたスクリプトを調べる

以下は、インストールされたスクリプトの最初の部分です。

 

// ==UserScript==
// @name         Ameblo Force Meiryo
// @namespace      http://userstyles.org
// @description       アメーバブログの全てのブログページで、ページ主要部のフォントを「メイリオ」にします。 
// @author        Ameba Blog User
// @homepage  https://userstyles.org/styles/161169
// @run-at        document-start // ❸
// @version       0.1
// ==/UserScript==
(function() {var css = ""; // ❶
// ❷
if (false || (document.domain == "ameblo.jp" || document.domain.substring(document.domain.indexOf(".ameblo.jp") + 1) == "ameblo.jp") || (document.domain == "news.ameba.jp" || document.domain.substring(document.domain.indexOf(".news.ameba.jp") + 1) == "news.ameba.jp"))
    css += [
        "/* Ameblo Force Meiryo */",
        "/* ブログ主要部のフォント指定 ********/",
        "#ambHeader,",
        ".bfl-bigfooter,",

        // 以降、CSSコードが「""」区切りに置き換えられて続く

 

コードの以下の部分は、CSS適用に関するスクリプトで参考になります。

 

◎「Ameblo Force Meiryo」の適用先は「ameblo.jp」「news.ameba.jp」をドメイン指定していますが、❷の太字部はその内容をスクリプトに置き換えています。 この部分は「ドメインを指定」した選択実行の書き方として利用できます。

 

◎ ❷の「if文」は「{}」を省いた書き方ですが、これは省略できる様です。

 

◎ ❸の「@run-at   document-start」パラメーターは、ページを開いた最速の段階でスクリプトを実行する指定で、CSS適用の目的ではこれでOKの様です。 

 

コードの本体は、❶で変数「CSS」を定義して、それにCSSコードを書き加えています。そして最後に、この「CSS」を「style」要素に書き込み、「head」の子要素に追加するという、しごくあたりまえのコードです。 以下は最後の部分です。

 

        // ここまで、CSSコードが「""」区切りに置き換えられて続く

        ".registerBtn:before {",
        "       ;color: #fff; }"
    ].join("\n");

if (typeof GM_addStyle != "undefined") {
    GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
    PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
    addStyle(css);
} else {
    var node = document.createElement("style");
    node.type = "text/css";
    node.appendChild(document.createTextNode(css));
    var heads = document.getElementsByTagName("head");
    if (heads.length > 0) {
        heads[0].appendChild(node);
    } else {
        // no head yet, stick it whereever
        document.documentElement.appendChild(node);
    }
}
})();

 

グリーン文字部は、「Greasemonkey」という「Tampermonkey」の親戚の拡張機能との互換に関係するらしく、削除可能でした。

 

◎ 最後の10行は「style」タグを生成する定型コードとして利用できます。

 

さて、なぜこの簡単なスクリプトが適用されないのかを調べると、ユーザースクリプトの最初に書かれた「@パラメーター」に「@match」が無い事に気付きました。 こういう場合「Tampermonkey」は自動的に適用先をコントロールし、その内容は各スクリプトの「設定」画面に表示されますが、これを調べると妙な事になっています。

 

 

「元のmatch」の1行目は「*.ameblo.jp」ですが、これは色々と試してみたところ、「*ameblo.jp/*」として初めてこのスクリプトが有効になります。 ちなみに、スタブロのURLは「https://ameblo.jp/staff/ ～ .html」です。 最初の「.」は明らかに不適合ですし、最後の部分は「*ameblo.jp*」では駄目の様です。

 

要するに、スタイルの適用先指定を取得してスクリプトの適用先に置き換える際に、不適切な適用先を作ってしまった様です。 そこで「Ameblo Force Meiryo」のドメイン適用先の「ameblo.jp」「news.ameba.jp」を以下の内容で「ユーザーによるmatch」に書き込みました。

 

*ameblo.jp/*
*news.ameba.jp/*

 

これを追加してスクリプトを「保存」すると、自動的に「元のmatch」は空白になります。 これでめでたく「Ameblo Force Meiryo」のスタイルが適用されました。

 

もっと直接的な修正

ユーザーCSSをスクリプトで「head」に書き込むのが「Tampermonkey」のユーザーCSS機能という事は判りました。 ただ、「Ameblo Force Meiryo」程度のシンプルなCSSでも、適用先の置換えで躓いた様です。

 

要するに適用先をこちらで書いてやるのが一番と思います。 ❷の適用先選択はOKなので、ユーザースクリプトの先頭の「@match」パラメーターを明示的に指定すれば良いはずです。（またそうなると、❷ の「if条件」は省略できます）

 

最初は、以下の「@パラメーター」を記入して、実行を確認しました。

 

// @match          *ameblo.jp/*
// @match          *news.ameba.jp/*

 

しかし、最後はもっと判り易い以下の「@パラメーター」にしました。

 

// @match          https://ameblo.jp/*
// @match          https://news.ameba.jp/*

 

これでスクリプトを保存すると、設定ページはこの部分を読み込んで以下の様に変わっていました。 これで間違いなく動作します。

 

 

適用先を正しく読み込める場合もある

「Ameblo Force Meiryo」は、最初は不適当な「@パラメーター」が自動設定されて修復作業が必要でした。 しかし、別のユーザーCSSの「Ameblo Management」を読み込んで試すと「ホーム」「ブログ画面」のデザインは最初から正常に適用されました。 自動設定が上手く働く場合は少なくないのかも知れません。

 

ただ細かくチェックをすると、「ホーム」の「新着」「未読」「既読」マークが正しく制御されていなかったり、管理画面は数ヵ所のレイアウト崩れがあったりします。 おそらくこれは、ブラウザによるCSS解釈の違いの結果と思われます。

 

以上の事から「Tampermonkey」のユーザーCSS機能の姿が見えて来ました。

 

◎「@match」パラメーターは、スクリプトとしてインストール後に、手作業で書き込むのが最善と思われる。

 

◎「@match」パラメーターを設定した場合は、シンプルなセクション構成なら適用先選択の「if条件」を削除できる。 

 

◎ CSSコード解釈のブラウザによる違いは、CSSコード部を修正する必要がある。

 

◎ 複雑なセクション構成の場合は、スクリプト化で更に見通し難くなる。 当然、単一のセクションで単純なCSSほど、スクリプト化後の修正が簡単。

 

◎「Install style as userscript」によるCSSのstyleタグへの書換えを利用すれば、スクリプト作成時に数珠繋ぎのCSSコードへ書換える作業の代用になる。

 

 

「Ameblo Force Meiryo」の「Tampermonkey版」

今回、「Ameblo Force Meiryo」をサンプルに使いましたが、ついでにスクリプトに取り込まれたコードを整理して、「Tampermonkey」専用のスクリプトコードを作りました。

 

これは EdgeでもユーザーCSSを適用できる点が利点です。 また「Tampermonkey」の動作する他のブラウザでも実用できる可能性があります。 

 

以下のコードを「Tampermonkey」の編集画面にペーストして登録する事で、アメブロの標準的なブログページのフォント指定を「メイリオ優先」に出来ます。 このスクリプトが有効な場合は、Amebloヘッダーの右端に  Meiryo  を表示します。

 

2020年 にEdge はChrome と同じレンダリングエンジンを実装し、Chromeの拡張機能を利用できる様になりました。 以下のスクリプトツールは存在価値が低くなりました。 しかし、「Tampermonkey」をインストールしているが、余り「Stylus」を利用したくない場合には、CSSスタイルの「Force Meiryo」と同等の結果を簡易に得られるので有効です。

ただし、「Stylus」のCSS適用は高速で理想的です。 このスクリプトツールを試し、そのアレンジが有効と思われたら、最後は「Stylus」とCSSスタイルの「Ameba Force Meiryo」を使用される事をお勧めします。

なお、以下のコードは、2020年10月段階で適正な動作を確認しています。

 

 

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

 

 

 

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

 

 

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白とした編集枠に 下のコードをコピー&ペーストします。

 

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

 

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

 

 

〔 Ameblo Force Meiryo 〕ver. 0.2d

 

// ==UserScript==
// @name          Ameblo Force Meiryo
// @namespace    http://tampermonkey.net/
// @version      0.2d
// @description  アメーバブログの全ブログページで「メイリオ優先」のフォント指定
// @author       Ameba Blog User
// @match        https://ameblo.jp/*
// @match        https://secret.ameba.jp/*
// @match        https://news.ameba.jp/*
// @run-at        document-start
// @noframes
// @grant        none
// ==/UserScript==


var css = "";
css += [
    "/* Ameblo Force Meiryo */",
    "/* ブログ主要部のフォント指定 ********/",
    "#ambHeader,",
    "._20TD20u0,",
    "._HQiG1eoZ,",
    "footer,",
    ".skin-page .skin-blogBody,",
    ".skinBody .skinContentsFrame,",
    ".ReactModalPortal,",
    "#frame #wrap,",
    "[data-reactroot],",
    "#mainIndex {",
    "    font-family: Meiryo, sans-serif; }",
    "",
    "/* アメーバ絵文字位置補正 */",
    "img[src*=\"emoji.ameba.jp\"] {",
    "    vertical-align: -2px !important; }",
    "",
    "img[src*=char2] {",
    "    vertical-align: -2px !important; }",
    "",
    "img[src*=char3] {",
    "    vertical-align: -3px !important;",
    "    margin-top: -4px !important; }",
    "",
    "/* twemoji位置補正 */",
    "img[src*=\"twemoji\"] {",
    "    vertical-align: -2px !important; }",
    "",
    "/* 修飾表示 文字白・背景黒 */",
    "._3kPhu1PI {",
    "    padding: 0 60px 0 0; }",
    "",
    "._3kPhu1PI::after {",
    "    content: 'Meiryo';",
    "    color: #fff;",
    "    position: absolute;",
    "    right: 8px;",
    "    top: 8px;",
    "    padding: 1px 4px 0;",
    "    font: bold 14px Meiryo;",
    "    border: 1px solid #ccc;",
    "    border-radius: 4px;",
    "    background: #000; }",
    "",
    ".-ameblo-cmnhf-register::after {",
    "    content: 'Meiryo';",
    "    color: #fff;",
    "    position: absolute;",
    "    right: 8px;",
    "    top: 3px;",
    "    padding: 1px 4px 0;",
    "    font: bold 14px Meiryo;",
    "    border: 1px solid #ccc;",
    "    border-radius: 4px;",
    "    background: #000; }"
].join("\n");

let node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
let heads = document.getElementsByTagName("head");
if (heads.length > 0) {
    heads[0].appendChild(node); }
else {
    // no head yet, stick it whereever
    document.documentElement.appendChild(node); }

 

 

〔追記〕 2022.01.24

ブログ編集画面で起動を抑止するために「// @noframes」を指定しました。