今日もシュクシュクと! Season2

一人前のエンジニアを目指して修行中の日々。何事も誠実にコツコツと。そして粛々と。

Javascriptで親関数の変数にアクセスする

Javascriptで呼び出し元の変数にアクセスする際のお作法。 ”this"ではなく、"that"を使用するのが定石。

d.hatena.ne.jp

Angular 5でページ内スクロール

Angular 5 でボタンをクリックして、ページ内スクロールをしつつCompoentで表示の制御を行おうとして四苦八苦していたら以下のStackOverflowを参考にしたら実装できた。

stackoverflow.com

angular 5で多言語化対応

Angular 5で多言語化対応をする必要があり、ngx-translateを使用しようとしたところ、ngx-translate/coreの最新版はangular5では正しく動作しないとのことで9.1.1を使用。

npm install @ngx-translate/core@^9.1.1 --save
npm install @ngx-translate/http-loader --save

これで言語毎のjsonファイルを用意することで簡単に表示文言の言語毎の切り替えができるようになった。

参考にしたサイト: Angularで国際化対応 - 闘うITエンジニアの覚え書き

Watson Coverasation API、Node.jsでChatbot

Node.jsでConversationAPIを使用したチュートリアルを探していたら以下の記事にたどり着きました。 qiita.com

こちらの記事ではクライアントとサーバーのやりとりに、socket.ioを使用している。socket.ioを使用することで、開発者は接続プロトコルを意識せずに非同期双方向通信を実現できます。

socket.ioの基本的な使用方法として、サーバーとクライアントの通信に、どちら側でもsocket.emit(eventname, data) でイベントを発火(=データの送信)をし、socket.on(eventname, callback) でイベントを検知(=データの受信)を行います。

クライアント→サーバー:

送信側

socket.emit('chat message',$('#m').val());

受信側

 socket.on('chat message', function(msg){
        //受信したメッセージをそのまま、チャット画面に表示
        io.to(socket.id).emit('chat message',msg);
        // 受信したメッセージをAPIに投げる
        conversation.message({
          input: { text: msg },
          context : res[socket.id].context
        }, processResponse);
});

サーバー→クライアント: 送信側

// 何らかの返答があれば、それをbotからの返答として全て返す(ループはjump to の時に必要)
for (var i = 0, len = response.output.text.length; i < len; i++) {
  if(response.output.text[i] !== ''){ 
      io.to(socket.id).emit('bot message', response.output.text[i]);                
   }
}

受信側

socket.on('bot message',function(msg){
  $('#messages').append($('<li>').text('QA botくん:'+msg).addClass('chat-hukidashi').wrap('<div />'));
});

公式サイト:Socket.IO

socket.ioを使用したチャットについては以下のチュートリアルを参考。 Socket.IO — Chat

2018年を迎えて

ここ数年、開発スキルの向上を目標に掲げながら、納得の行くレベルまで至っていない。 ズルズル行くのは好ましくなく、ここいらで本気で取り組む必要がある。

今年身につけたいスキルは、最初の3ヶ月はWebフロント周りの開発スキルのアップデートに注力したい。 その中でNode.js、Angular、Node-REDあたりも一緒に習得したいところ。

また、年間を通してqiitaに12件(毎月)、学習したことを投稿したい。

Google HomeにSlackから喋らせる

以下のサイトを参考に実装してみた際の備忘ログ。

engineer.muragon.co

 

①言語設定

日本語を有効にする為に、言語の設定を以下のように書き換える(2箇所)

var language = 'ja'; // language code
if (req.query.language) {
language;
}

googlehome.ip(ip, language);
googlehome.device(deviceName,language);
 
②発信WebHookの設定
SlackからのTriggerを「引き金となる言葉」として登録するが、メンションするChatBotをSlack上で右クリックして表示される「team/XXXX/」の”XXXX”を指定する
更に、<@XXXX>と”<>”で囲む必要があるので注意する
 
Google Action Scriptでのデプロイ
コードを修正してWebアプリとしてデプロイする際に、Project versionで「New」を指定しないと更新が反映されなかった。

f:id:qamqame:20171218212103p:plain

 

④ラズパイ側でgoogle-home-notifierの実行

以下のようにバックエンドプロセスとして実行する。

# node example.js > /var/log/googleHome.log &

※ラズパイ再起動後に自動起動するために/etc/rc.localに書いておくのが良い

 

役に立つチュートリアル集

Spring Boot + Angular + MongoDBでToDoアプリを開発するチュートリアル

シンプルでわかり易い。

www.callicoder.com