JavaScriptの使い方と Mendix

ライアン・モック
2022 年 9 月 5 日
分読み

ロックダウンの最中、私は多くの時間を持て余し、多くの人と同じように、そのほとんどの時間を連続ドラマの連続視聴や映画マラソンに費やしました。ほぼ1か月に及ぶ映画マラソン中に、音声アプリを作れるかどうか興味を持ちました。 Mendix JavaScript を使用します。

スーパーヒーロー映画やその他のSFジャンルに詳しい人なら、物語の主人公のデジタルサイドキックがセキュリティシステムに侵入するなど、さまざまなことを知っているでしょう。しかし、私のビルドでは、デジタルアシスタント音声アプリの音声からテキストへの変換とテキストから音声への変換に焦点を当てています。結局のところ、それほど難しいことではないのです。自分の正気やストレスレベルをほとんど気にせず、音声合成技術の深淵に飛び込み、それをJavaScriptで実装する方法を学びました。 Mendix.

「JavaScript は、使い始める前に学ぶ必要がないと人々が感じている唯一の言語だと私は知っています。」

— ダグラス・クロックフォード

アイデア

デザインはシンプルです。まあ、私が作れる限りシンプルに。アイデアは、 Mendix ユーザーが話した言葉を聞き、理解し、独自の「音声」で応答できるアプリです。簡単そうですよね? デザインが決まったら、次に使える既存のテクノロジーを探すことになります。IBM の Watson や Google の Cloud AI Platform など、すでに多くの音声プラットフォームが存在する中で、これをゼロから再開発してもあまり意味がありません。

しかし、私は以前にもチャットボットを作ったことがあります。昨年の Mendix ワールドでは、Jan de Vriesとローコードライブビルドを主催しました。セッションでは、ユーザーがAlexaと対話できるAlexaスキルを構築しました。 Mendix アプリでAlexaに話しかけることで、会話をすることができます。今回は、実際の会話や対話ではなく、このビルドの実際の話し言葉の側面に焦点を当てることにしました。会話ツリーの構築について詳しく知りたい場合は、 Mendix ワールド2020.

デザイン

では、実際に何を構築するのでしょうか? いくつか調査した後、デザインを決定しました。私のアプリは、次の 2 つの主要な側面に重点を置くことになります。

ユーザーの声を聞いて理解できる、音声テキスト変換プラグインウィジェット。
アプリがユーザーに音声で応答できるようにするテキスト読み上げ JavaScript アクション。

ウィジェットには、私が見つけたライブラリを使用します。 githubの、を利用します Mozilla の音声合成ライブラリ。

JavaScriptアクションに便利なことに、 JavaScriptチュートリアル作成者 Mendix これは、私たち自身のドキュメント内でまさにこれを実行します。

最後に、映画では、ヒーローはいつもロボットの相棒にかっこいい名前をつけています。これに敬意を表して、私は自分のアプリに メイビス 「」の略ですMendix素晴らしい、非常に優れたインテリジェントなシステム　

MAEVISの構築

通常、アプリを構築するときは、まず最も困難で複雑なプロセスに焦点を当てるようにしています。アプリに音声を発する方法についてはすでに大まかなアイデアがあったので、MAEVISが 私を聞く上で述べたように、私はこれを使うことにしました 図書館 by ニック・バルデス Githubで

私が使用 Mendix ウィジェットスキャフォールドを作成するためのウィジェットジェネレーター。私はこれを JavaScript ES6 を使用して構築することを選択し、Web およびハイブリッドモバイルアプリ用に構築しました。

このコードを MAEVIS で動作するように適応させる際に遭遇した主な問題は、この例では機能コンポーネントが使用され、ウィジェットスキャフォールドによってコードがクラスコンポーネントとして生成されることでした。問題が理解できたら、簡単に解決できました。

最終的なウィジェットコードは次のようになりました。

import React,{ Component, createElement, useState, useEffect } from "react";
import "./ui/SpeechToText.css";
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const mic = new SpeechRecognition();
mic.continuous = true;
mic.interimResults = true;
mic.lang = 'en-US';
export default function SpeechToText(){
const [isListening, setIsListening] = useState(false);
const [note, setNote] = useState('');
const [savedNotes, setSavedNotes] = useState([]);
useEffect(() => {
handleListen()
}, [isListening]);
const handleListen = () => {
if (isListening) {
mic.start()
mic.onend = () => {
console.log('continue..')
mic.start()
}
} else {<mic.stop()
mic.onend = () => {
console.log('Stopped Mic on Click')
handleSaveNote()
}
}
mic.onstart = () => {
console.log('Mics on')
}
mic.onresult = event => {
const transcript = Array.from(event.results)
.map(result => result[0])
.map(result => result.transcript)
.join('')
console.log(transcript)
//textAttribute(transcript)
setNote(transcript)
mic.onerror = event => {
console.log(event.error)
}
}
}
const handleSaveNote = () => {
setSavedNotes([...savedNotes, note])
setNote('')
}
return  <span className="flexColumn">
<>
<p>{note}</p>
<button
className={isListening ? 'pulse-button btn-danger' : 'pulse-button'}
onClick={() => setIsListening(prevState => !prevState)}>
{isListening ? <span>🎙️Stop</span> : <span>🛑Start</span>}
</button>
</>
<>
<h2>Notes</h2>
{savedNotes.map(n => (
<p key={n}>{n}</p>
))}
</&gt
</span>
}

また、ウィジェットのフロントエンドに変更するためのスタイルもいくつか追加したので、画面上の通常のボタンよりも見栄えが良くなりました。

.flexColumn{
display: inline-flex;
flex-direction: column;
}
.container {
width: 200px;
height: 100%;
margin: 0 auto 0;
perspective: 1000;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background: #fff;
}
.pulse-button {
position: relative;
margin: auto;
display: block;
width: 10em;
height: 10em;
font-size: 1.3em;
font-weight: light;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 100px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: #5a99d4;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
-webkit-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite;
}
.pulse-button:hover {
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
@keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}

正直に言うと、このウィジェットを画面に表示できたことは、これまでの私の開発における最大の功績の 3 つであり、JavaScript でコーディングしているときに「なるほど!」と実感したのはこれが人生で初めてです。これにどれくらい時間がかかったか疑問に思っている方のために言っておきますが、髪の毛をむしり取ってラップトップに向かって怒鳴り散らしながら XNUMX 日間ほどかかりましたが、最終的に私にとって大きな成果がありました。

難しい部分は終わったので、これに従うだけで簡単な作業でした JavaScriptアクションの構築に関するチュートリアル.

たった1、2時間で、パラメータとして与えたテキストを読み上げてくれるアクションができました。コードだけを探している人のためにここにあります。ただし、JavaScriptアクションを初めて使う場合は、このチュートリアルに従うことをお勧めします。 Mendix.

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import { Big } from "big.js";
// BEGIN EXTRA CODE
// END EXTRA CODE
/**
* @param {string} text
* @returns {Promise.<boolean>}
*/
export async function JS_TextToSpeech(text) {
// BEGIN USER CODE
if (!text) {
return false;
}
if ("speechSynthesis" in window === false) {
throw new Error("Browser does not support text to speech");
}
// const utterance = new SpeechSynthesisUtterance(text);
// window.speechSynthesis.speak(utterance);
// return true;
return new Promise(function(resolve, reject) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.onend = function() {
resolve(true);
};
utterance.onerror = function(event) {
reject("An error occured during playback: " + event.error);
};
window.speechSynthesis.speak(utterance);

}）;
// エンドユーザーコード
}

試してみる時間だ

それでは、さっそく私の作品をご紹介したいと思いますメーヴィス。

包み込む

このプロジェクトでどれだけ多くのことを学んだかを強調したいと思います。大変ではありましたが、ぜひ自分で試してみることをお勧めします。このビルドにもっと追加したかったのですが、他にも非常にエキサイティングなプロジェクトが進行中なので、ここで終わらせなければなりません。

理想的には、ウィジェット自体がNanoflowをトリガーし、それがText to Speech JavaScriptアクションをトリガーするようにしたいと考えていました。また、ウィジェットからダイアログを抽出して戻すためにpropsを活用できれば素晴らしいと思います。 Mendix、ウィジェットの状態に単に保存するのではなく、これらの機能に引き続き取り組み、将来的にこれに関するフォローアップを投稿するかもしれませんが、それまでは、まさにこれを試してみれば皆さんにとって素晴らしい練習になると思います。これを使用したら私に連絡してください。皆さんがこれによってどんなクレイジーなアイデアを思いつくか見てみたいです。それまでは、覚えておいてください — 作ってみてください!

JavaScriptの使い方と Mendix | Mendix

サイト内検索

開発者ブログ