JavaScript関連のことを調べてみた2020年01月23日

あっさり読むrails④（非同期通信）

#はじめに
JSを使った非同期通信を簡単に書いてみます。
#前提
使用するのは、
`Ruby on rails`
`Haml`
`jQuery`
です。
CSSは特に指定しません。
#実行
次のファイルを用意します。

“`haml:sample.haml.html
= form_with model:@sample, local: true do |f|
= f.text_area :name, placeholder: “サンプル”, class: “sample-form”

.add-text
“`
これがビューデータとなります。

“`javascript:sample.js
$(function(){
$(“.sample-form”).on(“change” functon(){
var sampletext = $(this).val;
$(“.add-text”).text(sampletext):
})
});
“`
これが非同期処理の中身になります。

これで、テキストエリアに文章を入力すれば、同じ文章が`.add-text`の部分に表

Node.js、Web Speech APIを使って音声認識を出力

#概要
WebSpeechAPIを使用して聞き取った音声の文字おこしをブラウザ上に表示させます。

#作成方法
1.WebSpeechAPIを含むhtmlフォルダの作成

新規フォルダを作成し、その中にindex.htmlを作成。

“`html:index.html

音声認識サンプル

start

“`
音声認識をするための処理をscriptタグ内に書いていきます。

“`html:index.html