IRKitを使用してブラウザを家電リモコンにする方法

IRKitはWiFi機能の付いた赤外線リモコンデバイスで、家電の赤外線リモコンの代わりをしてくれます。例えば、パソコンやスマホのブラウザがリモコンの代わりとなり、家電を操作することも可能になります。

今回は、そのIRkitを使用してブラウザから家電を操作できるようにするソースコードの例となります。

IRkitを使用したブラウザのリモコンの例

以下がソースコードの例となり、ローカルに配置したHTMLファイルにブラウザからアクセスして使用するテレビリモコンとなります。

また、以下のソースコードはJavaScriptでjQueryを利用し、CSSでbootstrap3を利用しています。

See the Pen IRkit Browser Remote control by yic666kr (@yic666kr) on CodePen.

ソースコードの説明

今回のソースコードのポイントを以下に説明します。説明では、主にリモコンの「ON/OFF」ボタンと、音量「+」、「-」ボタンの箇所をサンプルとして説明します。

リモコンのボタンで使用する要素にIDを付与(HTML)

HTMLのソースコードでは、以下のようにリモコンの各ボタンで使用する要素に任意のIDを付けます。

<div class="tv_on_off_box">
	<a href="#" id="tv_on_off">ON/OFF</a>
</div>
<div class="tv_volume_box row">
    <a class="col-xs-6" href="#" id="tv_volume_up">+</a>
    <a class="col-xs-6" href="#" id="tv_volume_down">−</a>
</div>

リモコンの各ボタンの赤外線信号を取得

ブラウザから家電を操作するには、各ボタンごとに以下のような赤外線信号を表すJSONが必要となります。

{"format":"raw","freq":38,"data":[XXXXXXXX]}

リモコンの赤外線信号を表すJSONの取得方法は、以下のリンク先を参考にしてみてください。

上記、赤外線信号を使用するには、IRkitのWi-fiネットワークのパスワードも必要となります。(そのパスワードはIRkitを購入した際に同梱されている用紙に記載)

そして、赤外線信号を表すJSONにパスワードを追加し、以下のように修正します。

{"format":"raw","freq":38,"password":"XXXX","data":[XXXXXXXX]}

追加した「"password":"XXXX"」の「XXXX」の箇所がWi-fiネットワークのパスワードとなります。

赤外線信号を値として連想配列を作成(jQuery)

jQueryのソースコードでは、まず、HTMLで各ボタンに指定したidをプロパティ名、そのボタンに対応する赤外線信号を値として、連想配列を以下のように作成します。

var obj = { 
    'tv_on_off':'{"format":"raw","freq":38,"password":"XXXX","data":[XXXXXXXX]}',
	'tv_volume_up':'{"format":"raw","freq":38,"password":"XXXX","data":[XXXXXXXX]}',
	'tv_volume_down':'{"format":"raw","freq":38,"password":"XXXX","data":[XXXXXXXX]}',
    //------------以下省略--------------------------------------------------------
};

各ボタンをクリックした際に、赤外線信号をIRkitに渡す(jQuery)

jQueryのコードの以下の箇所では、eachメソッドで作成した連想配列を処理します。eachメソッド内では、clickイベントを使い、指定したid(key)を持つボタンがクリックされたら、XMLHttpRequest()を使用して、赤外線信号(value)をIRkitに渡すようにしています。

$.each(obj, function(key, value){
	$("#" + key).click(function() {
    	xhr = new XMLHttpRequest();
        xhr.open('POST','http://X.X.X.X/messages',true);
        xhr.send(value);
	});       
});

これにより、ローカルに配置したHTMLファイルにブラウザからアクセスし、表示されたリモコンの各ボタンを押すと、IRkitから赤外線を送信できるようになります。

XMLHttpRequest()の.openメソッドで指定している「http:// X.X.X.X /」の箇所は、IRkitのIPアドレスとなります。IRkitのIPアドレスの確認方法は、以下のリンク先を参考にしてみてください。

赤外線信号を渡したXMLHttpRequest()については、以下のページの「ソースコードについて」の箇所を参考にしてみてください。

今回はテレビのリモコンのみでしたが、ソースコードを変更、追加すれば、DVDプレイヤー・エアコン・扇風機等もブラウザの画面上から、赤外線リモコンの代わりに操作することが出来るので、とっても便利です(^o^)

「IRKit」の後継機「Nature Remo」

IRkitは、現在、生産を終了していますが、後継機となる「Nature Remo」・「Nature Remo mini」が販売されています。

の画像

スマートリモコン「Nature Remo」

Nature Remoで快適なスマートホーム生活を手軽に実現

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。