15
Raspberry PiでAlexaスマートスクリーンを構築する方法

このチュートリアルでは、 Raspberry Pi 4にAlexa Smart Screen SDKをインストールし、Echo Showのオリジナルバージョンを「作成」します。このプロジェクトを「PiShow 」とニックネームで呼びます。このプロジェクトは、以前の記事「Raspberry PiでAlexaスピーカーを作る方法」で解説したAlexa Voice Service (AVS) SDKに加えて、Amazon Alexa Smart Screen SDKを使用することで実現できます。 

PiShowに関する注意事項 

  • PiShowはEcho Showの代替となることを意図したものではありません。Echo Showの多くの機能はこのバージョンにも含まれていますが、ネイティブビデオ再生機能など重要な機能は意図的にこのビルドから除外されています。
  • このスマートスクリーン版のAlexaPiには、音声ウェイクワードトリガー「Alexa」は含まれていません。ユーザーはAlexaに話しかける際に「A」キーを押します。
  • VNCが有効な状態ではPiShowを起動できません。Raspberry PiでVNCを無効にする必要があります。
  • 音楽- ユーザーはPiタッチスクリーンで音楽を一時停止できます。音楽機能はAlexaPiの記事で説明されているものと同じです。
  • PiShowではAlexaスキルが利用可能で、Alexaスキル内のビジュアル画面もPiShowで表示されます。さらに、Alexaスキルではタッチスクリーン機能も有効になっています。
  • タッチスクリーンをお使いの場合、Alexaが話している最中に画面をタップすると、Alexaは話を停止します。これはEcho Showでも同様の動作です。 

PiShow を構築する理由 

前回の記事では、AlexaPiプロジェクトのコンポーネントとEcho Dotのコスト差について説明しました。この記事では、PiShowのコンポーネントを購入するよりもEcho Showを購入する方が安価であることを明らかにします。 

Raspberry Piとタッチスクリーンをお持ちなら、週末に楽しめるSTEMプロジェクトになるかもしれません。音声技術の仕組みを実際に作ってみながら学ぶのも楽しいですよ。

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

必要なもの

  • Raspberry Pi 3B+ または Raspberry Pi 
  • 16GB(またはそれ以上)のmicroSDカード(Raspberry Piに最適なmicroSDカードを参照)とRaspberry Pi OSの新規インストール
  • 電源/キーボード/マウス/モニター/HDMIケーブル(Raspberry Pi用)
  • USBマイク
  • 3.5mmまたはUSBコネクタ付きスピーカー。3.5mmスピーカーでのみテストしましたが、USBでも動作するはずです。
  • HDMI モニター、7 インチ Raspberry Pi タッチスクリーン、または 3.5 インチまたは 5 インチ TFT スクリーン - このプロジェクトはタッチスクリーン機能で動作します。
  • オプション: ミニ ワイヤレス キーボード - インストール後にスクリプトを起動し、'A' キーを押し続けるのに便利です。

所要時間:このプロジェクトを完了するには最低3時間かかります。AVS Device SDKのmake installステップは、Raspberry Piのモデルとインターネット速度によって異なりますが、約2時間かかります。

前提条件:

このチュートリアルを開始する前に、前回の記事「Raspberry Pi を使用して Alexa スピーカーを構築する方法」で詳述されているように、プロジェクト全体を完了してください。

このチュートリアルの大部分はターミナルコマンドに基づいています。Raspberry Piのターミナルコマンドに慣れていない場合は、まず「 Raspberry Piユーザーが知っておくべき25以上のLinuxコマンド」を確認することを強くお勧めします。 

Tom's Hardware の最高のニュースと詳細なレビューをあなたの受信箱に直接お届けします。

PiShowのセットアップとインストール 

1.重要:前回の記事「Raspberry Pi を使用して Alexa スピーカーを構築する方法」で詳しく説明されているように、AVS のインストールを完了してください。

2. AlexaPiが現在実行中の場合は、Ctrl + Cを押してスクリプトを停止してください。スピーカー、マイク、電源は接続されたままです。

3. スクリーンを取り付ける:PiShowバージョンには7インチのRaspberry Piタッチスクリーンを追加しました。HDMIまたはGPIOピン経由で接続するサードパーティ製のタッチスクリーンも使用できます。Amazonでは23ドル程度で購入できます。タッチ非対応のスクリーンを使用した場合、これらの機能は利用できません。

背面図:

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

4.ターミナルを開きます。

5.まず、PiShowに必要なフォルダを作成し、ライブラリとアプリをインストールします。以下のコマンドを入力してください。

cd /home/pi mkdir sdk_folder cd sdk_folder mkdir sdk-build sdk-source third-party sdk-install db sudo apt-get -y install \
git gcc cmake build-essential libsqlite3-dev libcurl4-openssl-dev libfaad-dev \
libssl-dev libsoup2.4-dev libgcrypt20-dev libgstreamer-plugins-bad1.0-dev \ gstreamer1.0-plugins-good libasound2-dev doxygen pip install commentjson

Pi にはすでにcommentjsonがインストールされている可能性があります。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

6.次に、マイクのデータを録音するために PortAudio をインストールします。

cd third-party wget -c http://www.portaudio.com/archives/pa_stable_v190600_20161030.tgz tar zxf pa_stable_v190600_20161030.tgz cd portaudio ./configure --without-jack

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

7. PortAudioフォルダで「make」を実行します。このコマンドはRaspberry Pi 4で約1.5分かかりました。

make

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)
cd $HOME/sdk_folder/sdk-source git clone --single-branch --branch v1.21.0 git://github.com/alexa/avs-device-sdk.git cd $HOME/sdk_folder/sdk-build cmake $HOME/sdk_folder/sdk-source/avs-device-sdk \
-DGSTREAMER_MEDIA_PLAYER=ON \
-DPORTAUDIO=ON \
-DPORTAUDIO_LIB_PATH=$HOME/sdk_folder/third-party/portaudio/lib/.libs/libportaudio.a \
-DPORTAUDIO_INCLUDE_DIR=$HOME/sdk_folder/third-party/portaudio/include \
-DCMAKE_BUILD_TYPE=DEBUG \
-DCMAKE_INSTALL_PREFIX=$HOME/sdk_folder/sdk-install \
-DRAPIDJSON_MEM_OPTIMIZATION=OFF make install

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

make install が完了すると、画面にエラー メッセージが表示されなくなります。

9. AlexaPi プロジェクト (/home/pi/) から config.json ファイルをインストール フォルダーにコピーし、AlexaClientSDKConfig.json ファイルを生成します。

cp ~/config.json $HOME/sdk_folder/sdk-source/avs-device-sdk/tools/Install cd $HOME/sdk_folder/sdk-source/avs-device-sdk/tools/Install bash genConfig.sh config.json \
your-device-serial-number \
$HOME/sdk_folder/db \
$HOME/sdk_folder/sdk-source/avs-device-sdk \
$HOME/sdk_folder/sdk-build/Integration/AlexaClientSDKConfig.json \
-DSDK_CONFIG_MANUFACTURER_NAME="manufacturer name" \
-DSDK_CONFIG_DEVICE_DESCRIPTION="device description"

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

10.ファイル マネージャーを開き、/home/pi/sdk_folder/sdk-build/Integration/ フォルダーに移動します。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

11. AlexaClientSDKConfig.jsonを右クリックし、 「テキスト エディター」を選択してファイルを開いて編集します。

12.最初の括弧内に gstreamerMediaPlayer の情報を追加します。

"gstreamerMediaPlayer":{ "audioSink":"alsasink" },

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

13.ファイルを保存します。 

14. AlexaClientSDKConfig_backup.jsonとしてバックアップコピーを保存することもできます。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

15.テキスト エディターを閉じます。

16. /.asoundrc ファイルを作成または変更します。

cd sudo nano ~/.asoundrc

17.   ~/.asoundrcに次の行を追加します。 

pcm.!default { type asym playback.pcm { type plug slave.pcm "hw:0,0" } capture.pcm { type plug slave.pcm "hw:1,0" } }

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

18. Ctrl + X、Y、Enter を押して、~/.asoundrc ファイルを保存します。

19.これまでの進捗状況をテストします。

cd $HOME/sdk_folder/sdk-build PA_ALSA_PLUGHW=1 ./SampleApp/src/SampleApp ./Integration/AlexaClientSDKConfig.json DEBUG9

20. AlexaPi プロジェクトで完了した認証と同様に、ターミナルで上にスクロールしてコードを見つけ、http://amazon.com/us/codeに移動してコードを入力します。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

21. 「続行」を押すと、ブラウザに成功メッセージが表示されます。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

22.ターミナルに戻り、上にスクロールして「承認済み」メッセージを探します。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

23. このAlexaPiは、オリジナルのAlexaPiプロジェクトとは少し動作が異なり、Alexaに話しかける前に「t」と入力してEnterキーを押す必要があります。さあ、試してみてください。「t」と入力してEnterキーを押し、「今何時ですか?」と聞いてみてください。

Alexaが時刻を表示したら、AVS Device SDKサンプルアプリのインストールが正常に完了しています。おめでとうございます!

24. Ctrl + C キーを押してサンプル アプリを停止します。

25. 次に、APLコアライブラリをダウンロードして「make」します。このシーケンスの最後のコマンド「make」は、完了までに約15分かかりました。  

cd $HOME/sdk_folder git clone --single-branch --branch v1.4.1 git://github.com/alexa/apl-core-library.git cd $HOME/sdk_folder/apl-core-library mkdir build cd build cmake .. make

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

26. Alexa Smart Screen SDKの依存関係、Websocket++、AISO、Node.jsをインストールする

cd $HOME/sdk_folder/third-party wget https://github.com/zaphoyd/websocketpp/archive/0.8.1.tar.gz -O websocketpp-0.8.1.tar.gz tar -xvzf websocketpp-0.8.1.tar.gz cd $HOME/sdk_folder/third-party sudo apt-get -y install libasio-dev --no-install-recommends cd $HOME/sdk_folder/third-party curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash - sudo apt-get install -y nodejs

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

27. Alexa Smart Screen SDKをダウンロードしてインストールします。最後のステップ「make」の完了には約25分かかりました。

cd $HOME/sdk_folder git clone git://github.com/alexa/alexa-smart-screen-sdk.git mkdir ss-build cd ss-build cmake -DCMAKE_PREFIX_PATH=$HOME/sdk_folder/sdk-install \ -DWEBSOCKETPP_INCLUDE_DIR=$HOME/sdk_folder/third-party/websocketpp-0.8.1 \ -DDISABLE_WEBSOCKET_SSL=ON \ -DGSTREAMER_MEDIA_PLAYER=ON \ -DCMAKE_BUILD_TYPE=DEBUG \ -DPORTAUDIO=ON -DPORTAUDIO_LIB_PATH=$HOME/sdk_folder/third-party/portaudio/lib/.libs/libportaudio.a \ -DPORTAUDIO_INCLUDE_DIR=$HOME/sdk_folder/third-party/portaudio/include/ \ -DAPL_CORE=ON \ -DAPLCORE_INCLUDE_DIR=$HOME/sdk_folder/apl-core-library/aplcore/include \ -DAPLCORE_LIB_DIR=$HOME/sdk_folder/apl-core-library/build/aplcore \
-DAPLCORE_RAPIDJSON_INCLUDE_DIR=$HOME/sdk_folder/apl-core-library/build/rapidjson-prefix/src/rapidjson/include \ -DYOGA_INCLUDE_DIR=$HOME/sdk_folder/apl-core-library/build/yoga-prefix/src/yoga \ -DYOGA_LIB_DIR=$HOME/sdk_folder/apl-core-library/build/lib \ ../alexa-smart-screen-sdk make

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

次に、PiShow アプリをテストします。(VNC を使用している場合は、アプリを起動するために VNC を停止して無効にする必要があります。) 

PiShowを実行する 

28.ファイルマネージャーを開き、次の場所に移動します: /home/pi/sdk_folder/ss-build/modules/GUI/index.html 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

29. Chromiumブラウザでindex.htmlをダブルクリックして開きます。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

30. ターミナルに戻り、次のコマンドを入力してPiShow を起動します。 

cd $HOME/sdk_folder/ss-build PA_ALSA_PLUGHW=1 ./modules/Alexa/SampleApp/src/SampleApp -C \ $HOME/sdk_folder/sdk-build/Integration/AlexaClientSDKConfig.json -C \ $HOME/sdk_folder/alexa-smart-screen-sdk/modules/GUI/config/SmartScreenSDKConfig.json -L INFO

31. 手順 22 と同様に、PiShow サンプル アプリを認証する必要がある場合があります。その場合は、 ターミナルで上にスクロールしてコードを見つけ、http://amazon.com/us/codeに移動してコードを入力します。 

32. Chromiumブラウザに戻ると、「Aキーを押したまま話してください」というメッセージが表示されます。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

33.試してみましょう!ちなみに、PiShow が動作するには、Chromium の index.html がアクティブウィンドウになっている必要があります。「天気を教えて」と言いながら「A」キーを押し続けてください。

おめでとうございます!PiShow が完成しました!

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

常に同じ手順で進めてください。/home/pi/sdk_folder/ss-build/modules/GUI/index.html をアクティブウィンドウとして、 Alexaに話しかけながら「A」キーを押し続けます。ウェイクワード「Alexa」を言う必要はありません。 

新しいPiShowで試すべきこと 

  • 「音楽を再生」 - タッチスクリーンを使用している場合は、画面上の一時停止ボタンをタップして音楽を一時停止できます。
  • 「ジョークを言ってください。」
  • 「Open Big Sky」 - 素晴らしいグラフィックを備えた天気アプリ。
  • 「地球はどんなふうに見えますか?」
  • 「宇宙ステーションの有効化」

PiShow を停止するには、ターミナルに戻ってCtrl + C を押します。 

Raspberry Pi Alexaスマートスクリーンプロジェクト

(画像提供:Tom's Hardware)

Pi の電源をオフにするか再起動した場合は、ターミナル コマンドを使用して PiShow を再起動できます。 

cd $HOME/sdk_folder/ss-build PA_ALSA_PLUGHW=1 ./modules/Alexa/SampleApp/src/SampleApp -C \ $HOME/sdk_folder/sdk-build/Integration/AlexaClientSDKConfig.json -C \ $HOME/sdk_folder/alexa-smart-screen-sdk/modules/GUI/config/SmartScreenSDKConfig.json -L INFO