--- title: M5StickCのディスプレイに現在の天気を表示する。 tags: HTML JavaScript Ajax obniz M5StickC author: Kohei_w slide: false --- #はじめに [obnizOSを搭載したM5StickC](https://obniz.io/ja/doc/m5stickc/hw_overview "M5StickC")のディスプレイに現在の天気を表示したいと思います。 HTMLとJavaScriptしか使わない簡単なコードなので、プログラミング初心者にも優しくなっています。 天気を取得するには[OpenWeatherMap](https://openweathermap.org/ "OpenWeatherMap")という無料のAPIを使用します。 # 完成品 StickC_weather.jpg # 用意するもの - [obnizOSを搭載したM5StickC](https://obniz.io/ja/doc/m5stickc/hw_overview "M5StickC") #作成手順 ### 1. OpenWeatherMapにサインアップする [OpenWeatherMap](https://openweathermap.org/ "OpenWeatherMap")にアクセスし、サインアップをしてください。 その後、サインアップ完了のメールが届きます。メールに記載してあるAPI Keyを控えておいてください。 API Keyは、Webサイトにログイン後、API Keysというページからも確認できます。 ### 2. プログラムを書く 最終プログラムは以下になります。 ```html ```
**コードの解説** obniz.js, m5stickc.jsをそれぞれ読み込みます。 obniz.jsを読み込んだ後に、m5stickc.jsを読み込むようにしてください。 ```html ```
次に、M5StickCのインスタンスを作成します。OBNIZ_ID_HEREにはあなたのobniz_idを入れてください。 ```js const m5 = new M5StickC('OBNIZ_ID_HERE'); ```
このコードではディスプレイの初期化処理をしています。 ```js await m5.m5display.onWait(); ```
次に、URLを指定します。baseURLはこのままで大丈夫です。 areaは「Tokyo,jp」の部分に調べたい都市の名前を入れてください。今回は東京の天気を取得します。 keyには「APPID_HERE」の部分に先ほど控えたOpenWeatherMapのAPI Keyを入力してください。 ```js let baseURL = "http://api.openweathermap.org"; let area = "/data/2.5/weather?q=Tokyo,jp"; let key = "&APPID=APPID_HERE"; ```
以下のコードでは、APIが返す天気の一覧とそれに対応する日本語を配列に格納しています。 本当はもう少し天気の種類は多いのですが、頻度が少ないので割愛しています。 ```js let weatherListEn = ["Clouds","Rain","Clear","Snow","Drizzle","Thunderstorm"]; let weatherListJa = ["くもり","あめ","はれ","ゆき","きりさめ","かみなり"]; ```
その後、AjaxでHTTP通信を行なっています。戻り値のresponse.weather[0].mainに天気が格納されているので変数weatherに代入します。 戻り値は英語なので日本語への変換を以下のコードで行います。 ```js for(let i = 0; i < weatherListEn.length; i++){ if(weather === weatherListEn[i]){ weather = weatherListJa[i]; break; } } ```
今回はcanvasを利用して文字を表示します。canvasを使用することで文字を横向きに表示することが可能です。 ctx.translate()とctx.rotate()で文字を90度回転させています。 m5.m5display.draw()の引数にはcanvasオブジェクトのみ指定できます。 ```js ctx.clearRect(0, 0, m5.m5display.width, m5.m5display.height); ctx.fillStyle = "#fff"; ctx.font = "30px sans-serif"; ctx.translate(m5.m5display.width - 30, m5.m5display.height - 10) ; ctx.rotate(-90 * Math.PI / 180); ctx.fillText(weather, 0, 0); m5.m5display.draw(ctx); ``` ### 3. M5StickCを電源に繋ぐ 電源が入ってもディスプレイには何も表示されません。起動したのかわかりづらいですが、電源ボタンを何度も押さないようにしましょう。 ### 4. 実行 上手くいくと、このように現在の天気が表示されます。 StickC_weather.jpg ## 最後に このコードにobnizのdeveloper's consoleからサーバレスイベントを使用すれば、毎日朝8時に天気を自動で取得して表示したり、30分毎に表示したりすることが可能です。 わざわざ、アプリやWebで天気を調べる必要もなくなるので是非作ってみてはいかがでしょうか。 最後まで読んでいただきありがとうございました。