Help us understand the problem. What is going on with this article?

Azure用語に対応するAWS用語を表示するユーザースクリプト

はじめに

AWSは知っているがAzureはよく知らない、という状態でAzureの勉強をするとき、「この機能はAWSで言うところのこれ」という情報があると、すんなり頭に入ってきたりします。
公式の比較表を見れば対応はわかるのですが、いちいち見に行くのは面倒なので、ユーザースクリプトにしてみました。

作ったもの

できること

以下のように、ページ内のAzure用語にカーソルを合わせると、対応するAWS用語がポップアップされるようになります。用語は比較表や、こちらの記事から拾いました。
screenshot_after2.jpg

Qiitaと、ここのような、MSのドキュメントサイト配下のページで動作します。

インストール

Tampermonkeyなどの、ユーザースクリプト実行用アドオンを入れた上で、Greasy Forkからインストールします。インストール後に、以下にカーソルを合わせてポップアップが出てきたら成功です。

テスト
Azure Marketplace

仕組み

わざわざ説明するほどのものでもないのですが、一応、以下のような仕組みにしています。
※ソース全体はこちら

・用語の対応はあらかじめ定義しておきます。

  const termMappings = [
    { 'azure': 'Azure Marketplace', 'aws': 'AWS Marketplace' },
    { 'azure': 'Azure Machine Learning', 'aws': 'SageMaker' },
      // …
   ];

こちらを参考に、ポップアップ用のスタイル定義も作っておきます。

  let style = document.createElement("style");
  document.head.appendChild(style);
  let sheet = style.sheet;
  sheet.insertRule("div.tooltip {display:inline; border-bottom:solid 1px #87CEFA}", 0);
  sheet.insertRule("div.tooltip span {display:none; padding:5px; margin:10px 0 0 0px;}", 1);
  sheet.insertRule("div.tooltip:hover span {display:inline;  position:absolute; border:1px solid #CCC; border-radius:5px; background:#F7F7F7; color:#666; font-size:12px; line-height:1.6em;}", 2);

・あとはbody全体を走査し、テキストノード(nodeType=3)であれば、対応表と突き合わせてヒットした部分をポップアップ用のhtmlに置換しています。

  // ヒットした部分を加工する
  let replaceTermString = function (str) {
    for (let i = 0; i < termMappings.length; i++) {
      let index = str.indexOf(termMappings[i].azure);
      if (index >= 0) {
        let beforeStr = str.substring(0, index);
        let afterStr = str.substring(index + termMappings[i].azure.length);
        return replaceTermString(beforeStr)
          + '<div class="tooltip">' + termMappings[i].azure + "<span>" + termMappings[i].aws + '</span></div>'
          + replaceTermString(afterStr);
      }
    }
    return str;
  }

  // 子要素を走査し、テキストノード(nodeType=3)であれば、書き換えを行う
  let replaceTerm = function (r) {
    let children = r.childNodes;
    let l = children.length;
    for (let i = 0; i < l; i++) {
      let child = (children[i]);
      if (child.nodeType == 3 && !/^[ \n\t]+$/.test(child.nodeValue) && child.nodeValue.length > 0) {
        let newStr = replaceTermString(child.nodeValue);
        // 書き換えが発生した場合はDOMを変更
        if(newStr !== child.nodeValue){
          let newSpan = document.createElement("span");
          newSpan.innerHTML = newStr;
          r.insertBefore(newSpan, child);
          child.remove();
        }
      } else {
        replaceTerm(child);
      }
    }
  }

replaceTerm(window.document.body);

ユーザスクリプトを使って、ページ内の特定文字列を任意のhtmlに書き換えたい場合に応用できる書き方かと思います。

おわりに

Azure学習の一助になれば幸いです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした