2018年6月4日

プログラミング

Reactでスマートスピーカーのコマンド発音サービスを作ろう(6)【作りながら覚えるReact】

目次

  1. はじめに
  2. フリーワード発音を実装する
  3. 発音ボタンを実装する
  4. まとめ

はじめに

スマートスピーカーの発音サービスを作りながらReactを学んでいくシリーズ、第6弾です。
前回、UIをリッチにして切り替えボタン(ラジオボタン)によるAlexa、Google Home切り替え部分を実装しました。

Reactでスマートスピーカーのコマンド発音サービスを作ろう(5)【作りながら覚えるReact】

今回はフリーワード発音機能を実装していきます。

フリーワード発音を実装する

前回、UI変更に伴いこのようなファイル構成にしていきましたね。
_2018-05-29 0.24.33.png (614.1 kB)

今回、このようなフリーワードの入力エリア、また発音ボタンを実装していきます。
 2018-06-03 23.19.49.png (29.4 kB)

入力フォームの実装

通常のHTMLでのテキストフォームはこのような形で実装します。

<input type="text" name="name">

そして通常のJavaScriptの場合、この入力フォームに入力された値を取得し、送信ボタンが押されたらその値を送信するという流れになります。

ですが、Reactの場合には入力フォームを監視し、文字入力(値変更)がある毎にStateを更新しフォームをレンダリングし、送信ボタンが押されたらStateの値を送信するとなります。

ちょっとわかりづらいかもしれないので、実際のこのフォーム部分のコードを見ていきましょう。

constructor

初期化処理を行います。

  constructor(props) {
    super(props);
    this.state = {
      text_value: "",
      speaker_type: "alexa",
    };
    this._changeText = this._changeText.bind(this);
    this._toggleButton = this._toggleButton.bind(this);
  }

前回の記事でspeaker_typeを設定しましたが、今回はtext_valueを設定します。
これはフォームの入力内容に関するStateです。
また、this._changeText = this._changeText.bind(this);前回の記事にあったように、thisをbindしておきます。

次にフォームの変更イベントを見ていきます。

  _changeText(e) {
    this.setState({text_value: e.target.value});
  }

先程の説明ですと 文字入力(値変更)がある毎にStateを更新しフォームをレンダリングし にあたる部分です。
e.target.valueは後ほど見ていく入力フォームの値が入ってきます。
Stateのtext_valueに入力フォームの値を設定していますね。

次に入力フォーム部分を見ていきます。

<div id="form1">
  <input
    type="text"
    id="sbox"
    defaultValue={this.state.text_value}
    onChange={this._changeText}
    placeholder="キーワードを入力"
  />
</div>

defaultValuethis.state.text_value を設定しています。
こちらはその名の通り、デフォルト値を設定するオプションです。
constructor内で””、つまり空文字を設定していました。

次にonChangeの部分を見ていきます。
onChange={this._changeText}
ここはonChange、つまりフォーム入力内容の変更があった場合にイベントが発動します。
先程の_changeText が呼び出されます。

つまり、ここの入力フォームについてはこのような流れとなります。

  1. constructor内でStateのtext_value を初期化
  2. 入力フォームをレンダリング、デフォルト値に1のtext_valueの値を使用
  3. 入力フォームに変更がある(文字入力や削除)があるたびにonChangeイベントが発動
  4. onChange 内で入力フォームの値(入力値)を取得しStateのtext_valueを更新
  5. 入力フォームを再レンダリング

発音ボタンの実装

では、発音ボタンを実装していきます。
先にJSX部分を見ていきます。

  <button id="sbtn" value="" onClick={() => this._onClick()}>
    <i className="fas fa-microphone fa-2x"></i>
  </button>

onClick={() => this._onClick()}
こちらは何回か今までみた形ですね。アロー関数でthisをbindしています。

では、呼び出される_onClick() を見ていきます。
ここで実現したい仕様はスピーカーの種類を見てコマンド発音前の呼びかけコマンドを実行し、そちらと入力フォームのテキストと合わせ発音するというものです。
Googleが選択され、入力フォームに「音楽かけて」と入力されている状態でボタンが押されると「OK Google、音楽かけて」と発音してくれるイメージです。

  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    let pre_commands = '';
    switch (this.state.speaker_type) {
      case 'alexa': {
        pre_commands = Alexa.pre_commands;
        break;
      }
      case 'google': {
        pre_commands = Google.pre_commands;
        break;
      }
      default:
      break;
    }
    ssu.text = pre_commands + this.state.text_value;
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

SpeechSynthesisUtterance の使い方はこちらの記事でも解説しましたね。

前回の記事で設定したthis.state.speaker_type を使用しswitch文で場合分けしています。
alexaの場合には、constのalexa.js内のデータから呼びかけコマンド(pre_commands)をpre_commandsに代入しています。

そして、発音するテキストには呼びかけコマンドのpre_commandsと入力フォームのテキストであるthis.state.text_value と合わせ、その内容を発音しています。

今回のコード

では、通しで一旦コードを確認してみます。

header.js

import React, { Component } from 'react';
import {Alexa} from '../const/alexa';
import {Google} from '../const/google';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text_value: "",
      speaker_type: "alexa",
    };
    this._changeText = this._changeText.bind(this);
    this._toggleButton = this._toggleButton.bind(this);
  }

  _onClick() {
    let ssu = new SpeechSynthesisUtterance();
    let pre_commands = '';
    switch (this.state.speaker_type) {
      case 'alexa': {
        pre_commands = Alexa.pre_commands;
        break;
      }
      case 'google': {
        pre_commands = Google.pre_commands;
        break;
      }
      default:
      break;
    }
    ssu.text = pre_commands + this.state.text_value;
    ssu.lang = 'ja-JP';
    speechSynthesis.speak(ssu);
  }

  _changeText(e) {
    this.setState({text_value: e.target.value});
  }

  _toggleButton(e) {
    this.setState({speaker_type: e.target.value});
  }

  render() {
    return (
      <div className="jumbotron mv">
        <header className="mv_ttl">
          <h2>Smart Speaker's Commands Speaker (SSCS)</h2>
          <p>スマートスピーカーのコマンドを日本語で発音して代行してくれるサイトです。コマンドをクリックすると発音されます。<br/>
            コマンドの追加は<a href="https://github.com/eishis/smart-speakers-commands-speaker" target="_blank" rel="noopener noreferrer">こちらから</a>お願いします。
          </p>
          <div>
            <div className="radio_button">
              <input
                type="radio"
                value="alexa"
                name="s2"
                id="alexa"
                checked={this.state.speaker_type === "alexa"}
                onChange={this._toggleButton}
              />
              <label htmlFor="alexa" className="switch-alexa">Alexa</label>
              <input
                type="radio"
                value="google"
                name="s2"
                id="google"
                checked={this.state.speaker_type === "google"}
                onChange={this._toggleButton}
              />
              <label htmlFor="google" className="switch-google">Google Home</label>
            </div>
            <div id="form1">
              <input
                type="text"
                id="sbox"
                defaultValue={this.state.text_value}
                onChange={this._changeText}
                placeholder="キーワードを入力"
              />
              <button id="sbtn" value="" onClick={() => this._onClick()}>
                <i className="fas fa-microphone fa-2x"></i>
              </button>
            </div>
          </div>
        </header>
      </div>
    )
  }
}

まとめ

今回はReactにおける入力フォームの使い方、またそちらの値を送信する処理をご紹介しました。
次はスピーカーの種類を選択し、コマンドのカード部分を発音させる処理を実装していきます。

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP