みなさん、こんにちは。KEYチームの矢納です。今日も張り切ってはんだ部レポートを書いていきたいと思います。
Raspberry Piを使っているのに、技術ネタが今まで出てきてませんね(^^;;
と、いうことで今回は簡単にWeb Server?作成の手順をあげていきたいと思います！
今回やりたいことはこんな感じです。
$ sudo pip install flask
では、次にPythonでコードをガリガリと書いていきます。
from flask import Flask, render_template import RPi.GPIO as GPIO import datetime OUTPUT_PIN = 4 app = Flask(__name__) GPIO.setmode(GPIO.BCM) GPIO.setwarnings(False) GPIO.setup(OUTPUT_PIN, GPIO.OUT) @app.route("/") def show_top_page(): now = datetime.datetime.now() time_string = now.strftime("%Y-%m-%d %H:%M") template_data = { 'title': 'Sample Top Page', 'time': time_string } return render_template('top.html', **template_data) @app.route("/light/on") def light_on(): GPIO.output(OUTPUT_PIN, GPIO.HIGH) return '{"result":"ok"}' @app.route("/light/off") def light_off(): GPIO.output(OUTPUT_PIN, GPIO.LOW) return '{"result":"ok"}' if __name__ == "__main__": app.run(host='0.0.0.0', port=80, debug=True)
とても簡単です。@app.route("/")でアクセスを受けて、処理を行います。今回 / でアクセスされた場合はHTMLを返すようにしてあります。HTMLを返すのにはFlaskのrender_tempalteを使用します。これは* templates *のフォルダにあるHTMLを返します。
では、top.htmlを見てましょう。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ time }}</h1>
<hr>
<p id="msg"></p>
<button id="on" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-arrow-up"></span> On</button>
<br>
<button id="off" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-arrow-down"></span> Off</button>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.11.2.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/top.js') }}"></script>
</body>
</html>{{ }}で書かれている部分がpythonで記述されていたtemplate_dataに対応します。また、Javascriptやcssも読み込みたいと思います。そのときはurl_for()を使います。第一引数はstatic(多分これだといけない気がします)、第二引数はその配下のファイルをしてします。ディレクトリ階層は下図の通りです。
あとはこれらのファイルを転送して sudo python top.py を実行するだけです。実行後ブラウザでRaspberry Piにアクセスしてみてください。画面上のボタンの「ON」」「OFF」でLEDの点灯・消灯が可能です。
意外と簡単に作成することができました。本当はBootstrapを使おうとしたのですが、よくわかりませんでしたので、今回はスキップです。軽く調べてみたら、Flask Bootstrapというのがあるらしいですね。まぁそれはおいおいということで(^^;)
今回はここまで。
Email：yanou at atware.co.jp
