5分で作るオリジナル IAMMETER エネルギーダッシュボード

IAMMETER ユーザーの多くは、いずれ監視インターフェースをカスタマイズしたいと考えています。例えば：

プレゼンテーションやクライアントプロジェクト用に、監視ダッシュボードへ会社のロゴを追加する
有効電力、無効電力、電流などの特定のパラメータのみを表示する
エネルギーデータを提示するためのより視覚的に魅力的なチャートを作成する
複数の IAMMETER メーターを監視するための大画面エネルギー監視ダッシュボードを構築する
自社システム用にカスタムの太陽光発電・エネルギー監視インターフェースを作成する

このようなカスタマイズのニーズに応えるため、IAMMETER はオープンソースプロジェクトを立ち上げました：

👉 /newsshow/iammeter-app-store-launched

このプロジェクトは IAMMETER API とローカルインターフェースを中心に構築されており、ユーザーは独自のアプリケーションを開発できます。

以前は、この種のカスタマイズにはプログラミングの知識が必要でした。

しかし今では、AI の助けを借りれば状況は一変します。

プログラマーでなくても、わずか数分で独自の IAMMETER Static App エネルギーダッシュボードを構築できるようになりました。

ビデオチュートリアル

AI で IAMMETER ダッシュボードを構築する

まず、IAMMETER GPT アシスタントを開きます：

https://chatgpt.com/g/g-68e9cc3b83408191901b66b524ba5373-iammeter-assistant

次に、次のように質問するだけです：

please give me a static app, monitor the power value of the single phase meter. let me configure the IP and refresh interval in this dashboard.

要件はそのまま直接記述できます。例えば：

無効電力を監視する
NEM（ネットメータリング）の測定値を表示する
プロフェッショナルな太陽光発電監視ダッシュボードを作成する
インタラクティブなチャートを追加する
複数の IAMMETER メーターを監視する

リクエストに 「static app」 や 「dashboard」 などのキーワードが含まれていれば、IAMMETER GPT アシスタントは Static App の生成を希望していると理解します。

アシスタントは、HTML ベースの完全なエネルギー監視ダッシュボードを生成します。

生成されたダッシュボードをプレビューする

以下は、IAMMETER GPT アシスタントとの会話例です。

IAMMETER GPT assistant generating a static energy monitoring dashboard using AI

生成された Static App は、インターフェース上で直接プレビューできます。

変更したい場合は、会話を続けて AI に修正を依頼するだけです。

Static App をダウンロードして実行する

生成されたダッシュボードに満足したら：

Download をクリックします
生成された HTML ファイルを保存します
ブラウザでローカルに開きます

Running an IAMMETER static HTML dashboard locally in a browser for energy monitoring

インストールは不要です。

IAMMETER Static Apps の利点

Static Apps は非常にシンプルで強力です。

サーバー不要
インストール不要
HTML ファイル 1 つだけ
あらゆる最新ブラウザで動作

そのため、Static Apps は以下の用途に最適です：

エネルギー監視ダッシュボード
太陽光発電監視ダッシュボード
電力使用量の可視化
マルチメーター監視画面

AI の支援により、カスタムダッシュボード構築のハードルは事実上なくなりました。

今や限界はあなたの想像力だけです。

例：シンプルな IAMMETER Static ダッシュボード

以下は、Static App が IAMMETER メーターからデータを読み取る方法を示す簡単な例です。

<!DOCTYPE html>
<html>
<head>
<title>IAMMETER Power Monitor</title>
</head>

<body>

<h2>IAMMETER Power Dashboard</h2>

Power: <span id="power">loading...</span> W

<script>

const meterIP = "192.168.1.6";

function updatePower(){

fetch(`http://${meterIP}/monitorjson`)
.then(res=>res.json())
.then(data=>{
document.getElementById("power").innerText=data.Data[0].P;
});

}

setInterval(updatePower,3000);
updatePower();

</script>

</body>
</html>

AI の助けを借りれば、これをチャートと複数メーターを備えた完全なエネルギー監視ダッシュボードに簡単に拡張できます。