무엇을 만들었는가

크롬에서 히라가나 만 아직 읽을 수있는 아이가 포켓몬 그림을 조사 할 수있는 것을 만들었습니다.

htps : // 즈칸. 포케몬. 이. jp/ 이 공식 사이트에서 가타카나로 쓰여진 포켓몬의 이름 위에 히라가나로 루비가 흔들립니다.

다음은 사용 전과 사용 후의 동작 차이입니다

왜 만들려고 생각했는가

아이가 포켓몬에 관심을 가지고 매일 도감을 보는 것이 좋지만 매일 "이 포켓몬의 이름은 뭐야?"라고 묻는다.

포켓몬의 이름을 오로지 읽는 것은 매우 어렵습니다.

그러나 아이는, 히라가나는 읽을 수 있지만, 도감의 포켓몬의 이름은 카타카나

그렇다면, 카타카나에 히라나가로 루비를 흔들어 주면 해결한다! 섬광

우선 어떻게 다른 사람이 만든 페이지를 수중만으로 바꿀 수 있는지 생각한 결과, chrome 애드온에 무엇인가 있으면 좋을 것 같아

조속히 chrome의 애드온을 조사하고 있으면 그러한 종류의 것은 없고, 그럼 스스로 만들려고 하는 곳으로부터 개발하기로 결정했습니다.

어떻게 깨달았는지

실제로 작성한 코드는 여기에 소스를 올리고 있습니다. htps : // 기주 b. 코 m/즈카이시/포케몬_즈칸_루 by

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 디렉토리에 출력한다고 하는 것만 기재하고 있습니다.

> tsc

사용법

1. 조사하고 싶은 포켓몬 페이지에 액세스(여기에서는 후시기다네)
htps : // 즈칸. 포케몬. 이. jp/에서 원하는 l/001


2.아래에서 코드를 고용

htps : // 기주 b. 코 m/즈카이시/포케몬_즈칸_루 by

3.chrome에서 chrome://extensions/시작
chrome -> "환경 설정"-> "확장 기능"오른쪽 상단의 "개발자 모드"를 켜십시오.
'패키징되지 않은 확장기 로드'에서 삭제된 코드에 있는 chrome_pakage 디렉토리를 선택합니다.


4. 다시 Fushigidane 페이지에서 브라우저 다시로드 htps : // 즈칸. 포케몬. 이. jp/에서 원하는 l/001

결과 어떻게 되었습니까?

아이는 혼자 포켓몬을 조사 할 수 있고, 나는 그 시간에 다른 일을 할 수있게되어

아이는 전보다 포켓몬에 흥미가 솟아서, 이번에는 소식을 하려고 하게 되어

결과, 대화에 시간을 나누게 되었습니다. (울음

육아에 있어서, 같은 고민을 가지고 있는 분이 계시면 꼭 활용해 보세요.

하나의 과제를 클리어하면 다음과 같은 과제가 솟아오르는 것을 실감할 수 있다고 생각합니다.

참고

htps : // 코 m / 미모에 / ms / 855c112625d39b066c9
htps : // 코 m / 히비키 쿠도 / ms / d9936cd8108dc446d4

이상입니다.
잘 부탁드립니다.