最高にかっこいい自分用サイネージ作成プロジェクト
このプロジェクトは休止しています。オープンソースのプロジェクトが既に存在していたからです。詳細は以下のリンクに記載されています。
イメージ
ここが僕の部屋だ。このテレビに有益な情報をカッコよく表示したい。
まだカッコよくないが、イメージはこんな感じ。 (2020/01/31)
少しカッコよくなったが、機能性が低すぎる (2020/02/01)
動機
- 友達を家に招き、僕の家のsmartさをアピールしようとした。しかしただAlexaでライトを制御するだけでは地味すぎた。まずは最高にかっこいいものを表示するディスプレイが必要だ。
- raspberry piを使いたい
要件
最重要な要件
- 最高にクールな表示
要件
- 僕が家にいる間は常時ON
- Webとの通信で必要な情報を取得
- 初期費用15,000円程度まで
進捗
ハード
注文まで 次はraspberry pi の初期設定
HTML
簡単なプロトタイプ作成まで 次はCSSによってカッコよくする
Lambda
todoistアプリとの連携まで 次はGoogle calendarとの連携まで
ToDo
必要なハードを揃える (計15240円)
- raspberry pi 4 model b RAM2GB
- raspberry pi 4ケース
- 有線キーボード
- 有線マウス
- HDMI to micro HDMI adapber
- MicroSD 32 GB
- 5V3A充電アダプタ
- USB type A (オス)-USB type C (オス)
- 複数口電源タップ
僕が今足りていないものだけをリストしている。このリストが他の人にも当てはまるとは限らない。
raspberry piの初期設定
https://projects.raspberrypi.org/en/projects/raspberry-pi-setting-up
HTMLの作成
- ソースコードはgithubで管理
- CSSフレームワークはsemantic ui, materialize, uikitで悩んでいる
- React, Vueは必要か、どちらにするべきか悩んでいる
- 動的な部分はTypeScriptで記述する
- めちゃくちゃカッコよくする (自動で動くカルーセルは必須)
- 色は青ベース
Lambda関数の作成
- クライアントが使いやすい形で情報をまとめるAPI
開発記録
2020/02/01
フロントエンド: semantic uiを採用して開発しようとした。しかしそれを途中で辞めた。semantic uiがcssで!importantを利用しているため、細かい調整が阻まれたからだ。
フロントエンド: sassを導入した。変数やmixinを利用できるようになり嬉しい。例えば影の表示はmixinを使った。
将来的に追加したい機能
- Alexaによる制御 (為になりそうなリンク: https://www.hackster.io/nishit-patel/controlling-raspberry-pi-using-alexa-33715b)
心意気
- ラズパイ持ってないロボットエンジニアはいない。もし持っていないのなら恥だと思った方が良い。