読者です 読者をやめる 読者になる 読者になる

hollywis's diary (はりうすブログ)

はりうすの活動日記です

ラズベリーパイ3 買った | 西蔵のArduino初心者日記 番外

さいぞうのArduino初心者日記

こんにちは。さいぞうです。最近このブログもすっかりサボってますが、IOT的な活動は続いてはいます。

ところで、話題のRaspberry Pi3買いました。 発表直後は手に入りにくいんじゃないかといわれていたけど、普通に買えました。 それだけの記事です。

Amazonで普通に買えた

購入したのはこれ。

プライムで注文して次の日くらいに届いた。

開封の儀

パッケージはこんなの。

何やら特徴が書いてある。ケース付きのセットだ。

はいっている物の説明が書いてある。

  • ラズパイ3
  • ケース
  • GPIOアサイメントカード ?
  • GPIOアサイメントシール ?
  • クッション ?
  • ネジセット

開けたらこんな感じ。入っているのはこれで全部です。

袋に入ったケース入りラズパイ

アサインメントカードって、GPIO端子の対応表か。

最初と同じ写真。

microUSBとHDMI端子。

LANとUSB✕4。

これで遊んでやろう。

以上です。

IoT的にJohnny-fiveでLED制御する!

中華で始めるArduino入門

こんにちは、のすけです。

かなり間が空いてしましました。

今回は、お手軽にIoTをやろうということで、wifiモジュールを利用せずに Johnny-fiveを利用してLEDの制御をやってみようと思います。

https://github.com/rwaldron/johnny-five/raw/master/assets/sgier-johnny-five.png

GitHub - rwaldron/johnny-five: JavaScript Robotics and IoT programming framework, developed at Bocoup.

よくJohnny-fiveを利用してArduinoを制御する記事などは見かけるのですがネット越しで制御する例は まだ少ないようですので、ここでご紹介したいと思います。

記事中で利用しているArduinoArduino R3になります。

Johnny-fiveをインストール

Johnny-fiveはオープンソースのFirmataというプロトコルを利用したIoTプログラミングフレームワークです。

Johnny-fiveを利用すればArduinoなどのハードウェアの制御を行えるだけでなく、node.jsの機能を利用してインターネット接続し様々なことができるようになります。

なお、今までのようにArduinoIDEはほとんど利用しません。

Arduino言語もFirmataの部分のみしか使いません。

全てJavascriptで記述しますのでJavascript用のテキストエディタを利用して記述しましょう。

MacならSublimeText2WebStorm,Vim

WindowsならさくらエディタTerapad,VisualStudio

などが良いでしょう。

プロジェクトフォルダの作成

次のコマンドを打って、プロジェクトフォルダを作成します。 Macならターミナルを起動し、Windowsならコマンドプロンプトを起動して以下のコマンドを叩いてください。

mkdir NodeProjects
cd NodeProjects
mkdir johnny-test001
cd johnny-test001

node.jsのインストール

http://mdlab.jp/project/node_js/images/node01.png

PCにnode.jsをインストールする必要があります。 しかし、すでに入っている場合もありますので次のコマンドを叩いて確認しましょう。

$ node -v
v5.0.0
$ npm -v
3.3.9

nodeが入っていればバージョンが表示されます。入っていなければ「そんなコマンドはない!」みたいなことを言われると思います。 同じくnpmも確認しましょう。

もし入っていなければ以下のサイトからダンロードしてインストールしましょう。 Node.js nodeには様々なバージョンがありますが、最新の5系のStableを入れておけば良いでしょう。 インストールが完了したら、先ほどのnode -vなどを叩いてnodeコマンドが使えるようになっていることを確認してください。

node.jsについての説明

node.jsはJavascript(ジャバスクリプト)でできたサーバになります。

Javascriptは主にHTMLなどと一緒に利用するイメージですが、その言語を利用してサーバを立てられてしまうのが node.jsです。

通常のサーバに比べて次のような点があると思っています。

  • 簡単にサーバが立てられる

  • 非同期処理が楽

  • 軽量

  • Javascriptで記述できるので、クライアントサイドも、サーバサイドも同じようにコードが書ける。

よくわからんぞ!!という方は、とりあえずスルーでOKです。

jhonny-fiveモジュールをnode.jsにインストール

実はjhonny-fiveはnode.jsのモジュールの一種です。

そのため、node.jsの関連モジュールを管理するコマンドnpmで簡単に入れることができます。

次の1行を実行してください。モジュールが大きいため多少ダウンロードに時間がかかります。

npm install johnny-five

さぁこれで準備は完了しました。 次はコードを書いていきましょう!

まずはnodeからArduinoの接続テスト

f:id:hollywis:20160325185857j:plain photo by fliker 紅色死神

ArduinoにFirmataプログラムを書き込む

ArduinoIDEから次のスケッチを選択して ファイル > スケッチの例 > Firmata > StandardFirmata

を選択して、Arduinoに書き込みます。

以上で終了です。ArduinoIDEの出番も、Arduino言語もこれでおしまいです。

f:id:hollywis:20160325192110p:plain

jonny-fiveを利用した接続テストプログラムを書く

先ほど作成したjohnny-test001というフォルダの下に次のファイル名でjsファイルを作成してください。 led-blink.js

中身は次のように記述します。

var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {

  var led = new five.Led(13);

  // "blink" the led in 500ms on-off phase periods
  led.blink(500);
});

そして、PCとArduinoを接続した後に次のコマンドを実行します

node led-blink.js

ArduinoのLEDが点滅すれば成功です。

f:id:hollywis:20160325172825j:plain

これだけでも楽しいのですが、これはIoTではないです。

ただnodeを利用してArduinoを制御しただけですので、永遠点滅してしまいますし、止める方法もありません。

ネットからの指示だしして制御してこそIoTですよね!

nodeのサーバ機能を実装してIoTする

f:id:hollywis:20160325185411j:plain photo by flickr[PROFumi Yamazaki]

実はここから若干難しくなります。nodeでサーバ機能を作らなくてはいけないためです。

だた、node.jsは他のサーバサイドプログラムと比較してもかなり少量のコードで動きます。

server.jsの作成

先ほど作成したjohnny-test001というフォルダの下に次のファイル名で新しくjsファイルを作成してください。

server.js

そして中には次の内容を記述しましょう。

var http = require('http');
var querystring = require('querystring');
var util = require('util');
var fs = require('fs');
var form = fs.readFileSync('./public/form.html');

var five = require('johnny-five');
var board = new five.Board();

cmd_ledon = 'echo "LED ON!!"';
cmd_ledoff = 'echo "LED OFF!!"';

var led;

board.on('ready', function() {
    led = new five.Led(13);
});

http.createServer(function (req, res){
    if(req.method === 'GET'){
        res.writeHead(200,{'Content-Type': 'text/html'});
        res.end(form);
    }
    if(req.method==='POST'){
        var postData = '';
        req.setEncoding('utf8');
        req.on('data',function (chunk){
            // per request
            postData += chunk;
        }).on('end',function(){
            // response data
            var respose_data = '';

            // end request
            if(!postData){
                res.end();
                return;
            } // if postData is empty.
            var postDataObject = querystring.parse(postData);
            console.log('user posted following data:' + postData);
            console.log(postDataObject.userinput1);
            respose_data += 'your poted data is:\n' + util.inspect(postDataObject)+'\n';

            if(postDataObject.userinput1 == '1'){
                led.on();
                respose_data += 'LED ON !!';
                respose_data += '<style type="text/css">.ledon{background-color: #34A7C1;}</style>';
            } // if userinput1で1がPOSTされたならledon
            if(postDataObject.userinput1 == '0'){
                led.off();
                respose_data += 'LED OFF !!';
                respose_data += '<style type="text/css">.ledoff{background-color: #34A7C1;}</style>';
            } // if userinput1で0がPOSTされたならledoff

            res.writeHead(200,{'Content-Type': 'text/html'});
            res.end(form + respose_data,"utf8");
        });
    }
}).listen(8000);

実はこれは、別連載の「node.jsをやってみる」のサーバサイドコードとjhonny-fiveの記述を合体しただけです。 hollywis.hatenablog.com

前半の5行が利用するweb系のモジュールの記載。

var http = require('http');
var querystring = require('querystring');
var util = require('util');
var fs = require('fs');
var form = fs.readFileSync('./public/form.html');

次の2行がJohnny-fiveの記載です。

var five = require('johnny-five');
var board = new five.Board();
board.on('ready', function() {
    led = new five.Led(13);
});

この部分で13番PINをjhonny-fiveと関連付けて、グローバル変数であるledに入れています。

そしてhttp.createServerでサーバ機能を作り、POSTリクエストが来た時に次の部分でled.on()led.off()でLEDを付けたり消したりします。

           if(postDataObject.userinput1 == '1'){
                led.on();
                respose_data += 'LED ON !!';
                respose_data += '<style type="text/css">.ledon{background-color: #34A7C1;}</style>';
            } // if userinput1で1がPOSTされたならledon
            if(postDataObject.userinput1 == '0'){
                led.off();
                respose_data += 'LED OFF !!';
                respose_data += '<style type="text/css">.ledoff{background-color: #34A7C1;}</style>';
            } // if userinput1で0がPOSTされたならledoff

なお、付けたり消したりはuserinput1という変数の値で判断しています。

制御するためのHTMLの作成

HTMLファイルを作成しますので、格納するフォルダpublicを作ってからform.htmlファイルを作成します。 フォルダを作るには次のコマンドを実行してください。

 mkdir public

その下にform.htmlファイルを作ります。

ファイル構成はこんな形になっているはずです。 f:id:hollywis:20160325182856p:plain

form.htmlには次のように記述してください。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<form name="form" method="post">
    <button class="ledon" style="width: 150px;height: 150px;" onclick="document.form.userinput1.value = 1">ON</button>
    <button class="ledoff" style="width: 150px;height: 150px;" onclick="document.form.userinput1.value = 0">OFF</button>
    <input type="hidden" name="userinput1"><br><br>
</form>

ボタンledonをクリックしたらhiddenのuserinput1の値に1をセットして送信

ボタンledoffをクリックしたらhiddenのuserinput1の値に0をセットして送信しています。

なお、これは先ほどのコードにvar form = fs.readFileSync('./public/form.html');という部分に関連しています。

PCで実行!

次のコマンドを実行してサーバを起動です。 node server.js

起動できたら、ブラウザでlocalhost:8000にアクセスしてください

f:id:hollywis:20160325183216p:plain

このようにボタンが表示されるはずです。

ONボタンを押すとLEDが点灯し、OFFボタンを押すとLEDが消灯するかと思います。

スマホから実行!

IoTらしくスマホから実行してみましょう。

まず、PCとスマホは同じWifiに接続します。

そしてPCで次のコマンドを叩いてPCのIPアドレスを確認しましょう。

Macならifconfig

Windowsならipconfig

f:id:hollywis:20160325184111j:plain

次に、スマホのブラウザで

xxx.xxx.xxx.xxx:8000と入力します。xxxは確認したIPアドレスです。

f:id:hollywis:20160325184515p:plain

f:id:hollywis:20160325184539p:plain

OKボタンを押すと

f:id:hollywis:20160325184554p:plain

このように命令が実行され,ArduinoのLEDが点灯します。

f:id:hollywis:20160325172825j:plain

OFFボタンを押すとLEDが消灯します。

f:id:hollywis:20160325184701j:plain

まとめ

オープンソースIoTフレームワークJohnny-fiveを利用して、インターネット接続機能が無いArduino R3でIoTしてみました。

PCからだけでなく、同じネットワーク内のスマホからでも簡単に制御できることがわかりました。

本当にインターネット越しに制御するには固定IPを取得するなどして、中継サーバ(ルータなど)が必要ですが 家庭内利用でしたらこの構成でも良いのでは無いかと思います。

最近はスティックPCなども出ていますので、スティックPCとArduinoを接続してしまえば簡単にIoTプラットフォームが 作れてしまうのではないでしょうか。有用そうなのでスティックPC連携は今度試してみたいと思います。

Nodeでサーバ作ってPOSTデータ受け取ってLEDを遠隔チカチカさせる(仮想編)

Node.jsを使ってみる

こんにちは、のすけです。

最近は毎週朝に、カフェでもくもく作業しています。

そんなもくもくの成果を一つ書いておきます。

NodeでLEDを遠隔チカチカさせる(仮想編)

やってみたいじゃないですか。遠隔チカチカ。

最近はクラウドのIoTサービスなんかもあって便利なんですが、その前に自分でサーバを作ってやってみないことには IoTサービスの便利さを体感できないと思います。

というわけで、最近はまっているNodeを利用してサクッとサーバを立てて、それからLEDチカチカへ移りたいと思います。 チカチカさせるマイコンとしては、Rasberry pi2を利用します。

POSTデータを受け取るサーバ作成

まず、POSTデータを受け取るサーバプログラムはこちら

var http = require('http');
var querystring = require('querystring');
var util = require('util');
var fs = require('fs');
var form = fs.readFileSync('./public/form.html');

http.createServer(function (req, res){
    if(req.method === 'GET'){
        res.writeHead(200,{'Content-Type': 'text/html'});
        res.end(form);
    }
    if(req.method='POST'){
        var postData = '';
        req.setEncoding('utf8');
        req.on('data',function (chunk){
            // per request
            postData += chunk;

        }).on('end',function(){
            // response data
            var respose_data = '';

            // end request
            if(!postData){
                res.end();
                return;
            } // if postData is empty.

            var postDataObject = querystring.parse(postData);
            console.log('user posted following data:' + postData);
            console.log(postDataObject.userinput1);
            respose_data += 'your poted data is:\n' + util.inspect(postDataObject)+'\n';

            res.end(respose_data,"utf8");
        });
    }
}).listen(8080);

基本的なサーバ機能を提供するhttp、クエリストリングをいい感じに読んでくれるquerystring、POSTデータを簡単に文字列に変えることができるutil、ファイルを読み込めるfsのライブラリを使っています。

form用のHTMLは別ファイル./public/form.htmlに置いておいて。それをfsで読み込みます。 f:id:hollywis:20160218085231p:plain

<form method="post">
    <input type="text" name="userinput1"><br><br>
    <input type="text" name="userinput2"><br><br>
    <input type="submit">
</form>

単純にHTMLでform作ってmethodをpostにします。 input要素を2つくらいとsubmitをつけただけ。

サーバの方に戻ります。 req.methodがGETの時はform.htmlを表示させ、POSTの時は処理を挟みます。

req.setEncoding('utf8'); を入れているのは近年のブラウザはutf8で処理しているのですが、これの設定入れないと違うエンコーディングで読んだりして文字化ける可能性があるそうです。

req.on('data',function (chunk){
            // per request
            postData += chunk;

        }

リクエストのデータは複数回に分かれて細切れに飛んできます。dataイベントが複数回発生しますので、これを結合して一つのデータにしています。

on('end',function()

データの受信が終わったらendイベントが発生するため、ここから主処理を開始できます。

querystring.parseでpostDataを扱いやすいようにオブジェクトに変換しています。

util.inspect(postDataObject)でオブジェクトを文字列に変換しています。

res.end(respose_data,"utf8");ではレスポンスに文字列response_dataを返却しています。ここでエンコーディングタイプutf8を指定しないと、日本語を返した場合にブラウザがどんなエンコーディングタイプで読めば良いかわからないため文字化けします。

LED点灯できるコマンド実行できるようにする

nodeではコンソールで実行するようなコマンドを発行することができます。

具体的にはrequire('child_process').execを利用します。

var exec = require('child_process').exec, cmd;

cmd_ledon = 'echo "LED ON!!"';
cmd_ledoff = 'echo "LED OFF!!"';

led_onoff = function(cmd) {
    return exec(cmd, {timeout: 1000},
        function(error, stdout, stderr) {
            console.log('stdout: '+(stdout||'none')); // 標準出力
            console.log('stderr: '+(stderr||'none')); // 標準エラー出力
            if(error !== null) {
                console.log('exec error: '+error);
            } // errorの時
            else{
                console.log('exec: '+cmd);
            } // errorなしの時
        }
    )
};
led_onoff(cmd_ledon);
led_onoff(cmd_ledoff);

最後の2行でLED点灯、LED消灯を実行しています。led_onoff関数を作成し、そこにコマンドを渡してあげると実行してくれます。

今回は(仮想編)ですので実際にLEDを点灯するコマンドではなくecho "LED ON!!"echo "LED OFF!!でLEDが点灯、消灯したということにします。

上記プログラムを合体して、POSTデータによってLEDの点灯、消灯を切り替える

var http = require('http');
var querystring = require('querystring');
var util = require('util');
var fs = require('fs');
var form = fs.readFileSync('./public/form.html');

var exec = require('child_process').exec, cmd;

cmd_ledon = 'echo "LED ON!!"';
cmd_ledoff = 'echo "LED OFF!!"';

led_onoff = function(cmd) {
    return exec(cmd, {timeout: 1000},
        function(error, stdout, stderr) {
            console.log('stdout: '+(stdout||'none')); // 標準出力
            console.log('stderr: '+(stderr||'none')); // 標準エラー出力
            if(error !== null) {
                console.log('exec error: '+error);
            } // errorの時
            else{
                console.log('exec: '+cmd);
            } // errorなしの時
        }
    )
};

http.createServer(function (req, res){
    if(req.method === 'GET'){
        res.writeHead(200,{'Content-Type': 'text/html'});
        res.end(form);
    }
    if(req.method='POST'){
        var postData = '';
        req.setEncoding('utf8');
        req.on('data',function (chunk){
            // per request
            postData += chunk;
        }).on('end',function(){
            // response data
            var respose_data = '';

            // end request
            if(!postData){
                res.end();
                return;
            } // if postData is empty.
            var postDataObject = querystring.parse(postData);
            console.log('user posted following data:' + postData);
            console.log(postDataObject.userinput1);
            respose_data += 'your poted data is:\n' + util.inspect(postDataObject)+'\n';

            if(postDataObject.userinput1 == '1'){
                led_onoff(cmd_ledon);
                respose_data += 'LEDが点灯しました !!';
            } // if userinput1で1がPOSTされたならledon
            if(postDataObject.userinput1 == '2'){
                led_onoff(cmd_ledoff);
                respose_data += 'LEDが消灯しました!!';
            } // if userinput1で2がPOSTされたならledoff

            res.end(respose_data,"utf8");
        });
    }
}).listen(8080);

LEDの点灯、消灯はpostDataObject.userinput1のみを見て判断しています。

1がPOSTされれば点灯、2がPOSTされれば消灯です。それ以外ならPOSTされた値が表示されるだけです。なお、postDataObject.userinput2は何も意味がありません。飾りです。

やってみる

まず、formに1を入力して送信すると・・・

f:id:hollywis:20160218093731p:plain

f:id:hollywis:20160218093738p:plain

LEDが点灯!!と表示され、コンソールを見てみると

f:id:hollywis:20160218094140p:plain

次に、formに2を入力して送信すると・・・

f:id:hollywis:20160218093549p:plain

f:id:hollywis:20160218093557p:plain

LEDが消灯!!と表示され、コンソールを見てみると

f:id:hollywis:20160218094205p:plain

実際にコマンドが発行されているのが確認出来ました。これでLEDを点灯させる準備が出来たとこになります。

まとめ

Nodeを利用してPOSTデータを受け取り、送信されるデータに従ってLEDを点灯・消灯させることが出来ました。

今回は仮想的にやりましたので、次回はRasberry pi上にNodeサーバを立ち上げて実際に遠隔からLEDをチカチカ制御してみたいと思います。

ではまた!

ゆるい感じでIoTデビューできる勉強会?「 IoTやりてぃー #1 」やります!!

f:id:hollywis:20160210162058j:plain

さいぞうです。

さいきんはりうすでは電子工作とかIoT的なことをやってますが、その流れで、再来週 (2016 2/22(月))に、気軽にIoTを始められる初心者向けの超入門勉強会やります。

会の名前は「IoTやりてぃー」。

ちょっと前からよくきくIoT?、あるでぃーの?、よくわからないけど面白そう、という方ぜひどうぞ。

  

参加費1300円で、Arduino互換機がもらえるので、パソコンさえあれば参加できます!

connpass.com

 
 

続きを読む

渋谷のスクランブル交差点と同期するLED信号機を作った話 作業メモ編: Swiftとの連携、スクショ等 | さいぞうのArduino初心者日記 8

さいぞうのArduino初心者日記

Arudinoのチュートリアルをやる連載の8回目です。

f:id:hollywis:20160204085013j:plain今回から完成したものを見せる本編と、作業中のいろいろを書くメモをわけてみます。

コンテンツの水増し。

こちらは技術者、実際にやってみたい人向けの作業メモです。

内容

Arudinoチュートリアル的にはここでやるのは、複数のLEDをついでの信号機ということになっています。

ただし、あまり面白くないので、実際の渋谷のスクランブル交差点信号機に同期して動くLED信号機を作ってみたいと思います。

方法

公開されているライブカメラの映像を使います。

渋谷のスクランブル交差点のリアルタイムな映像は、ネット上で公開されています。 そこで、それを利用して、以下の流れでできると思いました。

  1. ブラウザ等で映像を開く(PC側の処理)

  2. スクリーンショットとる(PC側の処理)

  3. 画像処理(ってほどじゃないけど)で信号の色か、人の流れを見て、赤、青、できたら黄色信号を判別(PC側の処理)

  4. Arduinoにシリアル通信でその情報を送る(PC側の処理)

  5. LED光らせる(Arduinoの処理)

例によって面白いところはほとんどパソコン側のプログラミングです。

Arduinoの方のチュートリアルが進んでないので、こうなっちゃいます。

早く先に進みたい!

前回までは、パソコン側はRubyでいろいろ処理してました。

hollywis.hatenablog.com

でもこれも飽きてきたので、最近いじってるSwiftで作るOSXアプリでやってみたいとおもいます。

ソースコード

PC側(Swift)はこちら

https://bitbucket.org/aoyagikwansei/traficsignalsyncaruino

Arudinoスケッチはこちら

<まだない>

作業

SwiftArduinoのシリアル通信

最初にやり方だけ調査。

適当にググると、IOKITというライブラリを使えばいいらしい。じゃあこれでいいや。

実は今手元にArduinoがないので次に進む。

参考 Mac OS X Drivers for CH340 / CH341 / PL2303 USB to RS-232 Devices

Macと色々なものをつなげる話。2014 - Qiita

ライブカメラ

適当にググってください。

渋谷駅前の交差点ので、ちょど利用できそうなやつがあったので、この記事はそれをつかいます。

しかし、そのサイトは映像の2次利用をしつこく禁止しています。

なので、この記事では一般的なライブカメラ映像を使う、という体でかきます。

Swiftで画面キャプチャ

ググると、iOSのやつはたくさんでてくるけど、OSXのやつはあまりない。

これとか 画面スクリーンキャプチャ取得 - Swiftサラリーマン

 
参考になりそうなの

WKWebViewの使い方 SwiftでWKWebViewを使ってみた - Qiita

WKWebView(WebKit)とSwiftでウェブページを表示 | EasyRamble

GitHub - ShingoFukuyama/WKWebViewTips: WKWebView Tips (iOS 8.1.0)

なんか上記のとおりつくっても表示されないなーと2時間くらいハマったけど、 この記事のようにNSAppTransportSecurityの設定をしたらできた。 SwiftでWebView(1) - リハビリエンジニア

WKWebViewのなかみを保存 swift - WKWebView Screenshots - Stack Overflow

GitHub - lemonmojo/WKWebView-Screenshot: WKWebView+Screenshot provides simple methods that use private(!) APIs of the WebKit framework to capture a screenshot of a WKWebView running on OS X.

ここにのっている方法は、OSXのプライベートなAPI?を使っているとのことで、AppStore公開申請を出しても通らない。 個人的に使うだけのアプリにはこれでいいらしいので、やってみる。

SwiftからObjective-Cのコードを使う方法 Objective-CベースのプロジェクトからSwiftのクラスを呼び出す - Qiita

WKWebView-Screenshotで使ってたdispatch_timeのswiftでの書き方 Swiftでdispatch_afterを使う - Qiita

なんと、上記の方法では、動画のスクショがとれない? iframeがダメなのか? media要素がだめなのか?

WKWebViewではなく、画面全体のスクリーンショットを取るアプローチに変更する。

GitHub - Arasthel/SayCheese: A screenshot taking app written in Swift

うごかそうとしたらこれになった

初めてのCocoaPodsでLinker command failed with exit code 1でハマる | 生きる

SayCheeseのコードを細かく追っていくと、こんなのが!

 system("screencapture -c -x");
 let imageFromClipboard = NSImage(pasteboard: NSPasteboard.generalPasteboard())

これだけの事だったのか.. osxにscreencaptureというコマンドがあるんだろう。 これでとったスクショはクリップボードに保存されるから、この内容を取得する。

できた!!!!

繰り返し&タイマー

Webサイトを開いた画面を繰り返しキャプチャするのに、タイマー処理が必要。

swiftで、タイマー(Timer)を使ってみる - Three.jsを使って、作ってみた

画像処理

執筆途中...

宣伝

こういう感じでArduinoでいろんな物が作れる、初心者用つめあわせキットがこちら。

作ってみたいな、と思った人は買ってください。

 
このキットと私がアップしたコードの組み合わせで作れます。

こういう有名ドコロのでも可。

みんなのArduino入門:基本キット

みんなのArduino入門:基本キット

これまでの記事など

前回

hollywis.hatenablog.com

総合もくじ

hollywis.hatenablog.com

Node.jsのExpress入れてみる。WebStormで

Node.jsを使ってみる

こんにちは、のすけです。

Node.jsのWebフレームワークであるExpressを入れてみました。

以前紹介したようにhttp.createServerで簡易的にはサーバを作れるのですが、ルーティングとかを考えるとWebフレームワークを使った方が楽だと思います。

今回は、Expressプロジェクトの内容が知りたかったので、かなりずるい方法で環境を構築します。

WebStormを使う

はい。WebStormを使います。WebStormはHTML用のIDEです。(なんかPhpStormでもモジュール入れればいけるらしい)

HTML,CSS,JSを書く場合に威力を発揮します。

WebStormはNode.jsにも対応しているので、これでサクッと作っちゃいます。

こちらからダウンロード。

www.jetbrains.com

僕はWebStorm8のライセンスを持っているので8で作ります。最新は11だった。

起動

f:id:hollywis:20160204092134j:plain

*この画像はすぐ消えるので上手く撮れなくて適当に拾ってきました。

環境を選択。テーマはDarculaを選びました(背景が黒いやつです)

f:id:hollywis:20160204092214p:plain

Create New Projectを選択。画像はちょうどCreate New Projectが切れてしまった(上の方にあります)。

f:id:hollywis:20160204092349p:plain

プロジェクト名を入れて、project type をNode.js Express Appに

f:id:hollywis:20160204092505p:plain

Node interpreterを選んで、versionは4.13.1にしました。

Viewのtemplate engineはjadeを選びました。cssはplane css

f:id:hollywis:20160204092739p:plain

するとこんな感じでプロジェクトができました。

f:id:hollywis:20160204092803p:plain

binの下のwwwが起動用jsで、app.jsがアプリケーション全体の設定。

routes下のindex.jsusers.jsがそれぞれのルーティングに対応したjsっぽいですね。

viewsの下にjadeファイルがありました。

node_modulesの下を覗くといっぱいjsのライブラリが・・・。Expressがjsライブラリの集合体であることがわかりますねぇ。

package.jsonを覗いたらこんな感じだった。

{
  "name": "node-test001",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0"
  }
}

そして、MenuのRun -> Run をクリックすると。binしたのwww.jsを叩いてlocalhost:3000でnode.jsを起動してくれます。

ブラウザで開くと、index.jadeのやつが表示されました。

f:id:hollywis:20160204093306p:plain

おしまい。

人気の端末 Rasberry Pi2でLチカしてみる

RasberryPi

こんにちは、のすけです。

Arduinoと人気を分ける多機能IoT端末 Rasberry Pi2を手に入れたので動かしてみました。

Rasberry Pi 2起動

f:id:hollywis:20160203114853j:plain

Rasberry Pi 2はLinuxベースのマシンですので、LinuxのOSで動かせます。

ただ専用のOSが用意されており、それがDebianをベースにした「Raspbian」です。大抵はこのOSを入れて動かすことが多いです。

起動画面もLinuxそのもの。

Rasberry Pi 2には、CPU,メモリ,GPU,SDカード(ストレージ),LAN,USB端子4つが付いており、ほぼPCと遜色ありません。 また、GPIO端子も付いているので電子工作も可能と最強の端末です。

ちなみに、僕の端末にはブラックを基調とした外装を施してあり、CPUとかにもヒートシンクをつけてあります。これで静電気対策や熱対策はバッチリ、ついでに見た目もカッコよさげです。

f:id:hollywis:20160203115647j:plain

なお、PCディスプレイとは画像上部のHDMI接続しています。HDMI端子が付いているなんで凄いですよね。

他にもUSB端子に無線LANモジュールやらマウス用のレシーバやらが刺さっています。USBで色々拡張できるのもRasberryPi2のいいところ。

f:id:hollywis:20160203120129j:plain

起動しました。こちらがデスクトップ画面。

ただのPCですね。

Lチカ回路の作成

起動したので、Lチカ回路を作ります。

適当に抵抗を噛ませて、GPIO端子からLEDと抵抗を通ってGNDに接続させます。

回路図はArduinoとかでやっているのと同じなので、そちらをご参照ください。

hollywis.hatenablog.com

f:id:hollywis:20160203120419j:plain

こんな感じで繋ぐ。

LEDを光らせる

では、光らせてみましょう。

簡単です。専用のファイルに0,1を書き込むだけのイメージです。

まずはコンソールを開いて次のように打ちます。

pi@raspberrypi ~ $ sudo echo 23 > /sys/class/gpio/export
pi@raspberrypi ~ $ ls /sys/class/gpio/
export gpio23 gpiochip0 unexport
pi@raspberrypi ~ $ sudo echo out > /sys/class/gpio/gpio23/direction
  • 1行目はGPIO端子の23番を使うよ!と宣言しています。

  • 2,3行目はgpioディレクトリ以下にgpio23のディレクトリができているのを確認しています。

  • 4行目はgpio23outつまり出力として使うよ!と設定しています。

準備ができたので、あとはgpio23の設定値をvalueに書き込んでやればOKです。

pi@raspberrypi ~ $ sudo echo 1 > /sys/class/gpio/gpio23/value
pi@raspberrypi ~ $ sudo echo 0 > /sys/class/gpio/gpio23/value
pi@raspberrypi ~ $ sudo echo 1 > /sys/class/gpio/gpio23/value
pi@raspberrypi ~ $ sudo echo 0 > /sys/class/gpio/gpio23/value

1でLEDがオン。0でLEDがオフです。

f:id:hollywis:20160203120937j:plain

すると、、、

光ったり。

f:id:hollywis:20160203122219j:plain

消えたり。

f:id:hollywis:20160203122308j:plain

できました。

あとは、冒頭で動画で紹介したように自動でチカチカさせるにはPythonとか適当な言語で 上記のコマンドを入力するようにしてやれば自動Lチカもできます。

f:id:hollywis:20160203120725j:plain

コツは0入力と1入力をする部分をループ化して、間に1秒程度の待ちを入れてあげることです。

なかなか便利なRasberry Pi2。今度はネット越しで制御させてみようかなぁ。