#1
LIGPR
Intel Edison

スマホのお天気アプリを使わずにAPIからお天気情報を見る


スマホのお天気アプリを使わずにAPIからお天気情報を見る

どうもこんにちは、ちゃちゃまる(@chachmaru)です。先日大学の学部が決定しました。嬉しいです。

さて、みなさんはスマホのお天気アプリって使ってますか? 僕は毎日家を出る前に使っています。でも、なんとなーく天気を知りたいだけなのに、いちいちスマホを解除してアプリのアイコン探して起動して……ってめちゃくちゃめんどくさいです。この作業をどうにか自動化したいんですよ。

そこで考えたのは、家の玄関にLEDを置いて、晴れならオレンジ色、雨なら青色に光らすこと。これならスマホを見る必要もなく、パッと色だけ確認してサッと家を出ることができます! そのようなことができるか、上司ののびすけさんに聞いてみました。

 

ico 「それ、めちゃくちゃ簡単だよ。Node.jsで天気APIの情報を取ってきてIntel EdisonでLEDを制御すればいいじゃん。わかる?」

……ごめんなさい分からないです。でも簡単に作れるらしいので、実際に作ってみようと思います!

説明でわからなかった箇所を調べてみた

のびすけ「Node.jsで天気APIの情報を取ってきてIntel EdisonでLEDを制御すればいいじゃん。わかる?」

いろいろ英単語があって意味わかんないですよね。のびすけさんが言ってた意味不明の単語を一個ずつ調べてみました。

Node.js

Node.jsとは、のびすけさん曰く「アツいJavaScript」らしいです。ノンブロッキングI/Oとかイベントループとかいろいろ特徴はあるらしいのですが、初心者には少しハードル高めなので今は無視します。(詳細はのびすけさんの記事にあるそうです!)

ちなみにJavaScriptとは、いろいろ動いたりする動的なウェブサイト構築に使われるプログラミング言語です。プログラミング初心者でもわかりやすく、上級者にとっても便利なモノらしいです。わからない方は別になんとなーく理解しておけば良いと思います。

API

「Application Programming Interface」の頭文字なのですが、なんとこの「API」を使うと、別の人が作ったモノや公開されているモノを再利用することができるらしいです。エンジニアの方と話すとき「APIから情報を取ってきて……」っていうフレーズをよく聞きます。

確かに、例えば何かアプリを作ろうとするとき、全ての機能を一から作ろうとすると膨大な時間がかかってしまいますよね。すでに誰かが作ったモノを使えるなんて、便利すぎます。

Intel Edison

最近IoT(Internet of Things)という言葉が流行りだしました。直訳すると「モノのインターネット」。これはあらゆるモノをインターネットに繋げて、さらに効率化しよう!という考えです。例えば鍵をIoT化して、スマホを持ってドアに近づくと自動で開くとか、いくつかのIoTをリンクさせて、ボタンを押すとテレビとエアコンとコーヒーメーカーの電源が同時に付くようにするとか、可能性は無限大です。

じゃあどうやってIoTデバイスを作るの?というときに、Intel Edisonの登場です。マイコンボードの一種で、Intel Edisonを使えば初心者でもIoTデバイスを簡単に開発できます。他にもRaspberry PiやArduinoなどの同じようなマイコンもありますが、Intel EdisonはWi-FiやBluetoothなども標準搭載されていて、素早く動くものを作れます。

実はIntel Edisonの利用者にはデザイナーやアーティストなどエンジニアリングに特化していない方たちも多く、素早くIoT製品のプロトタイプを作れるのが人気の理由らしいです。これで初心者エンジニアの僕も、なんとかお天気LEDを作れそうです。

それでは早速、作ってみましょう!

お天気LEDを作ろう:APIから情報を取ってくる

今回はAPIから今日の天気情報を取得して、それを文字としてパソコンの画面に表示させるところまでやりたいと思います。ついに僕も「APIから情報をとってきて……」と言えるようになります! 友達にドヤ顔で言いたくなりますね。

セットアップ

用意するものは

  • Node.jsがインストールされたパソコン
  • なんらかのテキストエディタ
  • インターネット環境

だけです。ちなみにこの記事はMac OSやUNIXユーザーを想定しています。ご了承ください。

Node.jsがパソコンに入っていない方は、のびすけさんの記事を見ながらインストールしてください。Terminalというハッカーみたいなアプリを使いますが、あまり怖がらず気楽に行きましょう!

書いてみる

今から作るのは、実行するとTerminalに現在の天気情報を出力するプログラムです。まずはテキストエディタを立ち上げて、weather.jsという名前でデスクトップに保存してください。

そして、以下のコードをそのファイル内に貼り付けてください!

var http = require('http');
var url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=130010';

http.get(url, function(res) {
    var body = '';
    res.setEncoding('utf8');
    res.on('data', function(data) {
        body += data;
    });
    res.on('end', function(data) {
        console.log(JSON.parse(body).forecasts[0].telop);
    })
});

上書き保存して、エディタを閉じる。これだけです。

コードの意味はとりあえず置いといて、実際に実行してみましょう!

ターミナルを使ってみる

Finder > Application > Utilities > Terminal.appを開きます。

すると……

Last login: Thu Jan 21 02:39:24 on ttys000
xxxxx:~ xxxxx$ 

こんな画面が出てくるかと思います。これはコマンドラインインターフェース(CLI)といって、キーボードだけでパソコンを操作する方法です。ちなみに、マウスとキーボードで操作することはグラフィカルユーザーインターフェース(GUI)といいます。

さて、次は実際に入力します。といってもコピペでも大丈夫です。cd Desktopと入れてエンターキーを押します。

すると……

xxxxx:~ xxxxx$ cd Desktop
xxxxx:Desktop xxxxx$ 

こうなります。このコードは、デスクトップに移動するよう命令するコマンドです。詳しくは解説しませんが、デスクトップに保存されているファイルをいじられる状態にある、と考えておけばOKです。

ここで、ls(小文字のLとS)と入力してみてください。こんな画面になるはずです。

xxxxx:Desktop xxxxx$ ls
weather.js
xxxxx:Desktop xxxxx$ 

ここに先ほど作ったweather.jsが表示されれば成功です! もしデスクトップに他のファイルがある場合はそれらも表示されますが、その中にweather.jsがあれば大丈夫です。

実行してみる

weather.jsが表示されている状態で、node weather.jsと入れて、エンターを押してみてください。

すると……

xxxxx:Desktop xxxxx$ node weather.js
晴れのち曇
xxxxx:Desktop xxxxx$ 

なんと現在の天気が表示されました! node ファイル名.jsと入れることで、ファイル名.jsというファイルをNode.jsで実行するとイメージ程度に覚えておいてください。

なんとなーく制作した流れを紹介します

本記事ではEdisonを動かすことが目的なので、JavaScriptの基本的な概念や記法などはあまり細かく解説しません。なんとなーくななめ読みしていただければと思います!

1. APIの使い方を勉強する

今回使ったお天気APIは、livedoorさんのWeather Hacks。このページにアクセスして、まずはAPIから返ってくるJSONデータサンプルを見て構造を理解します。

今回表示させたいのは、JSONオブジェクトの中のforecasts配列の中の0(今日)というオブジェクトの中のtelopです。JSONオブジェクトはテキストフォーマットの一種で、いろいろなデータを文字列で表現することができます。この文字列をJavaScriptを使ってどの情報がほしいか解釈するわけです。

2. GETリクエストを送る

GETリクエストは、Webページなどからデータを取得するときに送るものです。今回はお天気情報を取得したいため、GETリクエストを使います。

var http = require('http');

一行目にある上記は、HTTPサーバやクライアントを使用する際に必要な手順です。読み飛ばしちゃって大丈夫です。

 

var url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=130010';

次に、アクセスしたいURLをurlという変数に入れます。

 

http.get(url, function(res) {
    // 実行内容をここに書く
});

その後http.getメソッドを使います。

3. 実行内容を書く

var body = '';
    res.setEncoding('utf8');
    res.on('data', function(data) {
        body += data;
    });
    res.on('end', function(data) {
        console.log(JSON.parse(body).forecasts[0].telop);
    })

これがhttp.getメソッド内の内容です。

 

    var body = '';

まず、bodyという変数を作ります。ここに送られてきた文字列を入れます。

 

    res.setEncoding('utf8');

送られてくるJSONファイルのエンコーディングはUTF-8なので、上記のようにします。

 

res.on(‘data’, *callback*);

res.onメソッドはイベントを表しています。これは、データが読み込まれた時にcallbackという関数が実行されます。

 

    res.on('data';, function(data) {
        body += data; // ここ
    });

ここでいうcallback関数は上記の部分、つまりAPIからデータが送られてくるたびにbodyにそのdataを書き込んでいくということです。

 

res.on(‘end’, *callback*);

データの読み込みが終了すると呼び出されます。

 

    res.on(';end';, function(data) {
      console.log(JSON.parse(body).forecasts[0].telop);
    })

ここでは、データの読み込み終了時にJSONオブジェクトの中のforecasts配列の中の0(今日)というオブジェクトの中のtelopを表示させています。これで完成です!

おわりに

今回はお天気APIから今日の天気情報を取ってきてターミナルに表示するところまでやりました。次回はのびすけさんがEdisonのセットアップ記事を書きますので、その次の記事で実際にIntel Edisonを使ってAPIから取得した情報によってLEDの色を変える記事を書きたいと思います。

ではまた!


この記事を書いた人

ちゃちゃまる
ちゃちゃまる 大学生エンジニア 2015年入社
ちゃちゃまるです。
見習いデザインエンジニアです。
パソコンと英語が得意です。
世界史が苦手です。
よろしくおねがいします。