Wordpressローカルのテスト環境を用意して開発に備える
ローカルテスト環境とは、自分のPCの内部にサーバを立てて、プログラムを作成とテストをしていくための場所です。 プロダクション環境では、インターネットにアクセス可能な状態で公開されてしまいますので、あまり好ましくありません。 また、一旦リリースした後でも、追加で新しいコンテンツの追加などを継続的に行っていくためにも、テスト環境が必要です。
そこで、自分のPCの内部にサーバを立てて、テストをしやすくします。 これで、いつでもどこでもプログラムの作成や検証ができるようになります。
実際、多くの人がご自分のPCにローカル開発環境にサーバを立ててテストをしており 便利なツールも出てきています。 それが『MAMP』です。
その他にもWindowsではXAMPPというツールも有名です。 XANPPやMAMPを入れる理由は、WEBサーバ環境を独自に簡単にインストールできるからです。
名前の由来は、「XAMPP」がX:クロスプラットフォーム、Apache、MySQLまたはMariaDB、PHP、Perlの頭文字を。 「MAMP」がMacintosh, Apache, MySQL, PHP の頭文字を繋げた名前です。 ちなみにMAMPはWebサーバとしてNginx、言語としてPythonも選べるのでより現代的です。 ※MAMPは今はWindows版もリリースされています。
ですので、Windowsの方もここではMAMPをインストールして開発を始めましょう。
MAMPのインストール
MAMP(マンプ) https://www.mamp.info/en/
例えば、普通は次の通りいくつものプログラムを環境に入れる必要があります。
XAMPPやMAMPはこれらの環境が簡単に設定できます。
こちらからプログラムをダウンロードして、インストールを進めます。
案内にしたがってインストールをします。
途中でPRO版のMAMP PROもインストールされますので、この画面で[カスタマイズ]をクリックし、[MAMP PRO]のチェックを外しましょう。
インストールには1.4GBほどの空き容量が必要です。
インストール完了後、MAMPアプリケーションを起動してください。そうするとサーバの起動画面ができてきますので 右の[Start Servers]をクリックしてサーバを起動しましょう。[Apache Server]と[MySQL Server]の横のランプが緑に点灯すれば正常に起動しています。
なお環境によっては、起動した後にファイアウォールの警告画面が出てくる事があります。
これは通信を[許可]するようにしましょう。
そしてブラウザでMAMPのスタートページが表示されます。 表示されない場合は、次のURLを開きましょう。 http://localhost:8888/MAMP/
ポートの8888がMAMPのApacheに割り当てられています。 正常に[Apache Server]が起動していない場合には、上のメニューの[Preferences]をクリックして
[Ports]タブを開きます。ここでApacheのポートを8888から利用指定なさそうなポートに変更しましょう。 例:8890など
そして再び、[Start Servers]をクリックしてサーバを起動してみてください。
正常に起動するとこのように、Welcome to MAMPの画面が表示されます。
Welcome画面の下の方にMySQL設定があります。Wordpressなどのインストールで使いますのでメモしておきましょう。
その他、[Preferences]ではApacheではなくNginxに変更する、PHPのバージョンを変える、ドキュメントルートを変えるなどができます。
初期設定のドキュメントルートは[WebServer]タブで確認できます。
ここにフォルダを作って、htmlなりphpなりを配置する事で、webアプリケーションを実行できます。
やっぱりWordpressだった。Wordpress有用性を再認識する！
こんにちは、のすけです。
長らく書いていませんでした。 その間色々ありましたが、とりあえず題名について触れます。
はりうすでは、今までNodeやRuby on RailsとかでWebアプリを書いていたのですが、、、 社員が僕１人となった今では、１からコードを書いて作るスクラッチ開発はキツいため なかなか受注が難しいです。(及び腰になる)
そこで、全世界の30%！！のWebページで利用されているWordpressに 鞍替えしようかと思います。
今まで、Wordpressとかクソでしょ！ とか斜に構えて、ある種のプライドを持っていましたが。
そんなプライドなんて捨てて、実際に利用してみると良かったです。
実運用上では記事の更新やレイアウト変更をしたい際に コーダーではない人がやる場面が多く、スクラッチ開発だと変更が遅くなる。
コーダーに作業が集中してしかも待ちが発生するなどの事案が多く。 Wordpressは使えるなぁと再認識しました。
そこで Wordpressを活用させて頂くことに決めました。
Wordpressの利点
みんな使ってるので使い方に慣れてる(記事書く人とか)
管理画面がわかりやすい
基本機能は最初からある(ページ作る・記事書く、動画載せる)
機能追加もプラグインでだいたいできる(EC機能すらも)
誰でも触れる
デザイナーでも画面レイアウトを直接を編集できる(コーダー不要)
プラグインとかで解決できない時にコーダーの出番！
という感じで、いいこと尽くめです。
不満点はシステムがちょっと遅い！！！
セキュリティが心配(みんな使ってるからハッカーに狙われやすい) という感じです。
Wixはかゆい処に手が届かない
一時期プログラミングから距離を置いていた時 WixというWeb上でデザインとかも自由に設定できて ホームページも簡単に作れると謳うWebサービスを利用していて 半年ほど運用していたのですが
ちょっと私には厳しかったです。 「こんな機能欲しいなぁ」とか「ここをちょっとこうしたい」という かゆい処には全く手が届かないです。（コードを修正できないのでどうしようもない） Javascriptも使えないですので、かなりの縛りプレイです。 半年利用して、限界を感じてしまいました
Wixもこのことは認識していて、Wix Codeという新機能のリリースもあるようですが ベータ版をちょっと触ってた感じでは、戻りたいとは思いませんでした。 Wordpressの自由度と比べるとWordpressに軍配が上がりました。
かゆい処に手がとどく Wordpress
機能はプラグインで追加できる、デザイン修正したいときはCSSやJSを触れる。 ちょっとした機能追加もPHPを書けば作れる！ システム関連連携もPHP書けばできる！(色々と作業を自動化できる！)
例えば、会員機能をつけたのですが、Wordpress内に会員のアクセス機能を管理しながら 外部のステップメールシステムと連携などもできて、困った時にコードが書けるって自由だなと思いました。
という訳で、これからWordpressについて毎日投稿する勢いで行こうと思います！
あと、最近はコンピュータより、人体に興味があって 足指とかばかり気にしてます。その話もどこかで書こうかなと。 ではでは
ラズベリーパイ3 買った | 西蔵のArduino初心者日記 番外
こんにちは。さいぞうです。最近このブログもすっかりサボってますが、IOT的な活動は続いてはいます。
ところで、話題のRaspberry Pi3買いました。 発表直後は手に入りにくいんじゃないかといわれていたけど、普通に買えました。 それだけの記事です。
Amazonで普通に買えた
購入したのはこれ。
プライムで注文して次の日くらいに届いた。
開封の儀
パッケージはこんなの。
何やら特徴が書いてある。ケース付きのセットだ。
はいっている物の説明が書いてある。
開けたらこんな感じ。入っているのはこれで全部です。
袋に入ったケース入りラズパイ
アサインメントカードって、GPIO端子の対応表か。
最初と同じ写真。
microUSBとHDMI端子。
LANとUSB✕4。
これで遊んでやろう。
以上です。
IoT的にJohnny-fiveでLED制御する！
こんにちは、のすけです。
かなり間が空いてしましました。
今回は、お手軽にIoTをやろうということで、wifiモジュールを利用せずに Johnny-fiveを利用してLEDの制御をやってみようと思います。
よくJohnny-fiveを利用してArduinoを制御する記事などは見かけるのですがネット越しで制御する例は まだ少ないようですので、ここでご紹介したいと思います。
記事中で利用しているArduinoはArduino R3になります。
Johnny-fiveをインストール
Johnny-fiveはオープンソースのFirmataというプロトコルを利用したIoTプログラミングフレームワークです。
Johnny-fiveを利用すればArduinoなどのハードウェアの制御を行えるだけでなく、node.jsの機能を利用してインターネット接続し様々なことができるようになります。
なお、今までのようにArduinoIDEはほとんど利用しません。
Arduino言語もFirmataの部分のみしか使いません。
全てJavascriptで記述しますのでJavascript用のテキストエディタを利用して記述しましょう。
MacならSublimeText2やWebStorm,Vim
WindowsならさくらエディタやTerapad,VisualStudio
などが良いでしょう。
プロジェクトフォルダの作成
次のコマンドを打って、プロジェクトフォルダを作成します。 Macならターミナルを起動し、Windowsならコマンドプロンプトを起動して以下のコマンドを叩いてください。
mkdir NodeProjects cd NodeProjects mkdir johnny-test001 cd johnny-test001
node.jsのインストール
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で簡単に入れることができます。
次の１行を実行してください。モジュールが大きいため多少ダウンロードに時間がかかります。
npm install johnny-five
さぁこれで準備は完了しました。 次はコードを書いていきましょう！
まずはnodeからArduinoの接続テスト
photo by fliker 紅色死神
ArduinoにFirmataプログラムを書き込む
ArduinoのIDEから次のスケッチを選択して
ファイル > スケッチの例 > Firmata > StandardFirmata
を選択して、Arduinoに書き込みます。
以上で終了です。ArduinoIDEの出番も、Arduino言語もこれでおしまいです。
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が点滅すれば成功です。
これだけでも楽しいのですが、これはIoTではないです。
ただnodeを利用してArduinoを制御しただけですので、永遠点滅してしまいますし、止める方法もありません。
ネットからの指示だしして制御してこそIoTですよね！
nodeのサーバ機能を実装してIoTする
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
前半の５行が利用するweb系のモジュールの記載。
var http = require('http');
var querystring = require('querystring');
var util = require('util');
var fs = require('fs');
var form = fs.readFileSync('./public/form.html');
次の２行が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ファイルを作ります。
ファイル構成はこんな形になっているはずです。
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にアクセスしてください
このようにボタンが表示されるはずです。
ONボタンを押すとLEDが点灯し、OFFボタンを押すとLEDが消灯するかと思います。
スマホから実行！
IoTらしくスマホから実行してみましょう。
そしてPCで次のコマンドを叩いてPCのIPアドレスを確認しましょう。
Macならifconfig
Windowsならipconfig
次に、スマホのブラウザで
xxx.xxx.xxx.xxx:8000と入力します。xxxは確認したIPアドレスです。
OKボタンを押すと
このように命令が実行され,ArduinoのLEDが点灯します。
OFFボタンを押すとLEDが消灯します。
まとめ
オープンソースIoTフレームワークJohnny-fiveを利用して、インターネット接続機能が無いArduino R3でIoTしてみました。
PCからだけでなく、同じネットワーク内のスマホからでも簡単に制御できることがわかりました。
本当にインターネット越しに制御するには固定IPを取得するなどして、中継サーバ(ルータなど)が必要ですが 家庭内利用でしたらこの構成でも良いのでは無いかと思います。
最近はスティックPCなども出ていますので、スティックPCとArduinoを接続してしまえば簡単にIoTプラットフォームが 作れてしまうのではないでしょうか。有用そうなのでスティックPC連携は今度試してみたいと思います。
mouse パソコン スティックPC MS-CH01F Windows10/2GB/32G
- 出版社/メーカー: マウスコンピューター
- 発売日: 2016/02/18
- メディア: Personal Computers
- この商品を含むブログを見る
Nodeでサーバ作ってPOSTデータ受け取ってLEDを遠隔チカチカさせる(仮想編)
こんにちは、のすけです。
最近は毎週朝に、カフェでもくもく作業しています。
そんなもくもくの成果を一つ書いておきます。
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で読み込みます。
<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を入力して送信すると・・・
LEDが点灯！！と表示され、コンソールを見てみると
次に、formに2を入力して送信すると・・・
LEDが消灯！！と表示され、コンソールを見てみると
実際にコマンドが発行されているのが確認出来ました。これでLEDを点灯させる準備が出来たとこになります。
まとめ
Nodeを利用してPOSTデータを受け取り、送信されるデータに従ってLEDを点灯・消灯させることが出来ました。
今回は仮想的にやりましたので、次回はRasberry pi上にNodeサーバを立ち上げて実際に遠隔からLEDをチカチカ制御してみたいと思います。
ではまた！
ゆるい感じでIoTデビューできる勉強会?「 IoTやりてぃー #1 」やります!!
渋谷のスクランブル交差点と同期するLED信号機を作った話 作業メモ編: Swiftとの連携、スクショ等 | さいぞうのArduino初心者日記 8
Arudinoのチュートリアルをやる連載の8回目です。
今回から完成したものを見せる本編と、作業中のいろいろを書くメモをわけてみます。
コンテンツの水増し。
こちらは技術者、実際にやってみたい人向けの作業メモです。
内容
Arudinoチュートリアル的にはここでやるのは、複数のLEDをついでの信号機ということになっています。
ただし、あまり面白くないので、実際の渋谷のスクランブル交差点信号機に同期して動くLED信号機を作ってみたいと思います。
方法
公開されているライブカメラの映像を使います。
渋谷のスクランブル交差点のリアルタイムな映像は、ネット上で公開されています。 そこで、それを利用して、以下の流れでできると思いました。
ブラウザ等で映像を開く(PC側の処理)
スクリーンショットとる(PC側の処理)
画像処理(ってほどじゃないけど)で信号の色か、人の流れを見て、赤、青、できたら黄色信号を判別(PC側の処理)
Arduinoにシリアル通信でその情報を送る(PC側の処理)
LED光らせる(Arduinoの処理)
例によって面白いところはほとんどパソコン側のプログラミングです。
Arduinoの方のチュートリアルが進んでないので、こうなっちゃいます。
早く先に進みたい!
前回までは、パソコン側はRubyでいろいろ処理してました。
でもこれも飽きてきたので、最近いじってるSwiftで作るOSXアプリでやってみたいとおもいます。
ソースコード
PC側(Swift)はこちら
https://bitbucket.org/aoyagikwansei/traficsignalsyncaruino
Arudinoスケッチはこちら
<まだない>
作業
Swift→Arduinoのシリアル通信
最初にやり方だけ調査。
適当にググると、IOKITというライブラリを使えばいいらしい。じゃあこれでいいや。
実は今手元にArduinoがないので次に進む。
参考 Mac OS X Drivers for CH340 / CH341 / PL2303 USB to RS-232 Devices
ライブカメラ
適当にググってください。
渋谷駅前の交差点ので、ちょど利用できそうなやつがあったので、この記事はそれをつかいます。
しかし、そのサイトは映像の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
ここにのっている方法は、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をはじめよう 互換キット UNO R3対応互換ボード 初心者専用実験キット 基本部品セット20 in 1
- 出版社/メーカー: vership
- メディア: おもちゃ＆ホビー
- この商品を含むブログを見る
このキットと私がアップしたコードの組み合わせで作れます。
こういう有名ドコロのでも可。
サインスマート 20センサーモジュール Arduinoはじめよう 互換キット (UNO R3 + リレー + HC-SR04 ) 初心者向けのチュートリアルPDF提供！for Arduino
- 出版社/メーカー: サインスマート(SainSmart)
- メディア: その他
- この商品を含むブログを見る
- メディア:
- この商品を含むブログを見る
- 出版社/メーカー: スイッチサイエンス
- メディア: エレクトロニクス
- この商品を含むブログを見る
これまでの記事など
前回
総合もくじ
