Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
IoT実践! 行先予定表を電子ペーパーで作る
Search
Ryosuke Uchiyama
December 11, 2022
Technology
45
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
IoT実践! 行先予定表を電子ペーパーで作る
Ryosuke Uchiyama
December 11, 2022
More Decks by Ryosuke Uchiyama
See All by Ryosuke Uchiyama
AWSでサーバレスな書籍管理アプリを作る
step63r
0
61
PythonでSlack通知botを作る
step63r
0
23
ChatGPT実践
step63r
1
390
React x Socket.ioで人狼サーバを作る 第一章 フロントエンド実装
step63r
0
32
深層強化学習で東方AI 第一章 DQNの基本
step63r
0
320
Build 2021 プレイバック
step63r
0
42
WPFで実践アプリ開発! 第四章 機能の実装 Part 2
step63r
0
61
WPFで実践アプリ開発! 第三章 機能の実装 Part 1
step63r
0
140
WPFで実践アプリ開発! 第二章 UI
step63r
0
180
Other Decks in Technology
See All in Technology
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
0
210
bet_ai_day_2026_session02
agenticsec
1
1.3k
Amazon S3 Tablesに全部任せてみた結果——コンパクション/スナップショット管理は本当に手放せるか
shigeruoda
0
410
V8コントリビュート超入門
riyaamemiya
0
140
【視聴者参加型!】AWSセキュリティアンチパターンクイズ
syoshie
0
450
Redmine 7.0で私が開発した新機能の狙いと背景
vividtone
1
110
はじめてのDatabricks:技術者向けワークショップ / beginner-workshop
databricksjapan
PRO
0
230
スクラムで身についていた動き方を、XPで捉え直してみた
codmoninc
PRO
1
250
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
honyanya
1
270
その指示、Bobにしっかり伝わってる?初心者でも即実践できる プロンプト/コンテキスト設計のコツ
muehara
1
190
AIに丸投げしないトイル削減 / Eliminating Toil Without Leaving It All to AI
kohbis
3
890
動画配信アプリでの Engage SDK 導入 — TVer Android が Play ストアにコンテンツを届けるまで
techtver
PRO
0
130
Featured
See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
69
65k
Art, The Web, and Tiny UX
lynnandtonic
304
22k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
490
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Chasing Engaging Ingredients in Design
codingconduct
0
300
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
380
My Coaching Mixtape
mlcsv
0
310
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
270
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
230
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
3k
Transcript
IoT実践! 行先予定表を電子ペーパーで作る Ryosuke Uchiyama step63r
概要 • 行先予定表を電子化したい • 在席状況を自席から更新・確認できる • 在宅、出張先でも更新・確認できる
要件定義 Ph.1 • 行先表示端末 • Webアプリのダッシュボード Ph.2 • ダッシュボードから行先表示板を確認 •
ユーザー管理 Ph.3 • マルチデバイス対応(各島に1端末) • ログ強化など
行先表示端末 名前 行先 帰社 高海 桜内 テレワーク 黒澤 渡辺 4/7~9
東京 4/10 津島 国木田 テレワーク 小原 • こんな感じで表示制御できるやつ • 名前、行先、帰社、出勤有無を変更可能 • 出勤有無は反転色などで表現 • RasPi+モノクロ液晶or電子ペーパー • データはRasPi上にて永続化 • ダッシュボードから更新、参照するため、 WebAPIを用意して待ち受ける
ダッシュボード • 行先表示端末を変更するWebアプリ • それぞれ任意の文字列を入力可能 • 出勤有無はトグル的なUIで変更 • 更新されたら端末に即時反映 •
Ph.1ではとりあえず誰が誰の情報を書き換えてもよいことにする • Ph.2でユーザー管理:権限持ったユーザー?だけが他人の行先表示板を変更可能 • Ph.3でマルチデバイス対応:複数の島の端末を1つのダッシュボードで閲覧、変更可能
たてつけ 予定表の更新 予定表の閲覧
使ったもの Raspberry Pi 4 Model B ARMプロセッサを搭載したシングルボードコンピュータ。 購入価格:7,700円 7.5inch E-Ink
display HAT for Raspberry Pi SPIインターフェイスでRasPiと接続できる電子ペーパーディスプレイ。 購入価格:9,197円
IoT側の実装
プロパティ設計 - テーブル 高坂 高海 絢瀬 桜内 南 松浦 園田
黒澤(ダ) 星空 渡辺 西木野 津島 東條 国木田 小泉 小原 矢澤 黒澤(ル) 幅マージン 高さマージン フォント、サイズ 行数 列数(この場合は2) e-Paperの高さ e-Paperの幅
プロパティ設計 - セル 高坂 高海 1列に占める名前の幅の比率 セルと文字のパディング テーブルでそのセルが属する X, Y
位置
インターフェイス設計 名前 説明 引数 戻り値 get_all() テーブル情報を全て取得 なし テーブル: List[List[Dict[str,
Any]]] set_name() 指定セルの名前を設定 X位置: int, Y位置: int, 設定文字列: str なし set_status() 指定セルの行先を設定 X位置: int, Y位置: int, 設定文字列: str なし set_present() 指定セルの在席状態を設定 X位置: int, Y位置: int, 設定状態: bool なし get_name() 指定セルの名前を取得 X位置: int, Y位置: int 名前: str get_status() 指定セルの行先を取得 X位置: int, Y位置: int 行先: str get_present() 指定セルの在席状態を取得 X位置: int, Y位置: int 在席状態: bool
Web API設計 パス メソッド リクエストパラメータ レスポンス / GET なし テーブル:
List[List[Dict[str, Any]]] /{row}/{column} GET なし セルの情報: Dict[str, Any] /{row}/{rolumn} POST { "name": Union[str, None], "status": Union[str, None], "present": Union[bool, None] } { "status": "update success." }
ソースコード step63r/destboard https://github.com/step63r/destboard
ダッシュボード側の実装
画面設計 名前、行先、在席状態を表示する 行先を変更する トグルで在席状態をスイッチする
画面設計 名前、行先、在席状態を表示する 変更をe-Paperにも反映する
ソースコード step63r/destboard-client https://github.com/step63r/destboard-client
Demo
今後の課題など • とりあえず Issues に起票した機能追加、不具合改修 • 帰社時刻を入力する欄を忘れてた • ダッシュボードをもうちょっとリッチに •
複数デバイス対応とかデプロイ先真面目に考えるとか • 筐体が欲しい • 数十分放置で画面が少しずつ薄くなっていく希ガス(リフレッシュ入れたら改善するのか) • ぶっちゃけ実用に足るかどうかは分からない • 実用するなら数十センチ四方の電子ペーパーが必要。存在するのか。コスパ悪そう