ブロックチェーン・AI・システム開発の株式会社INDETAIL

【コンテンツ作成編】Raspberry Piで作ろう!手作りスマートミラー

2016.06.21
tacck

トップラズパイ

 

北海道には梅雨がないといいますが、6月はなんだかんだで雨がけっこう降るものです。 こんにちは、tacckです。

 

さて、今回はスマートミラー作成の第3回目として、スマートミラーで表示するコンテンツを作成していきます。

第1回:準備編
第2回:センサー編
第3回:コンテンツ作成編 ←今ここ
第4回:完成編

とはいえ、基本はブラウザでHTMLコンテンツを表示させるので、「ラズパイ特有」という感じは薄いです。 センサー編で紹介した「Server-Sent Events (SSE)」を使って、コンテンツ切り替えを行なっていきます。

ブラウザについての追加情報

 

本題に入る前に、ブラウザについての追加情報です。

 

前回は「Iceweasel」というブラウザを使用していました。 これは、Firefoxの派生ブラウザで、前回時点(2016/05/02)でRaspbianで提供されていたパッケージでした。

 

ところが、今回(2016/06/19)Raspbianをアップデートしたら「Firefox-esr」にアップグレードされていました。

 

そもそも「Iceweasel」は、Raspbianの派生元であるDebianと、Firefoxの開発元であるMozilla Foundationの間で、"Firefox"の商標利用に関して合意を取れなかった(それぞれの管理ポリシーの相違)ために、Debian側が派生ブラウザを作成した、という経緯があります。

 

それが今回、争点となっていた商標について和解(現在において問題がないこと)を確認できたために、DebianのパッケージとしてFirefoxが含まれるようになったとのことです。

 

(経緯についてはWikipediaにまとめられています。) そしてタイミング良く、Raspbianでもパッケージが切り替わったようです。

 

というわけで、今回はFirefoxで動作を確認していきます。

コンテンツ作成

コンテンツを考える

コンテンツについては、下記条件で考えました。

  • 外部からの情報を表示
  • センサーで複数ページ切り替え
  • 置き型の鏡なのでふと目に入ったときに表示されているとうれしい情報

最後の条件で思いついたものが、「天気情報」と「ニュース(の一覧)」でした。

どちらも簡単に調べられるものではありますが、ふと目に入るとうれしいものかなぁ、と思います。

ということで、下記のページが切り替わるようなコンテンツを作成します。

  • 天気情報として、天気のアイコン、気温、湿度、都市を表示する。同時に日時も表示する
  • ニュース記事のタイトルを数個表示する
  • 何も表示しない

1つ目は、時間と天気を表示します。 個人的にはセットで見たい情報なので、このようにしました。

2つ目は、ニュースの記事タイトルを表示します。 量は、画面のバランスから、4つ程度を表示するようにします。

3つ目は、鏡本来の機能を使いたい時用に用意します。 また、マジックミラー越しに見るということから、背景を黒、文字を白、を基調とし、文字サイズも大きめで画面を構成していきます。

 

情報の取得

時間と天気

20160620_01

 

天気情報については、フリーで利用しやすいもので「OpenWeatherMap」を選択しました。

 

余談ですが、今年弊社で新卒採用したメンバーへAndroidアプリ作成課題として「天気情報表示アプリ」を出したのですが、その時にも利用しました。

(指導担当者として自分も使っておかないと、、という気持ちも、選択するのに大きく影響しました。)

利用方法については検索すればたくさん情報が出てくるので、ここでは割愛いたします。

今回は、先に考えたコンテンツに合わせて、都市名(今回は弊社のある札幌市固定になりますが)、気温、湿度、天気情報を画面に表示します。

天気情報は、OpenWeatherMapに定義された天気IDをもとに判別します。 また、天気情報は、文字ではなくアイコンを利用します。

こちらも、画像でOpenWeatherMapから取得することもできます。

 

ただ、今回はコンテンツの雰囲気をシンプルに、文字色を白基調とするため、画像ではなく文字で、かつ、サイズも自由にスケールできるものがほしいです。

そこでOpenWeatherMapの提供する画像ではなく、「Weather Icons」を利用します。 時計は、JavaScriptで毎秒時間を取得して表示するだけなので、簡単ですね。 画面は上のようになります。

ニュース記事

 

20160620_03

 

 

ニュース記事は、Google NewsのRSSフィードを利用します。 ただ、RSSのままだと取り扱いが難しいので、これをJSONに変換してくるサービス「rss2json」を中継して利用します。

文字サイズのバランスなどから、今回は4件の記事タイトル、タイトルも一行のみ(行末が切れる場合は三点リーダで省略)としています。

ページ切り替え部

20160620_05

 

ページ遷移については、 [ニュース記事] <-> [空ページ] <-> [時間と天気] という関係で動くように対応します。 タッチセンサーを二つ用意し、右側のセンサーがタッチされたら右方向へ、左側のセンサーがタッチされれば左方向へ画面遷移します。

 

センサーからの情報取得・送信を行なうPythonプログラムは、最終的に下記のようになりました。

単純に、GPIOの該当するピン情報を取得し続けて、SSEのイベントとして出力しているだけです。

 

これを受ける側のHTMLは、下記のようにしています。 JavaScriptのイベントとして取得できるので、とくに難しいことを考えることなく受け取って処理します。

コードの全体については、GitHubにてご参照ください。

まとめ

 

今回で、センサーによってコンテンツを切り替える、という、スマートミラーの「中身」を作り上げることができました。 表示においての課題では、PCでは問題ない画面フェードアウト・フェードインのアニメーションが、Raspberry Piではカクツキが出てしまうこと、、です。

 

少しマシンパワーが足りないようなので、気持ち良く切り替えるためにはもう一工夫必要そうです。 残りは、Raspberry Piで電源投入後にコンテンツを表示させ「スマートミラー専用機」にすること、スマートミラーとしての見た目をなんとかすること、です。

 

次回はいよいよ最終回、「スマートミラー」として完成させます!

tacck Takuya KIHARA

エンジニア (モバイルアプリ、フロントエンド、バックエンド、インフラ) 得意なことは、領域をまたいで考え、開発すること。 ブログでは、主にAnsible、Docker、Raspberry Piのことを書いています。 好きなフィギュアスケートの技は、スプレッド・イーグルです。

「いいね」ボタンを押すと、最新情報をすぐに確認できます。