매일 한 사람을 마이크로 주워 자동 트윗 해 보았습니다.

어떤 기사에 이렇게 쓰여졌습니다.

'트위터에서 정말 '트윗'하는 구조를 만들어 보니 세계가 조금만 바뀌었다'

지금 트위터를 보고 있습니다만, 이 중얼거림은 실제로는 「진짜 중얼거림」이 아닙니다.
그런데, 짹짹, 짹짹...

내가 아는 사람들, 모두 문장을 만들고 투고하고 있네요.
역시 진짜 짹짹이 아니지요?

「확실히 그렇다!」라고 매우 감탄했습니다.
그래서 이 기사를 참고로 한 사람을 마이크로 데려 자동 트윗하는 시스템을 개발해 보았습니다.

할 수있는 것

이런 느낌에 한 사람이 자동 트윗됩니다

우선 이것으로 완성 가나 - 조의 리얼한 트윗 (@RealTweet_Joe) August 24, 2019

오, 이건 굉장히 좋아요 - 조의 현실적인 중얼거림 (@RealTweet_Joe) August 24, 2019

시스템 개요

구체적으로는
1. Google 크롬 + Web Speech API
2. Ruby on Rails
3. Twitter API
각각 사용하고 있습니다.

Web Speech API를 구현하는 방법

아래 기사를 참고로 구현했습니다만, 매우 간단했습니다!
웹 페이지에서 브라우저의 음성 인식 기능을 사용합시다.

최소한의 기능을 사용하려면 아래에서 OK입니다.

<script>
  SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
  const recognition = new SpeechRecognition();

  recognition.onresult = (event) => {
    alert(event.results[0][0].transcript);
  }

  recognition.start();
</script>

나의 경우는 「웹 사이트 표시시에 마이크 on하고 싶다」 「마이크가 마음대로 끊어지면 다시 on하고 싶다」 「start/stop 버튼을 원한다」 「텍스트화의 상황을 보고 싶다」라는 조건이 있었으므로 아래와 같이 했습니다.

<button id="switch-btn">stop</button>
<div id="result-div"></div>

<script>
  const switchBtn = document.querySelector('#switch-btn');
  const resultDiv = document.querySelector('#result-div');

  SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
  let recognition = new SpeechRecognition();

  recognition.lang = 'ja-JP';
  recognition.interimResults = true;
  recognition.continuous = true;

  let finalTranscript = ''; // 確定した(黒の)認識結果

  recognition.onresult = (event) => {
    resultDiv.innerHTML = '';

    let interimTranscript = ''; // 暫定(灰色)の認識結果
    for (let i = event.resultIndex; i < event.results.length; i++) {
      let transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
        finalTranscript += transcript;
        resultDiv.innerHTML = finalTranscript;
        finalTranscript = '';
      } else {
        interimTranscript = transcript;
        resultDiv.innerHTML = '<i style="color:#ddd;">' + interimTranscript + '</i>';
      }
    }
  }

  let recordActive = true;
  recognition.start();

  switchBtn.onclick = () => {
    if (!recordActive) {
      recognition.start();
      switchBtn.innerHTML = 'stop';
      resultDiv.innerHTML = '';
      recordActive = true;
    } else {
      recognition.stop();
      switchBtn.innerHTML = 'start';
      recordActive = false;
    }
  }

  function checkNotAutoFinished() {
    if (recordActive) {
      recognition.start();
      resultDiv.innerHTML = '';
    }
  }
  setInterval('checkNotAutoFinished()', 60000); // stopボタンが押されていなければ、1分ごとにリスタート
</script>

Twitter API를 구현하는 방법

jQuery에 의한 Ajax 통신을 사용했습니다.
구체적으로는 htps : //로 ゔぇぺぺr. 라고 r. 코m/ 에서 API 등록 후, 상기 코드 중에서

$.ajax({url: '/home/update', type: "GET", data:{text:finalTranscript}});

그런 다음 해당 컨트롤러에서

class HomeController < ApplicationController
  before_action :set_twitter_client

  def update
    text = params.require(:text)
    begin
      @twitter.update(text)
    rescue => e
      error = e
    end
    render plain: error || "Twitter.update"
  end

  helper_method :update

  private

  def set_twitter_client
    @twitter = Twitter::REST::Client.new do |config|
      config.consumer_key        = "APIから取得"
      config.consumer_secret     = "同上"
      config.access_token        = "同上"
      config.access_token_secret = "同上"
    end
  end
end

하는 것으로 구현 가능합니다.

사용법

그리고는 웹 사이트를 열린 채로 작업하고 있으면 자동으로 트윗이 이루어집니다.

뭔가 할 수 있을 것 같아— 조의 현실적인 짹짹 (@RealTweet_Joe) August 24, 2019

이과 1700년에 듣지 못하고 싶다— 조의 현실적인 중얼거림 (@RealTweet_Joe) August 24, 2019

안녕하세요 - 조의 현실적인 중얼거림 (@RealTweet_Joe) August 25, 2019

쌀 곳 - 조의 현실적인 짹짹 (@RealTweet_Joe) August 25, 2019

…정밀도는 그 나름이었습니다.