質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

音声認識で特定の結果が返ってきた時にモデルに追加したい。

matsuda794
matsuda794

総合スコア11

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0回答

0評価

0クリップ

33閲覧

投稿2022/05/13 07:17

音声認識でタスクを追加できるTODOアプリを作っています。
recognition.onresult = (event)の中でVueのmethodを呼び出したいのですがうまくいきません。
Vue.JS とDjangoです。

音声認識の結果が「〇〇です。」「〇〇は終了。」というように、特定の語尾であれば、タスクを作成するといった処理を考えています。

//タスクを追加する処理
と書いてあるところでVueのcreateTask()のmethodを呼び出したいのですがrecognition.onresultの中で呼び出せずにいます。

どのように考えたら良いでしょうか

JavaScript

const resultDiv = document.querySelector('#post_text'); SpeechRecognition = webkitSpeechRecognition || SpeechRecognition; let recognition = new SpeechRecognition(); recognition.lang = 'ja-JP'; recognition.interimResults = true; recognition.continuous = true; let finalTranscript = ''; // 確定した(黒の)認識結果 recognition.onresult = (event) => { let interimTranscript = ''; // 暫定(灰色)の認識結果 let finalTranscript = ''; // 確定した(黒の)認識結果 for (let i = event.resultIndex; i < event.results.length; i++) { let transcript = event.results[i][0].transcript; if (event.results[i].isFinal) { finalTranscript = transcript; } else { interimTranscript = transcript; } } post_text.value =interimTranscript + finalTranscript; if(finalTranscript.endsWith('な')||finalTranscript.endsWith('ね')){ const URL = '{% url "app:index" %}'; //タスクを追加する処理 console.log(post_text.value) } //ページが読み込まれたら音声認識を開始 recognition.start(); // https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data // CSRF対策 const getCookie = (name) => { if (document.cookie && document.cookie !== '') { for (const cookie of document.cookie.split(';')) { const [key, value] = cookie.trim().split('=') if (key === name) { return decodeURIComponent(value) } } } } const csrftoken = getCookie('csrftoken') //ここからVue const App = { data() { return { task: {title: ''}, tasks:['HTMLより'], } }, compilerOptions: { delimiters: ['[[', ']]'], }, methods: { sendRequest(url, method, data){ const csrftoken = Cookies.get('csrftoken'); const myHeaders = new Headers({ 'Content-Type': 'application/json', }); if(method !== 'get'){ myHeaders.set('X-CSRFToken', csrftoken) }; fetch(url, { method: method, headers: myHeaders, body: data, }) .then((response) => { return response.json(); }) .then((response) => { if (method == 'get') { this.tasks = response; }; if (method == 'post') { this.task.title = '' this.getTasks(); }; if (method == 'put') { this.getTasks(); }; if (method == 'put' || method == 'delete') { this.getTasks(); }; }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); }); }, getTasks(){ this.sendRequest(URL, 'get'); }, createTask(){ this.getTasks(); this.sendRequest(URL, 'post',JSON.stringify(this.task)); }, updateTask(task){ this.getTasks(); this.sendRequest(URL, 'put',JSON.stringify(task)); }, deleteTask(task){ this.getTasks(); this.sendRequest(URL, 'delete',JSON.stringify(task)); }, created() { this.getTasks(); }, }, } Vue.createApp(App).mount('#app')

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。