freeboardで天気への興味関心を満たしていく為のメモ


昨日『[Freeboardのウィジェットまとめ](http://qiita.com/morikat/items/fc30db38e6302beed7ce)』の記事を書きながら
freeboardの標準ウィジェットをひと通り勉強して
htmlウィジェットというのがあるものの良い使い方が思いつかなかった。

今日になってfreeboardの特性上常に表示させっぱなしにするので
天気の情報なんかが向いてるのかも？と思い調べてみた。

## 普段自分が天気情報を知る方法
* webページの天気予報情報や衛星画像
* 天気のOpenAPI
* ライブカメラ
* アメッシュ
* 上記サイトの情報等をAppleWatchで通知

ひとまずウィジェットに取り込めそうなものから試していく

## 衛星画像

[tenki.jp](http://www.tenki.jp/)さんの画面右端にある画像をとりあえず表示させる
![tenkijp.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/365668eb-494f-f307-4ed0-9f3b8232147e.png)

画像の上でマウスの右クリックをして画像のURLを取得
![tenkijp2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/5ad44f8c-df29-d41a-5cec-0faed44888f6.png)

取得したURL
```bash
http://az416740.vo.msecnd.net/static-images/satellite/recent_entry/japan_near/small.jpg?20150906091100
```

いらなそうなjpgの後部分だけを使う

```bash
http://az416740.vo.msecnd.net/static-images/satellite/recent_entry/japan_near/small.jpg
```

freeboardのPictureウィジェットに貼り付ける
※60秒更新は若干短すぎるので見なおしたほうが良いかも？
![tenkijp3.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/e2b0707d-e0b6-9db6-3ac3-f52dd118747b.png)

ウィジェット表示される
![tenki4.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/c8f60b75-9547-b8d2-9cee-c936a533b9cb.png)

## OpenAPI

普段はQiita の記事[天気情報を取得する](http://qiita.com/s0hno/items/b67a24bd3cbeb6e7cdc0I)を参考に以下のURLで取得した値を使ってNode-REDで遊んでいた

```bash
http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp
```

調べてみるとfreeboardには標準でデータソースとして使えるらしいので
データソースの追加をADDからする

![openapi.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/809c9531-df13-b2b3-6df1-6212a110b1e0.png)

NAMEの部分は後ほどの識別用なので分かりやすいように設定し
LOCATIONはTokyo,jpにした
![openapi2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/4eba14ff-5075-d2e1-e1ab-ccac535dc1e5.png)

正常に保存されると先ほどのNameの横にLast Updatedで更新が始まっている事が分かる
![openapi3.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/5fe8d79d-dbbf-b81d-dff9-2a5e9cd74c3b.png)

ウィジェットの追加
VALUEの部分に右のDATASOURCEを押すとtenkiが出てくるのでそちらを選ぶと後は取得可能なキーが出てくるのでcurrent_tempあたりをチョイス
![openapi4.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/cc611aad-a261-49ce-d3ec-a12e58a93c2e.png)

ウィジェットに追加された
![openapi5.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/2793fdb7-e3ad-4965-e6b9-bfb407fabce1.png)

## ライブカメラ

実はこの記事はHTMLウィジェットがこの部分で有効活用出来そうだったので書いた

### youtube

まずはお台場のお天気カメラ（定点ライブカメラ）を使う

[フジテレビお台場ライブカメラ](http://www.fnn-news.com/live/articles/LIVE00000001.html)はyoutubeを使っているらしいので
[youtubeのページ](https://www.youtube.com/watch?v=q_lRNp77C-c)に飛ぶ


動画のした部分にある説明欄の共有をクリックする
![tenki-youtube1.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/6c1a4b0a-1997-b28e-b580-79e667a641b6.png)

共有の横にある埋め込みコードをクリック
![tenki-youtube2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/6faa7812-fa94-2299-bc14-510e0153b749.png)

表示された埋め込みコードをメモする
![tenki-youtube3.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/cdb9185a-1994-8497-11f6-9ae1be43d6d5.png)

メモ結果
```bash
<iframe width="560" height="315" src="https://www.youtube.com/embed/q_lRNp77C-c" frameborder="0" allowfullscreen></iframe>
```

ウィジェットでHTMLを選択し先ほどの埋め込みコードを入れる
その際にwidthを300 heightを240に変更しておく

![tenki-youtube4-2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/7d079a53-03d3-6f67-5995-76d21d9965cd.png)

ウィジェットが表示されると再生ボタンが見えるので再生ボタンをオス
![tenki-youtube5-2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/5546729a-1bf0-ecb6-d343-e01e9472ed8b.png)

ライブカメラも表示された
![tenki-youtube6-2.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/898742bc-8c63-daa5-9cfb-1a47968dc857.png)

## ustream

よくustreamの秋葉原のライブカメラも見ていたので同じようにウィジェットに表示させてみる

[秋葉原ライブカメラ](http://www.ustream.tv/channel/%E7%A7%8B%E8%91%89%E5%8E%9F%E3%83%A9%E3%82%A4%E3%83%96%E3%82%AB%E3%83%A1%E3%83%A9)

動画を再生させて画面右下にマウスを持って行くと
右下に共有が出てくるので<>という部分をクリックする
![tenki-ustream1.png](https://qiita-image-store.s3.amazonaws.com/0/37192/145a2f1d-c837-85a7-7e32-ea199f3c1ccf.png)

ウィジェットのサイズは300x240のようなので
カスタムで左側に300と入力すると縦は169になるので
その状態でクリップボードにコピーをクリックする
![tenki-ustream2-2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/515d9683-aae6-772f-c135-4aaadcb2afef.png)

コピーした結果
```bash
<iframe width="300" height="169" src="http://www.ustream.tv/embed/5883040?html5ui=1" allowfullscreen="true" webkitallowfullscreen="true" scrolling="no" frameborder="0" style="border: 0px none transparent;">    </iframe>
<br /><a href="http://www.ustream.tv" style="font-size: 12px; line-height: 20px; font-weight: normal; text-align: left;" target="_blank">Broadcast live streaming video on Ustream</a>
```

youtubeの時と同じようにfreeboardのHTMLウィジェットに設定する
![tenki-ustream3-2.png](https://qiita-image-store.s3.amazonaws.com/0/37192/d659e2e2-dcf8-f021-490b-fcb56807c075.png)

再生ボタンを押すと暫く広告が再生されてその後ライブカメラが表示される
![tenki-ustream4.png](https://qiita-image-store.s3.amazonaws.com/0/37192/c98d760c-18be-0c01-83a0-7ffa69cd7ecd.png)

暫く見ていて気がついたが、youtubeよりもUstreamの方が広告の位置が動画にかぶるのと、再生中にも表示されるのでウィジェット向きではないかもしれない

## アメッシュ
* 良い方法を模索中

やる前から把握はしていたけれど
単純に[アメッシュ](http://tokyo-ame.jwa.or.jp/)のページの画像のURLをコピーして
Pictureウィジェットに貼ると以下のようになってしまう
![ame3.PNG](https://qiita-image-store.s3.amazonaws.com/0/37192/4b0d8465-b19d-cc85-fecc-ee66228c98fa.png)

職場の人が既に解決はしていて
画像がレイヤーされていて幾つかの画像を重ねないとダメとのこと
やり方は後日調べてみたいと思います


## まとめ
* freeboardを使うとさくっと色んな情報を可視化出来る
* HTMLウィジェットも色々応用が効きそう
* アメッシュの打開策は模索中