#include <M5StickCPlus2.h>  // M5StickC Plus2 専用のライブラリを読み込む
#include <M5Unified.h>  // M5Stackシリーズを統合的に扱えるライブラリ
#include <WiFi.h>        // Wi-Fi 接続を行うための標準ライブラリ

// 接続先のWi-Fi情報をここに書く
const char* ssid = "YOUR-SSID";   // ←自分のWi-FiのSSIDに変更
const char* pass = "YOUR-PASS";   // ←自分のWi-Fiのパスワードに変更

void setup(){
  auto cfg = M5.config();    // M5の設定を取得
  M5.begin(cfg);             // M5StickC Plus2 を初期化

  // 画面の設定（向き・文字サイズなど）
  M5.Display.setRotation(1);     // 画面を横向きにする
  M5.Display.fillScreen(TFT_BLACK); // 画面を黒でクリア
  M5.Display.setTextSize(2);     // 文字サイズを大きめに
  M5.Display.setCursor(8,8);     // 表示開始位置を左上に
  M5.Display.println("Connecting WiFi..."); // Wi-Fi接続中と表示

  // Wi-Fiに接続を開始
  WiFi.begin(ssid, pass);

  // 接続が完了するまで待つ（状態が「接続済み」になるまでループ）
  while (WiFi.status() != WL_CONNECTED) {
    delay(300);  // 0.3秒待つ（接続が安定するまで繰り返す）
  }

  // 接続できたら画面にIPアドレスを表示
  M5.Display.fillScreen(TFT_BLACK);          // 画面をクリア
  M5.Display.setCursor(8,8);                 // 表示位置を左上に
  M5.Display.printf("IP: %s\n", WiFi.localIP().toString().c_str()); 
  // Wi-Fiから取得したローカルIPアドレスを文字列にして表示

  Serial.begin(115200); // PCとのシリアル通信開始
  Serial.printf("IP: %s\n", WiFi.localIP().toString().c_str()); 
  // シリアルモニタにも同じIPを出力（確認用）
  M5.Display.printf("step2");
}

void loop(){ 
  M5.delay(10); // ほんの少し待機（CPUを休ませる）
}

#include <M5StickCPlus2.h>  // M5StickC Plus2 専用のライブラリを読み込む
#include <M5Unified.h>  // M5Stackシリーズを統合的に扱えるライブラリ
#include <WiFi.h>        // Wi-Fi接続に必要なライブラリ
#include <WebServer.h>   // HTTPサーバを動かすライブラリ

const char* ssid = "YOUR-SSID";    // 接続するWi-FiのSSID（要変更）
const char* pass = "YOUR-PASS";    // 接続するWi-Fiのパスワード（要変更）
WebServer server(80);             // ポート80でHTTPサーバを用意

// CORS対応のためのヘッダを付与する関数
void cors(){
  server.sendHeader("Access-Control-Allow-Origin", "*");           // すべてのアクセス元を許可
  server.sendHeader("Access-Control-Allow-Methods", "GET,OPTIONS");// GETとOPTIONSを許可
  server.sendHeader("Access-Control-Allow-Headers", "Content-Type");// Content-Typeヘッダを許可
}

void setup(){
  auto cfg = M5.config(); M5.begin(cfg);       // M5を初期化
  M5.Display.setRotation(1);                   // 画面を横向きに設定
  M5.Display.setTextSize(2);                   // 文字サイズを大きめに設定
  M5.Display.fillScreen(TFT_BLACK);            // 画面を黒でクリア

  WiFi.begin(ssid, pass);                      // Wi-Fi接続開始
  while (WiFi.status() != WL_CONNECTED) {      // 接続が完了するまで待機
    delay(300);                                // 0.3秒ごとに確認
  }

  // 「/ping」にアクセスがあったら「pong」と返す処理を登録
  server.on("/ping", HTTP_GET, [](){ 
    cors();                                    // CORSヘッダを追加
    server.send(200, "text/plain", "pong");    // ステータス200で"pong"を返す
  });

  // 存在しないパスにアクセスされた場合の処理
  server.onNotFound([](){
    if (server.method()==HTTP_OPTIONS){        // OPTIONSメソッドなら
      cors(); server.send(204);                // CORS対応して204（No Content）を返す
    }
    else {                                     // それ以外は
      server.send(404, "text/plain", "Not Found"); // 404エラーを返す
    }
  });

  server.begin();                              // HTTPサーバを開始

  M5.Display.setCursor(8,8);                   // 文字表示位置を左上に
  // M5画面に自分のIPアドレスを表示
  M5.Display.printf("IP: %s\n", WiFi.localIP().toString().c_str());
  M5.Display.printf("step3");
}

void loop(){ 
  server.handleClient();                       // クライアントからのアクセスを処理
}

#include <M5StickCPlus2.h>  // M5StickC Plus2 専用のライブラリを読み込む
#include <M5Unified.h>  // M5Stackシリーズを統合的に扱えるライブラリ
#include <WiFi.h>        // Wi-Fi 接続に必要な標準ライブラリ
#include <WebServer.h>   // HTTP サーバを簡単に立てるためのライブラリ

const char* ssid = "YOUR-SSID";   // ←自分のWi-FiのSSIDに変更
const char* pass = "YOUR-PASS";   // ←自分のWi-Fiのパスワードに変更

WebServer server(80);             // ポート80でHTTPサーバを作成（ブラウザから普通にアクセスできるポート）

// 加速度センサーの値をJSON形式で返す関数
String sensors(){
  float ax, ay, az; 
  M5.Imu.getAccel(&ax, &ay, &az);   // IMUから加速度データを取得（x, y, z軸）
  // 文字列を組み立てて {"acc":[x,y,z]} というJSONを作る
  String j = "{"; 
  j += "\"acc\":[" + String(ax,3) + "," + String(ay,3) + "," + String(az,3) + "]";
  j += "}"; 
  return j;                         // 完成したJSON文字列を返す
}

// ブラウザ（fetchなど）からのアクセスを許可するための設定（CORSヘッダを付ける）
void cors(){ 
  server.sendHeader("Access-Control-Allow-Origin","*");  // どこからのアクセスでも許可する
}

void setup(){
  auto cfg = M5.config();           // M5の設定を取得
  M5.begin(cfg);                    // M5StickC Plus2を初期化
  M5.Display.setRotation(1);        // 画面を横向きにする
  M5.Display.setTextSize(2);     // 文字サイズを大きめに
  M5.Display.fillScreen(TFT_BLACK); // 画面を黒でクリア

  // Wi-Fiに接続する処理
  WiFi.begin(ssid, pass); 
  while(WiFi.status() != WL_CONNECTED){ // 接続が完了するまで繰り返す
    delay(300);                         // 0.3秒待って再チェック
  } 

  // /ping にアクセスされたときの処理
  server.on("/ping", [](){ 
    cors();                                       // CORSヘッダを付ける
    server.send(200, "text/plain", "pong");       // ステータス200で "pong" を返す
  });

  // /sensors にアクセスされたときの処理
  server.on("/sensors", [](){ 
    cors();                                       // CORSヘッダを付ける
    server.send(200, "application/json", sensors()); // JSON形式のセンサー値を返す
  });

  // 存在しないURLにアクセスされたときの処理
  server.onNotFound([](){ 
    if(server.method() == HTTP_OPTIONS){          // もしOPTIONSメソッドなら（CORSの事前確認用）
      cors(); 
      server.send(204);                           // 204 No Content を返す
    } else {
      server.send(404,"text/plain","Not Found");  // それ以外は 404エラーを返す
    }
  });

  server.begin();   // HTTPサーバを開始する

  // M5の画面に自分のIPアドレスを表示
  M5.Display.setCursor(8,8); 
  M5.Display.printf("IP: %s\n", WiFi.localIP().toString().c_str());
  M5.Display.printf("step4");
}

void loop(){ 
  server.handleClient();   // クライアント（ブラウザなど）からのリクエストを処理する
}

let acc = [0,0,0];                           // M5から受け取る加速度 [ax, ay, az] を保持する変数
const base = "http://192.168.1.xxx";         // ← ここを M5 の IP アドレスに置き換える（例: http://192.168.68.56）

function setup(){
  createCanvas(500, 300);                    // 幅500px, 高さ300px のキャンバスを作る（p5.jsの基本）

  // 100ms ごと（10Hz）に M5 の /sensors を取りに行く
  setInterval(async () => {
    try{
      const r = await fetch(base + "/sensors"); // HTTP GET で JSON を取得
      const j = await r.json();                  // レスポンスを JSON として解釈
      acc = j.acc || acc;                        // j.acc があれば更新、なければ前の値を維持
    }catch(e){
      // console.warn(e); // デバッグしたいときはコメントアウトを外す
    }
  }, 100);                                     // 100ms 間隔 = 10Hz
}

function draw(){
  background(245);                             // 背景を薄いグレーに
  noStroke();                                  // 円の枠線なし
  fill(30);                                    // 円の塗り色（濃いグレー）

  // acc[0], acc[1] を使って円の位置を決める（スケール係数 60）
  const cx = width/2  + acc[0] * 60;           // xは画面中央を基準に加速度で左右に移動
  const cy = height/2 + acc[1] * 60;           // yも画面中央を基準に上下に移動
  circle(cx, cy, 20);                           // 直径20pxの円を描く

  // 取得中の数値を文字で表示（小数2桁）
  fill(0);                                     // 文字色：黒
  textSize(14);                                // 文字サイズ：14px
  text(`acc: ${acc.map(v => v.toFixed(2)).join(', ')}`, 10, 20); // 左上に表示
}

#include <M5StickCPlus2.h>  // M5StickC Plus2 専用のライブラリを読み込む
#include <M5Unified.h>  // M5Stackシリーズを統合的に扱えるライブラリ
#include <WiFi.h>        // Wi-Fi 接続のための標準ライブラリ
#include <WebServer.h>   // 簡易HTTPサーバを実装するためのライブラリ

const char* ssid = "YOUR-SSID";   // ←自分のWi-FiのSSIDに変更
const char* pass = "YOUR-PASS";   // ←自分のWi-Fiのパスワードに変更
WebServer server(80);             // ポート80でHTTPサーバを起動（ブラウザが普通にアクセスできる）

String sensors(){ float ax,ay,az; M5.Imu.getAccel(&ax,&ay,&az);               // IMU（加速度）値を取得
  String j="{"; j += "\"acc\":[" + String(ax,3) + "," + String(ay,3) + "," + String(az,3) + "]"; j += "}"; return j; } // {"acc":[x,y,z]} を文字列で返す
void cors(){ server.sendHeader("Access-Control-Allow-Origin","*"); }           // CORS許可（p5のfetchを通すため）

void setup(){
  auto cfg=M5.config(); M5.begin(cfg);                                         // M5本体の初期化
  M5.Display.setTextSize(2);     // 文字サイズを大きめに  
  M5.Display.setRotation(1); M5.Display.fillScreen(TFT_BLACK);                 // 画面を横向き＆一度黒でクリア

  WiFi.begin(ssid, pass); while(WiFi.status()!=WL_CONNECTED){ delay(300);}     // Wi-Fi接続が完了するまで待機（300ms間隔で確認）

  server.on("/ping", [](){ cors(); server.send(200,"text/plain","pong"); });   // 動作確認用：/ping に GET で "pong" を返す
  server.on("/sensors", [](){ cors(); server.send(200,"application/json", sensors()); }); // /sensors に GET で 加速度のJSONを返す

  server.on("/fill/red", [](){ cors(); M5.Display.fillScreen(TFT_RED);   server.send(200,"text/plain","OK"); });   // /fill/red で画面を赤にして "OK"
  server.on("/fill/black", [](){ cors(); M5.Display.fillScreen(TFT_BLACK); server.send(200,"text/plain","OK"); }); // /fill/black で画面を黒にして "OK"

  server.onNotFound([](){ if(server.method()==HTTP_OPTIONS){ cors(); server.send(204);} else server.send(404,"text/plain","Not Found"); }); // 未定義URLやOPTIONSに対応
  server.begin();                                                               // HTTPサーバ開始

  M5.Display.setCursor(8,8);                                                    // 文字描画位置を左上に
  M5.Display.printf("IP: %s\n", WiFi.localIP().toString().c_str());            // 割り当てIPを画面に表示（ブラウザからアクセスするために見る）
  M5.Display.printf("step6");
}

void loop(){ server.handleClient(); }                                           // 受信したHTTPリクエストを処理し続ける

let acc = [0,0,0];                          // M5から受け取る加速度 [ax, ay, az] を格納する配列
const base = "http://192.168.1.xxx";        // ← M5のIPアドレスに置き換える（例: "http://192.168.68.56"）

function setup(){
  //前のまま
}

function draw(){
  //前ののまま
}

//追加
let clickCount = 0;                     // クリック回数カウンタ

// マウスクリックやタップがあったときに呼ばれる
// クリックで赤↔黒をトグル
function mousePressed(){
  clickCount++;  // カウントアップ
  const colorPath = (clickCount % 2 === 1) ? "/fill/red" : "/fill/black";
  fetch(base + colorPath);  // M5にリクエスト送信
}

#include <M5StickCPlus2.h>  // M5StickC Plus2 専用のライブラリを読み込む
#include <M5Unified.h>  // M5Stackシリーズを統合的に扱えるライブラリ
#include <WiFi.h>             // Wi-Fi接続に使う標準ライブラリ

const char* ssid = "YOUR-SSID";   // ←自分のWi-FiのSSIDに変更
const char* pass = "YOUR-PASS";   // ←自分のWi-Fiのパスワードに変更

void setup(){
  M5.begin();                                 // M5本体の初期化
  M5.Display.setRotation(1);                  // 画面を横向きに
  // 必要なら文字サイズなども設定可：M5.Display.setTextSize(2);

  // --- Wi-Fi接続（NTPはインターネット接続が前提） ---
  WiFi.begin(ssid, pass);                     // アクセスポイントへ接続開始
  while (WiFi.status() != WL_CONNECTED) {     // 接続が完了するまで待機
    M5.Display.print("...");
    delay(300);                               // 0.3秒間隔で確認
  }

  // --- NTP設定（JST: UTC+9、サマータイムなし） ---
  // 第1引数: 日本のオフセット（秒）= 9時間 * 3600秒
  // 第2引数: サマータイム補正（日本は 0）
  // 第3,4引数: 使うNTPサーバ（複数指定でフォールバック（倒れた時の代替手段））
  configTime(9 * 3600, 0, "ntp.nict.jp", "pool.ntp.org");
}

void loop(){
  struct tm t;                                // 時刻を受け取るための構造体（年/月/日/時/分/秒など）
  if (getLocalTime(&t)) {                     // NTP同期済みならローカル時刻（JST）が入る、失敗ならfalse
    M5.Display.fillScreen(TFT_BLACK);         // 画面を黒でクリア（毎秒全消しするので簡単・確実）
    M5.Display.setCursor(8, 8);               // 描画位置を左上へ
    // 年/月/日 時:分:秒 をゼロ埋めで整形して表示
    M5.Display.printf("%04d/%02d/%02d %02d:%02d:%02d\n",
      t.tm_year + 1900,                       // tm_year は 1900年からの経過年数 → 西暦に直す
      t.tm_mon + 1,                           // tm_mon は 0=1月 … 11=12月 → +1 する
      t.tm_mday,
      t.tm_hour,
      t.tm_min,
      t.tm_sec
    );
    M5.Display.printf("step7");
  } else {
    // まだNTPが同期できていない・一時的に失敗 → 待つだけ
    M5.Display.setCursor(8, 8);
    M5.Display.print("Syncing time...");
  }
  delay(1000);                                // 1秒おきに画面更新
}

#include <M5StickCPlus2.h>  // M5StickC Plus2 専用のライブラリを読み込む
#include <M5Unified.h>  // M5Stackシリーズを統合的に扱えるライブラリ
#include <WiFi.h>                      // Wi-Fi接続に使う標準ライブラリ
#include <WebServer.h>                 // 簡易HTTPサーバのライブラリ
#include <time.h>                      // NTP/時刻関連（configTime, getLocalTime など）

const char* ssid = "YOUR-SSID";   // ←自分のWi-FiのSSIDに変更
const char* pass = "YOUR-PASS";   // ←自分のWi-Fiのパスワードに変更
WebServer server(80);                  // ポート80でHTTPサーバを起動

// CORS対応（ブラウザの fetch() を許可）
void cors(){
  server.sendHeader("Access-Control-Allow-Origin", "*");      // どこからのOriginでも許可
  server.sendHeader("Access-Control-Allow-Methods", "GET");   // GETを許可（必要に応じて追加）
  server.sendHeader("Access-Control-Allow-Headers", "*");     // ヘッダを許可（簡略）
}

// ISO8601形式（JST）文字列を作るヘルパー
String nowIsoJst(){
  struct tm t;                                                // 時刻を受け取る構造体
  if (getLocalTime(&t)) {                                     // NTP同期済みならtrue
    char buf[32];                                             // "YYYY-MM-DDTHH:MM:SS+09:00" 用のバッファ
    // 日本は常に +09:00（サマータイムなし）なので固定で付ける
    strftime(buf, sizeof(buf), "%Y-%m-%dT%H:%M:%S", &t);      // まず日時までを整形
    return String(buf) + "+09:00";                            // タイムゾーン部分を付けて返す
  }
  return String("unsynced");                                  // まだ同期できていない場合のフォールバック
}

// エポック（秒）→ ミリ秒にして返す（同期前は0）
unsigned long long nowEpochMs(){
  time_t sec = time(nullptr);                                 // 現在時刻（秒）。同期前は 0 または1970年付近
  if (sec <= 1000) return 0ULL;                               // 明らかに未同期なら 0 を返す
  return (unsigned long long)sec * 1000ULL;                   // ミリ秒換算（粗いが十分）
}

// 加速度＋時刻をJSONで返す関数
String sensorsJson(){
  float ax, ay, az;                                           // 加速度値（x, y, z）
  M5.Imu.getAccel(&ax, &ay, &az);                             // IMUから加速度を取得

  String iso = nowIsoJst();                                   // ISO8601の時刻文字列（JST）
  unsigned long long ts = nowEpochMs();                       // エポック（ms）
  
  // {"acc":[x,y,z], "ts": 1695100000000, "iso":"2025-09-20T12:34:56+09:00"} を組み立て
  String j = "{";                                             // JSON開始
  j += "\"acc\":[" + String(ax,3) + "," + String(ay,3) + "," + String(az,3) + "],";
  j += "\"ts\":" + String((unsigned long long)ts) + ",";      // 数値なのでダブルクォートなし
  j += "\"iso\":\"" + iso + "\"";                             // 文字列はダブルクォートで囲む
  j += "}";                                                   // JSON終了
  return j;                                                   // 完成したJSONを返す
}

void setup(){
  auto cfg = M5.config();                                     // M5の起動設定を取得
  M5.begin(cfg);                                              // M5本体を初期化
  M5.Display.setRotation(1);                                  // 画面を横向きに
  M5.Display.setTextSize(2);                                  // 文字を大きめに
  M5.Display.fillScreen(TFT_BLACK);                           // 背景を黒でクリア

  WiFi.begin(ssid, pass);                                     // Wi-Fi接続開始
  while (WiFi.status() != WL_CONNECTED) {                     // 接続完了まで待機
    M5.Display.setCursor(8, 8);                               // 画面左上
    M5.Display.printf("Connecting WiFi...\n");                // 接続中の表示（簡易）
    delay(300);                                               // 0.3秒待つ
  }

  // NTP設定（JST=UTC+9、サマータイムなし） 
  configTime(9*3600, 0, "ntp.nict.jp", "pool.ntp.org");       // 最低でも1つは同期サーバを入れておく

  // /ping → "pong"（生存確認）
  server.on("/ping", HTTP_GET, [](){
    cors();                                                   // CORSを許可
    server.send(200, "text/plain", "pong");                   // 文字列 "pong" を返す
  });

  // /sensors → 加速度＋時刻のJSON
  server.on("/sensors", HTTP_GET, [](){
    cors();                                                   // CORSを許可
    server.send(200, "application/json", sensorsJson());      // JSONを返す
  });

  // /fill/red → 画面を赤に
  server.on("/fill/red", HTTP_GET, [](){
    cors();                                                   // CORSを許可
    M5.Display.fillScreen(TFT_RED);                           // 塗りつぶし
    server.send(200, "text/plain", "OK");                     // "OK" 応答
  });

  // /fill/black → 画面を黒に
  server.on("/fill/black", HTTP_GET, [](){
    cors();                                                   // CORSを許可
    M5.Display.fillScreen(TFT_BLACK);                         // 塗りつぶし
    server.send(200, "text/plain", "OK");                     // "OK" 応答
  });

  // 未定義URLやOPTIONSへの対応
  server.onNotFound([](){
    if (server.method() == HTTP_OPTIONS) {                    // 事前フライト（CORS）
      cors();                                                 // CORSを許可
      server.send(204);                                       // No Content
    } else {
      server.send(404, "text/plain", "Not Found");            // 見つからない
    }
  });

  server.begin();                                             // HTTPサーバ開始

  M5.Display.fillScreen(TFT_BLACK);                           // 画面を一度クリア
  M5.Display.setCursor(8, 8);                                 // 左上から
  M5.Display.printf("IP: %s\n", WiFi.localIP().toString().c_str()); // 割り当てIPを表示
  M5.Display.printf("step8: sensors + time\n");               // ラベル
}

void loop(){
  server.handleClient();                                      // HTTPリクエストを処理し続ける
}

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>p5 x M5 HTTP</title>
    <!-- p5.js 本体（CDNから読み込み） -->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.10.0/lib/p5.min.js"></script>
  </head>
  <body>
    <main></main>
    <!-- 自分のスケッチを最後に読み込む -->
    <script src="sketch.js"></script>
  </body>
</html>

let acc = [0,0,0];                                // 加速度 [ax, ay, az]
let iso = "—";                                    // デバイス側のISO8601文字列（JST）
let ts  = 0;                                      // デバイス側のエポック（ms）
let lastOkAt = 0;                                 // 最後に正常に受信できた時刻（ブラウザのms）

const base = "http://192.168.1.xxx";              // ← M5のIPに置き換え（例: "http://192.168.68.56"）

function setup(){
  createCanvas(600, 360);                         // キャンバス作成（少し広め）

  // 10Hzで /sensors を取りに行く
  setInterval(async () => {
    try{
      //前のまま

      iso = j.iso || iso;                         // ISO文字列（同期前は "unsynced" の可能性）
      ts  = typeof j.ts === "number" ? j.ts : ts; // 数値（ms）。j.ts が数値型かどうかをチェック。未同期なら 0 の可能性
      lastOkAt = performance.now();               // ブラウザ側での取得時刻を記録（ms）
    }catch(e){
      // 前のまま
    }
  }, 100);                                        // 100ms間隔
}

function draw(){
  //ここまで前のまま
　
　//以下を追加

  // 時刻（デバイス側のISO）をそのまま表示
  text(`iso (device JST): ${iso}`, 12, 44);

  // 遅延の目安（受信からの経過ms）— 見た目のヘルスチェック
  const ageMs = performance.now() - lastOkAt;     // 取得からの経過時間
  text(`age since last /sensors: ${ageMs.toFixed(0)} ms`, 12, 66);

  // デバイスのエポック（ms）。0 は「未同期」の合図
  text(`ts (device epoch ms): ${ts}`, 12, 88);
}

function mousePressed(){                         
//前のまま
}