みなさん、こんにちは。KEYチームの矢納です。今日も張り切ってはんだ部レポートを書いていきたいと思います。

Raspberry Piを使っているのに、技術ネタが今まで出てきてませんね(^^;;

と、いうことで今回は簡単にWeb Server?作成の手順をあげていきたいと思います！

今回やりたいことはこんな感じです。

さて、今回は大好きなJavaではなく、Pythonでやっていきたいと思います。なぜPythonなのかというと、せっかくRaspberry Piの推奨?言語なので、使ってみようと思った訳です。

では、最初にFlaskというフレームワークをインストールします。Flaskはpipを使います。

$ sudo apt-get install python-pip
$ 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