以前にジョイスティックで Raspberry Pi の操作を試みましたが、よく考えたら「スマホで操作できたらそれでいいんじゃない?」(半年前にXperia Z3を買ったので。)と思いましたので、今度はスマホでの Raspberry Pi の操作にチャレンジしたいと思います。
スマホ(Xperia Z3)からウェブブラウザ経由で Raspberry Pi のリブート等の操作ができる事を目指します。
ちなみに操作画面のイメージは↓こんな感じです。
(Xperia Z3からドルフィンブラウザでアクセス)
このあたりについては専門外なのでカッコいいUIの操作画面とかまで求められても、自分には無理です。
動くことをもって良しとしてください。
◆apache, php のインストール
まずは必要なパッケージをインストールします。
以前に /var/log/ 以下はRAMディスクを使用するようにしていましたので、/etc/init.d/init-ramdisk に下記を追記しておきます。
◆Raspberry Pi 操作用 html & php
google 先生に訊きながらいろいろ参考にして作ってみましたが、正直、自分は素人なので、無駄な事や一般的でない事等、いろいろイケてない事とかしてるかもしれません。。。ご容赦を。
command.html
command.php
html ファイルのシェルコマンドの部分を他のコマンドに置き換える事で、簡単に改造できると思います。
※外部に公開するwebサーバーでは導入しないでください。
http://192.168.0.100/command.html にブラウザでアクセスし、ちゃんと動くかテストしてみてください。
PCからでも、スマホからでもいけると思います。
(reboot と shutdown はまだ出来ません。)
# ↑IPアドレス部分は raspberry pi のIPアドレスを指定して下さい。
自分の Xperia Z3 では上記アドレスをブックマークに登録し、ホーム画面にショートカットを作る事で、ワンタッチですぐにアクセス可能にしています。
◆php から sudo コマンドを実行できるようにする
今のままでは、sudo を含むシェルコマンドは実行できませんので、reboot, shutdown が出来ません。
これを実行できるようにします。
これで Raspberry Pi の再起動、シャットダウンもスマホから可能になりました。
ただし、現状は LAN 内からしか操作はできません。
VPN(Virtual Private Network) を構築すれば、LAN 外からでも Raspberry Pi を操作可能になります。
◆おまけ1
以前に作った talk.sh を html ファイルのシェルコマンドの部分に指定して、ボタンを押したら喋るようにしようと思ったのですが、最初はうまく動きませんでした。
sudo 付ければちゃんと喋ってくれましたので、権限関連の問題かと思っていろいろ試していたところ、www-data に権限を追加することで、sudo 無しでも無事に喋ってくれるようになりました。
スマホ(Xperia Z3)からウェブブラウザ経由で Raspberry Pi のリブート等の操作ができる事を目指します。
ちなみに操作画面のイメージは↓こんな感じです。
(Xperia Z3からドルフィンブラウザでアクセス)
このあたりについては専門外なのでカッコいいUIの操作画面とかまで求められても、自分には無理です。
動くことをもって良しとしてください。
◆apache, php のインストール
まずは必要なパッケージをインストールします。
$ sudo apt-get install apache2 php5
以前に /var/log/ 以下はRAMディスクを使用するようにしていましたので、/etc/init.d/init-ramdisk に下記を追記しておきます。
mkdir -p /var/log/apache2/
◆Raspberry Pi 操作用 html & php
google 先生に訊きながらいろいろ参考にして作ってみましたが、正直、自分は素人なので、無駄な事や一般的でない事等、いろいろイケてない事とかしてるかもしれません。。。ご容赦を。
command.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript">
//<![CDATA[
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function entryClickEvent(id, handler) {
var obj = document.getElementById(id);
if (window.addEventListener) {
obj.addEventListener("click", handler, false);
} else {
obj.attachEvent("onclick", handler);
}
}
function doCommand(command) {
var request = createXMLHttpRequest();
request.open("POST", "command.php", true);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send("cmd=" + encodeURIComponent(command));
}
function doCommandConfirm(command)
{
ret = confirm("本当に実行してもよろしいですか?\n" + command);
if (ret == true) {
doCommand(command);
}
}
function command1() {
doCommand("mpc prev");
}
function command2() {
doCommand("mpc toggle");
}
function command3() {
doCommand("mpc next");
}
function command4() {
doCommandConfirm("sudo shutdown -r now");
}
function command5() {
doCommandConfirm("sudo shutdown -h now");
}
window.onload = function() {
entryClickEvent('btn1', command1);
entryClickEvent('btn2', command2);
entryClickEvent('btn3', command3);
entryClickEvent('btn4', command4);
entryClickEvent('btn5', command5);
}
//]]>
</script>
<title>command</title>
</head>
<body>
<center>
<input type="button" id="btn1" value="<<" style="width:30%; height:50%; font-size:35px" />
<input type="button" id="btn2" value="mpc" style="width:30%; height:50%; font-size:35px" />
<input type="button" id="btn3" value=">>" style="width:30%; height:50%; font-size:35px" />
<input type="button" id="btn4" value="reboot" style="width:45%; height:20%; font-size:40px" />
<input type="button" id="btn5" value="shutdown" style="width:45%; height:20%; font-size:40px" />
</body>
</html>
command.php
<?phpphp スクリプトで html から渡された文字列をシェルコマンドとして実行します。
$command = filter_input(INPUT_POST, "cmd");
if ($command) {
shell_exec($command);
}
?>
html ファイルのシェルコマンドの部分を他のコマンドに置き換える事で、簡単に改造できると思います。
※外部に公開するwebサーバーでは導入しないでください。
$ curl -O http://sstea.blog.jp/raspi/web/command.html
$ curl -O http://sstea.blog.jp/raspi/web/command.php
$ sudo mv command.html /var/www/
$ sudo mv command.php /var/www/
http://192.168.0.100/command.html にブラウザでアクセスし、ちゃんと動くかテストしてみてください。
PCからでも、スマホからでもいけると思います。
(reboot と shutdown はまだ出来ません。)
# ↑IPアドレス部分は raspberry pi のIPアドレスを指定して下さい。
自分の Xperia Z3 では上記アドレスをブックマークに登録し、ホーム画面にショートカットを作る事で、ワンタッチですぐにアクセス可能にしています。
◆php から sudo コマンドを実行できるようにする
今のままでは、sudo を含むシェルコマンドは実行できませんので、reboot, shutdown が出来ません。
これを実行できるようにします。
$ sudo visudoで /etc/sudoers の末尾に以下を追記しておきます。一応、実行可能なコマンドを絞っておきます。
www-data ALL=(ALL) NOPASSWD: /sbin/shutdown(実行可能コマンドはコンマで区切ることで、複数コマンドを指定可能です。)
これで Raspberry Pi の再起動、シャットダウンもスマホから可能になりました。
ただし、現状は LAN 内からしか操作はできません。
VPN(Virtual Private Network) を構築すれば、LAN 外からでも Raspberry Pi を操作可能になります。
◆おまけ1
以前に作った talk.sh を html ファイルのシェルコマンドの部分に指定して、ボタンを押したら喋るようにしようと思ったのですが、最初はうまく動きませんでした。
sudo 付ければちゃんと喋ってくれましたので、権限関連の問題かと思っていろいろ試していたところ、www-data に権限を追加することで、sudo 無しでも無事に喋ってくれるようになりました。
$ sudo usermod -G audio -a www-data