タグ: Raspberry Pi

自分の家の天気（気温・湿度・気圧）をRaspberry Piから5分ごとにサーバに送り、それを使っていろいろ遊ぶプロジェクト（github）もそろそろ大詰めだ。使用技術はScala + Play Framework。開発環境にもデプロイにもDockerを利用している。サーバはこのブログと同じさくらのVPSで、nginx-proxyによってサブドメインgyokuroへのアクセスを振り分けている。

ドキュメント

ベースURLはhttps://gyokuro.chao.tokyoで、現状公開しているリソースは以下のとおりだ。

• /temperature
  • 今日の天気の一覧（csv）
• /api/temperature
  • 今日の天気の一覧（JSON）

例：
{"status":"200","data":{"time":"00:25:00","temperature":27.7,"humidity":76.7,"pressure":1001.6}}

• /temperature/year/month/date
  • 指定した日の天気の一覧（csv）
• /api/temperature/year/month/date
  • 指定した日の天気の一覧（JSON）

例：
{"status":"200","data":[{"time":"00:00:00","temperature":27.6,"humidity":76.8,"pressure":1001.7},{"time":"00:05:00","temperature":27.6,"humidity":77,"pressure":1002},{"time":"00:10:00","temperature":27.8,"humidity":76.3,"pressure":1001.9},{"time":"00:20:00","temperature":27.8,"humidity":76.5,"pressure":1001.7},{"time":"00:25:00","temperature":27.7,"humidity":76.7,"pressure":1001.6}]}

• /tempearture/now
  • 最新の天気（html）
  • /はここにリダイレクト
  • クエリパラメータ white=true を受け取ると文字色を白くする
    • ←のiframeに必要なので作った
• /api/temperature/now
  • 最新の天気（JSON）

iframe化の苦労

WordPressは自由なhtmlをウィジェットに追加できるので、iframeを使って/temperature/nowを常に表示しようと思った。しかしPlay FrameworkはデフォルトでX-Frame-Options: denyが設定されているのでiframeに表示されない。これはクリックジャッキング防止のためだ。クリックジャッキングというのは僕のサイトを透明なiframeにして他のサイトの上に重ねて表示させることで、僕のサイトの任意の箇所を不正にクリックさせる手口だ。

MDNにしたがってX-Frame-Options: allow-from https://example.com/を登録しようと思ったのだが、なんとChromeは対応していない。ブチギレてる。対応してないということで無視されているのでとりあえず動いてはいる。ユーザーがクリックできる箇所はないのでたぶんオッケー（ホンマか？）。

iframeが表示されるようになったはいいが、黒背景に黒文字で表示されていて読めなかった。WordPress側からiframe内のstyleを操作するのは無理っぽかったので上記の通りクエリパラメータで白文字化できるようにして対応した。

頑張って作ったので適当にAPIで遊んでみてください。グラフ化するやつ作ってほしい。

ちなみに現在の状況は27.8 ℃、76.1 %、1001.4 hPa。肌がべたつきやや不快だ。今夜から明朝にかけてすごい降るらしい。通勤はできるかな？