Help us understand the problem. What is going on with this article?

日常のひとりごとをマイクで拾って自動ツイートしてみた

More than 1 year has passed since last update.

日常のひとりごとをマイクで拾って自動ツイートしてみた

by jonpili
1 / 9

とある記事にこう書かれていました。

『Twitterで本当に「つぶやける」仕組みをつくってみたら、世界が少しだけ変わった』

いまTwitterを見ているんですけど、このつぶやきって実際は「本当のつぶやき」じゃないですよね?
なのに、つぶやき、つぶやきって……

俺の知っている人たち、みんな文章をつくって投稿してるんですよね。
やっぱり本当のつぶやきじゃないですよね?

「確かにそうだ!」と非常に感心しました。
なのでこの記事を参考に、ひとりごとをマイクで拾って自動ツイートするシステムを開発してみました。


できたもの

こんな感じにひとりごとが自動ツイートされます


システム概要

ECynArTUUAArFTy.jpeg

具体的には、
1. Google Chrome + Web Speech API
2. Ruby on Rails
3. Twitter API
をそれぞれ使っています。


Web Speech APIの実装方法

下記記事を参考に実装しましたが、非常に簡単でした!
Webページでブラウザの音声認識機能を使おう

最低限の機能を試すには下記でokです。

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

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

  recognition.start();
</script>

私の場合は「Webサイト表示時にマイク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通信を用いました。
具体的にはhttps://developer.twitter.com/ で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

とする事で実装可能です。


使い方

あとはWebサイトを開いたままにして作業していれば、自動でツイートが行われます。



精度はそれなりでした。

jonpili
建築学科出身のITエンジニアです。モノづくりによる効率化で人類を楽にします。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした