Zenn
📺

ディスプレイにウェブページを表示させるだけの仕組みをRaspberry Piでつくる

2024/02/10に公開
Raspberry Pi
tech

はじめに

ディスプレイに情報を表示したいことがあると思います。この記事ではディスプレイにウェブサイトを表示するための仕組みをRaspberry Piで作り方をご紹介します。

必要なもの

  • ディスプレイ (HDMI対応)
  • Raspberry Pi
  • マイクロSDカードとカードリーダー
  • HDMIケーブル(Raspberry Pi 4以上ではミニHDMIに対応している必要があります。)

Raspberry Piのインストール

まずSDカードにRaspberry Pi OSをインストールします。まずRaspberry Piの公式サイトからRaspberry Pi Imagerをダウンロードします。
SDカードをお手元のPCのSDカードリーダーに挿入して起動します。

Deviceはお手元のRaspberry Pi、Operating SystemはRaspberry Pi OS、StorageはSDカードを指定します。(誤って指定しないように注意！)

Nextを押すと設定をカスタマイズする画面が出てきます。hostnameはsshでログインする際のホスト名です。他のものと重複しないようにします。

ここでEnable SSHを設定しておくとお手元のPCから遠隔操作できます。

書き込み中・・・しばらく待ちます。書き込んだら、Raspberry Piに挿入して電源ケーブルを挿します。

Raspberry Piにログイン

Macならターミナル、WindowsであればTeraTeamなどからなどから、先程指定したホスト名でログインします。仮にユーザー名をadmin、ホスト名がhostname.locaであれば以下のようになります。

ssh -ladmin hostname.local

パスワードを入力すればログインできます。

Chromiumの自動設定

適当な名前のスクリプトを作成します。

nano ~/chromium-launcher.sh

テキストエディタが起動するので以下を入力する。

/usr/bin/chromium-browser --noerrdialogs --kiosk --disable-infobars --no-first-run --start-maximized --enable-features=OverlayScrollbar --app=[表示したいURL]

ctrl + o で保存、ctrl + x でテキストエディタが終了します。

マウスカーソルが一定時間動いていなかったら非表示にするツールをインストールする。

sudo apt install unclutter

自動起動のスクリプトを設定と画面が省電力モードになるのを抑制します。

mkdir -p ~/.config/lxsession/LXDE-pi
cp /etc/xdg/lxsession/LXDE-pi/autostart ~/.config/lxsession/LXDE-pi/
nano ~/.config/lxsession/LXDE-pi/autostart

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
@xscreensaver -no-splash
bash /home/admin/chromium-launcher.sh

@xset s 0 0
@xset s noblank
@xset s noexpose
@xset dpms 0 0 0

@unclutter -idle 1 -root

bash /home/pi/chromium-launcher.shのadminの部分はユーザー名に書き換えます。

HDMIケーブルでディスプレイと接続し、再起動するとchromiumが起動してURLで指定したウェブサイトが表示されるはずです。

再起動するにはsudo rebootと入力します。

VNCの設定 (オプション)

VNC Viewerでリモートログインするための設定です。以下のコマンドで設定をします。

$ sudo sudo raspi-config

System options > Interface options > VNC を選択し、VNC Serverを有効にします。

Discussion