kintone으로 영어를 읽어주는 영어 공부 도구 만들어 보았으므로 소개합니다 👀

앱 준비

필드 유형
필드 코드
필드 이름
메모


공간
spSuteki

상세 화면의 읽기 버튼으로 설정

문자열(1행)
영문
영문

문자열(1행)
일본 번역
일본 번역

문자열(1행)
읽기 버튼
🔊 (이모티콘 스피커)
리스트 화면용의 읽어내기 버튼으로 합니다. 값은 비워 둡시다.

목록 화면

JavaScript를 사용한 커스터마이즈로 보통의 일람에 독서 버튼(🔊)을 붙입니다.

상세 화면

상세 화면에서는 스페이스에 읽기 버튼(🔊)을 설치합니다.
단어 등록용의 액션 버튼이 있어도 좋네요 👀 그 편은 기호로.

자바스크립트 쓰기

영어로 말하기

이쪽을 참고로 했습니다 👀
htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / u b / ap / Spee chSy
htps : // 이 m / 하치 스칸 sw / ms / c2b9bf2f0 137 a f39f38

const readEng = (stcEng) => {
  const u = new SpeechSynthesisUtterance();
  u.text = stcEng;
  u.lang = "en-US";
  u.rate = 1.0;
  speechSynthesis.speak(u);
};

목록 화면

앱 준비로 만든 문자열(1행)을 버튼으로 변신시킵니다.
(일부 필드를 만들지 않고 영문 필드의 전후에 추가해도 좋을지도 모른다.)

kintone.events.on(["app.record.index.show"], (event) => {
  //ボタンを置きたいフィールドの情報を取ってくる
  const sp = kintone.app.getFieldElements("読み上げボタン");
  event.records.forEach((r, idx) => {
    //ボタンを作る
    const btn = document.createElement("button");
    btn.textContent = "🔊";
    sp[idx].firstChild.appendChild(btn);
    //ボタンをクリックしたときの動作
    btn.onclick = () => {
      readEng(r.英文.value);
    };
  });

  return event;
});

상세 화면

버튼 설치해 보았습니다만, 일부러 클릭하는 것은 귀찮은 생각이었으므로・・・
스페이스 키 눌러도 읽어 주도록 했습니다.

kintone.events.on(["app.record.detail.show"], (event) => {
  //ボタン設置
  const sp = kintone.app.record.getSpaceElement("spSuteki");
  const btn = document.createElement("button");
  btn.textContent = "🔊";
  sp.appendChild(btn);

  //ボタンをクリックしたときの動作
  btn.onclick = () => {
    readEng(event.record.英文.value);
  };

  //スペースキー押しても読み上げる
  document.onkeydown = (e) => {
    if (e.code === "Space") {
      readEng(event.record.英文.value);
    }
  };

  return event;
});

완성

gif이기 때문에 음성이 아니지만・・・👀 분위기에서도 전해지면 좋을까.

했어! 이제 영어 공부를 즐길 수 있습니다!
하지만 최선을 다하겠습니다!

덤

읽기 버튼 위치

읽기 버튼을 영문 필드에 추가해도 별로 나쁘지는 않을까! 👀✨✨

다른 언어로 읽고 싶을 때

영어 이외의 언어를 공부하고 싶어~! 라고 때는
lang 속성에 원하는 언어 코드를 설정합니다.
↓예를 들면 중국어라면 이런 느낌!

const readChn = (stcChn) => {
  const u = new SpeechSynthesisUtterance();
  u.text = stcChn;
  u.lang = "zh-CN"; //←ここで読み上げる言語が変更できるよ
  u.rate = 1.0;
  speechSynthesis.speak(u);
};

읽고 싶은 언어는 ↓이쪽을 참고로 되면 좋을지도?
htps //w w. 베리쵸. 오 rg / t ran s / / 펭 구 아게코로. HTML