JavaScriptを有効にしてください

webページからAzureIotCentralのAPIをたたく

 ·  ☕ 1 分で読めます

コード

  • index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Azure IoT Central</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <p class="title">Azure IoT Central</p>
    <div id="area1">
      <button type="button" id="btn1">値取得</button>
      <br>
      <input type="text" id="tBox" class="font-main" />
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>
  • index.css
1
2
3
4
5
6
7
.font-main {
  padding: 2px;
}

#btn1 {
  margin-bottom: 4px;
}
  • index.js

※{}の中は適切なものに置き換えてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$("#btn1").on("click",async function()  {
  response = (await fetch('https://{your app subdomain}.azureiotcentral.com/api/preview/devices/{Device ID}/telemetry/{telemetry name}',
  {
   method: 'GET',
   headers: {
     'Content-Type': 'application/json',
     'Authorization': {api token}
   }
  }
  ))
  data = await response.json()
  
  $("#tBox").val(data.value);
});

以下の内容の場合、javascriptのコードを示します。

  • your app subdomain:iot-gr-rose-application
  • Device ID:2p02xiojzry
  • telemetry name:Humidity
  • api token:SharedAccessSignature sr=cad…(※ここは適切なものを入れてください)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$("#btn1").on("click",async function()  {
  response = (await fetch('https://iot-gr-rose-application.azureiotcentral.com/api/preview/devices/2p02xiojzry/telemetry/Humidity',
  {
   method: 'GET',
   headers: {
     'Content-Type': 'application/json',
     'Authorization': 'SharedAccessSignature sr=cad...'
   }
  }
  ))
  data = await response.json()
  
  $("#tBox").val(data.value);
});

無事表示されました

参考

共有

mametarou963
著者
mametarou963
組込エンジニア