🚩오프닝

첫 번째 기사라서 오프닝이 길다.정규 편성을 보고 싶은 사람은 비행기로 오세요📄요구 사항.

🤔이게 뭐야?

자바스크립트에 조금만 익숙해져서 실용적인 것을 만들어 보세요📖사전 +🏳️‍🌈번역할 수 있고 기능을 확장할 수 있는 기록
이렇게 했습니다.

사전 데이터를 가져와서 선택한 부분의 단어가 사전에 있으면 그 결과를 표시합니다
단어나 숙어를 찾지 못하면 구글 번역에 던져 번역 결과를 얻는다
GitHub 저장소
Chrome 온라인 스토어
Firefox Addons

📄요구 사항

웹 페이지에서 선택한 부분(가능하면 한 번 클릭)을 번역하고 싶습니다

평소 조회에 방해가 되지 않기를 바란다

단어의 뜻을 기억하고 싶어서 사전을 찾아보고 싶다

독일어와 다른 언어도 자동으로 판별하고 번역할 수 있다면

(...얼마나 제멋대로인가)

🔍위대한 선배님들이 하시는 거 보세요.

Mouse Dictionary
사전 데이터를 읽고 마우스가 멈추는 단어의 뜻을 폭발적으로 표시하는 도구
이걸로 하면 될 것 같아.. 대단해.
이 작가가 하는 게임은 예전에 몰입했었는데... 이야기가 탈선할 수 있으니까 다음에 기회가 되면 할게요.

Simple Translate
지금까지 이거 계속 쓰고 있었어요.
여기에 사전 기능을 덧붙였으면 좋겠다

이 두 조합의 확장 기능을 만들 수 있다면 굉장히 편하겠죠????
(이미 있을 수도 있는데...? 나는 단지 나의 조사 방법이 부족하다고 생각했을 뿐이다.)

📑기본 구조

최대한 간단하게 했어요.

기본 기능은 2주도 안 되어 완성되었다

도중에 갑자기 사용이 생각났다vue-web-extension,

사전 데이터 관리에서 사용storage API하면 속도가 매우 느리고 무한 최적화가 필요하다

↑ Firefox와 Chrome에서는 전혀 다르기 때문에 대처하기 어렵다

권한 주위의 이유로 확장 기능에 대한 심사가 1개월 정도 기다렸다(가장 시간이 걸렸다)

나머지 1할의 완성에는 많은 시간이 걸렸다.
처음부터 디자인이 안 좋아서요.엔지니어 불합격이야.

👩‍🏫사용 방법

⚙️열기 옵션

옵션 페이지는 이렇습니다.
신플이 가장 좋은 것은 신조이기 때문에, 나는 엉망진창인 물건을 만들지 않고, 귀찮다고 말한다

크롬의 경우
아이콘, 그리고 옵션 열기

Firefox
주소 표시줄에 about:addons 를 입력한 후 옵션 열기

📖사전 데이터 등록

※ 현재 영사랑 데이터만 지원(유료, https://booth.pm/ja/items/777563, jdic-hand(무료, https://kujirahand.com/web-tools/EJDictFreeDL.php
만약 수요가 있다면 JSON에도 대응할 수 있으면 좋겠지만, 나만의 수요가 없기 때문에 설치하지 않았다

사전 데이터 선택
※ 선택 시 등록 시작

이따가 등록하면 돼요.

단어를 선택하면 사전에 기재된 경우 그 뜻을 표시할 수 있다

🏳️‍🌈번역 기능

구글 앱 스크립트로 번역 스크립트를 제작한다.
구글 번역 API 무료 제작 방법
Google Apps Script를 통한 3분 무료 API 번역
이 근처를 참조하여 API를 만듭니다.

다음 그림은 그 중의 한 예이다.

main.gs

function doPost(e) {
  const text = e.postData.getDataAsString();
  const translatedText = LanguageApp.translate(text, "", "ja");

  const output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.TEXT);
  output.setContent(translatedText);
  return output;
}

PowerShell로 만들었는지 확인합니다.
컬이라면$ curl -L -d "this is a pen." https://script.google.com/macros/s/[生成されたURL]이런 느낌이죠?
check

> Invoke-WebRequest -Method Post -Body 'this is a pen.' https://script.google.com/macros/s/[生成されたURL]
StatusCode        : 200
StatusDescription : OK
Content           : これはペンです。
...

실행 URL을 옵션 페이지의translate API settings 텍스트 상자에 붙여넣기
API 동작 테스트 버튼 누르기

테스트 성공 후 URL 등록
실패하면 이 정보 표시

문장을 선택한 후 사전에서 일부 단어를 선택하지 않은 상태에서 번역한 결과

🛑일시 중지 기능

방해가 돼!지금 나오지 마!!!
이럴 때 확장 기능의 아이콘을 누르면 번역 기능의 스위치를 전환할 수 있다.
소박하지만 조금 편해서 넣었어요.

🍜끝내다

이런 Vue를 잘 볼 수 있다니 역시 대단하군.
정말 편리한 시대입니다.

사전 데이터의 문자 코드 자동 검출은 사전 데이터를 읽는 최초의 몇 개의 문자로 이 바이트 열을 통해 판단하는 규격이다.
만약 그 몇 글자가 모두 영어라면, 마음대로 UTF8이 된다.문자 코드 주위가 어두운 것 같아서 전투를 멈췄지만 언젠가는 수정하고 싶어요.

이 중 iframe나 맞춤형 제작은 지원되지 않습니다.만약 똑똑하지 않은 코드를 썼다면 돌을 던지세요.

옛날 사람이고 몇 년 동안 코볼을 만졌기 때문에 원시인들은 고도의 문명을 접하고 막다른 골목에 몰린 심정으로 만들었다.
제작할 때 다양한 벽에 부딪혔는데 언젠가는 이런 기술적인 내용의 기사를 쓰고 싶어요.