オフィスサイネージ用タブレットの導入 #3 ~ WebサイトPWA化

前々回の記事では、会社の工場エントランスにオフィスサイネージ用タブレットを設置したことについて、前回の記事では、 使用したタブレットそのものについて書きました。

今回は、タブレットに表示しているコンテンツとその表示方法についてです。
前々回の記事で説明したように、タブレットに表示させているコンテンツは、情報共有のために使用している当社社内portalサイトです。この社内portalサイトはWordPressで構築したものでインターネットのレンタルサーバーに保管されています。社員はそのサイトに各自のアカウントでログインして使用しますが、タブレットではタブレット用のアカウントでログインして表示させています。そのアカウントでログインすると、限定された内容が表示されるようにWordPressで設定しています。

前回の記事で「”アプリ設定”にて電源ON時の自動起動アプリを設定できる」、「PWAによってアプリ化した社内portalをインストール」と書きましたが、WordPressに限らずWebサイトをデジタルサイネージ用タブレットに表示させる場合には、このあたりがキモになります。

PWA(Progressive Web Apps)とは、Webサイトをスマートフォンのアプリのように表示させられる技術のことです。ユーザーにとって、WebサイトのPWA化によってその使用感はスマートフォンのアプリそのもの、違うのはアイコンをクリックするとアプリではなくWebサイトが立上がることと、そのインストール方法くらいです。ですので”Webサイトを表示させるアプリ”と言った方がわかりやすいかもしれません。表示されたWebサイトはアドレスバーやタブなどブラウザ特有のUIは表示されず、ブラウザの全画面表示の状態のように表示されます。
なお、対象のWebサイトをPWA化することのメリットは、通常のブラウザで見るよりも、読み込みが速く、キャッシュを利用しているのでインターネットに接続していなくてもサイトを表示できる、通知が届くことなどです。
さらに、PWA化のアプリはスマートフォン以外にPCでもインストールできます。PWA対応のWebサイトをGoogleChromeで表示すると、URLバーの右側にインストール用のアイコンが表示されますのでそこをクリック→インストールでインストールが実行され、Chromeアプリが作られます。

さて、今回の場合、コンテンツがWordPressのサイトでしたのでWordPressのプラグイン「Super Progressive Web Apps」を使って簡単にPWA化は実装できました。PWA化した社内portalサイトをGoogle Chromeで呼び出せば、”社内portalをインストールしますか”というメッセージが表示されるのでクリックしてインストールするだけでアプリの中に”社内portal”というアプリが追加されます。なお、今回インストールするタイミングは社内portalサイトへのログイン完了後に行いました。

実は、この kensatools.com のサイトもPWA対応済みですので、https://www.kensatools.com (QRコード⇒)をスマートホンのGoogle Chromeで表示していただければ、kensatoolsのアイコンとともに”アプリをインストールをしますか?”というメッセージが出ますので”インストール”をクリックしてもらえれば、アプリとしてインストールされます。一度試してみていただければと思います。

さて、アプリ化がうまくいけば、あとは、電源ONの時の自動起動アプリに設定すればタブレット側のコンテンツの準備は完了です。
これらすべての設定を完了すれば、タブレットの電源投入時は常にWebサイトである『社内portal』が自動的に起動して表示されます。インターネットに接続されていれば最新情報で、接続がなければキャッシュの情報を使って表示されます。
さらに、タブレットの画面のステータスバー表示(画面下部の操作アイコン、画面上部のステータスバー)をOFFに設定しておけば、トップ画面や設定画面への切り替えをできないようになります。

下記のリンク先で当社の事例が紹介されています。