【修正】Slackの特定のチャンネルに書き込まれたらYammerのグループに書き込みを行う【Zapierを使う】

前回公開した段階ではうまく行っていたと思っていたのですが、環境がAD配下になっていたので他の環境ではうまく行かなかったようです。そのため一番最後の部分を修正いたしました。

みんな大好きSlackなのですが、うちの会社でもいろいろ刺激があり、徐々に業務でも使用できる(許容される)ようになってきています。ただ、ちょっと問題があって、設定の不備なのかSlackで書き込みのあったときに通知のトーストが表示されないことが結構あります。(Slackのチャンネルの設定をみると通知される設定にはなっているのですが…)環境の問題かもですが、自分以外でもうまくいっていない人が多く、Slackで更新された情報を見忘れることも多くあります。また、実際には会社組織内はYammerの使用が推奨されていて、SlackなのとYammerなのかの区別が付かず苦労している状況でもあります。

使い方としては

  • 社外メンバーありプロジェクト…Slack
  • 社内メンバーのみプロジェクト…Yammer

という感じです。

できればSlackに一本化できればいいのですが、なかなかそういうことも難しい職場環境なので、ツールチェーンサービスを使用してSlackでの書き込みが行われたら、Yammer側へ通知を行うことを考えてみました。 IFTTTMicrosoft Flowを使えれば問題は解決しそうですが、これらのサービスではSlackの書き込みをトリガーとすることができません。そこで、他のツールチェーン機能をもつサービスを捜すことにしました。 いろいろ捜しているなかでSlackへの書き込みを監視するトリガーのあるものを見つけました!

そのサービスがZapierでした。

zapier.com

このエントリーではこのZapierを使用して「Slackの特定のチャンネルに書き込まれたらYammerのグループに書き込みを行う」という設定を行ってみようと思います。

Zapierの設定

Zapierへのログイン

以下のリンクに進みます。

zapier.com

f:id:ueponx:20181025190747p:plain

今回はGoogleアカウントを使用してログインするので【Sign Up With Google】ボタンをクリックします。新規でアカウント作成してもいいでしょう。

クリックすると、「どのGoogleアカウントを使用するか」と、「利用許諾」のダイアログが表示されます。複数のアカウントを持っている人は以下のように表示されますので、使用するアカウントを選択してください。

f:id:ueponx:20181025093338p:plain

サインインするとZapierのホーム画面に遷移します。

トリガーの設定

以下の画面がZapierのホーム画面になります。

f:id:ueponx:20181025093557p:plain

ここからZapierの処理をつくっていくことになります。Zapierでは処理のことをZapと呼びます。新規にZapを作成するには画面内の【Make a Zap!】ボタンをクリックします。(画面内に複数のボタンがありますが、どれを選択しても同じことができます。)

f:id:ueponx:20181025104647p:plain

【Make a Zap!】ボタンをクリックすると以下のような画面に遷移します。この画面ではIFTTTなどのトリガーやアクションにあたるものの検索ができます。

f:id:ueponx:20181025192514p:plain

今回はSlackのチャンネルに書き込まれたことを検知したいので、【検索ボックス】にSlackと入力して検索を行いますが、検索ボックスに入力しようとすると検索候補のプルダウンにSlackが表示されるのでそこから選択しても大丈夫です。

f:id:ueponx:20181025193009p:plain

Slackと入力すると絞り込みが行われます。

f:id:ueponx:20181025193415p:plain

絞り込まれた中から【Slackの表示】をクリックします。すると、Slackに関連したトリガーの一覧が表示されます。ここでwindowを少し大きくすると設定画面が見やすくなるのでお勧めです。 複数のトリガーが表示されますが、その中から【New Message Posted to Channel】のラジオボタンをクリックします。 f:id:ueponx:20181026071249p:plain

これが、特定のチャンネルに新しいメッセージが書き込まれた場合の処理のトリガーとなります。 ラジオボタンをクリックしたら、【Save + Continue】ボタンをクリックします。

f:id:ueponx:20181026071135p:plain

するとSlackアカウントとの紐づけ画面に遷移します。紐づけを行うので【Connect an Account】ボタンをクリックします。

f:id:ueponx:20181026071622p:plain

新しくダイアログウインドウがひらいて、Slackワークスペースの選択画面が表示されます。

f:id:ueponx:20181026073608p:plain

現在ログイン中のワークスペースが選択されているかもしれませんが、ここで新規に選択することも可能です。その場合は、ダイアログウインドウの右上にプルダウンが表示されているのでそれをクリックし【他のワークスペースにサインインする】をクリックします。

f:id:ueponx:20181026073752p:plain

すると別のチャンネルの選択とサインインを行うことができます。ワークスペースのURLを入力し、続いてパスワードの入力も行います。

f:id:ueponx:20181026073859p:plain

これで、ワークスペースのログインができたので、Zapから行える操作の権限の確認をしてください。

f:id:ueponx:20181026074243p:plain

権限に問題がなければ画面下にある【許可ボタン】をクリックします。

f:id:ueponx:20181026074538p:plain

これでZapierからSlackを使用することができるようになりました。 ここで【Text】ボタンをクリックするとSlackへ接続チェックをおこなうことができます。

f:id:ueponx:20181026075323p:plain

問題なければ、であれば【Test】ボタンはグリーンになり【Success!」に表示が変化します。 無事成功したら、【Sava + Continue】ボタンをクリックします。

f:id:ueponx:20181026075543p:plain

次の設定に進みます。この画面ではMessageがポストされたチャンネルの指定とBotとの区別を行います。

f:id:ueponx:20181026075954p:plain

設定部分を拡大すると以下のようになります。

f:id:ueponx:20181026080109p:plain

Channelの設定のプルダウンをクリックすると自動的にSlackの接続情報からチャンネル名を補完してくれます。今回は監視するChannelをgeneralに設定することにします。ここは適宜自分の設定に合わせてください。

f:id:ueponx:20181026080138p:plain

Channelの設定が終わった次はBotからのメッセージに反応するかという設定になりますが、基本的にはnoのままで問題ないと思います。ここまで来たら下にある【Continue】ボタンをクリックします。

f:id:ueponx:20181026080223p:plain

これでSlack上にある情報を取得できるようになります。(存在しない場合や新規の場合にはなにも取得されず、デフォルトの値が帰ってきます。)情報を取得する場合には【Pull in Samples】ボタンをクリックします。今回はGeneralのチャンネルが空の状態で作成しましたので以下のような感じで情報を取得してきます。

f:id:ueponx:20181026080638p:plain

取得した情報のプルダウンをみると

f:id:ueponx:20181026080919p:plain

パラメータなどがデフォルトの値(?)になっているようです。 今回パラメータで必要になるのはメッセージをポストしたユーザ名と実際のポストしたテキスト文になります。

f:id:ueponx:20181026081134p:plain

アクションの作成

これまでの操作でトリガー部分(Slackの書き込み検知)はできたので、続いては通知部分になります。通知を行いたいのはYammerとなりますが。Yammerを使うには管理者権限が必要なため、一般ユーザーの自分には手も足もでなくなってしまいます。

ただ、Yammerのグループには電子メール経由の書き込みも対応しています。それを使用して、Slackで新しいポストがされたらメールを送り、送り先をYammerグループのメールアドレスに設定をする方針へ変更していきます。

画面の左下側にある【+Add a Step】ボタンをクリックします。

f:id:ueponx:20181026081359p:plain

するとボックスが広がり【Action・Search】機能が画面に表示されるので、それをクリックします。(ボタンぽくないです。)

f:id:ueponx:20181027073339p:plain

すると、画面右側がActionを行うアプリケーションの検索画面になります。

f:id:ueponx:20181027073643p:plain

そこで検索ボックスにカーソルを合わせると候補となるサービスがプルダウンに現れます。その中にGmailがあればそれを選択します。なければ検索ボックスにGmailと入力して選択を行ってください。

f:id:ueponx:20181027074009p:plain

Gmailを選択するとGmail側のActionの設定を行います。その中から【Send Email】のラジオボタンを選択します。

f:id:ueponx:20181027074221p:plain

ラジオボタンを選択すると以下のようになります。選択したら画面下にある【Save + Continue】ボタンをクリックします。

f:id:ueponx:20181027074434p:plain

すると今度はGmailアカウントとの紐づけの画面に遷移するので【Connect an Account】ボタンをクリックします。

f:id:ueponx:20181027074754p:plain

クリックするとどのGoogleアカウントのGmailかを選択することになります。(複数候補がある場合には以下のような画面になります。)候補の中からユーザ名を選択します。

f:id:ueponx:20181027074939p:plain

アクセスの許諾関係のダイアログが表示されるので許可される操作を確認して、【許可】ボタンをクリックします。

f:id:ueponx:20181027075029p:plain

するとGmailZapierが接続されます。ここで【Test】ボタンをクリックすると接続のチェックが行われます。

f:id:ueponx:20181027075321p:plain

クリックして無事に接続ができると【Test】ボタンは【Success!】ボタンに変化します。問題なければ【Save + Continue】ボタンをクリックします。

f:id:ueponx:20181027075526p:plain

【Save + Continue】ボタンをクリックすると以下のような画面に遷移します。ここではGmailを送信するための設定を行います。主に右側の部分に値を入力するので、その部分の画面を拡大してみます。

f:id:ueponx:20181027075831p:plain

まずは宛先(To)になります。ここではまずは自分自身に対してメールを送る設定にします。(設定が成功したら、後ほどYammerと同一のAD配下のメールアドレスにToのアドレスを変更します)

f:id:ueponx:20181027080044p:plain

宛先アドレスを手入力します。

f:id:ueponx:20181027084327p:plain

続いてはタイトル(Subject)になります。この項目は必須項目なので必ず入力してください。入力ボックスの右側にプルダウンのボタンがあります。

f:id:ueponx:20181027080113p:plain

プルダウンを行うとSlackから得られたデータが表示されるので

f:id:ueponx:20181027080252p:plain

その中からどのChannelでメッセージがポストされたかを示すチャンネル名を参照して、

【チャンネル名】に投稿がありました

というメールタイトルをつけることにしました。

f:id:ueponx:20181027080325p:plain

本文(Body)部分も必須項目になります。

f:id:ueponx:20181027080210p:plain

こちらもプルボタンを使って、Slackからユーザー名(User Name)、メッセージ(Text)を参照して

【ユーザー名】さんが以下のように投稿しました。  【メッセージ】

とすることにします。

f:id:ueponx:20181027080456p:plain

ここまで設定できたら、画面をスクロールさせて、【Continue】ボタンをクリックします。

f:id:ueponx:20181027080705p:plain

すると、Gmailを使った送信のテスト画面に遷移します。この部分でこれまで入力していたパラメータが表示されるので、確認して問題がなければ

f:id:ueponx:20181027084545p:plain

画面をスクロールさせて【Send Test To Gmail】ボタンをクリックします。

f:id:ueponx:20181027084655p:plain

するとテストメールが送信され、以下のような画面に遷移します。 送信に成功しているようです。問題がなければ【Finish】ボタンをクリックします。

f:id:ueponx:20181027092258p:plain

ここで送信されたを確認します。メール送信されたことが確認できます。(内容はデフォルト値なので意味不明になりますが、問題ありません)

f:id:ueponx:20181027095114p:plain

最後にこのZapに名前をつけ、アクティブ状態にするかの設定を行います。

f:id:ueponx:20181027092507p:plain

今回は「fromSlacktoYammer」という名前にして、ZapをOFF(停止状態)からON(動作状態)にします。

f:id:ueponx:20181027092856p:plain

これで設定は一旦終了となります。 (注)この時点ではGmailでメールを送信する部分のみなので、最後にYammerのグループへ通知する必要があるので覚えておいてください。 では、Slackに書き込みを行います。先程設定したのは#Generalチャンネルだったのでそちらに書き込んでみましょう。

f:id:ueponx:20181027095701p:plain

Slackに書き込むと設定した宛先にメールが送信されます。

f:id:ueponx:20181027095010p:plain

無事に設定と書き込みの内容も反映されています。

Yammerとの連携にむけて

※ 以降修正が入ります

基本的にはYammerへの反映を行うのは管理者権限が必要になりメッセージのポストなどは行なえませんが、Yammerにはグループごとのメールアドレスが存在しているのでそのアドレスへメールを送ることで書き込みができるようになります。ただしここで注意するのはYammerと同じ組織つまりAD配下のユーザのみがそのアドレスにメール送信できる点です。 そのため、Zapierなどの外部サービスから組織のドメインへのログインがでいない環境下ではZapierだけでは要件を満たすことができない状況になります。

そこで今回はやむを得ないのでZapierとFlowを連携させました。手順としては以下の様になります。

  1. Slackの書き込みを検知して、Gmailで自分自身(Gmailのメールアドレス)へメールを送信(Zapierでの設定)
  2. Gmailのメールボックスを監視して、該当するSubjectのメールを受信したら、Office365 OutlookからYammerのグループの持つメールアドレスにメールを送信(MicrosoftFlowの設定)

これを図示すると以下のようになります。

f:id:ueponx:20181109135335p:plain

Microsoft Flow側の設定

これまでの設定で

  • Slackの書き込みを検知して、Gmailで自分自身(Gmailのメールアドレス)へメールを送信(Zapierでの設定)

の処理に関しては終了しているので、ここからはMicrosoft Flowの設定を行う以下の処理を設定していくことになります

  • Gmailのメールボックスを監視して、該当するSubjectのメールを受信したら、Office365 OutlookからYammerのグループの持つメールアドレスにメールを送信(MicrosoftFlowの設定)

Yammerグループのメールアドレスを調べる(事前作業)

まず、Flow側から送信するメールアドレスを調べることにします。Yammerの書き込み設定したいグループを表示させ、そこで画面の右端にあるAccess OPTIONSの項目の中から【Post to this group by email】をクリックします。すると…

f:id:ueponx:20181027104124j:plain

このグループに書き込むためのメールアドレスが表示されます。

f:id:ueponx:20181027104134j:plain

【重要】このメールアドレスをメモしておきます。このメールアドレスを先程のFlow送信先として設定することになります。

Microsoft Flowの設定

つづいて、```Microsoft Flowのページに移動します(ログインなど必要であればも行ってください)。左側のメニューから【マイフロー】を選択しクリックを行います。

f:id:ueponx:20181109122529j:plain

すると以下のように作成済みのフロー一覧が表示されます。

f:id:ueponx:20181109123105j:plain

画面上部の【新規】プルダウンを選択し、【一から作成】を選択します。

f:id:ueponx:20181109123258j:plain

以下のような画面になるかもしれませんが、出た場合にも【一から作成】ボタンをクリックします。

f:id:ueponx:20181109123436j:plain

すると以下のようなフローを作成する画面に遷移します。 今回は【Gmail】を使用してメールの検知をし、加えて【Office365 Outlook】を使用してメールの送信を行います。

f:id:ueponx:20181109124557j:plain

トリガーとなるGmailの受信検知を行います。

【コネクターとトリガーの検索する】入力ボックスにGmailと入力するか、すでに表示されている一覧にGmailを選択します。そしてトリガーの中から【新しいメールが届いたとき】を選択します。

f:id:ueponx:20181109124852j:plain

すると以下のような画面になります。

f:id:ueponx:20181109125017j:plain

設定のために詳細オプションを表示するのプルダウンをクリックして以下のように表示を変更させます。

f:id:ueponx:20181109125122j:plain

この設定で以下の部分を編集します。自分は矢印のように変更しました。

  • ラベル → INBOX(初期の受信ボックス)
  • 宛先 → Yammerと同じ組織下のOffice365Outlookのメールアドレス
  • 件名 → 【チャンネル名】にメッセージが投稿がありました

f:id:ueponx:20181109130357j:plain

設定が終わったら下の方にある【+ 新しいステップ】ボタンをクリックします。

トリガーの設定が終わったので、次はアクションを設定することになります。

【コネクタとアクションを検索する】入力ボックスでOffice365 Outlookを選択します。(入力でも、下のアイコンでもOK)

f:id:ueponx:20181109130714j:plain

するとアクションの一覧が表示されるので、その中から【メールの送信】をクリックして選択をします。

f:id:ueponx:20181109130910j:plain

すると以下のような画面に表示が変わります。

f:id:ueponx:20181109130944j:plain

設定項目の以下のものを設定します。自分は矢印のように変更しました。

  • 宛先 → 先程調べたYammerグループのメールアドレス
  • 件名 → 動的なコンテンツ内の【件名】
  • 本文 → 動的なコンテンツ内の【本文】

宛先の設定は手動の入力になりますが、件名と本文はトリガー側の情報を動的なコンテンツとして反映させることができます。入力ボックスの右下ぐらいに【動的なコンテンツの追加】というプルダウンがあるのでそれをクリックすればGUIから操作できます。

f:id:ueponx:20181109131512j:plain

Yammer側のテスト画面がキャプチャできていませんが、正常に動作していることは確認できています。

f:id:ueponx:20181109131525j:plain

f:id:ueponx:20181109131535j:plain

設定が完了すると以下のようになります。

f:id:ueponx:20181109131624j:plain

ここまできたら画面にある保存ボタンをクリックします。

f:id:ueponx:20181109131653j:plain

あとはこのフローを有効化すれば設定は完了となります。フローにもわかりやすい名前をつけておくと後々便利です。

おわりに

いちおうこれで目的を達成することができました。これまではIFTTTMicrosoft Flowの2つをメインに使用していましたが、Zapierも細かい処理(よりプログラミング的な印象)ができるのでいいのかなと思いました。

でもなんで業務側のPCでの通知設定うまくいかないんだろうか…自宅PCではこんなことはないのですが。

【追記】会社の環境辛すぎ

「Mashup名古屋ハンズオン&ミニハッカソン2018」を開催してきたよ

今年の名古屋はMashupAwardsのハッカソンではなく、もう少し参加者の裾野を広げようということで、ハンズオンを中心として、チームづくりの部分までを行い作品作りのスタートアップをしてもらうために「Mashup名古屋ハンズオン&ミニハッカソン2018」という形で開催しました!

この日は大型の台風が日本を縦断してしまい、本来は二日間のスケジュールでの開催のところ1日に短縮しての開催になってしまいました。

ブログの内容は以下のリンクから!

protopedia.net

足元の悪い中ハンズオンにご協力いただいたLINE様、会場のご協力をいただいた名古屋工業大学様ありがとうございました。 あと参加されたみなさんも作品作り頑張ってください!

f:id:ueponx:20181023073533j:plain

ReSpeaker Core v2を試してみる【後編】

前回のエントリからの引き続きになります。

https://statics3.seeedstudio.com/seeed/file/2018-03/bazaar764738_img_5997a.JPG

【参考】 uepon.hatenadiary.com

今回は実際にReSpeaker Core v2を使用して見る作業を行います。

音声デバイスのテスト

ReSpeaker Core v2のOSはLinuxDebianベース)なので音声はALSAまたはPulseAudio経由で使用することになります。

ALSAのデバイステスト

まずは、ALSA経由でのオーディオテストです。arecodeコマンドとaplayコマンドで録音・再生を行います。まずは、音声デバイスが認識されているかを 確認します。

まずは録音デバイスの確認は以下のコマンドで確認します。

respeaker@v2:~$ arecord -l
**** List of CAPTURE Hardware Devices ****
card 0: seeed8micvoicec [seeed-8mic-voicecard], device 0: 100b0000.i2s1-ac108-pcm0 ac108-pcm0-0 []
  Subdevices: 1/1
  Subdevice #0: subdevice #0

seeed-8mic-voicecardが見えていれば問題ありません。

続いては再生デバイスの確認は以下のコマンドで確認します。

respeaker@v2:~$ aplay -l
**** List of PLAYBACK Hardware Devices ****
card 0: seeed8micvoicec [seeed-8mic-voicecard], device 1: 100b0000.i2s1-rk3228-hifi rk3228-hifi-1 []
  Subdevices: 1/1
  Subdevice #0: subdevice #0

こちらもseeed-8mic-voicecardが見えていれば問題ありません。 正常に動作しているようです。というかこのように見えていなかったら再度インストールをし直してください。それでもだめな場合には故障も考えられます。

続いては録音と再生のテストにはいります。

まずは録音。以下のコマンドでステレオ(2ch)の録音をしてみます。(録音の停止はCtrl+Cです。いいタイミングで停止してください)

respeaker@v2:~$ arecord -Dhw:0,0 -f S16_LE -r 16000 -c 2 hello.wav
Recording WAVE 'hello.wav' : Signed 16 bit Little Endian, Rate 16000 Hz, Stereo
^CAborted by signal Interrupt...

respeaker@v2:~$ ls
bin  Desktop  hello.wav

無事に録音ができました。(ファイルが生成できただけですが) 次はこの音声ファイルを再生してみます。以下のコマンドで先程作成した録音ファイルを再生します。 音声の出力にはスピーカーが必要なのでHeadphone端子にイヤホンなどを接続して音声を聞きます。

respeaker@v2:~$ aplay -Dhw:0,1 -r 16000 -c 2 hello.wav
Playing WAVE 'hello.wav' : Signed 16 bit Little Endian, Rate 16000 Hz, Stereo

うまく聞こえましたか? 個人的には意外と音声はっきりと録音できるような印象でした。小さい音も拾っているようです。

続いては8チャンネルの音声ファイルを録音してみます。先程の録音コマンドのオプションを-c 8に変更するだけで対応できます。 (録音の停止はCtrl+Cです。いいタイミングで停止してください)

respeaker@v2:~$ arecord -Dhw:0,0 -f S16_LE -r 16000 -c 8 hello_8ch.wav
Recording WAVE 'hello_8ch.wav' : Signed 16 bit Little Endian, Rate 16000 Hz, Channels 8
^CAborted by signal Interrupt...

とりあえずファイルの作成ができました。再生を考えてみるのですが、ヘッドホン端子では2chまでしか確認ができません。 hello_8ch.wavが生成できていますので大丈夫そうではありますが。

respeaker@v2:~$ ls
bin  Desktop  hello_8ch.wav  hello.wav

そこでX Window上のAudacityの波形表示で確認を行ってみます。 VNC Viewerなどで画面を接続し、Audacityを起動します。画面左下のメニューにもありますし、コマンドライン上からでも起動は可能です。

f:id:ueponx:20180923131236p:plain

起動するとHELPっぽいガイドダイアログが表示されますが、それを【OK】ボタンをクリックし、

f:id:ueponx:20180923125821p:plain

先程作成した8ch録音したファイル(hello_8ch.wav)をopenします。

f:id:ueponx:20180923130500p:plain

チャンネルごとに録音されているのですが、7,8chだけが録音されていませんでした。MICも6ch分しかみえてないので、問題はなさそうですが…後ほど調べることにします。

とりあえず、音声の録音再生に関しては概ね問題はなさそうです。 これでALSA経由での確認は無事できました。

PulseAudioのデバイステスト

続いてはPulseAudioでのテストになります。 まずはプロセスを眺めてPulseAudioが動作しているか確認します。以下のコマンドで表示が行われればOKです。

respeaker@v2:~$ ps aux | grep pulse | grep -v grep
respeak+   965  0.0  0.7 102048  7568 ?        S<sl 02:46   0:00 /usr/bin/pulseaudio --daemonize=no

続いては録音。以下のコマンドでステレオ(2ch)の録音を行います。(録音の停止はCtrl+Cです。いいタイミングで停止してください)

respeaker@v2:~$ parecord --channels=8 --rate=16000 --format=s16le hello2.wav
Warning: failed to write channel map to file.
^C

ALSA経由での録音も可能です。

respeaker@v2:~$ arecord -v -f cd hello3.wav
Recording WAVE 'hello3.wav' : Signed 16 bit Little Endian, Rate 44100 Hz, Stereo
ALSA <-> PulseAudio PCM I/O Plugin
Its setup is:
  stream       : CAPTURE
  access       : RW_INTERLEAVED
  format       : S16_LE
  subformat    : STD
  channels     : 2
  rate         : 44100
  exact rate   : 44100 (44100/1)
  msbits       : 16
  buffer_size  : 22050
  period_size  : 5512
  period_time  : 125000
  tstamp_mode  : NONE
  tstamp_type  : GETTIMEOFDAY
  period_step  : 1
  avail_min    : 5512
  period_event : 0
  start_threshold  : 1
  stop_threshold   : 22050
  silence_threshold: 0
  silence_size : 0
  boundary     : 1445068800
^CAborted by signal Interrupt...

両方とも録音でき、ファイルも生成されました。

respeaker@v2:~$ ls
bin  Desktop  hello2.wav  hello3.wav  hello_8ch.wav  hello.wav

再生も行われています。(8chのファイルも2ch分はイヤホンで聞くことはできます。)

respeaker@v2:~$ aplay hello2.wav
Playing WAVE 'hello2.wav' : Signed 16 bit Little Endian, Rate 16000 Hz, Channels 8
respeaker@v2:~$ aplay hello3.wav
Playing WAVE 'hello3.wav' : Signed 16 bit Little Endian, Rate 44100 Hz, Stereo

これで音声系のテストは終了です。問題なさそうです。

AVSの導入

基本的には以下を参考にしていきます。

【参考】 github.com

respeaker@v2:~$ pip install avs

インストールされるパッケージは以下のものになります。

Installing collected packages: hpack, hyperframe, enum34, h2, hyper, idna, certifi, urllib3, chardet, requests, six, python-dateutil, backports-abc, futures, singledispatch, tornado, click, avs

実行スクリプト~/.local/binに格納されます。(alexa-audio-check, alexa-auth, dueros-auth, alexa-tap, alexaなど)

インストール後のavsパッケージ経由での録音デバイスのチェックをします。以下のコマンドを入力して数値が出ていれば問題ない様です。

respeaker@v2:~$ ~/.local/bin/alexa-audio-check

f:id:ueponx:20180924092810p:plain

続いてはAVSを使用するために、Amazon.comの認証を行います。ここでGUIが必要になってきます。VNC Viewerとブラウザ(デフォルトではFirefoxがインストールされているので別途インストールをする必要はありません)X上のコンソールから以下のコマンドを実行します。

respeaker@v2:~$ ~/.local/bin/alexa-auth

実行すると… f:id:ueponx:20180924095441p:plain

ブラウザが起動して、【amazon alexa】、【baidu dueros】、【custom】の選択が表示されるので、【amazon alexa】をクリックします。

f:id:ueponx:20180924095645p:plain

クリックするとAmazon.comへのログイン画面表示されるのでログインをします。(注)amazon.co.jpではなくamazon.comのユーザでログインをしてください。メールアドレスは同じでも問題ないですが、パスワードは.comのものを使用してください。.co.jpと.comのパスワードを同じものを使っているとトラブルが発生するかも

f:id:ueponx:20180924100149p:plain

正常に認証されると以下のような表示になります。

f:id:ueponx:20180924101741p:plain

これで認証は完了です。

では、サンプルスクリプトを動作させます。

サンプルスクリプトの実行

サンプルを使って機能の確認を行います。

  • Alexa-tap.py :  キーボードのEnterキーでウェイクアップするAlexaのサンプル
  • ns_kws_alexa.py : ウェイクワードAlexaで起動するサンプル
  • ns_kws_alexa_with_light.py : ボード上のLEDを使用したウェイクワードAlexaで起動するサンプル

Alexa-tap.pyのサンプル

すでにインストールしたパッケージにAlexa-tapは含まれているので以下のコマンドで実行ができます。

respeaker@v2:~$ ~/.local/bin/alexa-tap

実行するのですが、コンソール上に以下のようにINFO:avs.alexa:on_readyと表示されるまで待機します。

f:id:ueponx:20180924115613p:plain

表示されるとEnterキーの待機になるのでそこでEnterキーを押します。 Enterキーを押したらトークが可能になるので話かけてください。

f:id:ueponx:20180924120815p:plain

念の為に書きますが、英語でよろしくです。ウエイクワードは不要なので、Enterキーを押して質問を話しかけるという感じでOKです。

f:id:ueponx:20180924120658p:plain

反応速度も割と早く返答来ます。

ウェイクワードAlexaで起動するサンプル

以下のコマンドを実行してみます。

respeaker@v2:~$ sudo apt install libatlas-base-dev
respeaker@v2:~$ git clone https://github.com/respeaker/respeaker_v2_eval.git
respeaker@v2:~$ cd respeaker_v2_eval
respeaker@v2:~/respeaker_v2_eval$ pip install --no-deps snowboy*.whl
respeaker@v2:~/respeaker_v2_eval$ pip install webrtc_audio_processing*.whl
respeaker@v2:~/respeaker_v2_eval$ pip install voice-engine
respeaker@v2:~/respeaker_v2_eval$ python ns_kws_alexa.py

起動すると…画面が化ける…プログラムを終了させてももとに戻らないという…

f:id:ueponx:20180924122143p:plain

動作も一回目はするのですが、その後は動作しなくなるという…

ちょっと飛ばして…次のサンプルを実行してみます。

ボード上のLEDを使用したウェイクワードAlexaで起動するサンプル

以下のコマンドを実行してみます。

respeaker@v2:~/respeaker_v2_eval$ pip install pixel-ring
respeaker@v2:~/respeaker_v2_eval$ python ns_kws_alexa_with_light.py

こちらも前回の起動すると…画面が化ける…プログラムを終了させてももとに戻らないという…

f:id:ueponx:20180924122143p:plain

動作も一回目はするのですが、その後は動作しなくなるという…

かなり心が折れてきましたが、もう少し頑張ってみます。

もう少し頑張る

これらのサンプルはうまく行かなかったので違う方法で対応をしようと思います。 先程インストールを行ったパッケージの中にvoice-engineがあったので、これのGithubを検索してみました。

github.com

そのドキュメントでsnow-boyの検出プログラムがあったので、このファイルを作成しテストしてみることにしました。

【snow-boy.py】

import time
from voice_engine.kws import KWS
from voice_engine.source import Source

src = Source()
kws = KWS()
src.link(kws)

def on_detected(keyword):
    print('found {}'.format(keyword))
kws.on_detected = on_detected

kws.start()
src.start()
while True:
    try:
        time.sleep(1)
    except KeyboardInterrupt:
        break
kws.stop()
src.stop()

これを実行してみると…うまく動作していました。とりあえずは、ウェイクワードの検出処理はうまくいっているのかなと思います。

respeaker@v2:~$ python snow_boy.py
['arecord', '-t', 'raw', '-f', 'S16_LE', '-c', '1', '-r', '16000', '-D', 'default', '-q']
found 1
found 1
found 1
found 1
found 1

f:id:ueponx:20180924145638p:plain

さらにGithubのソースをcloneして中身をみるとexamplesディレクトリの中にkws_doa_alexa_respeaker_v2.pyというファイルがありました! もしや!と思い、これを実行してみます。

respeaker@v2:~$ git clone https://github.com/voice-engine/voice-engine.git
respeaker@v2:~$ cd voice-engine/examples/
respeaker@v2:~/voice-engine/examples$ python kws_doa_alexa_respeaker_v2.py

Alexa側の応答の音声が小さいですが、一応動画を…

youtu.be

f:id:ueponx:20180924150347p:plain

とりあえず動作しました。ボード上のLEDも連動して点灯して、かつ音声の方向も検出しています。 一応、動きました!

終わりに

最後は少し微妙なところもありましたが、概ねハマることなくできたので品質も上がってきているみたいですね。 他の機能にもチャレンジしてみたいところですが、最近は時間がなかなか取れず…。Groveコネクタの処理はなんとか手をつけたいと思います。

【参考】

www.switch-science.com

github.com

uepon.hatenadiary.com

ReSpeaker Core v2を試してみる【前編】

https://statics3.seeedstudio.com/seeed/file/2018-03/bazaar764738_img_5997a.JPG

ReSpeaker Core v2を使わせて頂く機会がありましたので体験記をメモ。SeeedさんのReSpeakerシリーズといえば…

uepon.hatenadiary.com

という辛い思い出もあったので、今回はどうなっているのか。かなり気になるところです。(まあ名前にv2とついているので実は安心していたりします。)

今回使用するデバイス

ReSpeaker Core V2.0 - Speech Recognition - Seeed Studio

wiki.seeedstudio.com

となります。スイッチサイエンスさんでも販売しているので問題ありません!(何が?)

www.switch-science.com

ドキュメントを見ながら設定をしてみる

このデバイスのスペックに関してはSeeedさんのページを見てもらえればいいかなと思いますが代表的なスペックとしては

  • OS DebianAndroidのサポート
  • CPU Quad-Core Cortex-A7,up to 1.5GHz(Rockchip RK3229)
  • GPU Mali400MP, Support OpenGL ES1.1/2.0(現状ではすべての機能が使用できるわけでは無いらしい)
  • Memory 1GB RAM
  • Grove I2C(DigitaL)Socket x 1
  • Audio 6 Microphone Array、3.5mm Audio Jack
  • Networks WiFi b/g/n; BLE 4.0; Ethernet
  • Others 12 x RGB LEDs、8 GPIO pins

こんなところかなと。前回使用していたReSpeaker 4-Mic Array for Raspberry PiはRaspberryPiに接続するのが前提のHATなデバイスでしたが、今回のデバイスはデバイス そのものにOSをインストールする形です。オンボードFlashにOSをインストールすることもできますし、MicroSDカードにOSを入れることもできます。

ピンアサインなどは以下を参照してください。(というかこのページだけでも完結しそうな気もします)

wiki.seeedstudio.com

Githubのドキュメントページへ

基本的には以下のドキュメントページの順におっていけばいい感じでした。

github.com

microSDカードにOSイメージを焼き込む

まずはインストールするOSのイメージをダウンロードし、SDカードに書き込みます。公開されているOSイメージは【iot / lxqt】と【flasher / sd】組み合わせた種類があります。

  • iot … GUIなし
  • lxqt … GUIあり

  • flasher … オンボードFlashへインストールするタイプ

  • sd … SDカードにOSイメージを配置するタイプ

これらの組み合わせを考えることになりますが、公式ページではlxqtsdの組み合わせのイメージがおすすめされていました。

以下のサイトから該当するイメージをダウンロードします。

https://ibschoolnz-my.sharepoint.com/personal/baozhu_zuo_vace_co/Documents/Forms/All.aspx?slrid=5ff38e9e-60ad-0000-1073-70d262a67058&RootFolder=%2Fpersonal%2Fbaozhu_zuo_vace_co%2FDocuments%2Frespeaker&FolderCTID=0x0120009E00B7C13B0C174BA0DB998ABD011E0F

URLにアクセスするとOneDriveのファイル共有ページへ移動します。

f:id:ueponx:20180915204253p:plain

このなかから新しい日付のフォルダを選択して(このエントリー現在は20180801が最新なのでそれを選択)

f:id:ueponx:20180915204437p:plain

f:id:ueponx:20180915204844p:plain

今回はこちらのイメージファイルをダウンロードして使用します → respeaker-debian-9-test-lxqt-sd-20180801-4gb.img.xz

Etcherでイメージを焼き込みましょう。(Win32DiskImagerでも大丈夫だと思います)

f:id:ueponx:20180921062645p:plain

Etcherを起動して…

f:id:ueponx:20180921062810p:plain

イメージファイルと書き込み先のSDカードを指定すればOKです!【Flash!】ボタンをクリックします。

f:id:ueponx:20180922125917p:plain

すると、書き込みがスタートします。

f:id:ueponx:20180922130258p:plain

完了すると以下のような画面になるのでそれそ本体のmicroSDカードのコネクタに挿します。SDカード挿す向きには注意してください。

f:id:ueponx:20180922131154p:plain

この向きで挿入します。

f:id:ueponx:20180923111756j:plain

ReSpeakerを起動する

micoroSDを挿入したら電源を入れます。microUSBUSBケーブルはOTGと書かれてる方に挿します。隣にPWR_INと書かれたのmicroUSBコネクタに挿しても電源供給は行われますが、WiFiの設定を行うためにはまずはシリアル接続可能なOTG側で接続してください。

https://github.com/respeaker/get_started_with_respeaker/raw/master/img/hardware.jpg

microSDとmicroUSBを挿して起動を行い、USER1のLEDが安定して点滅をすると接続可能になります。ターミナルソフト(Teratermなど)でシリアル接続を行います。 Windows10、MacLinuxでは特にドライバをインストールする必要はありませんが、Windows7などではドライバが必要になります。以下からドライバをダウンロードしてインストールを行ってください。以下はインストールが終わったところからの作業になります。

github.com

Teratermを起動したら、新規接続のダイアログから【Serial】のラジオボタンを選択し、接続してから現れたシリアルデバイスをプルダウンから選択して【OK】ボタンをクリックします。

f:id:ueponx:20180922140606p:plain

【OK】ボタンをクリックするとダイアログは消えますが、ウインドウには何も表示されません。

f:id:ueponx:20180922140839p:plain

ここでリターンキーなどを押すとログインできるようになります。

f:id:ueponx:20180922141355p:plain

デフォルトのログインのユーザネームとパスワードはともにrespeakerなのでそれでログインを行います。

f:id:ueponx:20180922142553p:plain

無事にログインできました。

WiFiの設定

では、WiFiの接続設定を行います。以下のコマンドを入力します。 sudの権限で実行するので、パスワード(respeaker)を入力します。

respeaker@v2:~$ sudo nmtui

【パスワード入力待ちの画面】 f:id:ueponx:20180922143846p:plain

すると以下のような画面になります。

f:id:ueponx:20180922145623p:plain

このメニュー上で【Activate a connection】を選択して、Enterキーを押します。

f:id:ueponx:20180922145828p:plain

すると、WiFiのアクセスポイント名が一覧になってみえるので、接続するアクセスポイントを選択し、パスワードを入力します。

f:id:ueponx:20180922150122p:plain

パスワードを入力すると接続が行われます。選択したアクセスポイントの左側に【*】が付きます。Tabキーでメニューの【Back】までカーソルを持ってきてEnterキーを押します。

f:id:ueponx:20180922150607p:plain

メインメニューに戻ったら【Quit】を選択して設定ツールを終了します。

f:id:ueponx:20180922152139p:plain

では、IPアドレスが取得できているか確認しましょう。以下のコマンドでIPアドレスを確認します。

respeaker@v2:~$ ip a

すると、成功していれば以下のような表示がされます。インターフェースのwlan0にアドレスが設定されていれば大丈夫です。

f:id:ueponx:20180922153606p:plain

これでWiFiの設定は完了です。

IP経由での接続設定

sshでの接続

先程調べたIPアドレスssh接続をしてみます。先程は【Serial】でしたが今回は【TCP/IP】にラジオボタンを設定し、確認したIPアドレスを入力して【OK】ボタンをクリックします。

f:id:ueponx:20180922155207p:plain

ユーザIDとパスワードを入力してログインをします。【OK】ボタンをクリック。

f:id:ueponx:20180922160348p:plain

無事にログインができました!

f:id:ueponx:20180922160736p:plain

VNCでの接続

使用したOSのイメージがlxqtのものを使用していればXも設定されています。VNCで接続すればそのままで画面接続ができます。 VNCのクライアントがすでにインストールされていれば、そちらを使用してもらえればいいのですが、もし入れていないようであれば Chrome拡張のVNCViewerをしようしても問題はありません。Chrome拡張を以下のリンクからインストールしてアプリを起動してください。

[https://chrome.google.com/webstore/detail/vnc%C2%AE-viewer-for-google-ch/iabmpiboiopbgfabjmgeedhcmjenhbla?hl=en:embed: cite]

f:id:ueponx:20180922161303p:plain

起動すると以下のようなダイアログ表示されるのでIPアドレスを設定して【Connect】ボタンをクリックします。

f:id:ueponx:20180922162257p:plain

接続中に通信が暗号化されていない旨のメッセージが表示されますが、今回はこのまま進めていきます。【Connect】ボタンを再度クリックします。

f:id:ueponx:20180922162411p:plain

パスワードを入力して【OK】ボタンをクリックします。

f:id:ueponx:20180922162525p:plain

無事に接続ができました。

f:id:ueponx:20180922162628p:plain

特にX Windowをつかわなければならないと言うわけではないのですが、AVS(Alexa Voice Service) などの認証にGUIが必要になることもあるので、GUIはあると便利だと思います。

蛇足

VNCはインストールしたくないなあということもあったので、xrdpをインストールすることでWindowsデフォルトのリモートデスクトップ接続でもGUI接続可能じゃないかと思いました。ということでxrdpをインストールしてみます。以下のコマンドでOKなはずなのですが…

respeaker@v2:~$ sudo apt update
respeaker@v2:~$ sudo apt install xrdp
respeaker@v2:~$ sudo systemctl start xrdp
respeaker@v2:~$ sudo systemctl enable xrdp

実際に接続するとX側から以下のようなエラーメッセージがでて接続ができません。

f:id:ueponx:20180923073023p:plain

RaspberryPiではこのままでいけるのですが…デフォルトでインストールされているパッケージが違うようで、 パッケージがもう一つ必要のようでした。そのパッケージはvnc4server以下のコマンドでインストールします。

respeaker@v2:~$ sudo apt install vnc4server

リモートデスクトップ接続を行って、ReSpeakerのIPアドレスを入力し、【接続】ボタンをクリックします。

f:id:ueponx:20180923080327p:plain

以下のようなダイアログがでるかもですが、【はい】ボタンをクリックします。

f:id:ueponx:20180923080352p:plain

VNC側の接続画面が表示されます。

f:id:ueponx:20180923080452p:plain

【Session】のプルダウンをXvncに設定を変更してユーザーIDととパスワードを入力して【OK】ボタンをクリックします。

f:id:ueponx:20180923080602p:plain

リモートデスクトップ接続に成功しました!けど?あれ?

f:id:ueponx:20180923080847p:plain

壁紙がなくなっちゃいまいしたが、まあブラウザもコンソールも動いているのでこれもありかなと思います。(ちなみにVNCViewerでの接続でも壁紙がなくなってしまいましたw)

f:id:ueponx:20180923082453p:plain

残りは後半へ

設定に関しては、問題なく終わりましたというかIPの設定ぐらいしかしていません。ただ、OSのイメージとハードウエアが一対一で用意されているので セットアップでそのまま行けるのは結構便利ですよね。今後やAVSやSnowboyなどの実験などを行ってみたいと思います。

LINE対応ビーコンを今更ながら使ってみた

今年の大垣でのハッカソンが開催されたので参加しました。今回のエントリーでは使用したLINE対応ビーコン(以下LINEビーコンと表記)に関してメモしたいと思います。

mashupawards.connpass.com

LINEビーコンとは?

f:id:ueponx:20180913131745p:plain

【通販サイトはこちら】 beacon.theshop.jp

LINEビーコンの仕様はこんな感じです。

ハードウエア仕様
サイズ: 約41mm x 79mm x 約27mm
重さ: 約42g(電池取付時:約90g)
BLEモジュール: hosiden社HRM1017

Buletoothなビーコンといえば、以前に使用したMAMORIOを思い出します。昨年のNagoyaハッカソンで使用したのでビーコンのイメージはなんとなく覚えています。

uepon.hatenadiary.com

MAMORIOは単純なビーコンという形で使用するのに対して(検出したらどう処理するかを直接的に記述する)、今回使用する LineビーコンはLINEの機能を経由して(LINEbotなどを介してバックエンドへの通信)通信を行うことになります。機能的には大きく変化はないのですが、距離や電波強度といった部分関してはラッピングされた形でのセンシングなどが行われます。

ビーコンを使用するボットを準備する

基本的にはLINEMessagingAPIを使用したBotを作成し、その機能を拡張するだけでLINEビーコンへの対応ができます。

LINEBotの作り方に関しては過去の2つのエントリーを参考にしてもらえれば問題ないかなと思います。

【参考】 uepon.hatenadiary.com

uepon.hatenadiary.com

まずはLINE Developersに移動して

f:id:ueponx:20180913133735p:plain

ログインを行います。

f:id:ueponx:20180913134122p:plain

すると新規のプロバイダー作成画面またはすでに作成されたプロバイダーのリストが表示されます。自分はすでに作成しているので作成したプロバイダーが表示されています。新規に作成する場合には新規プロバイダー作成ボタンをクリックしてプロバイダーの作成をおこなってください。(詳細は過去のエントリーを参照)

f:id:ueponx:20180913134615p:plain

今回はすでに存在しているプロバイダーであるMashup名古屋というプロバイダーを使用する想定で作業を進めます。プロバイダー名をクリックします。

f:id:ueponx:20180913135254p:plain

するとチャンネルの選択画面に画面が遷移します。ここでは新しくチャンネルを作成するので、【新規チャンネルの作成】ボタンをクリックします。

f:id:ueponx:20180913135356p:plain

ボタンにマウスオーバーするとアクティブになりますのでそのままクリックします。

f:id:ueponx:20180913135520p:plain

次に使用するAPIを尋ねれれるのでそこで【Messaging API】を選択します。

f:id:ueponx:20180913135626p:plain

ここからチャンネル情報の登録を行っていきます。詳細は過去のエントリーを参照してください。

f:id:ueponx:20180913135753p:plain

必要となる情報は * アプリアイコン画像 * アプリ名 * アプリ説明 * プラン(Developer Trialを選択してください) * 業種 * メールアドレス

となります。値の確認を行い、規約への同意を行うとBotが作成できます

f:id:ueponx:20180913140550p:plain

作成したBotは【チャンネル基本設定】画面で以下の項目を設定してください。(設定方法に関しては過去エントリーを参照)

  • メッセージ送受信設定(アクセストークンは再発行してください)
  • LINE@機能の利用

こんな感じになります。(WebhookURLに関してはまだ設定していないので未設定で問題ありません。)

f:id:ueponx:20180913141319p:plain

f:id:ueponx:20180913141427p:plain

Herokuの設定

続いてはBotのバックエンド側の設定になります。ローカルでやってもいいんですが、あえてHerokuを使用します。 以前のエントリーに従ってGitでデプロイしていきます。Git CMDを起動してソースフォルダ(ディレクトリ)まで移動します。

事前に作成するファイルは

  • runtime.txt(Pythonのバージョンを記載)
  • requirements.txt(依存するライブラリの記載)
  • Procfile(プログラムの実行方法を定義)
  • main.py(アプリケーションのプログラム)

となります。

今回は単純なオウム返しbotからビーコン対応のBotに変更することを考えていますので、main.pyに関してはオウム返しのものを使用します。 あとの設定ファイルに関しては過去のエントリーそのままで大丈夫です。

【main.py】

from flask import Flask, request, abort
import os

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage,
)

app = Flask(__name__)

#環境変数取得
YOUR_CHANNEL_ACCESS_TOKEN = os.environ["YOUR_CHANNEL_ACCESS_TOKEN"]
YOUR_CHANNEL_SECRET = os.environ["YOUR_CHANNEL_SECRET"]

line_bot_api = LineBotApi(YOUR_CHANNEL_ACCESS_TOKEN)
handler = WebhookHandler(YOUR_CHANNEL_SECRET)

@app.route("/")
def hello_world():
    return "hello world!"

@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']

    # get request body as text
    body = request.get_data(as_text=True)
    app.logger.info("Request body: " + body)

    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)

    return 'OK'

@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    line_bot_api.reply_message(
        event.reply_token,
        TextSendMessage(text=event.message.text))

if __name__ == "__main__":
#    app.run()
    port = int(os.getenv("PORT"))
    app.run(host="0.0.0.0", port=port)

このソースファイルと設定ファイルから、以下のようにGitでpushすればデプロイはできています。

(base) C:\sample> heroku create 【アプリケーション名】
(base) C:\sample> heroku config:set YOUR_CHANNEL_ACCESS_TOKEN="【LineDevelopersのChannelの設定ページで表示されたAccessトークン】" --app 【アプリケーション名】
(base) C:\sample> heroku config:set YOUR_CHANNEL_SECRET="【LineDevelopersのChannelの設定ページで表示されたSECRET】" --app 【アプリケーション名】
(base) C:\sample> git init
(base) C:\sample> git add .
(base) C:\sample> git commit -m 'commit'
(base) C:\sample> git config --global user.email "【メールアドレス】"
(base) C:\sample> git config --global user.name "【名前】"
(base) C:\sample> git remote add heroku https://git.heroku.com/【アプリケーション名】.git
(base) C:\sample> git push heroku master
(base) C:\sample> heroku ps:scale web=1

ブラウザから作成したサービスのURL(https://【アプリケーション名】.herokuapp.com/)にアクセスして

f:id:ueponx:20180913151224p:plain

Hello Worldと表示されればOKです!無事にデプロイがされています。

デプロイがうまく行ったらLINEbot側のチャンネル設定で【メッセージ送受信設定】>【Webhook URL】の設定を行います。 https://【アプリケーション名】.herokuapp.com/callbackになるようにします。

f:id:ueponx:20180913150129p:plain

あとはこのbotと友達登録をおこなってメッセージを送ればBotの雛形は完成です。

f:id:ueponx:20180914082249p:plain

ようやくビーコンのお話

LINE Developerのサイトには以下のURLビーコンを使用するための情報が記載されています。

ビーコンを使う

ボットをビーコンとリンクするには、LINE@マネージャーのビーコン登録ページを開きます。LINE Beacon対応端末とボットをリンクするか、LINE Simple BeaconハードウェアIDを端末に発行できます。

ということなのでLINE@マネージャーにアクセスをします。すると以下のような画面になるので【ビーコン端末とbotの連携】ボタンをクリックします。

f:id:ueponx:20180913153129p:plain

次に【アカウント一覧】の画面に遷移します。ここで作成したBotとビーコンの紐づけを行うことができます。

f:id:ueponx:20180913153747p:plain

今回作成したBotの右にある【選択】ボタンをクリックします。 続いてアカウント連携と連携するビーコン情報を登録します。 Botとは登録したビーコンのみアクセスされる形になりますので、その他のビーコンに近づいてもなにも反応はしません。 また、注意点になりますが、Botに複数のビーコンを登録することができますが、1つのビーコンで複数のBotに重複した登録することはできません。そのためLINE@Managerではビーコンの登録解除することもできます。

f:id:ueponx:20180913153923p:plain

HWIDとCODEを入力して【連携】ボタンをクリックすると連携は完了です。

f:id:ueponx:20180913154948p:plain

連携が完了すると以下のようなメッセージが表示されます。

LINE BeaconのEvent Web hook を受信する方法
1. LINEがインストールされているスマートホンのbluetoothをonにしてください。
2.「LINE Beaconを利用」にチェックを入れてください。
a. 設定 → プライバシー管理 → LINE Beaconを利用。
3. Botアカウントと友達になってください。
a. 連携していないBotアカウントには、ビーコンの情報は送られません。
4. ビーコンの電源が入っていることを確認し、スマートホンを近づけて下さい。
a. LINEアプリがビーコンを検知し、その情報をLINEプラットフォームに送信します。

LINEさんのアプリのUIが変わってしまっているので、この説明では設定できません。具体的には以下の部分は読み替えてください。

(以前のUI)a. 設定 → プライバシー管理 → LINE Beaconを利用。

(現在のUI)a. 設定 → プライバシー管理 → 情報の提供 → LINE Beaconをチェック

2018.09.03時点でのUIは以下のようになっています。

【設定画面】を開きます。【プライバシー管理】をタップします。

f:id:ueponx:20180914082401p:plain

その中から【情報の提供】をタップします。

f:id:ueponx:20180914082413p:plain

【LINE Beacon】のラジオボタンがあるのでタップしてチェックを入れます。

f:id:ueponx:20180914082435p:plain

【同意して利用開始】というダイアログが表示されるのでタップして利用を開始します。

f:id:ueponx:20180914082446p:plain

端末によってはBluetoothをONにするダイアログがでるかもしれません。【許可】してください。 (画面が表示されなくても別途BluetoothをONにしてください)

f:id:ueponx:20180914082455p:plain

これでLINEアプリ上でビーコンが検出されるようになりました。

あとは、LINEBot上でビーコンの検出イベントが通知するようにソースコードを変更することになります。

【main.py】

from flask import Flask, request, abort, send_file
import os

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)

from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage, BeaconEvent,
)

app = Flask(__name__)
statusDict  = {}
status = 0

#環境変数取得
YOUR_CHANNEL_ACCESS_TOKEN = os.environ["YOUR_CHANNEL_ACCESS_TOKEN"]
YOUR_CHANNEL_SECRET = os.environ["YOUR_CHANNEL_SECRET"]

line_bot_api = LineBotApi(YOUR_CHANNEL_ACCESS_TOKEN)
handler = WebhookHandler(YOUR_CHANNEL_SECRET)

@app.route("/")
def hello_world():
    return "hello world!"

@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    signature = request.headers['X-Line-Signature']

    # get request body as text
    body = request.get_data(as_text=True)
    app.logger.info("Request body: " + body)
 
    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)

    return 'OK'

@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    line_bot_api.reply_message(
    event.reply_token,[
        TextSendMessage(text=event.message.text),
    ])

@handler.add(BeaconEvent)
def handle_beacon(event):
    print(event)
    line_bot_api.reply_message(
        event.reply_token,[
            TextSendMessage(text='beaconを検出しました. event.type={}, hwid={}, device_message(hex string)={}'.format(event.beacon.type, event.beacon.hwid, event.beacon.dm)),
        ])

if __name__ == "__main__":
    port = int(os.getenv("PORT"))
    app.run(host="0.0.0.0", port=port)

ソース変更部分の説明

LINEBotはビーコンの変化検出するとenter/leaveといったtriggerをもとにイベントバックエンドに送信します。そのため以下のようにBeaconEventをlinebot.modelsからimportする必要があります。

from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage, BeaconEvent,
)

その後にイベントハンドラーをflask側に登録します。

@handler.add(BeaconEvent)
def handle_beacon(event):
    print(event)
    line_bot_api.reply_message(
        event.reply_token,[
            TextSendMessage(text='beaconを検出しました. event.type={}, hwid={}, device_message(hex string)={}'.format(event.beacon.type, event.beacon.hwid, event.beacon.dm)),
        ])

これでBot側でイベントはを受信できるようになります。

f:id:ueponx:20180914090017p:plain

Herokuのログでは以下のようにメッセージが送信されてきます。

(base) C:\sample> heroku logs --tail
2018-09-13T07:42:18.680976+00:00 heroku[router]: at=info method=POST path="/callback" host=【アプリ名】.herokuapp.com request_id=4466883f-6570-4da2-b4ec-c9dcd591cf14 fwd="203.104.146.154" dyno=web.1 connect=0ms service=445ms status=200 bytes=155 protocol=https
2018-09-13T07:42:18.679620+00:00 app[web.1]: 10.95.189.103 - - [13/Sep/2018 07:42:18] "POST /callback HTTP/1.1" 200 -
2018-09-13T07:42:18.238877+00:00 app[web.1]: {"beacon": {"dm": "", "hwid": "00000*****", "type": "enter"}, "replyToken": "248b7d10a5bc4977aab930004cacd320", "source": {"type": "user", "userId": "*********************************"}, "timestamp": 1536824537481, "type": "beacon"}

(注意)
LINEさんのビーコンではビーコンの状態をbotが管理しています。そのため、エリアにはいったり出たりという変化がHerokuで作成したバックエンドのデプロイとは関係ない状態になります。(考えてみれば当然なのですが)つまり、一度Bot側でEnterの状態になると、バックエンドのデプロイをしたからといってEnter状態トリガーが繰り返し発生されることはありません。一般のBeaconでは常に位置情報が取り出されるのでこの部分が大きく異なります。
あとLeaveに関する通知に関しては、ビーコンから離れて、思った以上に遅く送信されます。基本的にはEnterのみを使用する方向で実装したほうがいいでしょう。

イベントで取得するeventオブジェクトに関しては以下のドキュメントを参照してください。

Messaging APIリファレンス

(注意) ドキュメントをみるとJsonのサンプルは以下の様になっていますが

{
  "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
  "type": "beacon",
  "timestamp": 1462629479859,
  "source": {
    "type": "user",
    "userId": "U4af4980629..."
  },
  "beacon": {
    "hwid": "d41d8cd98f",
    "type": "enter"
  }
}

このなかでsource.userIdという属性があるように見えますが、これ間違いですsource.user_idが正しいようです。 Githubソースをみると正解だと確信しました。

終わりに

LINEBotの作成をちょっと変更することでビーコンの機能を追加できるのはなかなか便利だなと思いました。(アプリの外装を作らなくてもいいのも便利) ただ、デバックが結構大変だなというのも実感しました。これはBluetoothのビーコン全体の話かなと思いますが、それに加えて状態管理をLINEアプリ側にゆだねているのが LINEビーコン側のデバックを難しくしているような気はします。あと、LINEビーコンを使用可能にする手順ももう少し簡単にしたらいいなあと。

とはいうものの、ここまでLINEが普及しているのであれば何らかの形で使っていくアイデアがあるのであれば積極的に使ったほうがいいですかね。

LINEさんはサンプルが充実しているので興味ある方はこちらのGithubを参考にしてください。

【参考】 github.com

ドキュメントトップ

【参考】 uepon.hatenadiary.com

uepon.hatenadiary.com

/* -----codeの行番号----- */