JSONを整形して表示したい

ハッカソンやものを作っているときにWEBサービスの入出力がJSONということはあるのですが、 毎回毎回調べていたのでそろそろ自分でまとめておこうと思ったのでメモをとることにしました。

Webサービス化されているものを探してみた

検索してみると以下のようなサービスがありました。

TM - WebTools

tm-webtools.com

JSONの整形以外にも、HTML・XMLの整形、XMLJSON相互変換、BASE64変換、QRコードの生成などがあり意外と便利です。ブログなどに乗せる場合にはこれでもいいかもという感じですが、社内のデータとかはちょっとつかえないですね。

Validationもチェックしてくれます。っていうかそれできないと整形できないか…

f:id:ueponx:20181109142335p:plain

JSONきれい ~JSON整形ツール~

JSONきれい ~JSON整形ツール~ - instant tools

こっちもいくつああるツールの人のようです。文字コードのチェックとかCSV, TSVデータをTEXTの表に変換するなんていうのは便利かもと思います。

f:id:ueponx:20181109142520p:plain

他にもありそうでsが、キリがないのでここまで。

Chrome拡張も探してみた

JSONViewという拡張がありました。

chrome.google.com

f:id:ueponx:20181109143351p:plain

URIにアクセスしてJSONを返すようなRestサービスには便利。

テスト用にJSONを返してくれるような便利なサービスがあるので、それを使ってみます。(会社のデータとかは使っちゃだめですが)

Myjson - A simple json storage and hosting service

上記のURLにアクセスして、すでに準備してあるJSONを入力します。

f:id:ueponx:20181109144533p:plain

下にある【SAVE】ボタンをクリックすると入力されたJSONが返されるURIが発行されます。

f:id:ueponx:20181109144356p:plain

発行されたURIにアクセスすると先程のChrome拡張が有効化されていればへ整形された表示となります。

f:id:ueponx:20181109145105p:plain

他にもJSONを返すサービスは以下もあります。JSONファイルの説明やサンプルコードなどもかいてあるので勉強にはおすすめだと思います。

最短30秒でJSON形式のWEB APIを公開 | JSON OKIBA

Visual Studio Codeでの整形

あとはエディタですが、最近はVisualStudioCodeを使用することが多いのでそちらで整形してみます。以下の記事を参考にしましたが、バージョンアップされて表現などが変わっているようですが、誤差の範囲です

http://blog.snowcait.info/2016/07/09/format-json-on-visual-studio-code/

JSONモードにしておいて(ウインドウの右下の部分がプレーンテキストのモードでは駄目)

f:id:ueponx:20181109145827p:plain

マウスの右クリックをしてメニューを開き、メニューから【ドキュメントのフォーマット】を選択する(またはキーボードのショートカットで【Shift+Alt+F】を押す)と…

f:id:ueponx:20181109150049p:plain

このように整形されます。便利! (一応【Ctrl+z】で元に戻せます。)

f:id:ueponx:20181109150301p:plain

これで編集中の整形は可能なのですが、自動整形する機能もVisualStudioCodeにはあるようです。その場合には以下を参照して作業を行ってみます。

qiita.com

メニューから【ファイル】→【基本設定】→【設定】を選択します。またはキードードで【Ctrl+,(カンマ)】を押します。

f:id:ueponx:20181109151356p:plain

すると以下のようなユーザ設定のタブが表示されます。

f:id:ueponx:20181109152004p:plain

続いて【設定の検索」の入力ボックスからformatonを入力して検索してみます。すると選択肢が絞られていきます。

f:id:ueponx:20181109152107p:plain

表示された画面内でEditor.formatOnXXXのチェックボックスをクリックすると設定が有効化されます。昔はここからテキスト編集だったのに!全然違ってる!

必要そうなのは以下の3つぐらいかなと思います。このあたりの選択は負荷は上がるので個人の判断かなと思います。

  • Editor.FormatOnPaste
  • Editor.FormatOnPaste
  • Editor.FormatOnType

チェックボックスにチェックを入れてみます。

f:id:ueponx:20181109153056p:plain

ペーストすると整形されるはずなので、

f:id:ueponx:20181109153418p:plain

上記のようなテキストを一度カット&ペーストしてみます。

f:id:ueponx:20181109153449p:plain

自動整形できました!やばい、VisualStudioCode素敵すぎる。

LinuxCLIでもやってみたい。

デバックのときなどでCURLコマンドを使用してでてきたJSONも整形されていると嬉しいなあということはよくあります。実はpythonがインストールされていればワンライナーで書くことができるようです。

$ echo '{"json":"obj"}' | python -m json.tool
   {
        "json": "obj"
    }

くっそ便利。なんでこんなことおしえてくれねーんだよ。毎回pythonで変換するコード書いてたよ…くっそー。

部分の抜粋としてはこんな感じ(一回Dictionary型にしてから整形している。)

with outfile:
        json.dump(dict, outfile, sort_keys=True,
                  indent=4, separators=(',', ': '))
        outfile.write('\n')

書いている時間返してほしい…

ほかにも

  • input.jsonJSONを整形して標準出力で出力する場合
$ python -m json.tool input.json
  • input.jsonJSONを整形してoutput.jsonに出力する場合
$ python -m json.tool input.json output.json

なんていうのもできるようです。いろいろ自分が残念に思えてなりません。

Linuxには更に素敵なCLIツールがある

JQというCLIツールが有名のようです。ハイライトやGrepなどのフィルタリングもできるとのこと。サイトにはWindowsにもOSXも動作するようです。

jq Manual (development version)

f:id:ueponx:20181109155746p:plain

$ echo '{"json":"obj"}' | jq '.' -C | less -R`
   {
        "json": "obj"
    }

Webでのオンラインテストサイト準備されています。

f:id:ueponx:20181109163423p:plain

Windowsのcmdで動かしてみましたが、JSONの整形はされるけどカラーハイライトなどはカラーコードが出てくるだけでかなり残念な感じ。WindowsでのJQはやめておいたほうがいい状況です。

f:id:ueponx:20181109161624p:plain

終わりに

いろいろ知らないことが多かったなあ。一度ちゃんと学んだほうが時間短縮できるのでインプットがんばります。


【修正】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などの実験などを行ってみたいと思います。