Wowgineer Notes

WowTechエンジニアの徒然開発日記

Wowgineer Notes

〜新たな"Wow"を生み出す〜

1週間でヘルプボット作って社内リリースしたお話

こんにちは。WowTalkのAndroid開発担当している岡野です。

今回はAndroidと全く関係ないのですが、AWSのサービスを使ってWowTalkのユーザサポート用のボットを作って1週間で社内リリースした話を書いていこうと思います。

1. なぜ作ろうと思ったのか

WowTalkには電話やメールでのサポート窓口というものがあるですが、ここに来る問い合わせ件数を減らせないかというのがそもそもの始まりでした。

WowTalkには操作説明が載っているユーザーサイトもあるのですが、せっかくWowTalkには自分でカスタマイズできるボット機能と、WowTalkにメッセージを送信できるOpenAPIもあるのでそれをうまく利用したいと考えました。

 

f:id:okano4413:20190723154630p:plain

今回考えたアーキテクチャの概要

今回は検証も兼ねて、社内からの問い合わせに対応できるよう社内公開しましたが、最終的にはユーザの皆様に公開し、利用していただけるようなボットを提供できればと考えています。

2.開発環境

Lambda : node.js 8.10 

ServerlessFramework : 1.40 

3. サーバー立てずに実装したい

WowTalkは裏側でAWSを使っているのですが、今回は機能上EC2でインスタンスを立てる必要もないと判断したためAPIGateWayとLambdaを使うことにしました。

ただしインスタンスを立てないことに伴いLambdaの設定を工夫する必要がありました。

4. IPアドレスがない問題

WowTalkのOpenAPIの利用にはセキュアアクセスのためアクセス元にIPアドレスが必要ですが、LambdaはサーバーレスなFaaSサービスのためIPアドレスがありません。

ではどうするかというと、OpenAPIと同じサブネットにLambdaを設置することで対応しました。OpenAPIは社内で検証を行うことがしばしばあるので、同じサービスネットワーク内からのアクセスは許可されています。なのでLambda関数のVPC設定から、WowTalkのインスタンス群と同じサブネットに配置することでOpenAPIの呼び出しを行えるようにしました。

 

f:id:okano4413:20190723144448p:plain

Lambda関数のコンソールからVPCの設定をする

5.Lamdaから外部へアクセスできない問題

ただこれだけでは不十分で、今度はLambdaからユーザーサイトにアクセスできなくなりました。上の画像の注意書きにもありますが、NAT GateWayを設定していないため外部ネットワークとのアクセスができず、ドメイン解決ができなくなるので当然と言えば当然なのですが(汗) 

これはRoute53のプライベートホストゾーン設定にユーザーサイトへアクセスするためのレコードセットを設定することで解決しました。OpenAPIのサーバーへのアクセスも同様に通常のドメイン設定ではアクセスできなくなったので合わせて設定することで対応しました。

6.回答しよう

ここまでできたらあとは裏側の処理をnode.jsでガリガリ書くだけです。まずはシンプルにキーワードに関連する記事のURLをボットのそれっぽく返却するだけにしました。

'use strict';
const crypto = require('crypto');
const URLSafeBase64 = require('urlsafe-base64'); 
const Buffertrim = require('buffertrim'); 
const https = require("request");
const Config = require('./config');
var util = require('util');

var configs;

module.exports.handleMessage = async (event, context, callback) => {
    const body = event['body'];
    const alias = event['stageVariables']['alias'];//APIGateWayから渡される環境変数
    configs = new Config(alias).getConfigs();//環境ごとに設定を変更
    if (body != null) {
        var json = getJsonFromBody(body);
        const userId = json['source']['userId'];
        const content = json['message']['content'];
        const companyId = json['source']['companyId']
        getURLFromKeyWord(content, function(answer){
            sendMessageBuddy(configs.BOT_ID, configs.BOT_PASSWORD, userId, companyId, answer);
        }); 
    }
    callback();
};

function getJsonFromBody(body) {
       /**   暗号化解析処理 (省略)  **/
}

// ユーザーサイトからキーワードが該当する記事を取得する
function getURLFromKeyWord(keyword, callback) {
    var encodedKeyWord = encodeURI(keyword);
    var opt = {
        url: configs.SUPPORT_URL,
        headers: {
            "Accept" : "application/json"
        },
        qs : {
            search : encodedKeyWord,
            per_page : 100
        },
        qsStringifyOptions : {
            encode : false
        },
        rejectUnauthorized : false
    }
    https.get(opt, function(error, response, body) {
        if (body != null) {
            var JSONBody = JSON.parse(body);
            var answers = []; //回答メッセージの配列
            var answer;
            if (body.length == 0 || body == "[]") {
                answer = configs.HINT_TEXT_FOR_NO_RESULT;
            } else {
                //ここで回答本文作成処理。
                answer = util.format(configs.HINT_TEXT_FOR_RESULT, keyword);
                for (var i=0; i<JSONBody.length; i++) {
                    var val = JSONBody[i];
                    var title = val["title"]["rendered"];
                    var link = val["link"];

                    /** WowTalkに送れる文字数は800文字の文字制限があるため、
                     *  回答が制限を超える場合は別のメッセージとして送信するようにする。
                     **/

                    //判定用文字列
                    var textAfterJoin = answer + title + "\n" + link + "\n";
                    if (answer.length < configs.MAX_LENGTH 
                        && textAfterJoin.length >= configs.MAX_LENGTH) {
                        answers.push(answer);
                        answer = util.format(configs.HINT_TEXT_FOR_RESULT, keyword);
                    }
                    if (link != null) {
                        answer += title + "\n" + link + "\n";
                    }
                }
            }
            answers.push(answer);
            for (var j=0; j< answers.length ; j++) {
                var ans = answers[j];
                callback(ans);
            }
        } else if (error != null) {
            callback(configs.HINT_TEXT_FOR_REQUEST_ERROR);
        }
    });
}

//OpenAPIにリクエスト
function sendMessageBuddy(fromAccount, fromPassword, toAccount, companyId, content) {
    const message = {
        from_account : fromAccount,
        from_account_password: fromPassword,
        to_account : toAccount,
        message_content: content
    };
    
    const messageJsonString = JSON.stringify(message);
    
    /**   回答の暗号化処理 (省略)  **/
    
    var opt = {
        uri: configs.OPENAPI_URL,
        method: 'POST',
        headers:{
            "Content-type": "application/x-www-form-urlencoded",
        },
        form: {
            "company": companyId,
            "request_id": "req123",
            "language":"jp",
            "request_data":"暗号化された回答"
        }
    }
    https.post(opt,function(error,response,body){
        /** Open APIにリクエストを投げた後の処理 **/
    });
    
}

 

こうして記事のURLを返却するボットを無事(?)社内リリースしました。

f:id:okano4413:20190723145627p:plain

7. これからのお話

ただこれでは通常の質問形式や複数キーワードで検索をかけようとした時に、WP REST APIでは投稿が引っかからないので正直ほとんど使い物になりませんでした orz

f:id:okano4413:20190723150643p:plain

というわけで「投げられたメッセージをキーワード解析しながらWP REST APIへの検索方法も改善しないと使い物にならないな〜」となりました。そちらについてはまた今後追記していきたいと思います。 

8. おわりに

今回の記事では(ボットのクオリティはさておき)お手製のサポートボットをリリースするまでを簡単に追いました。

タイトルにもある通り、AWSのサーバーレスアーキテクチャを利用すると、アーキテクチャを考えてから社内リリースするまで1週間という短期間で実装ができました。EC2でインスタンスを立てると利用していないリソースにまで料金が発生したり負荷が高くなった時のスケーリングとかリソースの配分なども考えないといけませんが、そこを考慮しなくて済むのは魅力的です。

Androidアプリ開発する傍ら、サービスがもっと使いやすくなるような機能の模索もしていきたいと思います。

 

参考URL

AWS関連
Serverless関連

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain

React+PHP (CodeIgniter) でWebアプリケーションを作る ~Storybookを添えて~

こんにちは。Web開発チームの島根です。
今回のテーマはReactとCodeIgniterでのWebアプリケーション開発です。
Laravel使った方が楽なのでしょうが、現在動いている他のシステムでCodeIgniterが使われているので今回やったことを他のシステムに流用できるようCodeIgniterを選択しました。
やったことはと言えば、要はReactをビルドして作られたindex.htmlと同じことをCodeIginterのviewで行うということだけです。
ただし、2点ほどつまづいてしまいました。

1.create-react-appでreactプロジェクトを作ったのでビルドする度にファイル名が変わる

 これは、create-react-appで作ったreacctプロジェクトでは、webpackの設定でビルド時にファイル名にハッシュ値を含むようにしてあります。
ejectすればconfigファイルを設定できるようですが戻せなくなるため、今回はbuildした後にできるasset-manifest.jsonからファイル名を読み込むという方法をとりました。
読み込みたいのは
・main.<ハッシュ値>.chunk.js
・<ハッシュ値>.chunk.js
・main.<ハッシュ値>.chunk.css
・<ハッシュ値>.chunk.css
の4つのファイルです。

f:id:wt-shimane:20190329121311p:plainf:id:wt-shimane:20190329120737p:plain
割と力技です。笑
・controller

public function index()
{
        $assetJson  = file_get_contents('./build/asset-manifest.json');
        $asset = json_decode($assetJson, true);
        $base = '<reactをビルドしてできたbuildディレクトリのパス>';
        $filePaths = array();
        foreach($asset as $key => $filename){
            if($key === 'main.css'){
                $filePaths['MAIN_CSS'] = $base . $filename;
            }
            if($key === 'main.js'){
                $filePaths['MAIN_JS'] = $base . $filename;
            }
            if($key !== 'main.css' && preg_match("/chunk\.css$/", $key)){
                $filePaths['CHUNK_CSS'] = $base . $filename;
            }
            if($key !== 'main.js' && preg_match("/chunk\.js$/", $key)){
                $filePaths['CHUNK_JS'] = $base . $filename;
            }
        }

		$this->load->view('welcome_message', $filePaths);
	}
}

file_get_contentsでasset-manifest.jsonからファイル名のマッピング情報を取って正規表現で各ファイルを判断してます。main.jsとmain.cssはキーが固定なのでキーで判断し、残り2つは正規表現で判断。ただしmain.jsとmain.cssもchunk.jsやchunk.cssで終わるのでキーの名前ではじいています。(力技)
こうしておけばビルドしたらCodeIgniter側から読み取れるフォルダにasset-manifest.jsonとjsファイルとcssファイルを移動すれば読み取れるようになります。
ファイル移動の部分はshell書いてもいいですし、デプロイ時のフローに入れてもいいですし簡単に自動化できると思います。
・view

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
    <link href="<?=$CHUNK_CSS?>" rel="stylesheet">
    <link href="<?=$MAIN_CSS?>" rel="stylesheet">
</head>
<body>

<div id="root">
</div>
        <script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script>
<script src="<?=$MAIN_JS?>"></script>
<script src="<?=$CHUNK_JS?>"></script>
</body>
</html>

2.BrowserRouteを使うとページを読み込めない。

これに関してはエラーが出なかったため困りました。
jsやcssのファイルが読み込めていないわけでもなく、コンソールやサーバー側のログファイルにも気になるエラーは何もなし。
ブラウザプラグインのReact Developer Toolで調べたところ、Component自体が読み込めていない様子でした。
f:id:wt-shimane:20190329112201p:plain

rootの中が空なので一番トップのBrowserRouterがきちんとルーティングできていなかった。HashRouteに変えればちゃんと表示されました。

ReactDOM.render(
  <HashRouter>
    <div>
      <Route path='/' exact component={App}/>
      <Route path='/page1'  component={Page1}/>
      <Route path='/page2'  component={Page2}/>
    </div>
  </HashRouter>


, document.getElementById('root'));
 

構築手順

構築手順を簡単に書いておきます。
・create-react-app

create-react-app ci-sample

・codeigniter install

composer create-project kenjis/codeigniter-composer-installer codeigniter

・reactやCodeIgniterでコードを書く。ReactのRouterにはHashRouterを使う。

・buildしてCodeIgniter側にソースコードを移動。

・CodeIgniterのトップページでbuildしたreactのソースコードを読み込めるようにする。index.html内に直接書かれているscriptをコピペする。

おまけ

最後におまけですが、Storybookというコンポーネントをカタログにして共有できるツールも入れました。

f:id:wt-shimane:20190329115346p:plainf:id:wt-shimane:20190329115350p:plain

コンポーネントごとにPropsやコンポーネント自体の説明を書けたり渡す値を変えたりできるaddonがあったりしてすごくいいです。
Storybookはまだまだ活用しきれていないので熟した頃に投稿させてもらいます。

ワウテック技術開発部の開発環境について

こんにちは(^o^)!web開発チームの島根です。
本日からワウテックの技術開発部もブログを運営していくこととなりました!
技術的なトピックはもちろんのこと開発メンバーのことについても配信していく予定ですので、
このブログを通じてワウテックの技術開発部の雰囲気も伝えられたらなぁと考えています。

さて、記念すべき1本目のテーマは
「ワウテック技術開発部の開発環境について」です!!

開発環境といっても開発用のサーバーの設定や使っているツール等についてではなく、
今回はPC・デスク・チェア・オフィス内の様子など、どういった環境で開発しているのかをご紹介します。

 

PC

PCはWindowsかMacかを選ぶことはできます。
テレワーク制度もあるので基本的にノートPCが配布されています。
僕はMacbook Proを使っています。
僕はiOSの開発はしないのですが、Macだとコマンドラインからbashのコマンドうてるのでほとんどの作業をコマンドライン内で済ませることができるので僕はWindowsよりMacのほうが好きです。
Windowsも10になってからbashが使えるようになったらしいですが試していません笑。

f:id:wowtech-dev:20190313145640j:plain

PCとディスプレイ ( 画面に線が入っていますが反射です。割れているわけではないです笑 )

27型のディスプレイも配布されます。ソースコードを映すだけですがディスプレイが大きいと目が疲れにくいような気がします。
僕はもうこの大きさに慣れてしまって、家でテレワークをするときは別でディスプレイを持っていないので物足りなく感じてしまいます(-_-)

 

デスク


隣や前の席とのパーティションはありません。
必要ないものはロッカーに入れておくようにしているので、1人あたりの広さも十分かなーと思っています。

 

椅子

 椅子はErgohuman Fit(エルゴヒューマン フィット)のヘッドレスト有りのものを使わせてもらっています。
椅子に関しては事あるごとに、いいオフィスチェアを買って下さい!とねだっていたのですが、昨年12月にオフィス移転した際についに買ってもらえました( ゚Д゚ノノ"☆パチパチパチパチ
これ、ホント嬉しかったです。

f:id:wowtech-dev:20190313145711j:plain

調整箇所が多く自分の体に合わせて自在に調整することができて、まさにFit!

さらに、開発メンバー全員でオフィスチェア専門店に行き、実際に試してこれに選定したという思い出エピソードもあります笑

 

オフィスについて 

現在入居しているオフィスのビルは1フロアごとの貸出となっているので6階にはWowTechの社員しかいません。1フロアには2つ執務室があって、技術開発部は管理部とマーケティング部と同じ執務室となっています。
これらの部署はあまり外部と電話をするような部署ではないので執務室内はとても静かで開発に集中しやすい環境になっています。

f:id:wowtech-dev:20190313150045j:plain

オフィス内の風景

また、リフレッシュルームにコーヒーメーカーが置いてあり、いつでも豆から淹れた美味しいコーヒーを飲むことができます。コーヒー豆は近くのコーヒー屋さんから総務の方が定期的に買ってきてくれています。いつもありがとうございます(*´∀`*)

f:id:wowtech-dev:20190313150211j:plain

コーヒーメーカーとコーヒー豆

僕はコーヒーを毎日飲むので美味しいものがオフィスでできるってのは非常にありがたいです。

 

我々ワウテック技術開発部はこのような環境で開発をしています。
興味を持った方がいらっしゃればいつでもご連絡下さい。

f:id:wowtech-dev:20190313163146j:plain