Edited at

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

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


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

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

なのに、つぶやき、つぶやきって……

俺の知っている人たち、みんな文章をつくって投稿してるんですよね。

やっぱり本当のつぶやきじゃないですよね?


「確かにそうだ!」と非常に感心しました。

なのでこの記事を参考に、ひとりごとをマイクで拾って自動ツイートするシステムを開発してみました。



できたもの

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



システム概要

具体的には、

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サイトを開いたままにして作業していれば、自動でツイートが行われます。




精度はそれなりでした。