環境構築201801 slackbot

はじめに

環境構築時のメモです。
* Amazon Linux AMI release 2017.09
* nvm 0.33.8 (201712)
* node v9.3.0 (201712) 
* redis v2.4.10(201712)
* hubot-slack v4.4 (201712)
* nginx v1.10.3 (201708)
* pyton v3.6.0 (201712)

初期設定

command
$ cat /etc/system-release1
$ sudo yum update -y
$ sudo yum install -y git

タイムゾーンをJSTに変更する。

command
$ sudo ln -sf  /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
$ sudo vi /etc/sysconfig/clock
---
ZONE="Asiz/Tokyo"
UTC=false
---

OSユーザ(例:hoge)作成

command
$ useradd hoge
$ sudo su - hoge
$ cd /home/hoge
$ mkdir .ssh
$ cd .ssh
$ ssh-keygen -t rsa
$ mv id_rsa.pub authorized_keys
$ chmod 600 authorized_keys
$ cat id_rsa ※内容を接続元PCに保存 hoge.pem
※puttyの場合
・Run PuTTYgenを起動
・Load an existing private file を読み込む(load)
・Save public key hoge.ppk
・上記ファイルを"Private key file for authentication"に設定する。
・wheelユーザに追加およびパスワードなしでsudoを利用できるようにする。
$ vi /etc/group
----
wheel:x:10:ec2-user,hoge
----
$ sudo visudo
---
# %wheel        ALL=(ALL)       NOPASSWD: ALL
%hoge      ALL=(ALL)       NOPASSWD: ALL
---

Nginxインストール

$ sudo useradd www
$ sudo groupadd www
$ sudo yum install nginx
$ sudo cp /etc/nginx/nginx.conf.default /etc/nginx/nginx.conf
$ sudo vi /etc/nginx/nginx.conf
---
server{
   listen    80;
   server_name localhost;
   root ***設置場所***;
   charset utf-8;
   index index.html index.htm index.php;
   access_log /var/log/host.access.log main;
}
---
$ sudo service nginx start
$ sudo chkconfig nginx on

redisインストール

$ sudo yum --enablerepo=epel install redis
$ sudo service redis start
$ sudo chkconfig --level 35 redis on
$ sudo chkconfig --list | grep redis

nodeインストール

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ vi .bashrc
---
if [ -f ~/.nvm/nvm.sh ];then
        source ~/.nvm/nvm.sh > /dev/null 2>&1
fi
---
$ source ~/.bashrc
$ nvm ls-remote nodeバージョン一覧表示
$ nvm install v6.9.0
$ nvm alias default v6.9.0  #恒久的な切り替え
$ nvm ls-remote
$ node -v
nvm自身のバージョンアップ
text
$ cd ~/.nvm
$ git pull origin master
$ source ~/.bashrc

Python3インストール

text
$ yum install gcc gcc-c++ make git openssl-devel bzip2-devel zlib-devel readline-devel sqlite-devel
$ git clone https://github.com/yyuu/pyenv.git ~/.pyenv
$ vi ~/.bashrc
---
export PYENV_ROOT="${HOME}/.pyenv"
if [ -d "${PYENV_ROOT}" ]; then
export PATH=${PYENV_ROOT}/bin:$PATH
eval "$(pyenv init -)"
fi
---
$ sudo yum install patch
$ pyenv install 3.6.0
$ pyenv global 3.6.0
$ pip install --upgrade pip
$ pip install bigquery-python
$ pip install beautifulsoup4
$ pip install jupyter
$ jupyter notebook --generate-config
$ python -c "from notebook.auth import passwd;print(passwd())" ※設定
$ vi ~/.jupyter/ 内に jupyter_notebook_config.py
---
c.NotebookApp.ip = '*'
c.NotebookApp.open_browser = False
c.NotebookApp.password = 'sha1:*******' ※
---

Slackbot構築

Slackにhubotアプリを追加

Add apps| Slack

hubot01png.png

hubot2.png

Hubotインストール

$ cd ~/.nvm/versions/node/(バージョン)/lib/node_modules
$ npm install hubot yo generator-hubot coffee-script hubot-slack
$ cd ~
$ mkdir hello-hubot
$ cd hello-hubot
$ yo hubot
$ vi external-scripts.json
---
heroku packageを削除
---
動作確認
$ vi ./scripts/examples.coffee
---
module.exports = (robot) ->
#(コメントアウトを外す) robot.hear /badger/i, (res) ->
#(コメントアウトを外す) res.send "Badgers? BADGERS? WE DON'T NEED NO STINKIN BADGERS"
---
$ export HUBOT_SLACK_TOKEN=<API Token>
$ ./bin/hubot -a slack 

Slackでbadgerを入力しリプライを確認
hubot3.png

SlackBot設置

slack からgoogle検索ができるか試す。
下記のアンプルコードを scriptsディレクトリに保存し、hubotを起動する。

./bin/hubot -a slack

サンプルコード|SlackBot

slackから作成したアプリに「search is ***」を送信するとreplyが届く。

hubot5.png

続きを読む

Amazon Translateを使ってみた&自動翻訳付きチャットを作ってみた

Amazon Translateのプレビュー申請が先日通ったので、使ってみました。us-east-1(バージニア北部)で利用しています。

Amazon Translateとは?

公式ページへどうぞ。

成果物

とにかく成果物が早く見たい方はこちらへ。

https://github.com/kojiisd/amazon-translate-chat-demo

コンソールから使ってみる

とりあえずAWSコンソールから使ってみます。100万文字で15ドルの料金のようです。

スクリーンショット 2018-01-13 16.05.42.png

選択できる言語は7つとまだ少なめですが、いずれすぐに日本語も追加されるでしょう。

image.png

入力した文字がリアルタイムに翻訳されます。(日本語が選択できないので、文章を入れても自然な文章になっているのかは判断できませんがw)

スクリーンショット 2018-01-13 16.08.49.png

APIを使ってみる

ただこれだけだとなんの面白みもないので、自動翻訳をつけたようなチャットを作ってみたいと思います。

画面の準備

以前作成したiot-demo-deviceをベースに開発します。

https://github.com/kojiisd/aws-iot-demo-device/

とりあえずこんな感じの画面を組みます。

スクリーンショット 2018-01-20 13.26.33.png

項目名 意味
Name 名前
Source Language 受信するメッセージの言語
Target Language 翻訳対象言語
Start Chat チャット開始のためのボタン
Message メッセージ
Send Message メッセージ送付用ボタン

最初は名前やメッセージ受信時の言語を選択しないとチャットを
スタートできないようにしています。
→メッセージをSubscribeする際に自身と同じ名前だったら翻訳しないようにするため。

画面下部の「Original」と「Translated」にメッセージのやりとりが記録されるように実装します。

WebSocketにAWS IoTを利用する

チャットのやりとりをするために今回WebSocketを利用しますが、一から環境を用意するのが面倒なので、AWS IoTで手を抜きます。カスタマイズなどは特に気にせずデフォルトで設定してしまってOKです。

今回はこちらの記事と同じ設定をしました。

Three.jsとAWSを連携させてIoTっぽいことしてみた

AWS IoTは受信後のアクションが必要だったので、DynamoDBに履歴として登録する体で設定をしています。

aws-sdkのフルビルド

この記事を書いている時の「v2.184.0」ではフルビルドをしないとAWS.Translateクラスが使えなかったため、公式ページを参考にビルドを実施します。

https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/building-sdk-for-browsers.html

$ git clone git://github.com/aws/aws-sdk-js
$ cd aws-sdk-js
$ npm install
$ node dist-tools/browser-builder.js all > aws-sdk-full.js

翻訳部分を開発する

肝心の翻訳ですが、こんな感じのコードにします。事前にCredentialやEndpointなど必要な情報を設定しておく必要があります。なぜPromiseが必要かは後述します。

AWS.config.credentials = new AWS.Credentials(cred.awsAccessKeyId, cred.awsSecretAccessKey);
  :
  :
function translate(message) {

  var params = {
    Text: message,
    SourceLanguageCode: srcLang,
    TargetLanguageCode: targetLang
  };

  var syncProc = new Promise(
    function (resolve, reject) {
      window.translator.translateText(params, function onIncomingMessageTranslate(err, data) {
        if (err) {
          reject("Error calling Translate. " + err.message + err.stack);
      }
        if (data) {
          resolve(data.TranslatedText);
        }
      });
    }
  );

  return syncProc;
}

翻訳語の文章の追加部分の開発

上述のtranslateメソッドを呼び出す部分ですが、メッセージ受信後のコールバックメソッドとなります。

function onMessage(message) {
  var msgJson = JSON.parse(message.payloadString);
  var addingHtml = "<tr><td>" + msgJson.name + ": </td><td>" + msgJson.message + "</td>";
  if (msgJson.name == body.name) {
    addingHtml += "<td></td><td></td></tr>"
    $("#chatArea").prepend(addingHtml);
  }
  else {
    translate(msgJson.message).then(function (result) {
      addingHtml += "<td>" + msgJson.name + ": </td><td>" + result + "</td></tr>"
      $("#chatArea").prepend(addingHtml);
    }).catch(function(error){
      alert(error);
    });
  }

メッセージを受信した際、自身の名前と同じであれば翻訳は実施しないように処理をしています。

自分ではない人からのメッセージの場合translateメソッドを呼び出しますが、Translate APIにアクセスするタイミングで非同期処理となってしまうため、前述のPromiseでこの辺の処理の順番を制御しました。

実際の動き

画面を二つ用意して、それぞれ「kojiisd1」と「kojiisd2」でチャットを開始するようにします。設定はそれぞれ以下の通りとします。

kojiisd1 kojiisd2
Source Language French English
Target Language English French

kojiisd1からは英語で話すようにし、kojiisd2からはフランス語で話をしてみます。

こんな感じで操作できました(ちょっとGIFのサイズ大きい)。

amazon-translate-chat-demo3.gif

まとめ

Amazonが提供する翻訳サービスなので、Pollyなど他のサービスとの連携も容易にできるようになると期待が持てます。これは電話会議などもAmazonが提供する翻訳サービスを使いながらリアルタイムに全て自動翻訳できる日が来そうな感じがして、期待大のサービスですね。

続きを読む

AWS Cloud9でAngularアプリ開発(後編)

はじめに

前編ではCloud9の環境構築をおこなったので、今回は実際にAngularの環境構築~実行までを行おうと思います。

node, npmのバージョンを確認

Angular-CLIは現状、nodeが6.9.0以上、npmが3.0.0以上必要なので、まずはバージョンの確認をします。
Cloud9にはIDE上にコンソールがあるので、そこにコマンドを入力すれば確認できます。
image.png
Cloud9はデフォルトでnodeが6.12.3、npmが3.10.10がインストールされているので問題なさそうです。

ちなみに、Cloud9ではワークスペース毎にEC2インスタンスが違うので、ワークスペースを別に立てればインストールされたモジュールを共有しなくてもよくなります。
つまり、今まで一台のPCではNodeなどのバージョン管理が大変でしたが、Cloud9を利用すればバージョン毎にワークスペースを立てれば済むようになるわけです。

Angular-CLIのインストール

Angularの開発にはかかせないAngular-CLIをインストールします。
Cloud9のコンソールに公式に記載されている通りに入力します。

npm install -g @angular/cli

体感で1分ほどでインストールが完了しました。

Angularプロジェクトの作成

Angular-CLIを利用してプロジェクトを作成します。
sample-angular-appの部分には作成するアプリ名が入るので、適宜読み替えてください。

ng new sample-angular-app
cd sample-angular-app

image.png
今回は2分ほどで完了しました。

Angularアプリを実行

まずは公式の通り以下のコマンドで起動してみます。

ng serve

起動したら、上部にあるPreview -> Preview Runnig Applicationを選択して、起動した画面を見てみます。
image.png
すると、「Invalid Host header」と表示されて失敗します。
これは、ホスト名が指定されたものと違うことが原因のようなので、ホスト名を明示して起動してみます。
ng serveのオプションの–publicを利用することでホスト名を明示することができます。
指定するホスト名には、Preview用ブラウザに記載されているURLをそのまま利用します。

ng serve --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.com

image.png

今度は上手くアクセスすることができました。
理由はわかりませんが、初回アクセス時にはロードに時間がかかるので辛抱強く待ちましょう。

起動コマンドをpackage.jsonに記載する

毎回URLを記載するのは面倒なので、起動コマンドをpackage.jsonに記載して省略出来るようにします。
今回修正するscriptの部分は、プロジェクトを作成した直後では以下の内容です。

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

この、”ng serve”のコマンドに –public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.comを追加します。
修正後は以下のようになります。

  "scripts": {
    "ng": "ng",
    "start": "ng serve --public https://xxxxxxxx.vfs.cloud9.ap-southeast-1.amazonaws.com",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

修正を保存したら、実際に利用できるかを試してみましょう。
package.jsonで修正するのはnpmのコマンドなので、以下のコマンドで起動します。

npm run start

image.png

無事起動することが確認できました。

おわりに

前編から、AWS Cloud9を利用してAngularアプリの開発環境構築を行いました。
Cloud9を利用することで簡単に開発を始められるので、今後プロト等作成する時には積極的に利用していきたいです。

続きを読む

AWS Cloud9でAngularアプリ開発(前編)

AWS Cloud9とは

ブラウザ上で動作するIDEで、40以上の言語に必要なツールがあらかじめインストールされているため起動すればすぐに開発を始められる。
AWSが運営してるだけあって、AWSの他のサービスとの連携も簡単(らしい)。
複数人で同時に編集できたりハイライトした部分が相手からも見えるなど、ペアプロやコードレビューに向いた機能もある。

バージョン

ちなみにインストールされているバージョンは執筆当時で
Java : 1.7
node : 6.12.3
npm : 3.10.10
Python : 2.7.12
でした。
もちろんアップデートする方法はあるみたいです。

料金

Cloud9は基本的にEC2上で動作するようになっていて、課金はこの時に利用するEC2の料金のみ。
t2.microで構成すれば無料枠内で利用できる。
もちろんリッチな構成で作れば早くなる。
詳しくは公式を見てください。

AWS Cloud9環境の準備

では実際にCloud9の環境を準備してみます。
まずはCloud9のトップにアクセス。
すると、普段東京リージョンで利用している人はこんな画面に遷移したと思います。

キャプチャ.PNG

実はCloud9は現在東京リージョンには来ていないんです。
なので、おとなしく別のリージョンに移動しましょう。
するとこんな画面に遷移するので、右側にあるオレンジ色のCreate environmentをクリックしてCloud9の準備を始めましょう。
キャプチャ.PNG

Environment name and description

最初に環境の名前を設定します。
今回はcloud9-angular-sampleという名前にしました。
Descriptionの部分は環境の説明を書く部分なので今回は省略。

キャプチャ.PNG

Environment setting

次にCloud9を構築するサーバの設定をしていきます。

キャプチャ.PNG

Environment type

一番上のEnvironment typeは環境のタイプの設定です。
キャプチャ.PNG
上が新規にEC2インスタンスを作成してそこにCloud9環境を作る設定、
下が既存のEC2インスタンスもしくは自分で構築したサーバに環境を作る設定になります。
下の設定の場合には色々条件があるみたいなので公式の解説を参照するようにしてください。
今回は新規にインスタンスを作成するので上を選択します。

Instance type

新規インスタンスを選択すると、作成するインスタンスの構成を設定する必要があります。
image.png
今回は無料枠内で利用したいのでt2.microを選択します。
もちろんリッチな構成にすればそれだけ快適になるので、ここは好みで大丈夫です。

Cost-saving setting

この設定をすることで、Cloud9を使用していない時、自動的にインスタンスを閉じてくれるようになります。
キャプチャ.PNG
今回は30分に設定しておきました。

他の設定についてはデフォルトのままNextStepを押して先へ進みます。
キャプチャ.PNG

準備完了

確認画面のCreate environmentを押すと、グルグルしてる画面に遷移します。
image.png

初回はインスタンスの起動等々ありますが、だいたい1分ほどで準備が完了します。
キャプチャ.PNG

おわりに

前編はCloud9の環境構築までを行いました。
後編ではCloud9上でAngularの環境構築~実行までをやってみます。

続きを読む

AWS EC2でHyperledger Fabricを動かす(2.Fabric前提条件の準備)

AWSにUbuntuをセットアップし、FabricをDockerで起動してみたいと思います。

前回は、AWS EC2を用意するところまででした。
https://qiita.com/tmikada/items/a1f22fd5c61c2de71d19

今回は、Fabric導入のための前提条件を準備していきます。

必要なものはこちら

  • curl
  • docker 17.06.2-ce or greater
  • docker-compose 1.14.0 or greater
  • go 1.9.x
  • node.js 6.9.x or greater (7.xは現時点でサポート対象外)
  • npm
  • python 2.7

参照: http://hyperledger-fabric.readthedocs.io/en/latest/prereqs.html

順番に導入していきます。

curl

インストール済み

$ curl --version
curl 7.47.0 (x86_64-pc-linux-gnu) libcurl/7.47.0 GnuTLS/3.4.10 zlib/1.2.8 libidn/1.32 librtmp/2.3
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtmp rtsp smb smbs smtp smtps telnet tftp 
Features: AsynchDNS IDN IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz TLS-SRP UnixSockets 

docker

手順: https://docs.docker.com/engine/installation/linux/docker-ce/ubuntu/#install-using-the-repository

$ sudo apt-get update
$ sudo apt-get install 
     apt-transport-https 
     ca-certificates 
     curl 
     software-properties-common

$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
OK
$ sudo apt-key fingerprint 0EBFCD88
pub   4096R/0EBFCD88 2017-02-22
      Key fingerprint = 9DC8 5822 9FC7 DD38 854A  E2D8 8D81 803C 0EBF CD88
uid                  Docker Release (CE deb) <docker@docker.com>
sub   4096R/F273FCD8 2017-02-22

$ sudo add-apt-repository 
    "deb [arch=amd64] https://download.docker.com/linux/ubuntu 
    $(lsb_release -cs) 
    stable"
$ sudo apt-get update
$ sudo apt-get install docker-ce
$ apt-cache madison docker-ce

$ docker --version
Docker version 17.12.0-ce, build c97c6d6

docker-compose

手順: https://docs.docker.com/compose/install/#install-compose

$ sudo curl -L https://github.com/docker/compose/releases/download/1.18.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ docker-compose --version
docker-compose version 1.18.0, build 8dd22a9

go

手順: https://github.com/golang/go/wiki/Ubuntu

$ sudo apt-get install golang-go
$ go version
go version go1.6.2 linux/amd64

# バージョン古いため、新しいのを入れる

$ sudo add-apt-repository ppa:gophers/archive
$ sudo apt update
$ sudo apt-get install golang-1.9-go
$ go version
go version go1.6.2 linux/amd64

# 変わってない。。。
# 手順をよく見ると、1.9はこちらにあるらしい
$ /usr/lib/go-1.9/bin/go version
go version go1.9.2 linux/amd64

# パスを変更します
$ cd /usr/bin/
$ sudo rm go
$ sudo ln -s ../lib/go-1.9/bin/go
$ go version
go version go1.9.2 linux/amd64

GOPATHを設定します

$ mkdir ~/go
$ vi ~/.bashrc

# 以下の2行を追記
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin

$ source ~/.bashrc
$ echo $GOPATH
/home/ubuntu/go

node.js, npm

nodeのバージョン管理は、nを使うことにしてみます
手順: https://qiita.com/seibe/items/36cef7df85fe2cefa3ea

バージョンの組み合わせは
https://nodejs.org/ja/download/releases/
を参照し、nodejs 6.9.5, npm 3.10.10 を選択

$ sudo apt-get install nodejs npm
$ nodejs --version
v4.2.6
$ npm --version
3.5.2

# nをインストールしてnodeの新しいバージョンを導入する
$ npm cache clean
$ sudo npm install -g n
$ n --version
2.1.7

$ sudo n 6.9.5
$ node --version
v6.9.5

# 古いnodejsはまぎらわしいため削除しておく
$ sudo apt-get purge nodejs

# バージョン指定してnpmをインストール
$ sudo npm install -g npm@3.10.10
$ npm --version
3.10.10

Python

2.7がインストールされていました

$ python --version
Python 2.7.12

ここまでで、やっと前提条件の準備が完了です。。。
次回はFabricを動かすところまで書くつもりです。

続きを読む

MonacaからPhoneGap Builderへ移行

なぜ切り替えるに至ったか

Monacaを使っていたものの、公開版を作成するためには有料プログラムにしなくてはならない。
使い始めてた時からわかっていたもの、便利だったのでずーっと問題を放置してきた。
しかし、いよいよ自分が作成したアプリが完成に近づいてきてビルド回数に制約があることも踏まえ、切り替えるのも自分のスキルアップにつながるかなと思ってやってみた。

まとめると

・Monacaありがとう
・riot,AWS,phinaのコンビネーションでもMonacaもPhoneGap Buildもできました
・でも、はまるところもあります

以下、自分の備忘録に近いところもあるけど、吐き出しておく。

Monacaはアプリ開発を加速します

そもそも切り替えるかどうか悩んだのは、やっぱり便利だから。
開発で悩みを減らす、そのことをビジネスにしているのだからそれはそれでいいのだと思う。
ホントありがたいサービスです。
これがなかったら、私はここまでこれませんでした。
費用面がクリアできるなら、Monacaで開発したほうがいいです。
私のように3連休まるまるこの問題解決に使うことなく開発に専念できます。

では切り替えますか…何に?

Monacaはcordovaをベースにしてることは知ってます。
でも、みなさんphonegapに行きつくわけですね。
そこからして無知な私は調べるしかなくて。
調べてた途中でtelerik platformなるサービスも見つけたが、2018年5月でサービスやめるっていうことで、マイグレーションガイドがあってこれが非常にありがたかった。これみれば、イマドキこういうサービスがあるんだと理解できた。やっぱりcordovaかphonegapの2択なんだとわかったので。

クリップボード01.jpg

その2択を調べてみた1ところ…やっぱりよくわからないけど、PhoneGap Buildを使わないと最終的なビルドが面倒そうに見えたので、phonegapにしてみることにした。

Phonegap Builderに切り替えようとしたけど

というわけで、また調べると過去にアプローチした方のを参考にすることにした2

参考にしたいものの、ギャップが大きすぎた。
ここで、今回のアプリと自分がこれまでどうやって開発してきたかを簡単に説明すると…
・riot.js+phina.js+aws(DynamoDB,Coginto Userpool)で作られたゲーム
 ・一部をのぞきcdn参照。
・開発は自分の自宅PC(windows10)
・IDE?そんなもん知らんなぁ(テキストエディタで編集してIISサーバ経由で動作確認)
 ※IISサーバ経由なのはriotが求めるから(XSSが…というのでそれはそれで仕方ない)。
 ※ほんとはpercel出たあたりに期待したのだけど、phinaとの相性3で断念。

そもそもMonacaで動くのか?

つまり、そもそもMonacaですらまともに動くかどうかわからない状態。
というわけで、まずはMonacaに移植することにした。

案の定動かないわけです。
エラーログもはかずに、背景色のみ。
CDNなところはすべて取っ払い、必要なコンポーネントを全部追加して、パスも通しても動かず。

理屈的にはコンポーネントを追加すれば動くはずなんだけど…
今回は必要なライブラリはダウンロードして取り込むことにしました。

回り道したようにも思えましたが、結果として「Androidアプリ設定」などその後の作業がイメージしやすかったです。

動いちゃうと案外満足しちゃうもので、やっぱこのまま…とも一瞬思いました。

いよいよMonacaから旅立つ

でも、ビルドに制約があるので…改めて手順にしたがってphonegapから。
あらかじめnode.js,npmは使える環境にはしていたので、そこは割愛。

1.Phonegapのインストール

npm install -g phonegap

まぁ普通。npm install -g phonegapしたかったので、管理者権限でやったことぐらい?

2.スマホにデバッグツールをインストール

インストール自体は悩まないのだけど…後述しますが、ネットワーク連係するアプリの場合あまり使えないのです…

3.プロジェクトを作成

phonegap create <AppName> --template blank

ここも特にひねりはない。参考例もblankにしているが、下手にhelloworld入っているよりわかりやすいんじゃないかなと思いました。

4.開発

今回はあらかじめ開発してあるので、www以下に開発した成果物を放り込む。
その際に以下を残せというから残した。

<script type="text/javascript" src="cordova.js"></script>

5.モバイルでの確認

$ phonegap serve android

できるんだ!と思ってやってみたところ…できた!
ここまできたら、2.で導入したデバッカーで動作させようとしたところ…

ちーっとも接続しない。
そもそもPC→スマホって接続できてないのでは?
と思って、昔でいうLANボード2枚刺しみたいなことをしようと調べたら…
いまさら SoftAP を使用してWindowsノートマシンを無線親機にする

これこれ。ありました。この手順にしたがって、PCを無線親機化して、スマホ側で認証することでようやく接続できました。
で、画面が表示されてボタンも反応して一安心、と思ってログオン機能を試したところ動かない。
サーバ側のログをみても無反応。

何がまずいのかわからなかったので、またネットでググると
Cordova、IonicでHTTP通信できない・画像とかが読み込めないときの対処法3選
これのホワイトリストの設定ミスの項をみて、そもそもwhitelistのプラグイン入れてない!と気がづき、入れました。

今度は…と思ったら「認証できません」というあらかじめアプリで仕込んだメッセージが。
なんでなん?
と思ってサーバ側のエラーログを見たら

NetworkingError: Network Failure

このキーワードで調べるとCORSConfigurationにぶち当たるのだが、これが曲者。
S3の話はそれで解決するのかもしれないが、実際のところはサーバ側(ここでいえばphonegap serve)の問題とのこと。
(この裏どりだけが再検索しても出てこない…英語のページでnot client sideというようなキーワードがあったはず。)

つまりは

$ cordova serve android

した後、自PCで

http://localhost:3000/

して確認したら、あとは信じるしかない…と割り切って先に進んだ。

6.プラグイン

ここもまぁ普通。あまり悩むことはない。

7.設定の修正

ここはMonacaを経由したおかげで何をすべきかが分かった。
むしろここを見たほうがいい。

8.アイコンの変更

Favicon Generator
である程度作ってくれるのだが、最新のiosに対応してないので自力で作らないところがあるのがつらい。

9.PhoneGap Buildでアプリを作成する

ようやくここまできました。
PhoneGap Build

まずはadobeのIDがなかったので作りました。まぁ悩むところはないが、パスワードの制約が面倒。
そして、やっぱりgithubが必要だというので、これまで避けてきたけどgithubもアカウント作成。

githubを使うのも初めてだったのでプログラムソースのアップロードに四苦八苦。
結局webから登録可能だと知ったのが、調べ始めてから3時間後。
無題.jpg

ネットを見ると、gitから登録する手順はたくさん載っているが、こんなシンプルな方法がなかなか出てない。当たり前だからか?

そこに至るまでにgithubのデスクトップ版入れたりしたが、どうにも使いづらいうえに案外ネットにも情報がない。
結局git for windowsを入れたほうがシンプルで分かりやすい。

10.PhoneGap Buildに鍵を登録する

これも書いてあるとおりなのだが、javaも必要なのか…てかkeytoolだけが必要なんだけど

keytool -genkey -v -keystore [keystore_name].keystore -alias [alias_name] -keyalg RSA -keysize 2048 -validity 10000

このときのエイリアス名、のちに使うので慎重に。

無題.jpg

「アカウントを編集」-「署名キー」-「キーを追加」
このときにタイトルはどうでもいいけど、エイリアスはkeytoolで作成したときに -alias [alias_name]で指定した値と一致しないとエラーになる。(←エラーとなったからわかる。)

果たして動くのか?

そうなんです、ここまで作業したものの最終的に実機確認ができてないので不安でしたが…
動きましたー
・aws cognito userpoolを使った認証
・aws DynamoDBを使ったデータ取得、更新
・riot.js+routerを使ったフレームワーク
・phina.jsの動作
すべて問題なし。

ただ反応が鈍いかな…PC(corei7)とスマホ(arrowsM02)を比較しちゃダメなのかな。

続きを読む

AWS Mobile Hub による react-native アプリ開発(構築〜認証)

AWS mobile-hub が react-native に対応したとのことなので、マニュアル(Developer Guide) を元にサンプルアプリを作成・実行して見ます。

はじめに

当初PetStoreのようなサンプルのアプリがダウンロードできるのかと思いましたが、react-native のサンプルはまだないようです。

マニュアルもまだ不十分な気がします。本手順よりも、もう少しスマートなやり方があるのかもしれません。

前提

node がインストールされていること
react-native がインストールされていること

準備

react-native プロジェクトの作成
前述のように雛形プロジェクトが落ちてくるわけではなかったので、最初にreact-native initで初期プロジェクトを作成しました。

react-native init awsmobile
cd awsmobile

セットアップ

awsmobile-cli をインストール/設定します。

npm install -g awsmobile-cli

実行結果

└─┬ awsmobile-cli@1.0.6 
  ├─┬ aws-amplify@0.1.30
  │ └─┬ axios@0.17.1
  │   └── follow-redirects@1.3.0 
  └── aws-sdk@2.177.0 

アクセスキーの設定

AWSのシークレットキーを設定します。

awsmobile configure

awsmobile init コマンドによる Mobile Hub プロジェクトの作成

$ awsmobile init

Please tell us about your project:
? Where is your project's source directory:  /
? Where is your project's distribution directory that stores build artifacts:  build
? What is your project's build command:  npm run-script build
? What is your project's start command for local test run:  npm run-script start

? What awsmobile project name would you like to use:  awsmobile

Successfully created AWS Mobile Hub project: awsmobile

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud

Success! your project is now initialized with awsmobilejs

   awsmobilejs/.awsmobile
     is the workspace of awsmobile-cli, please do not modify its contents

   awsmobilejs/#current-backend-info
     contains information of the backend awsmobile project from the last
     synchronization with the cloud

   awsmobilejs/backend
     is where you develop the codebase of the backend awsmobile project

   awsmobile console
     opens the web console of the backend awsmobile project

   awsmobile run
     pushes the latest development of the backend awsmobile project to the cloud,
     and runs the frontend application locally

   awsmobile publish
     pushes the latest development of the backend awsmobile project to the cloud,
     and publishes the frontend application to aws S3 for hosting

Happy coding with awsmobile!

aws console で確認すると、指定した名前awsmobileでプロジェクトが作成されます。

  • 今回はマニュアル通り cli にて作成しましたが、aws console 上で作成して awsmobile init することもできるようです。

バックエンドとの接続設定

react-native プロジェクトを AWS Mobile Hub に接続するよう設定します。

AWS Amplify for React Nativer ライブラリをインストール

npm install --save aws-amplify-react-native

公式のGet Started にあるように App.js に下記のコードを追加

  • YOUR-PATH-TO/ は適当に置き換える必要がありました。
import Amplify from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

修正した App.js のコード


/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import Amplify from 'aws-amplify-react-native';

import aws_exports from './aws-exports';

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Amplify.configure(aws_exports);

実行してみます。公式にはnpm run ios とありますが、下記で動作させました。

react-native run-ios

実行結果

スクリーンショット 2018-01-08 11.26.56.png

まだ、react-nativeのサンプル画面と特に変わりはありません。

認証連携

今回はAWS Console から設定しました。
コンソール上で、 User Sing-in をクリックして設定します。
Eamil and Passwordを設定し、Sing-in必須としました。

スクリーンショット 2018-01-08 11.37.10.png

設定を取り込むため、awsmobile pull コマンドを実行します。

$ awsmobile pull

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud
? sync corresponding contents in backend/ with #current-backend-info/ Yes

amazon-cognito-identity-js モジュールのリンク設定

react-native link amazon-cognito-identity-js

App.js に認証モジュールを組み込みます。

import 文の追加

import { withAuthenticator } from 'aws-amplify-react-native';

最終行に export を設定

export default withAuthenticator(App);

App の定義で export default を外す。

class App extends Component<{}> {

実行結果

react-native run-ios

スクリーンショット 2018-01-08 11.41.20.png

Sing In ページが表示されました。

sing up を行い、送信メールのパスコードを入力します。

スクリーンショット 2018-01-08 11.53.08.png

スクリーンショット 2018-01-08 11.44.45.png

無事ログインできるようになりました。

スクリーンショット 2018-01-08 11.54.18.png

次は Cloud Logic を追加して見たいと思います。

参考

AWS公式ドキュメント

https://docs.aws.amazon.com/aws-mobile/latest/developerguide/aws-mobile-react-native.html?shortFooter=true

https://github.com/aws/aws-amplify

https://api.wp-kyoto.net/try-aws-amplify-for-react-project/

続きを読む

Amazon Linux(EC2)上にRedashをセットアップする

公式のAMIだとUbuntu系なのと
できればAmazon Linuxで保守メンテしたいと思っていたので公式のsetupスクリプトを参考にセットアップしてみた。

cf. 公式でDeprecatedになってるセットアップのバッシュファイル
https://github.com/getredash/redash/blob/master/setup/amazon_linux/bootstrap.sh

EC2の初期セットアップ

EC2の初期セットアップはこちらから。
https://qiita.com/kazupyong/items/8d05c8421db37dcf06c9

公式からソースコードをDLする

https://github.com/getredash/redash/tree/v3.0.0
2018/01/01時点での最新安定バージョンは3.0.0+b3134でした。
(最近までタグが切られてなかった気が、、、)

cd /opt/redash
wget https://github.com/getredash/redash/archive/v3.0.0.zip
unzip v2.0.1.zip
ln -s redash-2.0.1 current
cd current

必要なライブラリのインストール

上のスクリプトを参考に各種必要なライブラリとかをセットアップする。

sudo yum update
sudo yum upgrade
sudo yum install -y python-pip python-dev nginx curl build-essential pwgen  libffi-dev libssl-dev libmysqlclient-dev libpq-dev freetds-dev libsasl2-dev xmlsec1 postgresql redis-server
sudo yum install gcc librdkafka1 librdkafka-devel cyrus-sasl-devel

envファイルを設置

設定の参考スクリプトは公式のUbuntuのセットアップスクリプトから持ってくる。

cd
wget https://raw.githubusercontent.com/getredash/redash/master/setup/ubuntu/files/env
ln -s env current/.env
COOKIE_SECRET=$(mkpasswd -l 32 -s 0)
echo "export REDASH_COOKIE_SECRET=$COOKIE_SECRET" >> env
export REDASH_NAME="Redash"
export REDASH_STATIC_ASSETS_PATH="../rd_ui/dist/"
export REDASH_LOG_LEVEL="INFO"
export REDASH_REDIS_URL=redis://localhost:6379/0
export REDASH_DATABASE_URL="postgresql:///redash"

設定値一覧はこちらを参考に
cf. https://qiita.com/kyoshidajp/items/3528e3cd470eafef6edf

pip update

pipをアップデートでして依存ライブラリをインストール。
ビルドには少し時間がかかる。

sudo /usr/local/bin/pip install --upgrade pip
sudo /usr/local/bin/pip install -r ./requirements.txt
sudo /usr/local/bin/pip install -r ./requirements_all_ds.txt

postgresql setup

postgresqlをインストール。
Redash内部ではpostgresqlを使っている。

sudo -u postgres createuser redash --no-superuser --no-createdb --no-createrole
sudo -u postgres createdb redash --owner=redash

初期のDBをセットアップ

cd /opt/redash/current
sudo -u redash bin/run ./manage.py database create_tables

setup supervisord

Redashはsupervisord経由で動いているのでインストールしてセットアップする。
詳し説明は以下に書いてあります。
https://qiita.com/kazupyong/items/d576b95ab9c7e3800b30

npm 設定

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
nvm install v6.11
nvm use 6.11
nvm alias default 6.11
cd current/
npm install
npm run build

nginx 設定

sudo yum install nginx
sudo chkconfig nginx on
wget https://raw.githubusercontent.com/getredash/redash/master/setup/ubuntu/files/nginx_redash_site
sudo mv nginx_redash_site /etc/nginx/conf.d/redash.conf

Google Developer作成

https://console.developers.google.com/apis/library
Google+ APIでOAuth2の認証作成
Client ID XXXX
Secret   XXXX
# 上で取得した値を.envファイルに追記する
export REDASH_GOOGLE_CLIENT_ID="HOGEHOGE"
export REDASH_GOOGLE_CLIENT_SECRET="HOGEHOGE"

これで一通り最低限は動くはずです。

参考にしたサイト

http://help.redash.io/
https://qiita.com/kyoshidajp/items/3528e3cd470eafef6edf

続きを読む

AWS SAMとServerless Frameworkを比較してみた

この記事はServerless Advent Calendar 2017 23日目の記事です。

最近Serverless Frameworkを使っていたのですが、先輩に「今の時代はAWS SAMだぞ」と言われ、気になったので比べてみました。

Serveless Frameworkの特徴

デプロイしやすい・速い

まずこれが一番の特徴ですね。
下記の例みたいにたったコマンド2つですぐ動かせるサーバーレスアプリケーションが出来上がります。

$ serverless create --template hello-world
$ serverless deploy

もし↑と同じことSAMでやろうとした場合:

  • リリースステージ用のバケットの作成
  • Lambda関数のコーディング
  • 設定ファイルを書く
  • Lambda関数のzip化
  • Cloudformationによるパッケージング

これらの作業を全て自分でやらなければなりません。
Serverless Frameworkを使うとこういったデプロイ前の準備作業をよしなにやってくれますね。

まぁスクリプトやらCIでそこは解決できるとは思いますが、そもそもそこに時間や手間をかけずに自分のアプリケーションだけに集中したい人であれば、Serverless Frameworkの方が圧倒的に使い勝手が良いのではないでしょうか。

連携可能なサービスが豊富

Serverless FrameworkはAWSだけでなく、Azure FunctionsやGoogle Cloud Functionsなど他社のクラウドサービスでも利用できます。
もちろんそれぞれのサービスの仕様や特性をある程度把握した上で利用するべきですが、Serverless Frameworkから利用する部分に関してはほぼ変わりません。
特にデプロイはどのサービスも同じコマンドでできます。

$ serverless deploy

様々なプラグインが利用できる

Serverless Frameworkは使い勝手がとても良いのですが、もちろんまだ足りない部分や痒い所に手が届かないときもあったりします。そういう時はプラグインで補ったりすることができます。
例えば、デプロイしたファンクション毎にDead letter queueをserverless-plugin-lambda-dead-letterで設定できたり、Serverless Frameworkの定義ファイル内でStep Functionsの設定を可能にするserverless-step-functionsなどがあります。
Serverless Frameworkのコミュニティ自体が大きいので、様々なプラグインが多数みつかるのも良い点だと思います。

AWS Serverless Application Modelの特徴

AWS関連サービスとの親和性が高い

Cloud Formationを拡張したサービスなので当たり前かもしれませんが、AWSリソースとの連携がしやすい印象でした。
もしすでにCloud Formationを使ってきた方であればあまり不自由なくSAM利用できるでしょう。

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Resources:
  PutFunction:
    Type: AWS::Serverless::Function
    Properties:
      Handler: index.handler
      Runtime: nodejs6.10

このように通常のCloudFormationのテンプレートに Transform: AWS::Serverless-2016-10-31 と1行追加すれば、SAMのテンプレートフォーマットを利用することができます。

ローカル環境でのテストが可能

事前にDockerのインストールが必要になりますが、AWS SAM Localをインストールすればローカル環境でのファンクションのテストが可能になります。

$ npm install -g aws-sam-local

以下のように実行したいファンクション名と渡したいリクエストのボディをjsonで指定するとテストが可能になります。

$ sam local invoke "FunctionName" -e event.json

また、Lambdaを起動するイベントのペイロードもエミュレートできます、以下が対象サービスです:

  • S3
  • Kinesis
  • DynamoDB
  • Cloudwatch Scheduled Event
  • Cloudtrail
  • API Gateway

生成したイベントのペイロードをローカルで起動するファンクションに以下のようにパイプラインで渡すことができます。

$ sam local generate-event s3 --bucket bucket-name --key xxxxx | sam local invoke "FunctionName" 

※ Serveless Frameworkもserverless-dynamodb-localserverless-offlineというプラグインをインストールすればローカルでのテストも可能ですが、独自の設定が必要な上Node.js限定という欠点があります。

まとめ

すこしサクッとさわってみて比べた印象ですが、今後他のクラウドサービスに切り替えたいかもしれない時やとにかくスピード重視でアプリケーションを動かしたいのであればServerless Frameworkがいいと思います。
もしアプリケーションをAWSのサービス中心で構成し、それなりに長く運用していくのであればAWS SAMが適しているかもしれません。
ただ、「アプリケーションを素早く本番運用できる状態にし、またサーバーやそれに関連するサービスの運用にかける時間をアプリケーションのコーディングに割り当てることを可能とし、ユーザーにより価値のあるサービスを提供する」といったサーバレスの思想に一番近いのはServerless Frameworkではないでしょうか。

続きを読む