このページは機械翻訳を使用して翻訳されました。最新版の英語を参照するには、ここをクリックします。

ThingSpeakプロットをWebページに埋め込む

ThingSpeak™ グラフィックを埋め込み、独自の Web サイトやブログに最新のデータを表示できます。ThingSpeak ディスプレイを使用すると次のことができます。

  • 測定値のリアルタイム更新を独自の Web ページで提供します。

  • 同じページに複数のフィールドまたはチャネルを表示するためのダッシュボードを作成します。

  • ThingSpeak プロットを埋め込んだモバイル アプリを作成します。

ウェブページにプロットを埋め込む

  1. 興味のあるプロットから <iframe> タグ情報を収集します。プロットのタイトル バーで、単語バブルをクリックします。

  2. ウィンドウに表示されるテキストをコピーします。テキストの形式は次のようになります。

    <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">

  3. メモ帳などのプレーンテキスト エディターで HTML を編集できます。エディターで、チャネルからコピーした要素を HTML ファイルに追加します。

    <html><head><title>ThingSpeak Embedded Plot</title></head>
<body>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">
</body></html>

以下は、Web ページに埋め込まれたプロットのサンプルです。

ThingSpeak ダッシュボードのプロットのサイズ変更

プロットが利用可能なスペースに収まるように、iframe のサイズを変更できます。プロットサイズはモバイル ディスプレイにとって特に重要です。制約パラメーターのみを指定すると、ブラウザは定義されたスペースにオブジェクトが収まるかどうかを確認します。たとえば、iframe がディスプレイ上の 200 ピクセルのスペース内に収まるようにするには、<iframe width=”200”...> を使用します。

異なるフィールドチャネルからの複数のプロットを同じディスプレイに組み合わせることもできます。こちらは 4 つのプロットのダッシュボード ビューです。

1 つはスペースに合わせて手動でサイズが変更されています。テーブルスペースは 3 つのプロットのサイズを制御します。この HTML コードは ThingSpeak ダッシュボードを示しています。

<html>
<head>
<title>Data Collection Dashboard</title>
</head>
<body>
<table border=2 bordercolor="#0000FF">
<tr><td colspan="2">
<h1 align="center" color="#00FFFF">Data Collection Dashboard</h1>
</td></tr>
<tr><td>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/320695/charts/1?bgcolor=%23ffffff&color=%23F62020&dynamic=true&results=800&type=line&update=15"></iframe>
</td>
<td><iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/166526?color=%23FFFFFF&dynamic=true"></iframe>
</td></tr>
<tr><td>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/12397/charts/2?results=720&dynamic=true&update=15"></iframe>
</td>
<td>
<iframe width="300" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/308777"></iframe>
<h3>Links</h3>
<a href="https://www.google.com">Google</a><br>
<a href="https://www.Mathworks.com">Mathworks</a><br>
<a href="https://en.wikipedia.org/wiki/Cleve_Moler">Wikipedia</a>
</td>
</html>

参考

トピック