たねやつの木

Photographs, Keyboards and Programming

Raspberry PiでWEBアプリケーションを作る (1 - とりあえず何か表示してみる)

f:id:ibuquicallig:20180109175221j:plain

(2019/05/16追記)

こちらの記事で新しく書き直しています!おそらくブログ書くのも慣れている&第3回の記事でひと段落しているので、理解しやすいかと思います😎



こんにちは、たねやつです。
だいぶ記事が書き溜められてきたのでそろそろ公開していきます!(´ε` )

概要

この記事では、自分で作成したアプリケーションをオンラインに公開し、利用する所までです。

  • 同一LAN内の機器の稼動状態を表示
  • 室温・湿度・CPU温度などを表示
  • IRKitで家電操作
  • RSSを利用したまとめサイト
  • SpotifyをRaspberry Pi上で実行

といった感じのことを行えるようにします。

例えばこんな感じのWEBページです。

f:id:ibuquicallig:20180109175426p:plain

f:id:ibuquicallig:20180109175246p:plain

ボタンを押すとURLにパラメータを付加してページ更新 > PHPがパラメータを取得して処理(IRKitにで信号送信)実行。

f:id:ibuquicallig:20180109175256p:plain

RSSを取得してテーブルに入れてページを動的に表示。コチラもPHPを使用。

セキュリティ面の(詳しい)解説を私ができるかどうか 定かではありませんので、LAN内でのみアクセス可能なWEBページとしてで完結するかもしれません、、、(笑)

Androidアプリなんかで作成したほうがいいのかもしれませんが、複数のOS、端末からアクセスしたいので HTML形式でブラウザから使用できるWEBアプリケーションの方式をとりました。 CSSのフレームワークにBootstrapを利用しているので簡単にレスポンシブなWEBページを作成できました。

使うヤツら

  • WEBサーバ (Apache)
  • HTML, CSS (Bootstrap)
  • PHP
  • データベース (PostgreSQLを使用), SQL
  • git (Raspi上でファイルの作成・編集を行う場合やFTPで転送する場合は不要)
  • Linuxのコマンド

PHPの部分はJavascriptとかでも代用可能かと思いますが、PHPを使ってみたくて採用しました。

DBを使用せずに(=データの蓄積を行わずに)作成する方法も可能な限りシテイキマス。

データベース・SQLはなかなか最初はとっつきにくかったのですが、とりあえずこの本が必要な情報を 網羅しているのでおすすめです。

PostgreSQL全機能リファレンス (アドバンストリファレンスシリーズ)

PostgreSQL全機能リファレンス (アドバンストリファレンスシリーズ)

想定環境

もちろんRaspberry Piです(笑)。Raspberry PiでなくともDebian, UbuntuのPC上でも当然動くはずです。 (Debianを導入したノートPCで開発して、git経由でRaspi上で本番化(?)しています)

Raspberry Pi 3で主に運用しています。2でも大丈夫と思います。Zeroはどうなんでしょう...? 重い処理は含んでいないので大丈夫と思いますが、Zeroを持っていないのでわからないですorz

$ lsb_release -a
No LSB modules are available.
Distributor ID: Raspbian
Description:    Raspbian GNU/Linux 9.1 (stretch)
Release:    9.1
Codename:   stretch

WEBサーバー

外部(FirefoxからURLでアクセスするなど)からの要求に対してHTML形式のファイルなどを、 返答してくれるモノです。WEBページとしてオンライン上に表示するためには必要不可欠です。

WEBサーバー - Wikipedia

Raspberry Piで無くとも、コンピュータをWEBサーバーとして稼働させるためには、 ApacheNginxといったサービス(アプリ?) をインストールする必要があります。

この記事、または他の私の作成した記事ではApacheというサービスを使用していきます。 Apacheだったりhttpdだったり名前が色々あるのですが、Raspberry Piで使う上ではApache2となります!(´ω`) さらにややこしい...(笑)

ネット上にある情報もapacheで調べてもhttpdという名前しか出てこない、ということによく出くわすと思いますが、 設定用のファイル名がちょっと違っていたりフォルダの構成が違っていたりするだけでどちらもほぼ変わりません。

とりあえずインストールしてみる

アプリケーションをインストールする前のお約束として、パッケージリストの更新とアプリケーションの更新を行います。

$ sudo apt-get update ← パッケージリストの更新
...[完了待]
$ sudo apt-get upgrade ← アプリケーションの更新

パッケージリストの更新を行わないと、現在Raspberry Piの持っているリストが古い場合に目的のアプリケーションを インストールできなくなってしまいます。(古いダウンロード先を参照してしまいます)

以下のコマンドでApache2とその他必要なものをインストールします。その他必要なものは勝手にRaspberry Pi側が考えて、 取捨選択してくれるので特に考えなくても大丈夫です。

$ sudo apt-get install apache2

Do you want to continue? [Y/n]と表示されたらそのままエンターを押すか、Y(y)と入力してエンターを押します。

Linuxではこのように同意を求めてくる時には[Y/n]と表示して処理を一時中断してきます。お察しの通りYはyes, nはnoです。

大文字になっている方がデフォルトの返答となっているので、[Y/n]と表示されたときにはエンターを押すだけで'Y'と 答えたことになります。

或いはapt-get install -y apache2と-yオプションを指定することですべてYESで処理をすすめるようになります。




インストールが完了したらウェブブラウザからRaspberry Piの提供しているWEBページにアクセスしてみましょう。 (iptablesの設定などは何も行っていないものとします...(_))

URLにhttp://(Raspberry PiのローカルIPアドレス)と入力します。(http://192.168.1.100といった感じで)

Raspberry PiのロカールIPアドレスがわからない場合は以下のコマンドをRaspberry Pi上で実行してください。

$ ifconfig

eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
    inet 192.168.xxx.xxx  netmask 255.255.255.0  broadcast 192.168.xxx.xxx

inetのあとに続く192.168.xxx.xxxの部分がRaspberry PiのローカルIPアドレスです。無線で接続している場合は、 (多分)eth0の部分がwlan0とかになっていると思います。




接続してみると"Apache2 Debian Default Page" "It works!"といった画面が表示されるかと思います。 これが表示されればApache2のインストールは完了です。

前提条件としてRaspberry Piの繋がっているルーターと同じルーターに繋がっているパソコンからアクセスする必要があります。 ココまででRaspberry Pi上でapt-getとか行えているのであれば特に問題ありません。現状では外のPC、スマホで http://192.168.xxx.xxxにアクセスしても表示されないということです。

何か表示してみる。

自分で作ったページを表示してみまししょう。

表示したいページは/var/www/html/の中に作成すればおkです(´ω`)

今回はファイル名はtest.htmlとしておきます。

$ cd /var/www/html ←ディレクトリの移動
$ nano test.html

と入力するとエディターが開きます。

<h1>TEST</h1>
<p>Hello World!</p>

と書いて保存してください。(nanoならctrl + Xだっけ?)

コマンドの画面に戻ったらそこでlsと入力するとファイルが作成されているかどうかがわかります。


***

つぎはWEBブラウザから今のファイルを開きに行きます。先程のURLの末尾に/test.htmlと足して http://192.168.1.100/test.htmlという感じにしてエンターを入力すると...

f:id:ibuquicallig:20180109175321p:plain

先程作成したtest.htmlがWEBページとして表示されました!(´∀`) フォントは若干異なるかもしれません!

とりあえず今回はこの辺で終了します!

次の記事

次の記事ではボタンの作成とボタンの見た目変更を行います。

関連記事