사전 쓰기

Microsoft사의 번역 API를 사용하고 싶었기 때문에, 화영 사전을 만들었습니다!

번역 API의 사용법에 대해서는 Microsoft Translator API를 사용해보기 를 참고로 했습니다.

코드도 거의 빌렸습니다 m (_ _) m

자기소개

트위터 @ 이 쥬냐

준준이라는 별명으로 간사이를 거점으로 활동하고 있는 프런트 엔드 엔지니어입니다.

HAL 오사카의 2회생입니다👍 (2016.5.24 현재)

자주 start up 계 이벤트에 가므로, 오사카 라헨 분은 만나요!

그럼, 조속히.

준비

먼저 translateAPI를 사용하기 위해 client key와 secret key를 가져옵니다.

얻는 방법에 대한 자세한 내용은 여기을 참조하십시오!

그런 다음 milkcocoa에 앱을 등록합니다.

milkcocoa에 등록하고 app ID를 적어 두십시오!

개발

먼저 app.js에 translate API의 key를 등록해 둡니다.

필요한 경우 환경 변수로 설정하십시오.

app.js

function getAccessToken(callback) {
  var body = '';
  var req = https.request({
    host: 'datamarket.accesscontrol.windows.net',
    path: '/v2/OAuth2-13',
    method: 'POST'
    }, function (res) {
      res.setEncoding('utf8');
      res.on('data', function (chunk) {
        body += chunk;
      }).on('end', function () {
        var resData = JSON.parse(body);
        callback(resData.access_token);
      });
    }).on('error', function (err) {
      console.log(err);
    });
  var data = {
    'client_id': 'クライアントキー',
    'client_secret': 'シークレットキー',
    'scope': 'http://api.microsofttranslator.com',
    'grant_type': 'client_credentials'
  };
  req.write(qs.stringify(data));
  req.end();
}

그런 다음 public/js/main.js에 milkcocoa app id를 씁니다.

main.js

var milkcocoa = new MilkCocoa('milkcocoaのappID');

이제 준비가 되었습니다.

이미 움직이는 상태입니다.

사용법

위의 텍스트 영역에 일본어를 넣고 번역 버튼을 누르면 ajax로 /translate에 일본어를 보냅니다. 그런 다음 /translate에서 반환 된 값을 milkcocoa 데이터 스토어에 저장합니다.

번역 이력에도 렌더링되는 사양입니다!

기본적으로 화면 전환이 지금까지 웹 서비스를 만들어 온 중 많았기 때문에

처음으로 Ajax에서 통신하는 동안 대기 시간을 기다리는 감출했습니다 웃음

아이콘도 수제입니다 d (￣ ￣)

기능

어제는 크게 나누어 3개로 했습니다.

1. 번역
2.gg레카스
3. 히스토리 삭제

1은, 뭐 번역 어플이니까 당연하네요. 설명 필요 없음.

2, gg레카스란 무엇인가.

gg레카스는, 일본어→영어의 번역은 했지만, 그 영단어로 조금 조사하고 싶은 것이!

영어 단어의 다른 의미도 알고 싶으니까 구구인가. .

같은 시간에 유용합니다!

히스토리의 왼쪽에 있는 돋보기와 같은 버튼을 누르면 영어 단어를 영어 단어로 구글로 날아갑니다.

그렇다고해도 이것은 조금이라도 편리하게하려고 시도했을 뿐이므로, 단지 google의 검색할 때의 URL에, 영단어를 파라미터로 갖고, window.open로 날아가고 있을 뿐입니다.

여기서 하나, 새로운 것을 깨달았습니다.

HTML의 meta 요소의 애플 사양으로 하는 녀석이 있죠?
<meta name="apple-mobile-web-app-capable" content="yes">
이것입니다.

이것으로 web어플리케이션하고 있을 때의 주의점으로서, <a> 등으로 링크를 밟으면 브라우저가 기동해 버린다는 것입니다.

그러나 window.open에서 열면 웹 앱 내에서 완료됩니다!

이것은 조금 편리하다고 생각했습니다! !

3의 삭제 기능입니다만, 이것도 이력에 언제까지도 있어도 어쩔 수 없는 것은 지운다. 그냥 그냥. .

코드는 내 github에 있으므로 좋으면 사용해보십시오!