こんにちは。この記事ではisaaxアドベントカレンダーの14日目として、isaaxを使ってRaspberry Piベースのデジタルサイネージの開発環境の作成を試してみます。実現方法はたくさんありますが、Electronを使ってアプリケーションを構築します。

記事に記載されているPC上の作業はmacOSを前提としています。他のOSを使っている場合はそれぞれにあった方法に置き換えてください。また、isaaxに関する詳細な説明は割愛しますので、まだisaaxを触ったことのない方は先に下のチュートリアルを読むことをおすすめします。

SDカードの用意

Raspberry Pi 3 model B+を使いました。試していませんが、どのモデルでも問題ないと思います。SDカードにはRaspbian Stretch with desktop 2018-11-13を書き込みました。

書き込みを終えたら、マウントしたSDカードのbootディレクトリ以下で少し作業をします。

シェルにログインして作業するためにSSHを有効化しておきます。名前はsshで、空ファイルを作ります。

$ cd /Volumes/boot
$ touch ssh

次に、wpa_supplicant.confというファイル名で下記のようにWiFiの認証情報を書き込んでおきます。このファイルはブート時に正しいパスにコピーされ、自動的にWiFiが有効になります。後ほどSSHで接続するため、PCと同じWiFiを設定しましょう。

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=JP

network={
    ssid="your_SSID"
    psk="your_PSK"
    key_mgmt=WPA-PSK
}

ディスプレイ

ディスプレイはKeDei 3.5インチ LCDディスプレイを使いました。タッチディスプレイとして使うにはドライバのインストールが必要ですが、映像を出力するだけであればHDMI接続するだけで問題なく動作しました。

もちろん、映像さえ出力できればディスプレイはなにを使っても構いません。

OSの設定

Raspberry Piを起動したら、SSHログインするためにRaspberry PiのIPアドレスを調べます

IPアドレスを特定したら、ログインします。初期パスワードはraspberryです。

$ ssh pi@<調べたIPアドレス>

raspi-configコマンドでOSの設定作業を行います。

raspberrypi:$ sudo raspi-config

さしあたりパスワードを更新しておきましょう。コマンド実行後、「1. Change User Password」から新しいパスワードを入力します。文字を入力しても何も表示されませんが、実際には入力されているので問題ありません。

ホストネームや言語設定など、その他の項目も必要に応じて設定してください。

Raspberry Piを起動した際にディスプレイを接続していると、初期設定用のウィンドウが表示されるはずです。もちろんここでSSHやWiFiといった設定を行っても構いませんが、今回はすでに必要な設定を終えているので、「Cancel」をクリックしてウィンドウを閉じます。

パッケージインストール

使用するソフトウェアをRaspberry Piにインストールします。はじめにパッケージマネージャを更新します。

raspberrypi:$ sudo apt update && sudo apt upgrade

Gitのインストール。サンプルのアプリケーションをクローンするために使います。

raspberrypi:$ sudo apt install git

Node.jsのインストール。Electronを使ったアプリケーションを構築するためにインストールします。

raspberrypi:$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
raspberrypi:$ sudo apt install nodejs

デスクトップの設定

デジタルサイネージとして使うため、デスクトップがスリープに移行して画面が見えなくなってしまわないように、設定を変更します。

raspberrypi:$ mkdir -p ~/.config/lxsession/LXDE-pi

作成したディレクトリ以下に下記の内容でautostartファイルを作成します。

@xset s off
@xset -dpms
@xset s noblank

リブートして表示を確認します。ホーム画面が表示されず、黒い画面のみが表示されるはずです。

アプリケーション

すでに開発環境が整えられたszwacz/electron-boilerplateを使います。ReactやVueといったフレームワークですぐに開発できるように整備された雛形など、調べると多くのボイラープレートが見つかります。

raspberrypi:$ git clone https://github.com/szwacz/electron-boilerplate.git
raspberrypi:$ cd electron-boilerplate/
raspberrypi:$ npm install

執筆時点でインストールしたElectronのバージョンには、セキュリティ上の問題があるようなので、バージョンを更新します。

raspberrypi:$ npm install --save-dev electron@3.0.12

それでは、アプリを起動します。DISPLAY=:0の部分は環境変数を設定しています。SSHログインした状態で、この環境変数を設定せずにアプリを立ち上げようとすると、表示先のディスプレイが見つけられずにエラーとなります。

raspberrypi:$ DISPLAY=:0 npm run start

このままだとデジタルサイネージっぽくないのでsrc/background.jsにいくつか変更を加えます。

Kioskモードにする

36行目付近のcreateWindow()を変更し、Kioskモードを有効化します。これによってアプリがフルスクリーンで立ち上がります。

36   const mainWindow = createWindow("main", {
37       kiosk: true
38   });

メニューを消す

初期状態では左上にメニューが表示されているので、必要ない場合は表示されないように設定します。setApplicationMenu()をコメントアウトし、下記40行目の内容を追加します。

34   // setApplicationMenu();
35
36   const mainWindow = createWindow("main", {
37       kiosk: true
38   });
39
40   mainWindow.setMenu(null)
41

デベロッパーコンソールを立ち上げない

開発時はデバッグのためにデベロッパーコンソールを立ち上げますが、ここでは表示を確認するために一度消しておきます。

50   // if (env.name === "development") {
51   //     mainWindow.openDevTools();
52   // }

もう一度DISPLAY=:0 npm run startを実行して表示を確認します。大分それらしくなったのではないでしょうか。

isaax化

isaax.json

isaaxアプリケーションとしてデバイスにデプロイするために、プロジェクトのルートディレクトリにisaax.jsonを作成します。

{
  "name": "signage-sample",
  "description": "Digital Signage Sample",
  "scripts": {
     "start": "npm install && npm run start"
  }
}

startプロパティに指定された値、npm run startがRaspberry Pi上で実行される起動コマンドです。開発用のデバイスであればこのコマンドで問題ありませんが、本番で使う場合にはその環境に合わせたビルドを行うコマンドをnpmに作成して使うとよいでしょう。

ここでは作業を簡単にするためにnpm installをisaax.jsonに含めてしまっていますが、実際にはisaaxのスクリプトサービスに切り分けることをおすすめします。

リポジトリへの反映

Raspberry Piに配信するアプリケーションはGitリポジトリを使って管理します。そこで、ソースコード全体をGitHubのリポジトリにプッシュします。

まずはGitHubにログインして新しいリポジトリを作成します。.gitignoreREADME.mdは作成しません。

下記コマンドを実行してソースコードをアップロードします。git remote addコマンドに指定しているGitリポジトリへのURLは、自分の作成したリポジトリのものに置き換えてください。

raspberrypi:$ git config --local user.email "your_email"
raspberrypi:$ git config --local user.name "your_name"
raspberrypi:$ git add .
raspberrypi:$ git commit -m "Set up for isaax"
raspberrypi:$ git remote add isaax https://your_user/respository_name
raspberrypi:$ git push isaax master

ここではHTTPSを使ってアップロードするため、GitHubへの認証情報の入力が求められます。

isaaxプロジェクトの作成

isaax.ioにログインし、プロジェクトを作成します。前節で作ったリポジトリを指定して保存します。

ユーザー変数の設定

Raspberry Piをプロジェクトに登録する前に、ユーザー変数(アプリケーションに読み込まれる環境変数)を定義しておきます。表示をテストする際に使ったDISPLAYに加え、XAUTHORITY変数も新たにに追加します。

DISPLAYには:0XAUTHORITYには/home/pi/.Xauthorityをそれぞれ指定してください。2つ目の環境変数は、piユーザー以外がディスプレイを使うアプリを実行する際に必要となります。

デバイスの登録

プロジェクトの準備が整ったので、インストールスクリプトをコピーしてRaspberry Pi上で実行しましょう。初回は依存関係のインストールを行うため、立ち上がるまでに少し時間がかかります。

手元の環境では1分後くらいにアプリが起動しました。しばらく待っても起動しない場合は、isaaxのダッシュボードからデバイスのログを確認してみましょう。

isaaxに登録することで、再起動をしてもアプリケーションが自動的に立ち上がるようになります。

開発を始める

これで、isaaxを使ってアプリケーションを開発する最低限の準備が整いました。Electronはクロスプラットフォームなフレームワークなので、自分のPCで開発と動作確認をすべて行った後に、git pushで変更をRaspberry Piに反映することができます。

まとめ

本記事では、Raspberry Piにログインせずに、好きなエディタやツールを使ってPC上でデバイスアプリケーションを開発する方法について説明しました。今回変更を加えたサンプルコードの全体は下記リンクにあげましたので、参考にしてください。

参考記事


Leave a Reply

Your email address will not be published. Required fields are marked *