2025-12-06(土) に開催される、hokkaido.js vol.05@Kushiro で使用するハンズオン資料です。obnizを使った4人同時リアルタイムIoT制御と、外部サービス（Airtable）との連携について触れています。
イベント詳細: hokkaido.js vol.05@Kushiro
obniz-hokkaido-js-946/
├── ハンズオン資料.md # メインのハンズオン資料
├── ローカルHTTPサーバー起動方法.md # HTTPサーバーの起動方法（参考）
├── README.md # このファイル
├── sample/ # サンプルコード（参加者が書き足す用）
│ ├── index.html # HTML（接続ボタンとLED制御UI）
│ └── script.js # JavaScript（TODOを埋めていく）
└── challenges/ # 課題1-5の解答例
├── challenge1.html # 課題1: センサー値を%に変換
├── challenge1.js
├── challenge2.html # 課題2: スライダーを使ったLED制御（PWM）
├── challenge2.js
├── challenge3.html # 課題3: 自動調光ライト
├── challenge3.js
├── challenge4.html # 課題4: リアルタイム状態モニタ
├── challenge4.js
├── challenge5.html # 課題5: Airtableログ記録
└── challenge5.js
注: 全てのHTMLファイルはTailwind CSS v4を使用してスタイリングされています。
sample/script.jsの設定値を変更OBNIZ_ID: 配布されたobniz IDLED_PORT: 割り当てられたポート番号（0-3）ACCESS_TOKEN: 必要に応じてアクセストークン
sample/index.htmlをWebブラウザで開く- 接続ボタンをクリック
- ハンズオン資料に従ってTODO部分にコードを追加
sample/script.js に書き足していく形で各課題に取り組みます。
challenges/ フォルダには解答例が用意されています。
課題一覧:
- 課題1: センサー値を%に変換
- 課題2: スライダーを使ったLED制御（PWM）
- 課題3: 自動調光ライト（センサー連動）
- 課題4: リアルタイム状態モニタ（メッセージ共有）
- 課題5: Airtableを使ったログ記録（外部API連携）
課題5を実施する場合、Airtableの設定が必要です。
challenges/challenge5.js の設定値を変更してください：
const AIRTABLE_TOKEN = 'あなたのPersonal Access Token';
const BASE_ID = 'あなたのBase ID';
const TABLE_NAME = '操作ログ'; // Airtableで作成したテーブル名をそのまま入力詳細は ハンズオン資料.md の課題5セクションを参照してください。
各JavaScriptファイルの冒頭に設定値がハードコードされています。 ハンズオン当日に配布される情報に基づいて変更してください。
const OBNIZ_ID = '1234-5678'; // 配布されたobniz ID
const LED_PORT = 0; // 割り当てられたポート番号（0-3）
const ACCESS_TOKEN = ''; // アクセストークン（不要なら空文字）- Webブラウザ（Chrome、Edge、Firefoxなど最新版）
- テキストエディタ（VSCode推奨）
- Airtableアカウント（課題5で使用、無料）
このハンズオン資料は、obniz公式ドキュメントに基づいています：
- 複数クライアント同時接続:
local_connect: falseの設定を追加 - PWM制御:
obniz.getFreePwm()を使用 - センサー値取得:
obniz.ad0.start()で継続監視を実装 - 電圧基準: 5V基準で計算
- obniz IDは参加者全員で共有します
- LEDポート番号は各参加者に1つずつ割り当てられます
- 本ハンズオンはobniz Cloud経由の接続を使用します（obnizボード側へのプログラム書き込みは不要）
- 複数人で同時接続するため、必ず
local_connect: falseの設定が必要です