質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

MQTT

MQTT(Message Queue Telemetry Transport)とは、TCP/IPネットワークで利用可能な通信プロトコルの一つで、IoT/M2M向けに開発された軽量なプロトコルです。ヘッダ部分は最小2バイトと小さく、通信量・CPU負荷・電力消費量などを抑えることができます。

解決済

mosquittoのMQTT URLってどれ?

sunstar
sunstar

総合スコア1

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

MQTT

MQTT(Message Queue Telemetry Transport)とは、TCP/IPネットワークで利用可能な通信プロトコルの一つで、IoT/M2M向けに開発された軽量なプロトコルです。ヘッダ部分は最小2バイトと小さく、通信量・CPU負荷・電力消費量などを抑えることができます。

2回答

0評価

0クリップ

507閲覧

投稿2021/12/25 14:26

編集2021/12/28 06:42

初質問です。
私はプログラム初心者なので多めに見ていただけるとありがたいです。

とあるサイトを参考にラズパイとMQTTを使用した 横軸:時間, 縦軸:メッセージ(数値)のリアルタイムチャートをローカル環境で実現しようと考えています。

使用機器:ラズパイ3b+

使用アプリケーション:mosquito, apache2, chart.js, chart-plugin-streaming, moment, mqtt.js

参考にしたプログラムの中にMQTTURLなるものがありました。

mosquittoの場合はMQTTURLに何を入力すればよろしいでしょうか?

教えていただければ幸いです。

補足として
リアルタイムチャートの部分は動作しています。

よろしくお願いします。

ご指摘がありましたのでソースコードを提示させていただきました。 内容も変にややこしくしてしまい申し訳ありません。 目標としてはラズパイとM5Stackなどの外部端末を使ってスマートウォッチのようなリアルタイムでセンサの値をグラフ化してApache上で表示させる機能を実装したいです。 また、使用するシチュエーションとして外で使えるようにしたいため、ローカル環境で動かすことを考えています。 後、ラズパイのhostapdでアクセスポイントにしているためスマホなどでラズパイに接続しても同様な画面が表示できるようにする予定です。 やりたいこととして ①外部端末からMQTTデータ(数値)をmosquittoでPublish(送信) ②Apache2からhtmlファイルを開く ③htmlファイルの横軸をリアルタイムで動かす ④リアルタイムで動いているグラフにmqttで受信したデータを縦軸の数値として折れ線グラフを表示する。 このようなシステムを作成したいです。 できれば使用するパッケージなどは変更せずにできるとありがたいです。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>リアルタイムなグラフ描画</title> <script src="moment-with-locales.min.js"></script> <script src="Chart.js"></script> <script src="chartjs-plugin-streaming.min.js"></script> <script src="mqtt.min.js"></script> </head> <body> <canvas id="myChart"></canvas> <script> const MQTTURL = "?"; const TOPIC = "home/"; let client = mqtt.connect(MQTTURL, { clientId: "Browser-" + Math.floor(Math.random() * 100), // ID Example: "Browser-23" }); client.on("connect", function () { client.subscribe("presence", function (err) { if (!err) { console.log("接続"); client.subscribe(TOPIC); } else { console.log("接続エラー"); } let chart = new Chart(ctx, { type: "line", data: { datasets: [ { data: [], }, { data: [], }, ], }, options: { scales: { xAxes: [ { type: "realtime", realtime: { delay: 2000, }, }, ], }, }, }); client.on("message", function (topic, message) { console.log(message.toString()); chart.data.datasets[0].data.push({ x: Date.now(), y: message.toString(), }); chart.update({ preservation: true, }); }); </script> </body> </html> ```

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

yuki23

2021/12/26 00:47

ソースコードを提示してください
thkana

2021/12/28 04:47

なにを作ろうとしているのでしょう? ローカル環境でなにか図を描きたいだけの様子ですが、大げさなコトバが飛び交っている気がします。 もちろんローカルでMQTTだのapacheだの通しても悪いことはないでしょうけれど... 初心者を自称するのであれば、「方針の選択」の段階で目標からそれた方角に進んでしまっている可能性を否定できませんよね。まず最終的にやりたいこと(MQTTの使い方、とかいうような手段の話ではなく)を説明してみてください。 (といいつつ私自身はあまりネットワーク系には強くないのですが、やりたいこと、欲しい物をちゃんと説明できれば出入りしている猛者がなんとかしてくれるんじゃないかと)
sunstar

2021/12/28 06:31

返信が遅くなってしまい申し訳ありません。 ソースコードの提示と説明の追加をさせていただきました。 確認よろしくおねがいします。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Raspberry Pi

Raspberry Piは、ラズベリーパイ財団が開発した、名刺サイズのLinuxコンピュータです。 学校で基本的なコンピュータ科学の教育を促進することを意図しています。

MQTT

MQTT(Message Queue Telemetry Transport)とは、TCP/IPネットワークで利用可能な通信プロトコルの一つで、IoT/M2M向けに開発された軽量なプロトコルです。ヘッダ部分は最小2バイトと小さく、通信量・CPU負荷・電力消費量などを抑えることができます。