たねやつの木

Photographs, Keyboards and Programming

Raspberry Piにカメラモジュールを接続して写真を撮る。

こんにちは、たねやつです。

今回からスマートアクアリウムに向けての環境構築を進めていきたいと思います。

要は家の水槽を一部コンピュータ管理してより安全快適な水槽を作り出そうということです。

目標

  • カメラモジュールを接続できるようになること。
  • 画像をカメラモジュールから取得できるようになること。
  • 取得した画像の簡単な処理(回転など)ができるようになること。

使用するもの

Raspberry Pi

もちろんRaspberry Piが必要になってきます。初期設定などは済ませているものとします。

(秋葉原・日本橋で買うほうが圧倒的にやすいです。。)

今回使用するのはRaspberry Pi Zero Wを使用します。後々設置する場所にはLANケーブルの配線が困難な場所なので、 無線タイプのものを使用します。もちろん普通の2Bとかでも大丈夫です。

以下の設定を済ませた直後のものを使用します。

カメラモジュールの有効化

以下のものを使用します。Amazonのセール時期に結構な確率で安売りされているのでそこを狙ってみるのもいいかもしれません!

純正のカメラの半額以下の価格で購入できました。

赤外線カメラも売っているそうですが今回は普通のカメラを使用します。

カメラ本体とRaspi本体をつなぐ薄っぺらいケーブルは2種類ついてきます。一つはZero用のコネクタと繋げる用、もう一つはZero以外のRaspiと繋げる用です。

Raspiの設定

picameraモジュールの確認

カメラを使用するために必要な Pythonモジュールが存在しているか確認します。

Raspberry PiにOSをインストールする時の方法によるかもしれませんが、私の場合は存在していませんでした。。。(笑)

以下のコマンドをRaspi上で実行することで確認できます。

$ python -c 'import picamera'
ImportError: No module named picamera

ImportError: No module named picameraと表示されている場合モジュールが存在していない事になります。以下の点順で導入しましょう。

$ sudo apt-get udate
$ sudo apt-get install python-picamera python3-picamera

完了後、再度`$ python -c 'import picamera'を実行すると今度はエラーが表示されないはずです。

カメラを有効にする

初期設定ではカメラモジュールから信号を受け取るという設定がOFFになっているので、手動でONにする必要があります。

sudo raspi-configを実行してInterfacing Options > Camera > <Yes>でONにします。

その後、Raspiを再起動する必要があります。

ファイルの作成

根幹となる部分です。公式のドキュメントではLinuxのコマンドライン上から画像を取得する方法と、 Pythonでソースコードを書いていく方法の2種類が紹介されています。

今回は後者のPythonで取得する方法で進めていきます!






適当な場所にcamera.pyというファイルでコードを作成してきます。 ホームディレクトリ下に好きな名前でディレクトリを作成してやるのがオススメです。

$ cd               ← ホームディレクトリに移動
$ mkdir camera     ← "camera"というディレクトリの作成
$ cd camera        ← 移動
$ touch camera.py  ← "camera.py"というファイルの作成

カメラから画像を取得する処理

camera.pyに以下のコードを書き込みます。

from picamera import PiCamera
from time import sleep

camera = PiCamera()

// カメラが画像の取得を開始する
camera.start_preview()

// 5秒待つ
sleep(5)

// 画像を収録して保存
camera.capture('/home/[ユーザー名]/[ディレクトリ名]/image.jpg')

// カメラが画像の取得を停止する
camera.stop_preview()

import,変数,クラス,メソッドの概念がよくわからない!という場合は以下のようなページが参考になるかもしれません。。。

[ユーザー名]と[ディレクトリ名]の部分には適切な文字列を入れてください。

camera.start_preview()のあとにsleep(5) で5秒静止している理由は、公式ドキュメント情報から「露出の固定のために2秒以上静止してね」とあるためです。

ですので本当にきっちりな時間に画像を取得したい場合は、cronなどの定期実行の時間も考える必要があります。

また、WEBサイトなんかに埋め込んで要求があるたびにjpgを作成して表示なんてことをしようとしている場合、推奨ギリギリの2秒にしておかないと待ち時間が長くなってしまいます。(2秒でも長いですが,,,)

実行

以下のコマンドで実行。camera.pyの存在しているディレクトリ内で実行してください。

$ python camera.py

実行権限付与とかrootで実行しなくてもいいんですね。

実行したらカメラのLEDが赤く光ります。処理が終了後指定したパスに指定したファイル名で保存されます。

FTPかなんかで見に行きましょう!以下の記事でRaspiにFTPサーバーを建てて、ブラウザから参照する方法を紹介しています。

画像が見れましたか?画像がそもそも保存されない場合は指定したディレクトリがおかしい可能性があります。

IMG_20180504231356

IMG_20180504232144

シャッタースピードなどを自動ではなく手動で設定する必要がありそうですが、画像が取得できますね!

水草の部分をアップにしてみても結構画質よく撮れていますね!

ここから露出・SSを下げてコントラストを上げればいい感じにブレなく写ってくれそうです。

ファイル名を現在日時にする

今のままだとファイル名がimage.jpg固定で実行するたびに上書きされてしまいます。

ファイル名の末尾に現在日付を足してかぶらないようにしましょう。ついでにもう少し定数部分などを切り分けて汎用性の高いコードにしましょう。

import datetime
from picamera import PiCamera
from time import sleep

USER_NAME = "ユーザーネーム"
HOME_DIR = "/home/" + USER_NAME
SAVE_DIR = HOME_DIR + "保存ディレクトリ"
    
# ファイル名の生成
# 現在時刻を取得
datetime = datetime.datetime.today()
datetime_formatted = datetime.strftime("%Y%m%d%H%M%S")

# ファイル名に時刻を埋め込む
file_name = "IMG_" + datetime_formatted + ".jpg" 

camera = PiCamera()

camera.start_preview()

sleep(5)

camera.capture(SAVE_DIR + file_name)

camera.stop_preview()

ユーザーネーム、保存ディレクトリには任意の値を入力してください。保存ディレクトリの値の末尾には必ずスラッシュ(/)をつけてください。

datetimeモジュールを使いしています。コレで現在時刻の取得、時刻のフォーマットを行います。

出来上がるファイル名は IMG_20180504173025.jpgのようなかんじで年月日時分秒の順で表示しています。

画像を回転させる

取得できる画像を回転させる場合、start_preview()を始める前に、camera.rotation = 180で回転度数を指定できます。

...
camera.rotation = 180
camera.start_preview()
...

180と指定した場合は上下反転した画像になります。

その他いろいろな設定

以下のページにカメラのいろいろな値の設定方法と、参考のコードが載っています。

https://picamera.readthedocs.io/en/release-1.12/recipes1.html

SSや画面解像度を設定できます。

最後に

以上でカメラモジュールから画像を取得する事ができるようになりました!

あとはcronで定期実行したり、webページからのリクエストに答えて画像を表示なんて連携もできます。

それに関しては別記事にて。

参考

https://www.raspberrypi.org/documentation/usage/camera/README.md https://projects.raspberrypi.org/en/projects/getting-started-with-picamera

Raspberry PiにFTPサーバを建ててファイル共有する。

079A9468.jpg

手順

vsftpdをインストール

以下のコマンドでインストール。

一応サーバだけでなくクライアントもインストールしておきます(ftp)。コレで他のFTPサーバにもアクセスできるようになります。

$ sudo apt-get update
$ sudo apt-get install vsftpd ftp

以下のコマンドでactive (running)と表示されていれば問題なく動作している状態です。

$ sudo /etc/init.d/vsftpd status

アクセスしてみる

現段階ですでにFTPプロトコルでアクセスする事ができる状態です。 特別なFTPクライアント(FFFTP, WinSCPとか)を用意しなくても、ファイルを参照するだけであればWEBブラウザ(Chromeで確認)からでもアクセスすることができます。

URLの部分にftp://[RaspiのIPアドレス]を入力するとアクセスできます。IPアドレスが192.168.1.2であればftp://192.168.1.2です。

入力するとログイン認証を求められます。ユーザ名とパスワードを入力するとユーザーのホームディレクトリにあるファイルが表示されます。

クリックするとファイルをの中身を参照できます。

FFFTPなどのFTPクライアントや、Linuxコマンドftpを使えばファイルの参照だけでなく、ファイルの転送や削除などを行うことができます。

ローカルからのアクセスのみに制限する

設定ファイルにrcp_wrappers=YESと追加します。

sudo vim /etc/vsfrpd.confで書き込みます。ファイル末尾なんかに追加しておきましょう。

その後に

$ sudo echo "vsdftpd:ALL" >> /etc/hosts.deny
$ sudo echo "vsdftpd:192.168." >> /etc/hosts.allow

でアクセス禁止ホスト、許可ホストのファイルに追記します。一旦全部拒否してローカルIPからのアクセスのみ許可するというカンジです 。

Raspberry PiにSSH接続できるまで (Raspi Zeroを購入)

こんばんは、たねやつです。

新たなRaspberry Piがやってまいりました。

現在既に2台(2B, 3B)がお家の中で稼働していて非常に快適なスマートホームの構築に役立ってくれているわけですが、

さらに水槽周りも改善できるのではないかという考えから買ってみました。 特にこういったことをするという具体的な構想はないですが、

  • サーボモータとか使用した自動給餌
  • 水温の取得
  • CO2ディフューザー、エアレーションの制御

あたりはちょっと調べればできそうな感じですね!





IMG_20180422_222138

これがRaspberry Pi Zero W。日本橋で既にGPIOピンがはんだ付けされている物を購入。2300円ぐらい。ネットで買うとたけえ。2300円でも元値を考えると十分高いですが、、、 一緒にHDMIの変換コネクタを買ったのですがまさかの違う大きさのものを購入orz

Zeroはmini HDMI端子を持っているのですが、買ったのはmicro HDMI端子の変換コネクタでした(笑)

画面表示が出来なければ初期設定も出来ない。そしてZeroには有線LANの端子が無い! ということで完全に積んだ。。。と思っていましたが,,,

「他のRaspiで初期設定、SSH接続を受けられるようにしたSDカードをZeroに挿せば良いのでは?」 と世紀の大発見!!

結果としてうまく行きました!(まあ当然なのかもしれないですが...)

久しぶりにセットアップしたので、インターネットへの接続までのメモを残しておきます。

初期設定

IPアドレスの固定

以下のファイルに追記。vimは標準ではインストールされていないのでvinanoで編集する必要アリ。

$ sudo nano /etc/dhcpcd.conf

interface wlan0
static ip_address=192.168.xxx.xxx/24
static routers=192.168.xxx.xxx
static domain_name_servers=8.8.8.8
項目 説明
interface wlan0(無線の場合) 有線の場合はeth0を設定
ip_address [固定したいIPアドレス]/24 他の機器のIPアドレスとかぶらないように...
routers [無線LANルータのIPアドレス]
domain_name_servers 8.8.8.8 DNSの設定。特にこだわりがなければroutersに設定した値と同じでもOK

コレでIPアドレスは固定できる。

無線LANルータに接続するための設定

以下のファイルに追記。

$ sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

network={
    ssid="[無線LANルータのSSID]"
    psk="[パスワード(平文可)]"
}

pskの部分にはそのままの文字列でパスワードを設定できる。 もしくはwpa_passphrase [SSID] [パスワード]で出力される暗号化されたパスフレーズを使用する。

wpa_passphrase hoge hogehogehoge

network={
    ssid="hoge"
    #psk="hogehogehoge"
    psk=6b0193e56580f2b655747dc3c19d69b7311e8d52f2a8447561b575f83b93b040
}

なんなら

sudo wpa_passphrase hoge hogehogehoge >> /etc/wpa_supplicant/wpa_supplicant.conf

でワンラインにしてしまおう。

再起動

raspiを再起動させる。 もしくはsudo /etc/init.d/dhcpd restartで設定を反映させる。 後はpingとかcurlで外部に繋げられるか確認。

SSHの有効

sudo raspi-configInterfacing Options > SSH > Yesで有効化。 ついでに

  • Network内でホスト名の変更
  • Advanced内でパーティション拡張
  • Localisation内でロケール・タイムゾーン・キーマップの設定 (デフォルトのキーマップは英国式なのでなんか変)

を設定。以上で完了。

うちの子たち

IMG_20180422_222235

仲良し三兄弟(鍵認証し合っているという意味で)。カメラ用に使っていたエラー頻発のSDカードなのでセグフォ連発にならないか心配。 バックアップは怠らないように。

Raspberry PiでWEBアプリケーションを作る (5 - bootstrapの導入)

f:id:ibuquicallig:20180109175221j:plain

こんばんは、たねやつです。多忙につきあまりこのシリーズ更新が出来てません。 書き溜めているものの、やっぱり最後に確認で時間かかっちゃうんですよね(笑)

まるで本番環境にデータパッチを当てるこの感じ...ゾワゾワ(._.)


今日はCSSのフレームワークであるBootstrapというものを使用して、サイトの 形を作っていきます。

といっても深く理解する必要はなくちょっとだけ使うという感じです。それだけでもグッとサイトが作りやすくなります。

前の記事

Bootstrapとは

BootstrapとはCSSフレームワークであり、レスポンシブ表示に対応したサイトの作成がヒジョーに 簡単にできるという代物です。ちょっと用語を説明してみましょう。

フレームワーク

CSSについては以前のボタンを作成した時に少し触れました。WEBサイトのデザインを担当してくれる部分です。

フレームワークとは文字通り枠組みを与えてくれるもので、素のコードを書くと数百行に及ぶものを たった一行のコードで実行できるようにまとめたコード群のようなものです。

また同じフレームワークを導入する限り、同じコードで同じ結果を取得できるのでソースコードを使いまわすのが容易になります。

レスポンシブ表示

とは、一つのデザインが伸び縮みして、複数の環境(PC, スマホなど)で同じようなデザインを反映できるような表示の仕方です。

例えばAppleのサイト。

PCのブラウザを全画面表示しているときには、トップのナビゲーションバーにはMac, iPad, iPhone...と並んでいますが、 どんどんブラウザの幅を縮めていくとある地点からりんごマークしか表示されなくなると思います。

そして画像も横に広い画像から、縦に長い画像(スマホ向け)に変わると思います。

このような感じで画面の幅を認識して、レイアウトが自動的に変わるような表示形式がレスポンシブ表示です。

ちなみにこのたねやつの木はレスポンシブなデザインではありません。PCの場合とスマホの場合とで全く違うデザイン定義を使用しています。 (色やヘッダーの色などは可能な限り近づけています。)

いつかは自分のテンプレートでレスポンシブなブログにしようと思ってはや半年が経ちました(笑)

覚えるべき点

Bootstrapの以下の2点さえ抑えられれば、それなりのレスポンシブ表示ができるようになります。

  • 要素は縦に12分割して考える
  • 上下の要素のmargin, paddingをよく考える

ただ絵で説明する技術が無いので、ココは先人のキレイな解説を読みましょう!

このページの「グリッドシステムの使い方」という見出しの部分に12分割の考え方について書いてあります。

今回の連載ではそこまで手の混んだレイアウトにはしないので、col系のタグの書き方をよく理解しておけば問題ないです。 私も結局このページぐらいしか勉強しておらず、後は試行錯誤で作って覚えていくという感じでした。

Bootstrapを導入

まずは、公式サイトからファイルをとってきます。ローカルの保存しなくてもCDN形式で使用することも出来ますが、 一部ソースを書き換えたい部分があるので、ローカルに保存して進めていきます。

以下のページからダウンロード。

ちょっと古いバージョンになってしまいますがご了承を。うまく出来たら最新のv4でチャレンジしてみましょう!

ページ内のDownload Bootstrapの部分をクリックすると、ファイル群をダウンロード出来ます。 解凍していつもの/var/www/html/にFFFTPやその他の方法で置きに行きましょう!

以下のような感じで配置します。

$ cd /var/www/html/bootstrap-3.7.7/
$ ls -la
drwxr-xr-x  2  4.0K  4月  2 23:30 css
drwxr-xr-x  2  4.0K  4月  2 23:30 fonts
drwxr-xr-x  2  4.0K  4月  2 23:30 js

置けたでしょうか?コレで導入自体は完了です。結局はただのCSSファイルなので置くだけぽんです。

ページを作成する

今おいたBootstrapを読み込んだhtmlページを作成します。

とりあえず以下のようなHTMLファイルをbootstrapのフォルダをおいた場所と同じところに置きます。 名前はbootstrap.htmlとしておきましょう。

<html lang="ja-JP">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
       <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
       <title>ここにタイトルを入力</title>
       <meta name="description" content="ここにページの説明を入力">
       <!-- noindex / nofollow -->
       <meta name="robots" content="noindex">
       <meta name="robots" content="nofollow">
       <!-- Bootstrap -->
       <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7/css/bootstrap.css"/>
       <!-- self-defined css file -->
       <link rel="stylesheet" type="text/css" href="./stylesheet/style.css">
       <!-- Google Fonts embed (https://fonts.google.com) -->
       <link href="https://fonts.googleapis.com/css?family=Teko:600" rel="stylesheet">
   </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 bootstrap-text">
                    <p>col-12</p>
                </div>
                <div class="col-xs-6 bootstrap-text">
                    <p>col-6</p>
                </div>
                <div class="col-xs-6 bootstrap-text">
                    <p>col-6</p>
                </div>
                <div class="col-xs-3 bootstrap-text">
                    <p>col-3</p>
                </div>
                <div class="col-xs-3 bootstrap-text">
                    <p>col-3</p>
                </div>
                <div class="col-xs-3 bootstrap-text">
                    <p>col-3</p>
                </div>
                <div class="col-xs-3 bootstrap-text">
                    <p>col-3</p>
                </div>
            </div>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="./bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

内容について解説

ほとんどは以前のHTMLテンプレートの紹介の記事で書いたものと同じです。 がおさらいしておきましょう。

<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7/css/bootstrap.css"/>

この部分でBootstrapのCSSフレームワークを読み込んでいます。あとあとこのbootstrap.cssファイルを少し触ります。


<link rel="stylesheet" type="text/css" href="./stylesheet/style.css">

ほとんど同じような内容ですが、こっちは自作のCSSファイルを読み込んでいます。 CSSは基本的には後から読み込んだ内容が優先されるので、BootstrapのCSSファイルよりも後に記述するようにします。

後々このCSSファイルを作成していきます。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>

よく理解は出来ていませんが、この4行はBootstrapを使う上で必要なもののようです。追加しておきましょう。 jqueryははてなブログのカスタマイズでもよく使われるjavascriptフレームワークという感じです。

ページにアクセスする

作成できたらページにアクセスしてみましょう。http://raspiのアドレス/bootstrap.html でアクセスできるはずです。 中身は以下のような感じかと思います。

f:id:ibuquicallig:20180404222336p:plain

さらにわかりやすいようにCSSを追加していきます。

CSSファイルの作成

先程のHTMLファイルの中で既に、自作CSSファイルの読み込みと、書くタグへのCSSの反映は完了しています。

後は参照先のCSSのファイルを作成するだけです。

bootstrapフォルダのある場所(/var/www/html/)に新たにstylesheetというディレクトリを作成します。 さらにその中にstyle.cssという名前のファイルを作成します。 どちらも任意の名前で構いませんが、名前を変更した場合、HTML内で読み込んでいる部分の名前も変更してください。

ファイルが作成できたら、以下の内容をstyle.cssへ書き込みます。

.bootstrap-text {
    font-size: 3em; /* フォントサイズの指定 */
    text-align: center; /* フォントを中央揃え */
    font-weight: bold; /* 太文字にする */
  color: #FFFFFF; /* フォントの色 */
  display: inline-block;
  padding: 0.25em 0.5em;
    border: 1px solid #000000;
  border-radius: 4px;
    background: #fd9535; /*背景色*/
}

ざっくりと以下のページの内容を参考にしています。

CSSの記述についてですが、{}内のアイテムの順序は基本的には考えなくても大丈夫です。 ただ保守性(今後のメンテナンスのしやすさ)を考えるとある程度のルールを設けて 順番を揃えておくほうがわかりやすいです。

私は基本的に

  • 文字に関する内容
  • 文字色に関する内容
  • 文字以外に関する内容
  • (最後に)背景色に関する内容

といった感じで内容を揃えています。

再度ページを表示

以上の内容をstyle.cssに追加して再度ページを表示(更新)してみると、、、

f:id:ibuquicallig:20180404222301p:plain

こんな感じに表示されていると思います。

表示されない場合

以下のような理由が考えられます。

うまく更新できていない

ページのキャッシュ(履歴のようなもの)が残っていて、新たに反映した変更が適応されない場合があります。 キャッシュを破棄して再度ページを取得するには(Firefoxの場合)Ctrl + F5で出来ます。(スーパーリロード) 多分他のブラウザでも大丈夫です。

スマホでアクセスしている場合は、一旦ブラウザアプリを閉じて再度開くとページを再取得します。

ファイル名が正しくない

自作CSSのファイル名、もしくはそこのたどり着くまでのパスがおかしい可能性があります。

CSSファイル名はstyle.cssで、ディレクトリ名はstylesheetでこのディレクトリが bootstrap.htmlと同じ場所のあるでしょうか?

表示内容をよく見てみる

f:id:ibuquicallig:20180404222301p:plain

先程の作ったHTMLページです。

上から、

<div class="col-xs-12 bootstrap-text">
    <p>col-12</p>
</div>
<div class="col-xs-6 bootstrap-text">
    <p>col-6</p>
</div>
<div class="col-xs-6 bootstrap-text">
    <p>col-6</p>
</div>
<div class="col-xs-3 bootstrap-text">
    <p>col-3</p>
</div>
<div class="col-xs-3 bootstrap-text">
    <p>col-3</p>
</div>
<div class="col-xs-3 bootstrap-text">
    <p>col-3</p>
</div>
<div class="col-xs-3 bootstrap-text">
    <p>col-3</p>
</div>

がそれぞれの四角形を作り出しています。col-xs-*で指定した数値/12の大きさの四角形が生成されているのがわかります。 一行が12をどんな大きさでもOK(col-xs-1を12個とか)なので結構レイアウトが作りやすいんですよね。

HTMLについての説明ですが、<div ...></div>が一つの塊になっていて、class="..."でその塊の大きさなどを指定しています。 <p>は以前にもやりましたが、文字列を表示するタグですね。

この勢いで画面を分割して色々作っていきます!

ちなみに、冒頭で説明していたレスポンシブ表示をココで試すことが出来ます。

ブラウザの幅を伸び縮みさせると、四角形の大きさも比例して変わっていくことがわかると思います!気持ちいい!

いろいろ作ってみる

一行の合計が12となるように色々作ってみましょう!

例えば、

<div class="col-xs-7 bootstrap-text">
    <p>col-7</p>
</div>
<div class="col-xs-1 bootstrap-text">
    <p>1</p>
</div>
<div class="col-xs-3 bootstrap-text">
    <p>col-3</p>
</div>
<div class="col-xs-1 bootstrap-text">
    <p>1</p>
</div>

とすれば、

f:id:ibuquicallig:20180404222257p:plain

の下のような感じにできます。

ちょっと発展になるかもしれませんが、<div>を入れ子にして使うことも出来ます。

f:id:ibuquicallig:20180404222257p:plain

これの上のような感じに横幅10の要素の中に、横幅3の要素を4つ配置しています。つまり、各要素内でもさらに12分割して 配置させることができます。

コードとしては以下のようになります。

<div class="col-xs-10 bootstrap-text">
    <div class="col-xs-3 bootstrap-ireko">
        <p>3</p>
    </div>
    <div class="col-xs-3 bootstrap-ireko">
        <p>3</p>
    </div>
    <div class="col-xs-3 bootstrap-ireko">
        <p>3</p>
    </div>
    <div class="col-xs-3 bootstrap-ireko">
        <p>3</p>
    </div>
</div>

以上で基本的な使い方は終了です。

最後に

大昔にタグを使っていちからHTMLページを作ったりしていましたが、今やこんなに簡単にスマホにもPCでも いいカンジの配置を行ってくれるようなフレームワークが登場しています!

まだまだ実際に使うのにおいて知る必要の有る知識はあります(xs以外の基準、push, pullなど)が、 それはまたおいおい必要になった時に紹介していきます!

なにせわたしも知識ゼロの段階から作ったので、どんな人でも興味とやる気さえあれば絶対できるでしょう(´ε` )

次の記事

(2018/10/06追記) つぎの記事からいよいよサイトを作成。。。としたいのですが、自分の作った環境がかなり煩雑 & Linux上でのファイルIN/OUTやSQLサーバーを建ててそこと連携というようなことが盛りだくさんな状態であり、かなり記事化するのが困難な字状態です。。。

かつPHPの開発用のパソコンが虫の息ということでメインのWindows機に移行しようとしたのですがLinux <-> Windows間の差異(主にパスの区切り文字)を吸収しきれなく、環境構築も完了していない状態となっています。。。(なにか問題発生時には直ソースをvimで修正するというかなり怪しい運用です)

ですので、以降の記事ではそんな中でも使えそうなモジュール単位で記事にしていこうと思います!

例えばRSS配信しているサイトの最新記事を10行分表示するページLinux上のシェルスクリプトを実行するなんかです。

Raspberry Piで自宅内のWindows機を起動させる (Wake-on-LAN)

079A9452.jpg

Wake-on-LANとは

電源がオフライン状態或いはスリープ・休止状態のPCに対して特定のパケットを 送信することによって受け取ったPCの電源をオンラインにするという機能。

電源がオフラインの状態でもマザーボード(NICかな?)には通電しており、 実は入力待ち状態になっているそうなのでこのようなことができるそうです。

パケットを送信すると書きましたが、対象のPCのMACアドレスを含んだ パケットをブロードキャストしているので厳密には対象のPCだけに 情報を送信しているわけではないです。

家庭でのLAN環境で例えるならば、(無線LAN)ルーターから有線接続されている 全PCに対して対象のPCのMACアドレスを含んだパケットを送信、対象のPCはもちろん自分の MACアドレスを知っているのでそれを契機に起動。それ以外のPCは不明なMACアドレス を含んだパケットが送られてきたので無視、といった感じでしょうか?(´ω`)

多分無線LANで接続しているPCは無理なのかもしれません。。。




Raspberry Piであれば同一LAN内で常時起動していて(消費電力がほぼゼロ)、SSH接続できるので、 マジックパケットを送りつけるのに最適では無いのでしょうか?

今回は遠隔で起動後にteamviewerでリモートデスクトップ操作を行うために行いました。teamviewerのソフトでも マジックパケットを送信して起動させることができるようですが、うまくいかなかったためこのような方法をとりました。

Windows機の設定

Wake On LANを有効にする(OS)

デバイスマネージャ > ネットワークアダプタを拡げてデバイスを右クリック。 私の場合(MB: Asrock H97 Pro4)はIntel(R) ethernet Connection (2) ...という感じの名前でした。

電源管理のタブを開いてWake on LANという部分の、
- Wake on Magic Packet - 電源オフ状態からの Wake on Magic Packet

の2つにチェックを入れる。これでOS上での設定は完了です

次の項目でMACアドレスも確認しておきます。

MACアドレスを調べる

Windows上で

ネットワークと共有センター > アクティブなネットワークの表示 > 接続の横にあるリンク(?)をクリックします。 有線接続の場合はローカル エリア接続と表示されているはずです。

開いたポップアップで詳細をクリック。物理アドレスがMACアドレスとなります。 (正直、この方法結構操作多くてめんどくさいです。。。(笑))

ルーターで

BUFFALOのルーターであればルーターの設定画面から簡単に確認できます。

デフォルトであればhttp://192.168.11.1にブラウザでアクセスすれば表示されます。

ログインしてデバイスコントロールをクリック。対象のPCをクリックするとMACアドレスが表示されます。

Wake On LANを有効にする(BIOS)

BIOS側でWake-on-LANが無効化されている場合があります。BIOSは起動方法や 設定画面が色々種類があるので一概にコレ!とは説明できませんが、

BIOS設定画面の起動方法は電源投入後、F2かDeleteキー連打で大体のPCは行けるそうです。
(参考:https://pctrouble.net/boot/bios_setup.html)

BIOS設定画面に入ると、Raspberry Piでraspi-configを実行したときのような画面が表示されると思います。 操作方法も大体同じです!

起動後、ネットワーク(Network)あるいは電源(Power (Management))あたりの設定の中に、 Enable wake-on-LAN的な項目があるのでそれを有効化して、保存して終了すれば完了です。

Raspberry Piの設定

etherwakeをインストール

マジックパケットを送信するためにインストールします。 他にもwakeonlanでもいいのかもしれないです。 etherwakeを選んだ理由は「debian wake on lan」で検索して一番上にいたから程度です(笑)

$ apt-cache search wake on lan
between - game about consciousness and isolation
crossroads - open source load balance and fail over utility for TCP based services
emacs-goodies-el - Miscellaneous add-ons for Emacs
etherwake - tool to send magic Wake-on-LAN packets
fusioninventory-for-glpi - FusionInventory Server embedded as a plugin into GLPI
gwakeonlan - wakes up your machines using Wake on LAN
shutdown-at-night - System to shut down clients at night, and wake them in the morning
wakeonlan - Sends 'magic packets' to wake-on-LAN enabled ethernet adapters
$ sudo apt-get update
$ sudo apt-get install etherwake
...
$ which etherwake
/usr/sbin/etherwake
$ etherwake -u でマニュアル表示

マジックパケットを送る

ではRaspberry PiからWindowsを起動してみましょう。

$ sudo etherwake [MACアドレス]

(例)
$ sudo etherwake 00:00:5E:00:53:00

で起動できます。コマンドを実行後環境によるかもしれないですが数ミリ秒後に起動されます(笑) こう、なんか数秒モタモタするのかなと思ったら一瞬すぎて驚きました(゚∀゚)

最後に

コレで消費電力がほぼ0円のRaspberry Piから巨大なフルタワーマシンを起動させることができるようになりました!

出先からwake-on-lanで起動させて、Teamviewerなんかでリモート操作ということができるので、 実家に帰ったときなんかでも自分の家にあるハイパワーなマシンを動かせますね!

もしくはWindows起動時に実行するタスクなどを指定しておけば、任意のタイミングで(寝る前とか)実行させることが出来ますね。




起動ができるのであれば再起動やシャットダウンもできるようにしたいのだがなかなか難しい... teamviewerなんかで直接GUIで電源の操作はできるのだが...(笑)

Raspberry Piと書いていますがもちろんLinux機であれば同じことが出来ます。

Raspberry Piでテキストを音声化する (Open JTalk)

f:id:ibuquicallig:20180109175221j:plain

こんばんは、たねやつです。

今回はOpen JTalkというソフトを利用して、Raspberry Pi上でテキストから音声ファイルを 作成する方法について書きます。

Youtubeやニコニコ動画でよくあるゆっくり実況であったり、 もやもやさまぁ~ずのナレーションの声(ショウ君というらしいです(笑))と同じような合成音声です。

初音ミクなんかもおんなじようなジャンルになるのですかね?(゚∀゚)

Open JTalkはフリーのソフトウェアなので無料で使用可能です。 あとあと音響モデルというものも必要になってくるのですがコチラもココで紹介している分は(投稿時点で) すべて無料となっています。

こんな感じの発話音声を作成できるようにします。

open_jtalkのインストール

以下のコマンドでインストール。

$ sudo apt-get update
$ sudo apt-get install open-jtalk

コレでopen_jtalkコマンド自体は使えるようにはなるのですがさらに辞書ファイルと音響モデルが必要にあります。

入手すべき辞書ファイル・音響モデルファイルはopen-jtalkをapt-getでインストールした際の 推奨パッケージ(Suggested Package)に表示されています。

Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following additional packages will be installed:
  libhtsengine1
Suggested packages:
  open-jtalk-mecab-naist-jdic hts-voice-nitech-jp-atr503-m001
The following NEW packages will be installed:
  libhtsengine1 open-jtalk
0 upgraded, 2 newly installed, 0 to remove and 7 not upgraded.
Need to get 187 kB of archives.
After this operation, 542 kB of additional disk space will be used.
Do you want to continue? [Y/n]

open-jtalk-mecab-naist-jdic hts-voice-nitech-jp-atr503-m001が表示されているので、

$ sudo apt-get install open-jtalk-mecab-naist-jdic hts-voice-nitech-jp-atr503-m001

でインストールします。

コレで必要なファイルが揃いました。

音声を出力してみる

とりあえず出力できているか確認するには以下のコマンドをコピペで実行してください。 オプションで辞書ファイルなどを指定する必要がありかなり長くなってしまいます...

あとあとシェルスクリプトにまとめます。

echo "これはテストです" | open_jtalk -m /usr/share/hts-voice/nitech-jp-atr503-m001/nitech_jp_atr503_m001.htsvoice -x /var/lib/mecab/dic/open-jtalk/naist-jdic -ow ./open_jtalk_tmp.wav

な、長い...(笑) コンフィグファイルとかもないので実行するたびに辞書ファイルや音響モデルを指定する必要がありますorz

そしてコレを実行しただけでは音声ファイルが作成されるだけで、再生はしてくれません。現在のディレクトリにopen_jtalk_tmp.wav というファイルが生成されているはずです。

コレをsudo aplay open_jtalk_tmp.wavでRaspberry Pi上で再生できます。(USBスピーカーなど必要です。)

WindowsからでもsambaやFTP経由で共有すれば確認可能ですね。

このままだとかなり低い男の人の声で発話されているはずです!

声質を変えてみる

オプションで変更する

オプションを指定することで声の高さや速さなどを変更できます。

オプションについてはこのページが参考になりました。

echo "声の高さを上げました。" | open_jtalk -fm 7 -m /usr/share/hts-voice/nitech-jp-atr503-m001/nitech_jp_atr503_m001.htsvoice -x /var/lib/mecab/dic/open-jtalk/naist-jdic -ow ./open_jtalk_tmp.wav

たとえば-fm [数値]を指定すると声の高さを変更できます。 デフォルトが0で、7ぐらいまで上げると如実に変わります。

しかし、男の人の声というのはどうしても抜け出せません(笑)

以下の音響モデルを変更して、女性の声にしてみましょう!

音響モデルを変更する

私が使用している音響モデルはtohoku-f01-neutralというものです。 いくつか試してみて一番自然かな?と感じたので採用しました。

Github上で公開されているので、Cloneなりzipなりでゲットできます(゚∀゚)

東北大学の研究室で開発(?)された音響モデルのようです。

$ cd /usr/share/hts-voice/
$ sudo git clone https://github.com/icn-lab/htsvoice-tohoku-f01.git
...

もともとの/usr/share/hts-voice/ディレクトリにcloneします。

/usr/share/内には一般的に、 いろいろなユーザーで使う(可能性のある)、個人的でないファイルを保管します。

それでは先程のopen_jtalkコマンドでしていた音響モデルを変更してみましょう。

echo "声の高さを上げました。" | open_jtalk -m /usr/share/hts-voice/htsvoice-tohoku-f01/tohoku-f01-neutral.htsvoice -x /var/lib/mecab/dic/open-jtalk/naist-jdic -ow ./open_jtalk_tmp.wav

女性の声に変わりました!若干高音部分がデジタルなビリビリした感じになりますが、だいぶ聞き取りやすいかと思います。

そして冒頭に上げた動画での音声とほぼ同じとなりました。

シェルで処理をまとめる

上の処理(音声ファイルの作成 〜 発話)を一つのシェルスクリプトにまとめます。 長いのでオプションごとに区切りを入れます。

発話だけ実行

#!/bin/sh

#引数のチェック
if [ $# -ne 1 ]; then
  echo "invalid argument.";
  exit 1;
fi

#一時ファイルを保存するディレクトリ
TMPDIR=./tmp
TMPFILE=${TMPDIR}/tmp.wav

echo "$1" | open_jtalk \
-m /usr/share/hts-voice/htsvoice-tohoku-f01/tohoku-f01-neutral.htsvoice \
-x /var/lib/mecab/dic/open-jtalk/naist-jdic \
-r 1.1 \
-ow $TMPFILE

#再生
sudo aplay --quiet ${TMPFILE}

#一時ファイルを削除
rm ${TMPFILE}

exit 0;

ファイル名はechoとしました。(標準のechoコマンドとかぶっていますね..(笑))

以下の処理を追加しています

  • 引数が渡されない場合 or 2つ以上渡された場合に処理を中止する。
  • 保存先ディレクトリを変数に代入(後々変更しやすいように)。
  • 発話後に作成したファイルを削除する。

実行権限を付与、一時フォルダを作成し、以下のように発話する文章を指定します。

$ chmod 755 ./echo
$ mkdir ./tmp
$ ./echo "発話する文章をここに入力します。"

発話に使った音声ファイルを残す

音声ファイルを動画中や他の場所で使用するときのために削除しないためのスクリプトです。

ファイル名はecho_saveとでもしました。

#!/bin/sh

#引数のチェック
if [ $# -ne 1 ]; then
  echo "invalid argument."
  exit 1;
fi

#一時ファイル
DIR=./tmp
FILE=${DIR}/${1}.wav

#ファイル生成
echo "$1" | open_jtalk \
  -m /usr/share/open_jtalk_voice/tohoku-f01-neutral.htsvoice \
  -x /var/lib/mecab/dic/open-jtalk/naist-jdic \
  -r 1.1 \
  -ow ${FILE} && \

#再生
sudo aplay --quiet ${FILE}

while :
do
  #プロンプト
  read -p "save? [Y/n/a(play again)]: " RES

  #分岐
  case ${RES} in
    [nN]* )
      echo "did not save the file.";
      rm ${FILE};
      break;;
    [aA]* )
      sudo aplay --quiet ${FILE};
      continue;;
    * )
      echo "saved.";
      break;;
  esac
done

exit 0;

長々となってしまった... もっとコンパクトにスマートにまとめられれば,,,

./echo_save "発話"を実行後、音声が発話されプロンプトが表示されます。

yを入力するか、そのままエンターを押すとファイルを削除せずに残します。

nを入力するとファイルを削除します。

aを入力するともう一度音声を再生します。それからもう一度プロンプトを表示します。

何回か確認して取捨選択するために作成しました。

現在時刻を発話する

最後に少しだけ。現在時刻を発話するスクリプト。

#!/bin/bash

HOUR=`date +%H`
MINUTE=`date +%M`

STR=現在の時刻は、${HOUR}${MINUTE}分です。

./echo ${STR}

以上でRaspberry Pi上でテキストを音声化する方法とスクリプトでした。

参考

全体的な内容 https://qiita.com/lutecia16v/items/8d220885082e40ace252

open_jtalkコマンドのオプション https://kledgeb.blogspot.jp/2014/05/ubuntu-open-jtalk-2-openjtalk.html

Raspberry PiでWEBアプリケーションを作る (4 - PHPの導入)

f:id:ibuquicallig:20180109175221j:plain

今回の記事ではPHPのインストールと動作確認、ちょっとしたコーディングを行います。

PHPでサーバー側の処理を記述して、ApacheでWEBページを配信という形になります。

前の記事

PHPをインストールする

インストールする前に...

Apache2がRaspberry Pi上にインストールされている必要があります。

事前にインストールされていないと、PHPのインストール時にモジュールの配備・有効化を 自動的にやってくれない(気がします)。

インストール

以下のコマンドでインストール。Raspberry PiなんかでLinuxを使い始めて思うことは、Windowsよりも こういったものの導入が簡単かなーと思います。逆に設定ファイルどこ行った!?とかなることが往々にしてあるますが。。。

# apt-get update
# apt-get install php

2018年現段階でインストールされるPHPは7系。特に拘りも無いので最新のを使いましょう。 インストール後にwhich phpなどでパスが通っているかも確認しましょう。

コレでRaspberry PiがPHPという言語を理解できるようになりました! 現実でもコレぐらいラクに覚えられたら...orz(笑)

ちょっとコーディングしてみる

PHP(プログラミング)の基本

変数などの基本的なPHPのお約束についてはQiitaなどを参考にしていただければわかりやすいかと思います。

phpinfo()

サーバーの情報を表示するためのページを作成しましょう。主にデバッグや環境の確認に使用されます。

Apacheのドキュメントルート(デフォルトは/var/www/html/)にて、ファイルを作成します。

いままでtest.htmlなどのファイルを作成していた場所と同じです。

とりあえず今回のファイル名(アクセスするページのURLにもなります)はserver_info.phpにしておきます。 拡張子は今までの.htmlではなく.phpになっている点に注意してください!

テキストエディタを開いて以下の内容を記述してください。

<?php phpinfo(); ?>

保存してから、http://[RaspiのIPアドレス]/server_info.phpにアクセスしてみてください。 以下のような画面になると思います。

f:id:ibuquicallig:20180117055311p:plain

このようなヘッダーイメージの下にSystemやらBuild Dateやらの情報が表示されます。

このページにアクセスしたときにPHP標準のphpinfo()というファンクションが実行されて、 サーバー(Raspi)とクライアント(アクセスしているPCやブラウザ等)の情報を拾い上げてHTML形式で出力してくれます。

OSのバージョンなどを表示するなかなか強力な情報なので他人のアクセスできる環境下ではこのページを表示できるようにしないべきです。 なので表示できることが確認できたらrm server_info.phpで削除しましょう。

ブラウザによって表示する内容を変更する

PHPの持っている変数を使って、アクセスしたブラウザによって表示する内容を変更するページを作成します。

$_SERVERという連想配列の変数に 現在稼働しているサーバーの情報やアクセスしたブラウザ(クライアント)の情報が格納されています。

先程のinfo()で表示される内容にもこの変数の中の値が表示されていました。

googleのトップページでも、PHPでは無いと思いますがユーザーエージェントから判断してPC用のページか スマホ用のページを表示するかを決めているようです。

一度$_SERVERの値をすべて表示してみましょう。ファイル名をphp_test.phpとして以下の内容で作成してください。

<?php
var_dump($_SERVER);

本当は<?php ?>と最後にクエスチョンとブラケットでくくる必要がありますが、PHPの処理のみの場合省略できます。

HTMLと一緒に書く場合はしっかりとタグを閉じてあげないとエラーとなります。

var_dump()は、引数に指定した変数の内容を見やすくHTML形式で出力してくれるfunctionです。 多重な配列もいい感じに表示してくれるので変数の内容がどうなっているかを確認するデバッグ作業に役立ちます。

http://192.168.xxx.xxx/php_test.phpにアクセスしてみるとズラズラと何か表示されていると思います。

ページ上で右クリックしてソースの表示をクリックしてみてください。

その中のHTTP_USER_ARGENTという入れ物にページにアクセスしたクライアントの情報が入っています。

例えばNEXUS 7のSleipnirでアクセスした場合

Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/63.0.3239.111 Safari/537.36"

と表示されます。どうやらChrome(Chromium?)らしいです。Windows版SleipnirではSleipnirという情報が付加されるのですが。。。(笑)

この情報利用して処理を分岐させます。grep_match("検索したい文字列", "検索される文字列")というfunctionで$_SERVER["HTTP_USER_AGENT"]正規表現検索します。

このfunctionは検索したい文字列が1回でもヒットすればtrueを返します。ですので、

<?php
if (grep_match("/chrome/i", $_SERVER["HTTP_USER_AGENT"])) {
    //Chromeの場合の処理
    echo "あなたのブラウザはChromeです。";
} else {
    //Chrome以外の場合の処理
}

とすればChrome(Sleipnir)でアクセスした場合のみの処理を実装可能です。

いろいろ弄って最終的にはこのような感じにしました。

<?php
    $user_agent = filter_input(INPUT_SERVER, "HTTP_USER_AGENT");

    if (preg_match("/chrome/i", $user_agent)) {
            $browser = "ChromeかSleipnir";
    } else if (preg_match("/firefox/i", $user_agent)) {
            $browser = "Firefox";
    } else if (preg_match("/safari/i", $user_agent)) {
            $browser = "Safari";
    } else {
            $browser = "不明";
    }
?>

<html>
    <p>あなたのブラウザは、<b><?=$browser?></b>です。<p>
</html>

これでアクセスしてみると、ブラウザに応じて表示される内容が変わります。 Chrome, Firefox, Safari以外のブラウザからアクセスすると不明と表示されます。

上記の内容をSwitch文に書き換えてみるのも練習になるかもしれません!(・∀・)

解説

$user_agent = filter_input(INPUT_SERVER, "HTTP_USER_AGENT");

$user_agentという変数に$_SERVER["HTTP_USER_AGENT"]の値を代入します。 $_SERVERの値を直接参照するのはよろしくない(IDEによっては警告が表示される)ようなので、 フィルター(ゲッター)を通して取得します。

if (preg_match("/chrome/i", $user_agent))

先程紹介した正規表現で検索するfunctionでIF分岐しています。正規表現の内容を指定するときにはデリミタと言うものを 指定する必要があります。つけないとエラーとなり怒られます。chromeの前後についているスラッシュがそれです。

検索したい文字列の最後についているi大文字小文字関係なく検索するための修飾子です。 指定しない場合”chrome”で検索したときに"Chrome"という文字列があってもヒットしなくなります。

<p>あなたのブラウザは、<b><?=$browser?></b>です。<p>

HTMLのコードの中にPHPのコードが埋め込まれています。 <?= ?><?php echo ?>と同じ意味になります。単純に文字数を減らすことができます。 echoは後ろに指定した文字列を出力する機能です。つまり<?php echo $browser ?>ということになります。

それをHTMLの<p>タグの中に忍び込ませることによって表示内容の一部を環境などに応じて動的に変更することができます。

これらのPHPの処理はすべてサーバー側(Raspberry Pi)で行われ、クライアント側(ブラウザ)はただのHTMLファイルを 受け取っているだけです。なのでjavascriptやFlash(最近めっきり聞かなくなりましたね...笑)のようなクライアント側で 有効化/無効化の切り替えられるものと異なり、必ず(サーバー側で)実行されます。WEBページのソースなどを見ても PHPに関する処理は一切表示されません。 (インデントがおかしかったりするなど痕跡が残る場合もあります。)

一方でjavascriptのようにボタンを押したらある処理が走る、といったことを素のPHPではページの更新無しでは実装できないです。

以上で今回は終了です。

最後に

PHPの特徴であるHTML(別言語)の中に処理を埋め込むことができるというのが新鮮でとても面白いです(´ω`) ここに書いた内容を踏まえればあとは割とすんなりと、IRKitと連携して電気をつけるといった処理は 簡単にできると思いますのでお楽しみに。

しかし、肝心要のIRKitは生産終了状態なようです。(笑)

後継機のNature Remoは価格がくそ高いので、なんだかなああという感じです。

eRemote miniという製品が価格もIRKitと同じぐらいで使えそうです。

正式なサポートはありませんが、Nodejsのライブラリでできそうなのですが、実際に試していません。

次の記事

Bootstrapを使ったサイトの作成です。そろそろちゃんとしたページを作り始めましょう!

Raspberry PiでWEBアプリケーションを作る (3 - HTMLのheaderなど)

f:id:ibuquicallig:20180109175221j:plain

前の記事

一連の記事の最終的な目標に関しても下記の記事をご覧ください。

できること

HTMLのヘッダーなどを設定してよりWEBページらしくする。

ヘッダーを設定してもブラウザから見える内容というのは大きく変わらないですが、 スマートフォンからアクセスした場合の設定や、Google検索に引っかからなくなるような設定を行えます。

Headerとbody

これまで作成したHTMLファイルは、ヘッダー情報は全く記述しておらずいわゆる<body>タグ内に記載するような 内容ばかりについて作成してきました。

基本的なHTMLの文書のテンプレートは以下の様になっていると思います。(NetBeansのHTMLテンプレート)

<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  
        <div>...</div>
 
  </body>
</html>

<html>というタグで囲まれた中に、<header>タグと<body>タグの塊があります。

<!DOCTYPE html>はHTML5の文章ですよ、とブラウザ側に伝えるための宣言です。特に意識しなくて大丈夫です。

HTML文書の定義や内容がどんなものであるかをブラウザに伝えます。 例えば、<title>TODO supply a title</title>という内容は、ページのタイトルをブラウザに伝えています。 FireFoxのタブに表示されるタイトルはココで設定できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">は、ページの横幅をブラウザに伝えています。 「横幅はデバイスのサイズに合わせて、初期のページの拡大倍率は1.0倍(拡大しない)」といった感じです。

body

ブラウザに表示したい中身です。今まで作成したもの(<button>...など)はこの中に書き込むべきです。

こんな感じがいいのかも?

私が使用しているheaderのテンプレートはこのような感じです。

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
   <title>ヘッダーの説明</title>
   <meta name="description" content="ヘッダーの内容について説明しています。">
   <!-- noindex / nofollow -->
   <meta name="robots" content="noindex">
   <meta name="robots" content="nofollow">
   <!-- Font Awesome -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <!-- Bootstrap -->
   <link rel="stylesheet" type="text/css" href="/hoge/huga/bootstrap.css">
   <!-- self-defined css file -->
   <link rel="stylesheet" type="text/css" href="/hoge/style.css">
   <!-- Google Fonts (https://fonts.google.com) -->
   <link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet"> 
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

IEで表示することを想定していないので、
<meta http-equiv="X-UA-Compatible" content="IE=edge">
という内容は記載していません。

IE使いたい場合かつ想定した通りのページが表示されない場合はこのタグを<head>タグの直後に書いてください。

以下、ざっくりとした説明です。より詳しく知りたい場合は他のサイトで調べたほうがいいかもしれません。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

内容がHTMLで、文字コードはUTF-8です。という情報。

<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">

先程説明した内容と同じですが、user-scalable=0という内容を追加することによって、 スマートフォンでページを表示した際にページの拡大を行えないようにすることが出来ます。

後々CSSで画面にピッタリフィットする(レスポンシブ)ように作成するので拡大する必要はありません。 操作ミスなどで画面が拡大されてしまうほうが私にはストレスです...(笑)

<title>ヘッダーの説明</title>
<meta name="description" content="ヘッダーの内容について説明しています。">

<title>タグは先ほど説明しましたが、<description>タグはページの概要を伝えます。

「検索結果の順位をあげたい」という場合には大事なのかもしれませんが、 今回は特にそのような目的にはWEBページを作成していないので、テキトーにページの概要を1文ほどで入れておきましょう。

<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">

これを設定することによって、検索エンジンで検索してもヒットしなくなります。 ページをひと目につかないようにしたい時やミラーサイトを設置する時に有効だそうです。

<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="./hoge/huga/bootstrap.css">
<!-- self-defined css file -->
<link rel="stylesheet" type="text/css" href="./hoge/style.css">
<!-- Google Fonts (https://fonts.google.com) -->
<link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

外部のCSSや自分で作成したCSSを読み込んでいます。少しそれぞれの機能を深堀しましょう。

Font Awesome

文章内に文字感覚でアイコンを埋め込むことのできるサービスです。現在はVersion 5が出ているようですが、 4系統と大きくアイコンや設定が異なるようでまだ使ったことはありません。

header内で読み込んでおけば、

<i class="fa fa-home" aria-hidden="true"></i> <i class="fa fa-photo" aria-hidden="true"></i>

と書けば、のような アイコンを文章中で使うことが出来ます。

コードのhomeやphotoの部分を、ココから探せるアイコン名に変えると任意のアイコンを表示できます。

自前でサーバー内にアイコンファイルを置かなくても良い(ディスク使用量・(サーバー側視点での)トラフィックの削減)ので、 はてなブログの中でも使いやすくて便利です。

このブログのヘッダーイメージの下のナビゲーションバーにも使っています!

Bootstrap

ページ内のコンテンツの配置をきれいにできたり、アイコンやボタンをスタイリッシュにしてくれるCSSを提供しているサービスです。

Bootstrapのグリッドレイアウトというものが強力すぎて、私はもしかしたらこれなしではWEBページを作れないのかもしれません...(笑) 詳細は必要になった時に書きます。

こちらも外部のcssファイルを読み込んで使用するという手段もありますが、一部margin, paddingで修正したい部分があるのでローカルに 保存したものを使用しています。

このCSSファイルを読み込んだ後に自分で作成したCSSファイルを読み込むようにしないと、上手く表示できないことがあります。

Google Fonts / Material icons


https://material.io/icons/

Googleの提供しているフォントとマテリアルデザインなアイコンを利用できるようになります。 残念ながら日本語のフォントはありません....

Material IconsはFont Awesomeとほぼ同じようなサービスですね。

この2つに関してもHeaderに一行加えるだけで、サーバーにフォントファイルやアイコンファイルを保存せずに 使用出来ます。

今までのHTMLを書き直す

test.html

<!DOCTYPE html>
<html>
  <head>
    <title>this is a test.</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
        <p>test.html</p>
  </body>
</html>

button.html

<!DOCTYPE html>
<html>
  <head>
    <title>button</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style>
            .button{
                display: inline-block;
                padding: 0.5em 1em;
                text-decoration: none;
                background: #668ad8;/*ボタン色*/
                color: #FFF;
                border-bottom: solid 4px #627295;
                border-radius: 3px;
            }
            .button:active {/*ボタンを押したとき*/
                -ms-transform: translateY(4px);
                -webkit-transform: translateY(4px);
                transform: translateY(4px);/*下に動く*/
                border-bottom: none;/*線を消す*/
            }
        </style>
   </head>
  <body>
        <a class="button" href="./test.html">jump to test.html</a>
  </body>
</html>

<style>タグは<header>内に入れておきましょう。

正常に表示できたことを確認したら完了です。Font Awesomeで何か表示してみたり、Google Fontsで指定した フォントに変えてみたりするのも勉強になると思います・ω・

次の記事

PHPについて解説します。

参考

https://saruwakakun.com/html-css/reference/buttons

Raspberry PiでWEBアプリケーションを作る (2 - ボタンを作成する)

f:id:ibuquicallig:20180109175221j:plain

前の記事

一連の記事の最終的な目標に関しても上記の記事をご覧ください。 Apache(WEBサーバー)の導入と作成したテストページの表示までです。

Raspberry Pi 3 MODEL B 【RS正規流通品】

Raspberry Pi 3 MODEL B 【RS正規流通品】

今回の目標

  • HTMLでボタンを表示させる。
  • ボタンを押した時に別のページに移動する。
  • javascriptでボタンを押した際に処理を実行する。(過去記事の紹介)

最後のjavascriptに関しては今後とくに使う予定はありません。

今回もがんばりましょう!(´ω`)

ボタンの作成。

前回作成したtest.htmlと同じディレクトリ(/var/www/html/)にbutton.htmlというファイルを作成します。

その中に以下のように記述してください。

<button onclick="location.href='./test.html'">jump to test.html</button>
<input type="button" onclick="location.href='./test.html'" value="jump to test.html"></input>
<a href="./test.html">jump to test.html</a>

保存して、http://192.168.xxx.xxx/button.htmlにアクセスしてみてください。192.168.xxx.xxxは Raspberry PiのIPアドレスです。IPアドレスの表示方法は前回の記事を参考にしてください。

ボタン2つとリンク1つが表示されたでしょうか? HTMLは明確なエラーをパッと表示してくれないのでミスがわかりにくいような気がします...(笑)

表示されない、なんか崩れて表示される(ボタンの枠内に文字が表示されないなど)という場合は、 クォーテーションやカッコの数が間違っていないかを確認してください。

一つボタンで無いものも混じっていますが、あとでCSSを追加してあげるとボタンのようになります。 <button>, <input>, <a>で作成する3種類が主かと思います。 以降の記事では<a>で作成したリンクにCSSでボタンっぽい装飾を追加する方法をとります。

説明

<button onclick="location.href='./test.html'">jump to test.html</button>

<button>タグで作成しています。というか勘で作ってみたら動きました(笑) <buttonのあとに続くものが属性というもので、タグに対しての設定のようなものです。

onclick="location.href='./test.html'"はonclickという設定に対して"..."という値を設定するという感じですね。 onclickボタンをクリックした時という意味です。

onclickの値に、さらに属性と値(location.href='./test.html')がありますが「./test.htmlに移動する」という感じです。

ファイルの場所を指し示す場合に頭に./とつけると「現在のディレクトリ」という意味になります。なにも書かずにtest.html としても同じ結果になります。ですのでtest.htmlとbutton.htmlは同じディレクトリにいる必要があります。

<input type="button" onclick="location.href='./test.html'" value="jump to test.html"></input>

1つめとほぼ同じです。inputタグの属性にtype=""とあり、そこでボタンタイプを選択しています。 type="text"とすると文字入力ができるテキストボックスになります。

<a href="./test.html">jump to test.html</a>

率直にいってこれはボタンではありません! WEBページで使われるアンカーリンクです。→ https://google.com hrefに対してリンク先を設定します。hrefHyper REFerenceの略だそう。 HTMLのHもHyperなのですが、なぜこんなにハイパー好きなのでしょう(笑)

CSSでアンカーリンクをボタンっぽくする

ボタンにクラスを設定する。

先程の<a>タグの属性にclassを追加します。classを追加することによって、CSSが修飾すべき対象として認識することができるようになります。

とりあえず、

<a class="button" href="./test.html">jump to test.html</a>

として、buttonというクラスを設定します。

CSSを書き足す。

CSSを設定する際には、

  • HTML内に追記する。
  • 別ファイルにCSSだけを書いて、HTMLファイル内で読み込むようにする。

の2パターンがありますが、今回は前者の方法で進めます。 本格的にWEBページを作り始める時はCSSの記述を別ファイルにまとめます。

CSS定義をHTMLファイル内に追加するには<style>タグをbutton.htmlの文頭に追加します。

<style>
    
</style>

<a class="button" href="./test.html">jump to test.html</a>

<style>タグの中にCSSを書いていきます。

ボタンのCSSに関してはコチラのサイトが大変参考になります。

使いたいボタンのCSSをコピペして貼り付けます。一番上のボタンの場合、button.htmlの中身は

<style>
    .button {
        display: inline-block;
        padding: 0.5em 1em;
        text-decoration: none;
        background: #668ad8;/*ボタン色*/
        color: #FFF;
        border-bottom: solid 4px #627295;
        border-radius: 3px;
    }
    
    .button:active {/*ボタンを押したとき*/
        -ms-transform: translateY(4px);
        -webkit-transform: translateY(4px);
        transform: translateY(4px);/*下に動く*/
        border-bottom: none;/*線を消す*/
    }
</style>

<a class="button" href="./test.html">jump to test.html</a>

といった感じになります。.の後ろが対象のクラス名になるので、square_btnから buttonに変更しないと適応されません。

ボタンが希望のデザインになったでしょうか?そしてページの遷移はちゃんとできるでしょうか?

出来ている場合は今回の記事の主だった内容は完了です。

Javascriptで背景色を変更するボタンを作る

過去に作成した記事を紹介しておきます。

次の記事

HTML文書として備えるべき内容を追加する。

参考

https://yume.hacca.jp/koiki/form/button-link.htm

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ページとして表示されました!(´∀`) フォントは若干異なるかもしれません!

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

次の記事

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

関連記事