こんにちは、たねやつです。この記事からはWEBアプリケーションを作成していきます。
前の記事
前回までの記事で、Raspberry Pi上で必要な操作は一通り習得できましたね！
まだ手元にRaspberry Piがないよ、という方も買うべきモデルやWi-Fiに繋げるまでの初期設定も1操作ずつ細かく解説していますので是非参考にしてみてください😍
この記事内でできること
- 概要の理解
- Apacheのインストール
- Hello Worldのページを作成
最終的に完成するもの
今回の一連の記事ではRSSリーダーを作成します。各サイトやブログの最新記事を一覧形式で表示するようなアレです。
私が以前作成したものですが、以下のような感じのものだと思ってください。デザインなどは少し変えます。
想定環境
Raspberry Piで、と銘打っていますがもちろんほかのLinux端末、ディストリビューションでもほぼ同じ方法で構築を進めることができます。大きな違いはインストールのコマンドが違ったり、WEBサーバーの設定ファイルの名前が違う程度の差です。
使用するRaspberry Piのバージョンは以下のようになっています。合っていなくても問題ないです。
$ lsb_release -a No LSB modules are available. Distributor ID: Raspbian Description: Raspbian GNU/Linux 9.8 (stretch) Release: 9.8 Codename: stretch
Raspberry Pi 3B+で構築していきますがそれよりも前のバージョンだったり、Zero系でも問題ありません。
使用するもの
以下のパッケージ(ソフトウェア)、プログラミング言語を使用します。
- WEBサーバー(Apache)
- HTML, CSS(Bootstrap)
- PHP
本格的に作るにはデータベースでデータを蓄積したりしますが、今回の連載ではそこまで複雑なものは作成しません！まずは簡単にできるものから作ったほうが楽しいですよね😊
流れとしてはHTML, CSSだけで構築した簡単なページが完成したのちにPHPでRSSの取得、表示の処理を乗っけていきます。本当ならjQueryからRSSを取得したいのですが、設定が面倒になるのでPHPを選択しました。
必要なプログラミングやHTMLの書き方などは随時解説していきますが、そもそもHTMLの文法っって？という感じの内容に関しては、Progateなどの学習サイトで一通り押さえておくと、理解度がぐっと上昇すると思います！高校生ぐらいのときにこんな感じのサイトとPCが手元にあったらなーといつも思ってしまいます(笑)
WEBサーバーの役割について
外部からのアクセス(Chromeなどのブラウザからのアクセスなど)に対して、HTML形式のファイルを渡してくれるのがWEBサーバーです。渡すファイルはURLによって指定されます。
HTMLファイルを作成するだけでは、Raspberry Piに外部からアクセスしただけではそのファイルを返すことができないので、WEBサーバーを橋渡しとして返すことができるようになります。
この記事ではApache(アパッチ)という名前のWEBサーバーを使用していきます。ほかにもnginxといったものもあります。現時点ではApacheのほうがわずかにシェア数が多いようです。
Raspberry Pi(Raspbian)上ではApacheの名前がApache2となりますのでご注意ください！また、別のLinuxディストリビューションではhttpdとなっていたりしますので、検索したときにはhttpdの情報もほぼほぼそのまま利用することができます。設定用のファイル名やディレクトリ構造が少し違いますが、内部的に行っていることは同じです。
手順
前書きが長々としてしまいましたが、それでは構築を進めてきましょう🎊🎊
Apacheをインストールする
まずはapache2をインストールしていきます。パッケージの更新などをも含めて以下のコマンドでOKです。
$ sudo apt-get update
$ sudo apt-get install apache2
# ...
以上でインストール自体は完了です。
インストールできているか確認してみる
実際にページを表示してみて確認してみましょう。Chromeなどのブラウザからhttp://[Raspberry PiのIPアドレス]にアクセスすると表示できます。IPアドレスが192.168.11.10場合は、http://192.168.11.10という感じです。
Raspberry PiのIPアドレスがわからないという場合には以下のコマンドでinetの横の値を確認してください。
$ ifconfig wlan0
wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500
inet 192.168.11.10 netmask 255.255.255.0 broadcast 192.168.11.255
アクセスすると、Apache2 Debian Default Pageというページが表示できていると思います。
表示できていれば無事インストールしてサーバーが起動している状態となります。
HTMLファイルを作成する
では、Hello Worldページを作成していきましょう。何も設定しない状態のApacheでは、/var/www/html/ディレクトリ内にあるファイルを表示するようになっています。ですのでここにファイルを作成していきましょう。
ディレクトリのアクセス権限を変更する
ファイルを作成していきたいのですが、現在のこのディレクトリの所有者はrootで、ほかのユーザーが書き込みができない設定になっています。
$ ls -la total 12 drwxr-xr-x 3 root root 4096 May 13 14:57 . drwxr-xr-x 12 root root 4096 May 13 14:57 .. drwxr-xr-x 2 root root 4096 May 13 15:20 html
以下のコマンド(chmod)で全ユーザーでファイルの作成や編集をhtml/内でできるようになります。
$ cd /var/www $ sudo chmod 777 html/ $ ls -la total 12 drwxr-xr-x 3 root root 4096 May 13 14:57 . drwxr-xr-x 12 root root 4096 May 13 14:57 .. drwxrwxrwx 2 root root 4096 May 13 15:20 html # ⁻⁻⁻⁻⁻⁻⁻⁻ ここが変わりました
変更出来たらhtml/内に移動してエディタを起動します。hello-world.htmlというファイルを作成します。
$ cd html/
$ vim hello-world.html
起動したエディタ内で以下の内容を書き込みます。vimコマンドの使い方ってどんなんだっけ？というときは前回の記事を参考にしてください😎
<body> <b>Hello World</b> </body>
編集出来たらファイルを保存してvimを終了します。
ページを表示してみる
最後にページにアクセスしてみてできているか確認しましょう！HTMLファイルはC言語のようにコンパイル等が不要なので、apache2の再起動なども不要です。
先ほどのファイル名がhello-world.htmlだったのでhttp://[Raspberry PiのIPアドレス]/hello-world.htmlにアクセスします。
表示してみると太字のHello Worldが表示されていますね！これで初めてのRaspberry PiでのWEBページが作成できました！これだけ？と思われるかもしれませんが、まずはこれだけ😉
今回の記事ではここまでとなります。お疲れ様でした👏👏
最後に
概要説明から導入まで完了しました。もしかしたら今回作成したページが人生初の成果物というかたもいるかもしれません😎 自分が作ったものがちゃんと表示されているとものすごい達成感ですよね！
次の記事ではhtml文書だけでWEBサイトのお気に入りリストを作成していきます。
