More than 3 years have passed since last update.

【育児負荷低減の為のエンジニアリングその1　ポケモン図鑑編　JavaScript + Chromeアドオン】

Posted at 2021-01-26

何を作ったか

chrome上で、ひらがなしかまだ読めない子供がポケモン図鑑を調べられるようになるものを作りました
https://zukan.pokemon.co.jp/ こちらの公式サイトで、カタカナで書かれたポケモンの名前の上にひらがなでルビが振られます。
以下が、使用前と使用後の動作の違いです

なぜ作ろうと思ったか

子供がポケモンに興味を持って毎日図鑑を見てくれるのはいいのですが、毎日、「このポケモンの名前はなに？」って聞かれてくる
ポケモンの名前をひたすら読まされるのはとても大変（本当に大変なんですよ、、、。）
しかし子供は、ひらがなは読める、だが図鑑のポケモンの名前はカタカナ
だったら、カタカナにひらながでルビを振ってあげたら解決するんじゃ！閃きました
まずどうしたら他者の作ったページを手元だけで変えられるか考えた結果、chromeアドオンに何かあればいいなと思い
早速chromeのアドオンを調べてるとそういった類のものはなし、じゃあ自分で作ってやろうというところから開発することに決めました。

どのように実現したか

実際に作成したコードはこちらにソースをあげてあります。　https://github.com/zukaishi/pokemon_zukan_ruby
chrome_package配下参照
僕の場合typescriptを書いてから変換させましたが、JS変換してもほとんど変化ありません

ファイル構成

chrome_package
 ┗ index.ts
 ┗ manifest.json
src
 ┗ index.ts
tsconfig.json
README.md

chrome_package/index.js

"use strict";
['name', 'subname', 'name__loadItem', 'label__detail-features-type js-btn-resetPage'].forEach(function (value) { return elementReplace(document.getElementsByClassName(value)); });
function elementReplace(element) {
    for (var i = 0; i < element.length; i++) {
        var str = element[i].innerHTML;
        element[i].innerHTML =
            '<ruby>' +
                str +
                '<rt>' +
                katakanaToHiragana(str) +
                '</rt></ruby>';
    }
}
function katakanaToHiragana(str) {
    return str.replace(/[\u30a1-\u30f6]/g, function (match) {
        var chr = match.charCodeAt(0) - 0x60;
        return String.fromCharCode(chr);
    });
}

chrome_package/manifest.json

{
    "manifest_version": 2,
    "description" : "pokemon zukan ruby",
    "name": "write ruby on pokemon zukan",
    "version": "1.0",

    "content_scripts": [
        {
            "matches": ["https://zukan.pokemon.co.jp/*"],
            "js": ["index.js"]
        }
    ]
}

ローカルに落としてtypescirptからコードをいじる場合は、カレントディレクトリ上で下記を実行してください。
ここではtsconfig.jsonの中身は触れませんが、実行することで、src/の中身を、typescript -> javascirptへ変換し、chrome_packageディレクトリへ出力するということだけ記載してあります。