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


# 何を作ったか

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

![スクリーンショット 2021-01-26 7.14.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/91d31e01-c371-41b7-4d67-a8a2fe1e9444.png)

# なぜ作ろうと思ったか
![computer_family.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/ac40f77f-e400-e560-0e4e-545092ba5e0e.png)

- 子供がポケモンに興味を持って毎日図鑑を見てくれるのはいいのですが、毎日、「このポケモンの名前はなに？」って聞かれてくる
- ポケモンの名前をひたすら読まされるのはとても大変（本当に大変なんですよ、、、。）
- しかし子供は、ひらがなは読める、だが図鑑のポケモンの名前はカタカナ
- だったら、カタカナにひらながでルビを振ってあげたら解決するんじゃ！閃きました
- まずどうしたら他者の作ったページを手元だけで変えられるか考えた結果、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

``` javascript
"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

``` 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ディレクトリへ出力するということだけ記載してあります。

```
> tsc
```


# 使い方
1.調べたいポケモンページにアクセス（ここではフシギダネ）　
https://zukan.pokemon.co.jp/detail/001　
![スクリーンショット 2021-01-26 5.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/31714f59-a85b-a853-b572-4f89fe233916.png)


2.以下からコードをおとしてくる


- https://github.com/zukaishi/pokemon_zukan_ruby

3.chrome から chrome://extensions/　を起動 
chrome -> 「環境設定」　-> 「拡張機能」 右上部にある、「デベロッパーモード」をONにする
 「パッケージ化されていない拡張期のを読み込む」で、落としてきたコード内にある、chrome_pakageディレクトリを選択
![スクリーンショット 2021-01-24 17.00.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/ba7332a3-bed7-8654-06fc-a155cc1c2b50.png)

4.再度、フシギダネのページでブラウザリロード　https://zukan.pokemon.co.jp/detail/001　　
![スクリーンショット 2021-01-24 16.56.44_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/453161f3-1a51-ae7b-6287-cdcf6d508bb4.png)

# 結果どうなったか

- 子供は一人でポケモンを調べることができ、僕はその時間で別のことができるようになって
- 子供は前よりポケモンに興味が湧いて、今度はしりとりをやろうということになって
- 結果、しりとりに時間を割かれることになりました。（泣
- 子育てにおいて、同じ悩みを持たれている方がいらっしゃいましたらぜひ活用してみてください。
- 一つの課題をクリアすると、次の課題が湧いてくることを実感できると思います。

![picnic_shiba_family_girl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188508/620b8337-14c4-48e3-f779-2d2ba37d88f0.png)

# 参考
https://qiita.com/mimoe/items/855c112625d39b066c9a
https://qiita.com/hibikikudo/items/dd9936cdd8108dc446d4

以上です。
よろしくお願い致します。