LINE BOOT AWARDS 2018 に応募しました

はじめに

本記事は、LINE BOOT AWARDS 2018に応募した下記エントリーの技術解説ページです。

https://www.line-community.me/awards/workdetail/5bb361c24016908c8d8e94ba

今回「鎌倉ごみ調べ」という作品名でBotを作成しました。

ごみの分類、出し方は住む地域によって大きく変わるため、トラブルになりやすく自治体の方も困っているのでないかと想像しました。

この問題を和らげるために、住民が手軽にごみの情報を手に入れられるBotがあれば便利かも、と思ったのが今回のきっかけです。

それと個人的な理由として、自分が家のごみ当番なので(朝、家を出る時にごみを集積所に置くだけですが…)、毎朝、今日出すごみの種別がLineのプッシュ通知で来たら楽かも、というのもありました。

鎌倉市には「ごみバスターズ」というアプリがあり、ゲーム性もあってとても使いやすかったです。
なので、作品を作る上で以下の2点を考慮して作ってみました。

1. 今のアプリにない機能
2. Botならではの機能

システム関連図

f:id:e-craftsman:20181020205942p:plain:w600

環境

  • Heroku(Postgres含む)
  • GitHub

サービス

機能

1. 位置情報

1.1 地域登録

携帯の位置情報を送ることで、ごみの地域として登録することができます。(鎌倉市のみ)

f:id:e-craftsman:20181011212253p:plain

苦労した点

送られてくる位置情報に住所が含まれているため、最初は住所からごみの地域を特定してDBに登録していました。
毎回、パターン1の形式でデータが来ればがいいのですが、パターン2の場合があることが判明し、対応を変更。
位置情報に含まれている緯度経度をGoogle Maps APIに投げて、取得した住所からごみ地域を特定し、DBに登録するようにしました。

>パターン1 (日本、郵便番号 神奈川県鎌倉市...)
f:id:e-craftsman:20181011212958p:plain

>パターン2 (大船XX-XX-XX 鎌倉市, 神奈川県 郵便番号 日本)
f:id:e-craftsman:20181011213102p:plain

1.2 スケジュール確認

送った位置情報のごみスケジュールを教えてくれます。
鎌倉市山崎の場合は、うぐいす山とそれ以外でスケジュールが異なるためどちらか選んでもらいます。
f:id:e-craftsman:20181011215749p:plain

>「いいえ」を選んだ場合
f:id:e-craftsman:20181011215754p:plain

1.3 指定ごみ袋取扱店

位置情報に最も近い店舗Top5を教えてくれます。
測地線航海算法を使用して距離を算出して、近い方から並べています。

f:id:e-craftsman:20181011220033p:plain

2. 画像認識

写真を送ると物体を認識して、ごみの種類と捨てる曜日を教えてくれます。(登録地域がない場合は、ごみの種類のみ)
IBM Visual Recognitionに画像を投げて、物体検出結果を日本語で取得。
スコア(合っている確率)が一定以上の単語をDBで検索し、ごみの情報を返します。

f:id:e-craftsman:20181011222422p:plain

f:id:e-craftsman:20181011222427p:plain

苦労した点

はじめは、AWSAmazon Rekognitionで物体検出を行っていましたが、結果が英語で返ってくるためGoogle Translation APIで日本語に変換していました。
英単語を翻訳させると様々な日本訳が返ってくるため、折角の物体検出結果がブレてしまい精度があまり良くありませんでした。
そこで、物体検出結果を日本語で返してくれるIBM Visual Recognitionを使うことに。
翻訳の揺れがなくなり精度も随分上がりました。
因みにIBM Visual Recognitionから物体の色も返ってきますが、色は無視するようにしています。

3. テキスト

3.1 曜日または昨日/一昨日/今日/明日/明後日

文章から、質問された曜日または日にちのごみの種類を返します。
テキストが来たらまずLuisに投げます。
Luisには文章とキーワード(曜日または一昨年/昨日/今日/明日/明後日)を事前に登録しておき、投げたテキストに何のキーワードが含まれているか結果を返してもらいます。
キーワードがあれば、その日のごみの種類をDBから取得して返します。

f:id:e-craftsman:20181011224732p:plain

3.2 スケジュール

Luisに文章を投げて、スケジュールに関する質問だったらごみのスケジュールを返します。

f:id:e-craftsman:20181011224752p:plain

3.3 ごみに出すモノの名前

Luisに引っかからなかった場合、テキストをgooひらがな化APIで、ひらがなとカタカナに変換します。
「送られて来たテキスト」、「ひらがな」、「カタカナ」、3つをDBで検索して何れかに該当するごみ情報を返します。

f:id:e-craftsman:20181011224816p:plain

心残り

時間があれば、ごみに出すモノの名前もLuisを使って文章から抽出できればよかったです。
もっとチャットBotらしく会話している感が増したかもしれません。。

4. スタンプ

完全なお遊びですが、スタンプを送るとブラウンのスタンプがランダムで返ってきます。

f:id:e-craftsman:20181011222604p:plain

5. プッシュ通知

5.1 アラーム

毎日、決まった時間に今日出すごみを教えてくれます。
f:id:e-craftsman:20181011215534p:plain

事前に設定した時間に、登録地域の今日のごみを調べてプッシュ通知しています。
f:id:e-craftsman:20181011215549p:plain

5.2 お知らせ機能

ブラウザからプッシュ通知の設定ができる機能です。(レスポンシブ対応)
時間とメッセージを登録すると、地域を登録している利用者全員にメッセージを送ることができます。
台風や大雪など自然災害時のごみ出しのお知らせ、年末年始/GW/お盆などの休みの日の連絡等が可能です。

f:id:e-craftsman:20181020215207p:plain:w600
メッセージには絵文字も登録できるようにしてみました。
f:id:e-craftsman:20181020215213p:plain:w600
f:id:e-craftsman:20181020215218p:plain:w600
指定の時間にプッシュ通知がきます。
f:id:e-craftsman:20181020215530p:plain:w250

最後に

前述した考慮した点ですが、まあまあ実現できたのかなと思っています。

1. 今のアプリにない機能
位置情報からごみのスケジュールやごみ袋取扱店を教えてくれる。
写真を送ったらごみの種類の候補を教えてくれる。

2. Botならではの機能
質問したら曜日や日にちのごみの種類を教えてくれる。
プッシュ通知で今日出すごみを教えてくれる。
指定した時間にプッシュ通知を送れる。


LineのMessage APIを使ってみて、簡単にいろんなメッセージが作れるので時間も忘れてもくもくコーディングができました。
DBに入れるデータを作るのが思った以上に大変で苦労しましたが、たくさんデータを入れたおかげで機能たっぷりのBotになったと思います。

長文となってしまいましたが、最後まで読んでいただきまして、ありがとうございました。

AWSにEC-CUBEの環境構築してみた

前回(↓)、MacEC-CUBEの開発環境を作ってみて、AWS上にもサクッと作れそうなのでやってみました。

e-craftsman.hatenablog.com

利用するAWSサービス

EC2
ELB(ALB)
RDS(postgres)
ACM
Route53

EC2

インスタンスの作成と初期設定

Amazon Linuxインスタンスを作成し、sshで接続して最低限のところだけ設定。

以下のサイトを参考にさせてもらいました。
AWSのEC2で行うAmazon Linuxの初期設定

ミドルウェアのインストール

次に必要なミドルウェアをインストール。

$ sudo yum install httpd24 php71 php71-pgsql php71-phar php71-mbstring php71-zlib php71-ctype php71-session php71-json php71-xml php71-libxml php71-openssl php71-zip php71-curl php71-fileinfo php71-mcrypt  php71-pecl-apc

システム要件はこちら→ システム要件 | EC-CUBE 開発ドキュメント

phpの設定

/etc/php.iniを編集

date.timezone = Asia/Tokyo
EC-CUBEのダウンロード
$ mkdir /eccube

$ cd /eccube

$ sudo wget http://downloads.ec-cube.net/src/eccube-3.0.16.zip

$ sudo unzip eccube-3.0.16.zip

/eccube/eccube-3.0.16/html/.htaccessの一番下に下記追加。

SetEnvIf X-Forwarded-Proto https HTTPS=on
Apacheの設定と開始
$ sudo chkconfig httpd on

/etc/httpd/conf/https.confを編集。
DocumentRootとDirectoryにEC-CUBEのpathを設定し、AllowOverrideをAllにしています。

# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/eccube/eccube-3.0.16/html"

#
# Relax access to content within /eccube/eccube-3.0.16/.
#
<Directory "/eccube/eccube-3.0.16">
(中略)
# Further relax access to the default document root:
<Directory "/eccube/eccube-3.0.16/html">
(中略)
#
# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
#   Options FileInfo AuthConfig Limit
#
    AllowOverride All

Apache起動。

$ sudo service http start
ELBヘルスチェック用html作成
$ sudo touch /eccube/eccube-3.0.16/html/elb_check.html

RDS

postgresインスタンスを作成。
データベース名は「eccube」。

Route53

ドメインを取得し、サブドメイン「www」でAレコードを登録。
このとき、固定IPを設定します。
ELBを作成したら、Aliasの設定でELBを指定するよう変更してください。

ACM

サーバ証明書を作成。
Route53で作成したサブドメイン「www」を設定。
表示されるCレコードをRoute53に登録すれば、OKです。

ELB

ALBを選択。
HTTPSを選び、ACMで作成した証明書を指定します。
ターゲットに、EC2インスタンスを設定。
ヘルスチェックのパスを「/elb_check.html」にします。

セキュリティグループ

EC2、ELB、RDSそれぞれのセキュリティグループを作成して、それぞれに設定し直します。

EC-CUBEのインストール

ブラウザから下記にアクセスして、インストールが終われば完了です。
http://www.{ドメイン名}/install

MacでEC-CUBEをデバッグしてみた

仕事で関係のあるEC-CUBEを自分のMacでデバックしたくて、ググってみましたがあまり記事がなかったので備忘録も兼ねて載せておきます。

以下のサイトを参考にさせて頂きました。
WindowsのところをMacに変えただけです^^;

www.sdblog.info

環境

macOS 10.13 High Sierra
Eclipse 4.7 Oxygen
XAMPP 7.0.8
EC-CUBE 3.0.16

1. XAMPPインストール

XAMPP for Mac をダウンロードしてインストール。

https://www.apachefriends.org/jp/download.html

注意)
XAMPPの最新バージョンはVM上で動いているため、デフォルトのままではApacheからローカルディレクトリにアクセスできません。
(あとで、https.confのDocumentRootにローカルディレクトリを指定します)
本記事ではVMではないバージョンを選んでいます。

uzulla.hateblo.jp

2. Eclipseインストール

PleiadesPHP版をダウンロードしてインストール。

http://mergedoc.osdn.jp

3. EC-CUBEダウンロード

最新版をダウンロード。

https://www.ec-cube.net/download/

4. 環境設定

eclipse

eclipseを起動。
workspaceディレクトリを「/workspace」にします。(任意)
新規PHPプロジェクト「eccube」を作成。
このとき、プロジェクトディレクトリは「/workspace/eccube」になります。
上記、プロジェクトディレクトリに、3 でダウンロードしたEC-CUBEのデータをコピーします。

XAMPP

XAMPPを起動して「Start All」

Apache

/Applications/XAMPP/xamppfiles/etc/httpd.conf を編集します。

「DocumentRoot」と「Directory」のパスを「/workspace」に書き換えます。

PHP

/Applications/XAMPP/xamppfiles/etc/php.iniを編集します。

以下のコメントを外します。

extension_dir = "ext"
extension=php_mysql.dll
extension=php_mysqli.dll

以下、ファイルの最後に追記。

eaccelerator.shm_only="0"
[xdebug]
zend_extension="/Applications/XAMPP/xamppfiles/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host="127.0.0.1"
xdebug.remote_port="9000"
MySQL

ターミナルで接続。

$ /Applications/XAMPP/bin/mysql -u root

user、password、DBを作成。

> grant all privileges on eccube_db.* to eccube_db_user@localhost identified by ‘eccube_db_pass’;
> flush privileges;
> create database eccube_db character set utf8;
XAMPP

ここまで終わったら「Restart All」

EC-CUBE

ブラウザに下記を入力しEC-CUBEをインストール。

http://localhost/eccube/html/install/

[設定]
DBの種類:MySQL
DBサーバー:127.0.0.1
ポート:
DB名:eccube_db
DBユーザ:eccube_db_user
DBパスワード:eccube_db_pass
※上記以外は任意で大丈夫です。

デバッグ

eclipseエクスプローラから「eccube」右クリック。
[デバッグ] - [デバッグの構成]を開きます。
PHP Webアプリケーション」右クリック - [新規] 。
[サーバー]タブの[ファイル参照]からデバッグしたいファイルを選択します。
[デバッガー]タブの[構成]から[デバッガー] - [XDebug]を選びます。

設定完了後、「適用」ボタンを押してそのまま「デバッグ」を押すとデバッグが開始されます。

Java SE 8 SilverとGoldを取りました

少し前になりますが、2週間ほど自由な時間ができたので、Oracle認定Java資格を取得することにしました。無事に取得できたので、勉強方法をメモしておきます。

因みに自分のJava経験は以下の通りです。

今回のターゲットは…

それぞれの勉強方法を記載します。

Silver SE 8(Java SE 8 Programmer I)

10年以上前に(まだSunの時代)資格を取っていますが、さすがに覚えていないのでイチから勉強し直しました。

勉強した本はこちら。

徹底攻略 Java SE 8 Silver 問題集[1Z0-808]対応

徹底攻略 Java SE 8 Silver 問題集[1Z0-808]対応

取得者のブログをいくつか拝見し、おすすめの書籍としている方が多かったのでこれにしました。

内容を確認してサクサク解けそうだったので、モチベーションUpも考え、書籍購入日から4日後を試験日に設定して申し込みました。

書籍は11章構成になっています。
1日3章ペースで進め、試験当日は間違った箇所を解き直して、試験に臨みました。

勉強時間:14時間(4日)

結果:正解率 87%(合格ライン65%)

書籍と全く同じ問題もいくつか出てきたため、総仕上げ問題(10章、11章)で90%ぐらい取れていれば、余裕で受かると思います。
開発経験が2年ぐらいあれば、1週間の勉強で受かるのではないでしょうか。
因みに自分の場合、60分ほどで解き終わりました。

Gold SE 8(Java SE 8 Programmer II)

Silverを取得した次の日からGoldの勉強を開始しました。
勉強した本はこちら。

オラクル認定資格教科書 Javaプログラマ Gold SE 8 (EXAMPRESS)

オラクル認定資格教科書 Javaプログラマ Gold SE 8 (EXAMPRESS)

今回も自分を追い込むため、先に受験日を決め、10日後設定で試験を申し込みました。
この本は12の章と模擬試験の構成になっており、各章に説明テキストと問題が載っています。
1日2章ペースで読み進めましたが、ボリュームが多い章もあり1日1章になってしまう日もありました。
12章まで終わったら、付属チェックシートで理解度を確認。
不十分なところはサンプルコードを実際に動かしながら理解度Upを図りました。
(各章のテキストと問題のサンプルコードはWebからダウンロードできます)

勉強時間:36時間(10日)

結果:正解率 77%(合格ライン65%)

勉強した書籍はSilverの本と違って問題数が少なかったので、勉強する時間に余裕のある方は以下のいずれかを解いておくことをお勧めします。

徹底攻略 Java SE 8 Gold 問題集[1Z0-809]対応

徹底攻略 Java SE 8 Gold 問題集[1Z0-809]対応

オラクル認定資格教科書 Javaプログラマ Gold SE 8 スピードマスター問題集

オラクル認定資格教科書 Javaプログラマ Gold SE 8 スピードマスター問題集

自分の場合は、受験日まで時間もなかったので購入した本をしっかり理解することに努めました。
試験本番、テスト終了15分前に解き終わりましたが、残りの時間をレビューに使い、結局ギリギリまで席にいました。
ラムダ式とStream APIの問題は多めだったので、使い方はちゃんと覚えておいた方と思います。

2週間でGoldを取得するのは仕事をしてると難しいかもしれませんが、少しでも受験の参考になると嬉しいです。

AWS WorkMail - 自分のドメインでメール環境構築とMac/iPhoneメール設定まで

メールアドレスを自分のドメインにしたかったので、AWS でメール環境を簡単に作れないか調査しました。「WorkMail」を使うとサクッと作成できたのでメモしておきます。

Route 53 でドメイン登録

こちらは割愛します。情報たくさんありますので。。

WorkMail の設定

2018年2月現在、対応しているリージョンは3つしかありません。東京がないので、私はオレゴンにしました。

ここから手順です。

  1. [WorkMail] -> [Get started]
  2. [Quick setup] をクリック
  3. [Organization name] を入力し、 [Create] をクリック
  4. Organizations 画面 で [Status] が Active になったら、[Alias] を選択
  5. [Domains] -> [Add domain] をクリック
  6. [Domain name] を入力し、[Add domain] をクリック
  7. TXT レコード/MX レコード/CNAME レコードを [Route 53] に設定
  8. Domains 画面で 6 のドメインをチェックし、[Set as default] をクリック
  9. [Users] -> [Create user] をクリック
  10. [User name] と [Display name] を入力し、[Next Step] をクリック
  11. [Email Address] と [Password] を入力し、[Add user] をクリック

これだけで設定は終わりです。

[Organization settings] - [Web Application] にある URL にアクセスすれば、「WorkMail 」にログインでき、ブラウザ上でメールの送受信ができます。

Mac の設定

Macでメール管理したかったので設定しました。

  1. [メール] -> [アカウントを追加...]
  2. ExChange を選択し、[続ける] をクリック
  3. [メールアドレス] と [パスワード] を入力し、[サインイン] をクリック
iPhone の設定

iPhoneだと下記の手順になります。

  1. [設定] -> [アカウントとパスワード] -> [アカウントを追加]
  2. ExChange を選択
  3. [メール] を入力し、[次へ] をクリック
  4. ポップアップ「Microsoft で "ドメイン名" Exchangeアカウントにサインインしますか?」で [手動構成] を選択
  5. [パスワード] を入力し、[次へ] をクリック
  6. [サーバー] と [ドメイン] と [ユーザー名] を入力し、[次へ] をクリック
  7. 完了

サーバーはリージョンによって異なります。

リージョン サーバー
us-west-2 mobile.mail.us-west-2.awsapps.com
us-east-1 mobile.mail.us-east-1.awsapps.com
eu-west-1 mobile.mail.eu-west-1.awsapps.com