どうも、まさとらん（@0310lan）です！
みなさんはインターネット上で一般公開されているライブカメラを利用したことがあるでしょうか？
もし、利用したことが無いという方は、試しにGoogleで「ライブカメラ」と検索してみてください。思った以上にたくさんヒットするのが分かると思います。
このようなライブカメラは、現地の風景や状況を映像や静止画で24時間ずっと生配信しているので、リアルな様子をどこからでも確認できて非常に便利です。例えば、旅行や出張先にある現地のライブカメラを確認すれば、天気予報を調べるよりずっと正確な状況が分かるわけです。
そこで、今回は日本を含めた世界中のライブカメラにアクセスして、気になる場所に設置されているさまざまなライブカメラを1つの画面に集約して自分専用のモニタリング環境を作れないか実験してみようと思います！
■どうやってライブカメラにアクセスするのか？
さて、今回の実験でもっとも重要なのはライブカメラにアクセスする方法です。
理想的な方法としては、アクセス可能なAPIを提供していながら以下のような条件を兼ね備えているものがベストでしょう。
- 世界のあらゆるカメラ情報を網羅している
- できれば無料で使えるもの
- 多彩なプログラミング言語で使えるもの
- 使い方がシンプルなもの
そこで、まずは世界中のAPIを横断検索できる「Rakuten Rapid API」を利用して目的のAPIが存在するのか調べてみます。
【Rakuten Rapid API】（https://api.rakuten.net）
検索ボックスに「カメラ」「webcam」「camera」のようなキーワードを入れながら、さまざまなAPIをいくつか調べていきます。
…すると、条件にピッタリ当てはまるAPIを発見できました！
それが【Webcams.travel】です。
Webcams.travelは、世界中に点在するおよそ75,000個を超えるライブカメラにアクセスできるAPIを提供しています。基本的な機能はすべて無料で利用可能なうえ、シンプルなAPIはさまざまなプログラミング言語で簡単に使えるように設計されています。
試しに、どのような情報が得られるのか確認してみましょう！
Rakuten Rapid APIの画面下部は以下のような3つの画面で構成されています。
【エンドポイントリスト】を見ると、このAPIがどのような機能を提供しているのかを簡単に把握できます。
さまざまな方法でライブカメラにアクセスできるのですが、例えば「/webcam/list/country=」というエンドポイントを使ってパラメータを【日本（JP）】に設定してみます。
「テスト」ボタンをクリックしてみましょう！
すると、「レスポンス結果」にはJSONデータが返ってきます。
この中にある【webcams】は配列になっており、日本国内のライブカメラ情報が複数格納されています。
配列要素を1つ選択して【image】の中にある【current】内のpreviewリンクをクリックしてみましょう。
すると、次のようにライブカメラの様子を画像で取得できます。
さらに、【show】のパラメータ末尾に【player】を追加して再度テストをしてみましょう！
今度は、タイムラプス風の映像を取得できるようになります。
24時間分の映像だけでなく、1ヶ月・1年など長期間のアーカイブ映像も視聴できるので便利です。
Webcams.travelのAPIは他にも以下のような情報を取得可能です！
- カメラの所在地、位置情報
- 視聴回数
- カメラの画像・映像
- 情報の更新日時
- 位置情報を指定してカメラ検索
- 指定範囲エリアのカメラ検索
- 国・都市名を指定してカメラ検索
- カテゴリに合致するカメラ検索
- 指定した周辺にあるカメラ検索
- …など
詳細なライブカメラの情報や細かく条件設定が可能な検索機能など、さまざまな便利機能が提供されているのでこれらを活用すれば自分だけのモニタリング環境が構築できそうですね！
■プログラムからライブカメラを制御しよう！
だいたいどのようなAPIなのか分かったところで、早速プログラミングに挑戦していきましょう！
【レスポンス結果】の画面では【コードスニペット】というタブに切り替えることが可能で、ここからNode.js / PHP / Ruby / Python / GO / Java…など、さまざまな言語を利用したサンプルコードを確認できます。
そこで、今回はNode.jsのRequestモジュールを使った方法を試してみたいと思います！
利用する言語・モジュールを選択したら、右上にある【SDKをインストール】というボタンをクリックしましょう。
すると、プログラミングをするためのガイドが表示されます！
あとは、このガイドを参考にしながらAPIをプログラムに組み込んでいきます。
まず最初に、Node.jsでプログラミングするために必要となるモジュールを次のようにインストールしましょう。
- $ npm install express
- $ npm install request
基本的には【request】モジュールだけでいいのですが、フロントエンドと効率よく連携するために【express】もついでにインストールしておくと良いでしょう。
あとは、Node.jsからモジュールを使えるように以下の記述をしておけば準備完了です！
- const express = require("express");
- const app = express();
- const request = require("request");
次に、APIをプログラム側から呼び出す必要があるのですが、先ほどRakuten Rapid APIで表示されたガイドの通りに記述していけば難しくはありません。
まずはrequestモジュールで通信するための初期設定として、次のようなオプションを記述します。
- const options = {
- method: 'GET',
- url: 'https://webcamstravel.p.rapidapi.com/webcams/list/country=JP',
- qs: {lang: 'ja', show: 'webcams:image'},
- headers: {
- 'x-rapidapi-host': 'webcamstravel.p.rapidapi.com',
- 'x-rapidapi-key': '32a7**********************'
- }
- };
【method】は通信の種類なのですが、今回は情報を取得するだけなのでGETで問題ありません。
【url】はWebcams.travelで提供されているAPIのエンドポイントになります。上記の例は指定した国名(JP)に登録されているカメラを取得します。
【qs】は使用可能なクエリパラメータの設定になります。今回であれば「lang」をjaに設定しておけば日本語に変換できる部分は自動翻訳してくれます。「show」の部分は冒頭でも解説しましたが、取得できる情報の種類を指定します。（種類の詳細はこちら）
【headers】はサーバーへ送信するヘッダー情報なのですが、特に「x-rapidapi-key」の部分はユーザー固有の英数字を指定しないと正常に情報を取得できないので注意しましょう。（Rakuten Rapid API経由だと自動的に挿入されています）
ここまでのオプション設定をベースにして、次のようにrequestモジュールを実行します。
- request(options, (error, response, body) => {
- const json = JSON.parse(body);
- console.log(json.result.webcams);
- });
出力結果は以下の通り！
- [ { id: '1179780480',
- status: 'active',
- title: 'Tomitaka: 宮崎',
- image:
- { current: [Object],
- daylight: [Object],
- sizes: [Object],
- update: 1573103880,
- interval: 900 } },
- { id: '1199276178',
- status: 'active',
- title: '長岡: Nagaoka',
- image:
- { current: [Object],
- daylight: [Object],
- sizes: [Object],
- update: 1573104030,
- interval: 900 } },
- { id: '1203525950',
- status: 'active',
- title: '新宮町角亀: Akisato',
- image:
- { current: [Object],
- daylight: [Object],
- sizes: [Object],
- update: 1573103558,
- interval: 900 } },
- ・
- ・
- ・
デフォルトだと10個分のライブカメラ情報が取得できているはずです。この中の【image】内にカメラが映している景色などの画像リンクが格納されているわけです。
■ブラウザにライブカメラの画像を表示してみよう！
今度は、ブラウザ上にライブカメラの画像を表示できるようにプログラミングをしていきましょう！
まずは、フロントエンドのJavaScriptから、先ほど作成したNode.jsのプログラムにアクセスして情報を取得できるようにしていきます。
そこで、フロントエンド側が確実に情報を取得できるように、先ほど作成したNode.jsのプログラムをPromiseでラップしておきます。
- function getCameraData() {
- const options = {
- ・
- ・
- ・
- };
- return new Promise((resolve) => {
- request(options, function (error, response, body) {
- ・
- ・
- ・
- });
- })
- }
getCameraData()という関数を作成して、先ほどのプログラム全体を囲んでいます。requestモジュールの実行部分についてはPromiseでラップして、確実に情報を取得してからでないとフロントエンドにデータを渡さないようにしておくわけです。
あとは、JavaScriptからGET通信で/dataにリクエストが来た時に、getCameraData()を実行させれば良いですね。
- app.get("/data", function(request, response) {
- getCameraData()
- .then(data => response.send(data));
- });
Node.js側のプログラムはこれで完了です！
次にフロントエンドですが、JavaScriptからNode.jsのプログラムにアクセスする簡単な方法としては、fetch()を次のように利用すると良いでしょう。
- fetch('/data')
- .then(data => data.json())
- .then(json => getJson(json))
fetch()で/dataにアクセスして、先ほど作成したNode.jsのプログラムを実行させます。そして、Node.js側がライブカメラの情報を取得できたらその内容を返すという流れです。
最後のgetJson()という関数は、取得したライブカメラの情報から静止画だけを取得してブラウザ上に表示するという処理になります。
具体的には次のような処理を作成しています。
- function getJson(json) {
- json.forEach(list => {
- const img = document.createElement('img');
- img.src = list.image.current.preview;
- document.body.appendChild(img);
- })
- }
中身は単純で、img要素を生成して取得したライブカメラの静止画をsrc属性に当てはめているだけです。
ここまでのプログラムを踏まえてブラウザで実行すると、複数箇所に設置されているライブカメラを1つの画面に集約できるわけです！
ここまでのサンプルコードはすべて以下のリンクから閲覧できるので、ぜひ参考にしてみてください！
＜参考リンク＞
・サンプルコード｜GitHub
■検索機能を活用してみよう！
Webcams.travelが提供するAPIには、目的のライブカメラを効率よく検索するための機能もいくつか利用できるので合わせてご紹介しておきます。
1つ目は【nearby】機能です。
これは簡単に言うと、ピンポイントに指定した位置座標の周辺にあるライブカメラを検索する機能になります。
エンドポイントは以下の通りです。
/webcams/list/nearby=緯度(lat),経度(lng),範囲(km)
例えば、渋谷駅の周辺(1km)にあるライブカメラを検索するには次のように指定します。
/webcams/list/nearby=35.6561943,139.6994324,1
実行すると、渋谷駅周辺の状況がよく分かりますね。
2つ目は【bbox】機能です。
これは2点間を指定したエリア内にあるライブカメラを検索できる機能になります。例えば、四国がすっぽりと収まるA点・B点を指定するとこんなイメージになります。
A点・B点を踏まえたエンドポイントは次のとおりです。
/webcams/list/bbox=A点の緯度(lat), A点の経度(lng), B点の緯度(lat), B点の経度(lng)
実際の位置座標にするとこんな感じ！
/webcams/list/bbox=34.500844,134.587844,32.5104980,132.1350155
そして、実行してみると四国内にあるライブカメラを集約できているのが分かります。
3つ目は【category】機能です。
これは非常にユニークな機能で、カテゴリ名を指定するとそれに合致するライブカメラだけを抽出してくれます。（カテゴリリストはこちら）
エンドポイントは以下の通りです。
/webcams/list/category=カテゴリ名
例えば、空港(airport)を指定するには次のように記述します。
/webcams/list/category=airport
実行すると、世界中にある空港の状況確認ができるようになります！
また、追加オプションで国名を指定することも可能なので、例えばアメリカにあるビーチを見たい場合は次のように記述します。
/webcams/list/category=beach/country=US
実行するとアメリカのビーチが見放題になります。
他にも、ライブカメラのID名で検索したり除外するようなものや、ソート機能なども充実しているので大変便利でしょう。
また、静止画だけでなくタイムラプスの動画を同時に視聴できるようにすればさらに状況確認がしやすくなると思います。公式ドキュメントには、さらなる活用方法も掲載されているので合わせて参考にしてみてください！
■まとめ
今回は、世界中のライブカメラにアクセスして目的の場所をモニタリングできるAPIについて解説しました。
Webcams.travelが提供するAPIは、細かいオプション指定や便利な検索機能が豊富なので自分の好きなようにカスタマイズできるのが大きな魅力と言えるでしょう。今回解説したように、細かい機能の確認はRakuten Rapid APIの画面上で実験してみて、使い方が分かったところでプログラミングを始めると理解しやすいでしょう。
ぜひみなさんも、オリジナルのモニタリング環境を構築してみてください！
＜参考リンク＞
・「Webcams.travel」APIページ｜Rakuten Rapid API
Leave a Reply