Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@hoshinom78

Raspberry Pi 4 Model B をデジタルサイネージ風に使う

Last updated at Posted at 2020-03-04

#はじめに

Raspberry Pi3B+をキオスクモードで使う (2019年11月版)に触発されて、
自分なりに環境構築した手順を残しておきます。

#準備物

  • Windows パソコン

  • LABISTS Raspberry Pi 4 Model B スターターキット

  • OS：Raspbian Buster with desktop (2020-02-13-raspbian-buster.img)

  • ディスプレイ：BENQ G2400W LCD Monitor（フルHD：1920×1080ピクセル）

  • microSD カード(32GB)

  • USB レシーバ付きのワイヤレスマウス

  • USB レシーバ付きのワイヤレスキーボード
    Bluetooth で直接 Raspberry Pi に接続せずに、
    USB レシーバ付きを選んだ理由は、
    ペアリングが不要になるからです。

  • SD カードリーダー/ライター
    Raspberry Pi でバックアップするのに使います。

  • 先の細い（電子工作用の）ラジオペンチ
    Raspberry Pi をケースに組み付けると、
    素手では microSD カードを抜けませんでした。

#組立
購入したスターターキットには、冷却ファンが付属していたのですが、
最初は、どこから電源をとれば良いのか分かりませんでした。

Raspberry Pi 4 Model B でケースファンを取り付ける
を見て、どこに接続すれば良いのか分かりました。

#OSイメージをダウンロード
https://www.raspberrypi.org/downloads/raspbian/
より、OSイメージをダウンロード

購入した Raspberry Pi のスターターキットには、
NOOBSシステムプリインストールされたSDカードがついていましたが、
NOOBSだとインストールに時間がかかるため、
OSイメージをダウンロードして、インストールすることにしました。

ブラウザさえ動けば良い、という考えで、
全部入りの「Raspbian Buster with desktop and recommended software」でなく、
「Raspbian Buster with desktop」を選びました。

#OSイメージを解凍して、SDカードに書き込み
https://www.raspberrypi.org/documentation/installation/installing-images/README.md
にある通り、
7Zip で解凍して、balenaEtcher で書き込み

#SDカードをRaspberryPiに刺して電源投入
最初、ディスプレイに何も表示されなかったのですが、
HDMIケーブルを刺す場所が間違っていました。

Raspberry Pi 4の注意点
を見て、
USB Type-C の電源に近い方に刺しなおす事で、画面が表示されました。

#OSインストール
インストール手順は、
Raspberry Pi 4へOSをインストールする(Raspbian編)
を参考にしました。

#SSH と VNC を有効化
Windows や iPad 等から操作できるように、
SSH と VNC を有効化します。

Raspberry Pi の設定

イチゴマークのアプリケーションメニューから、
設定 > Raspberry Pi の設定 > インターフェイス タブ
SSH と VNC のラジオボックスで 有効 を選択

メニューバー の LXTerminal を立ち上げて、
ifconfig で Raspberry Pi の IPアドレスを確認しておきます。

Windows 側の準備

Windows SSH クライアント

Tera Term を使っています。

Host に 上記 ifconfig で取得した IPアドレスを入力
User に pi 、
Passphrase に インストール時に設定したパスワードを入力

これで、Raspberry Pi ログインできるので、
後は Windows からも操作できます。

Windows VNC クライアント

VNC Viewer を使っています。

ここからダウウンロードしました｡
https://www.realvnc.com/en/connect/download/viewer/windows/

Enter a VNC Server address or search のテキストボックスに、
上記 ifconfig で取得した IPアドレスを入力

Username に pi 、
Password に インストール時に設定したパスワードを入力

iPad の準備

iPad SSH クライアント

PiHelper をインストールしたものの、
iPad のソフトウェアキーボードで操作するのはキツイので、
ほとんど使っていません。

iPad VNC クライアント

VNC Viewer をインストールして、
画面表示までは行きましたが、
イマイチ操作方法が分かりません。

Windows から操作して、その画面を iPad でも表示する、
という使い方はアリだと思いますが。

解像度設定

フルHD：1920×1080ピクセルのディスプレイを使っているのに、
1920×1080に設定できずに、悪戦苦闘しました。
hdmi_group と hdmi_mode を色々試してみたのですが、うまく行かなかったので割愛。

まずは、現在の解像度を確認するために、
tvservice -s

tvservice -s
state 0x6 [DVI CUSTOM RGB full 4:3], 1024x768 @ 60.00Hz, progressive

1024x768 ですね。

/boot/config.txt を編集します。

sudo cp /boot/config.txt /boot/config.txt.org
sudo vi /boot/config.txt

魔法の呪文
hdmi_ignore_edid=0xa5000080
を追加して、再起動

diff /boot/config.txt /boot/config.txt.org
24,28d23
<
< hdmi_ignore_edid=0xa5000080
<
<
<
sudo reboot

もう一度
tvservice -s
で解像度確認

tvservice -s
state 0xa [HDMI CUSTOM RGB lim 16:9], 1920x1080 @ 60.00Hz, progressive

フルHDと認識してくれました。

マウスカーソル拡大

デジタルサイネージ風に使うには、
デフォルトのマウスカーソルは小さすぎるので、大きくします。

Enlarging Pointer Size for Visually Impaired User
の通り、
デスクトップで右クリック > デスクトップの設定 > システム タブ
Mouse Cursor を「Small」から「Large」に変更して、再起動

ディスプレイのスリープを止める

デフォルトだと、しばらく操作しないでいると、画面が消えてしまいます。
デジタルサイネージ風に使うには、まずいので、スリープを止めます。

RaspberryPi2をデジタルサイネージ化し社内情報表示に利用
の「X Windowスリープ防止」の通りに設定

lightdm.confの編集

xserver-command=X
↓
xserver-command=X -s 0 -dpms

sudo cp /etc/lightdm/lightdm.conf /etc/lightdm/lightdm.conf.org
sudo vi /etc/lightdm/lightdm.conf
diff /etc/lightdm/lightdm.conf /etc/lightdm/lightdm.conf.org
95c95
< xserver-command=X -s 0 -dpms
---
> #xserver-command=X
sudo reboot

ラズベリーパイ上の html ファイルを表示

ラズベリーパイ上の html ファイルを、
デジタルサイネージ風に表示したいので、
その html ファイルをデプロイする、Web サーバをインストールします。

Web サーバのインストール

ここでは、apache をインストールします。

sudo apt-get install apache2
パッケージリストを読み込んでいます... 完了
・・・中略・・・
アップグレード: 0 個、新規インストール: 9 個、削除: 0 個、保留: 32 個。
1,992 kB のアーカイブを取得する必要があります。
この操作後に追加で 6,229 kB のディスク容量が消費されます。
続行しますか? [Y/n] y
・・・後略・・・

ブラウザに「http://localhost/」を入力して、
apache がインストールされたことを確認します。

index.html 差し替え

/var/www/html/index.html を apache の物から、
デジタルサイネージ風に表示したい html ファイルに差し替えます。

差し替え前のバックアップして、
デスクトップ上に置いた html ファイルに差し替え

sudo cp /var/www/html/index.html /var/www/html/index.html.org
sudo cp /home/pi/Desktop/index.html /var/www/html/index.html

ブラウザに「http://localhost/」を入力して、
差し替えた画面が表示されることを確認します。

chronium 自動起動

Raspberry Pi3B+をキオスクモードで使う (2019年11月版)
にならって、
ブラウザを自動起動するために/etc/systemd/system/chromium-autorun.serviceファイルを新しく作ります。

/etc/systemd/system/chromium-autorun.service
[Unit]
Description=Chromium Autorun

[Service]
Environment=DISPLAY=:0.0
Environment=XAUTHORITY=/home/pi/.Xauthority
ExecStartPre=/home/pi/pre-autorun.sh
ExecStart=/usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mode --app=http://localhost/
Restart=on-abort
User=pi
Group=pi

[Install]
WantedBy=multi-user.target

トラブル時の対応のしやすさのために、
わざと「--kiosk Kioskモードで起動」を外してあります。
ラズベリーパイ起動してブラウザ自動起動した後は、手動で「F11」押して下さい。

2020/3/8追記 キオスクモードでも、キーボードのWindowsキーでアプリケーションメニューを出せることが分かったので、キオスクモードを付けます。

/etc/systemd/system/chromium-autorun.service
[Unit]
Description=Chromium Autorun

[Service]
Environment=DISPLAY=:0.0
Environment=XAUTHORITY=/home/pi/.Xauthority
ExecStartPre=/home/pi/pre-autorun.sh
###ExecStart=/usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mode --app=http://localhost/
ExecStart=/usr/bin/chromium-browser --noerrdialogs --disable-infobars --disable-background-mode --kiosk --app=http://localhost/
Restart=on-abort
User=pi
Group=pi

[Install]
WantedBy=multi-user.target

X起動とか、Wi-Fi通信ができるようになるまで、ブラウザの自動起動を少し待つ

/home/pi/pre-autorun.sh
#!/bin/bash
sleep 15

実行権限付与

chmod 755 /home/pi/pre-autorun.sh

自動起動の設定

sudo systemctl enable chromium-autorun.service
sudo systemctl start chromium-autorun.service

自動アップデート 2020/3/10 追記

RaspberryPiでupdate/upgradeを自動化する。
の通り、以下の設定を行いました。

sudo apt-get update 
sudo apt-get install unattended-upgrades
sudo dpkg-reconfigure -plow unattended-upgrades

sudo cp -a /etc/apt/apt.conf.d/50unattended-upgrades /etc/apt/apt.conf.d/50unattended-upgrades.org
sudo vi /etc/apt/apt.conf.d/50unattended-upgrades

$ diff /etc/apt/apt.conf.d/50unattended-upgrades /etc/apt/apt.conf.d/50unattended-upgrades.org

112c112
< Unattended-Upgrade::Automatic-Reboot "true";
---
> //Unattended-Upgrade::Automatic-Reboot "false";
121c121
< Unattended-Upgrade::Automatic-Reboot-Time "02:00";
---
> //Unattended-Upgrade::Automatic-Reboot-Time "02:00";

unattended-upgradesはインストールしただけでは動かない
自動アップデートのログは、 /var/log/unattended-upgrades/ 以下に出力されました。

バックアップ

【STEP-24】設定済RaspbianをSD Card CopierでmicroSDカードにバックアップ
の通り、「SD Card Copier」で完全バックアップ

別のラズベリーパイ4があれば、バックアップしたSDカードを刺して、
同じ設定のマシンを複製できる。
別のラズベリーパイ4が無いならば、自身のSDカードを入れ替えて、動作確認する。

ブラウザの日本語表記 2020/3/12 追記

  • ブラウザ上の漢字が中国語らしきフォントで表示されてしまいました。

コマンドでRaspbianに日本語フォントのインストールする方法
にならい、日本語フォントをインストールしてみたら、日本語表記になりました。

GUI画面は日本語で表記されていたので、
元から日本語フォントは入っていたはずなのですが、なんででしょうか？

Windows と表示を合わせる 2020/3/13 追記

上記「ブラウザの日本語表記」で漢字が中国語？に、なってしまうのは直りました。
でも Windows 版 Chrome 専用に設計された画面だと、表示が崩れてしまいます。

どの日本語フォントを使えば、一番 Windows に近づけられるでしょうか？

  • TakaoGothic は、ゼロに斜線が入っていました。プログラマー的には大文字のオーと区別がしやすくて良いのですが、一般の人だと二度見されますよね。

  • **「IPA モナー ゴシック」**フォントが、試した中で、一番「ＭＳ ゴシック」に近かったです。

なぜか、「src: url」でWebサーバーからダウンロードする方式がうまく行かないので、
ラズベリーパイにフォントをインストールして「src: local」で指定しました。

index.html
@font-face {
	font-family: 'ほげほげ';
	font-weight: bold;
	/*
	*  ラズベリーパイで漢字が中国語になったり、
	*  文字の横幅が違ったりするのを防ぐ
	src: local('ＭＳ ゴシック');
	*/
	src: local('ＭＳ ゴシック')
		/* 'IPA モナー ゴシック' */
		,local('IPAMonaGothic')
		/*
		* なぜか Web フォントでは、うまくいかない。
		,url('./fonts/ipag-mona.ttf') format('truetype')
		*/
		;
}

* {
	font-family: 'ほげほげ';
}

課題

「Chromium を更新できません」 2020/3/10 追記

ブラウザ起動時に「Chromium を更新できません」とポップアップが出てしまいます。
apt-getでは更新できないし、
ポップアップの「Chromium を再インストール」ボタンを押しても、アップデートの方法が分かりません。

終わりに

最初に環境構築する際は、右往左往しましたが、
ネット上の皆様の情報を元に解決することが出来ました。

9
14
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?