Thigのプロジェクト集

Thig(ソフトウェアエンジニア)のプロジェクトを更新していきます

最高にかっこいい自分用サイネージ作成プロジェクト

このプロジェクトは休止しています。オープンソースのプロジェクトが既に存在していたからです。詳細は以下のリンクに記載されています。

magicmirror.builders

イメージ

ここが僕の部屋だ。このテレビに有益な情報をカッコよく表示したい。 f:id:ilohaspeach:20200201012653j:plain

まだカッコよくないが、イメージはこんな感じ。 (2020/01/31) f:id:ilohaspeach:20200201012516j:plain

少しカッコよくなったが、機能性が低すぎる (2020/02/01) f:id:ilohaspeach:20200201170530j:plain

動機

  • 友達を家に招き、僕の家の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を使った。

将来的に追加したい機能

心意気

  • ラズパイ持ってないロボットエンジニアはいない。もし持っていないのなら恥だと思った方が良い。