APIを呼び出すwebアプリの作成

f:id:hanamichi_sukusuku:20210220171930p:plain

 

index.html

f:id:hanamichi_sukusuku:20210220173647p:plain

実行結果

f:id:hanamichi_sukusuku:20210220172030p:plain

今回のプログラムでは

hanamichi-sukusuku.hatenablog.com

 

上記で作成した機械学習の機能を持つwebサーバーを使用して、APIを呼び出すwebアプリを作成していく。

webサーバーでは既にURLで渡されたパラメーターを機械学習にかけるようになっている。

今回必要なのはhtml/css, javascriptを用いたindex.htmlファイルを作成する。

 

入力欄とボタンの作成

<DOCTYPE html>
<html><meta charset="utf-8"><body>
<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)
const api = "/api?q=" +
encodeURIComponent(q.value)
// APIにアクセス --- (*3)
fetch(api).then*1で受け取りjson形式で次のthen()の処理に返り値を渡している。then()メソッドでは複数の処理を繋ぎ、順番に実行していく。

then((data)=>...ではhtmlで結果を出力するdiv要素にラベルデータと確率のデータを文字列で追加している。

 

 

 

*1:res) => {

return res.json() // JSONで返す
}).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で変数apiAPIサーバーに送信するURLを構築。encodeURIComponent()では引数に指定した文字列をURLで使用できる形式に変換(エンコード)するためのもの。URLでは日本語は使用できないのでパラメーターとして送る文字列をこれによって変換している。

fetch()メソッドでは非同期で引数に指定したURLにHTTPリクエストを送信している(デフォルトはGET)。responseオブジェクトをfetch(api)からthen((response