APIを呼び出すwebアプリの作成
index.html
実行結果
今回のプログラムでは
hanamichi-sukusuku.hatenablog.com
上記で作成した機械学習の機能を持つwebサーバーを使用して、APIを呼び出すwebアプリを作成していく。
webサーバーでは既にURLで渡されたパラメーターを機械学習にかけるようになっている。
今回必要なのはhtml/css, javascriptを用いたindex.htmlファイルを作成する。
入力欄とボタンの作成
<DOCTYPE html>
<h1>テキストのジャンル判定</h1>
<div>
<textarea id="q" rows="10" cols="60"></textarea>
<br><button id="qButton">判定</button>
<div id="result"></div>
</div>
判定ボタンがクリックされたときの処理(JS)
<script>
const qs = (q) => document.querySelector(q)
window.onload = () => {
const q = qs('#q')
const qButton = qs('#qButton')
const result = qs('#result')
// 判定ボタンを押した時 --- (*1)
qButton.onclick = () => {
result.innerHTML = "..."
// APIサーバに送信するURLを構築 --- (*2)
// APIにアクセス --- (*3)
fetch(api).then*1で受け取りjson形式で次のthen()の処理に返り値を渡している。then()メソッドでは複数の処理を繋ぎ、順番に実行していく。
then((data)=>...ではhtmlで結果を出力するdiv要素にラベルデータと確率のデータを文字列で追加している。
*1:res) => {
}).then((data) => {
// 結果を画面に表示 --- (*4)
result.innerHTML =
data["label"] +
"<span style='font-size:0.5em'>(" +
data["per"] + ")</span>"
})
}
}
</script>
const qsで無名関数を定義。引数に指定したidの要素を取得する。
qButton.onclickで判定ボタンが押されたときの処理を記述。
result.innerHTMLでAPIサーバーから出力が返ってくるまで"..."と表示する。
const apiで変数apiにAPIサーバーに送信するURLを構築。encodeURIComponent()では引数に指定した文字列をURLで使用できる形式に変換（エンコード）するためのもの。URLでは日本語は使用できないのでパラメーターとして送る文字列をこれによって変換している。
fetch()メソッドでは非同期で引数に指定したURLにHTTPリクエストを送信している(デフォルトはGET)。responseオブジェクトをfetch(api)からthen((response
