【LINE bot】リッチメニューを使ったカウントbot

##はじめに

- Line bot勉強会の資料です。
- このスライドでは環境構築を目的としています。
- [おみくじ](https://qiita.com/4geru/private/438a2dfcaf9eea4bdbb5)の続きから作成します。

---
## LINE bot勉強会の流れ
|流れ|step1|<font color="red">step2</font>|step3|
|:--:|:--:|:--:|:--:|
|機能|[おみくじbot](https://qiita.com/4geru/items/438a2dfcaf9eea4bdbb5)|<strong>[カウントbot](https://qiita.com/4geru/items/ef59098cec4708a6b7a3)</strong>|[最寄駅検索bot](https://qiita.com/4geru/items/30fa69c65e9fcdd12108)|
|学ぶこと|LINE botの作り方|DB・リッチニュー|ボタンアクション・URIスキーマ・外部API|

その他TIPS

- [可愛くするために](https://qiita.com/4geru/items/398a38c89cf01bb8f151)
 - スタンプの使い方
 - 絵文字の使い方

---
##今回学ぶこと
1. DBの作成
2. リッチメニューについて

---
##DBの作成
---
###DBに必要なパッケージを入れる
GemfileにDB関連のパッケージを追加する

```ruby:Gemfile

gem "activerecord", "< 5.0.0"
gem "sinatra-activerecord"
gem 'sqlite3', group: :development
gem 'pg', '~> 0.19.0', group: :production

```
---
##Rakefileを書く
rubyのコマンドを記述するファイル

```shell
touch Rakefile
```

```ruby:Rakefile
require 'sinatra/activerecord'
require 'sinatra/activerecord/rake'
require './models.rb'
```

---
###migrateファイルを書く
```shell
$ bundle exec rake db:create_migration NAME=create_counts
```

```ruby:db/migrate/....._create_counts.rb
class CreateCounts < ActiveRecord::Migration
  def change
    create_table :counts do |t|
      t.integer :number
      t.timestamps null: false
    end
  end
end
```

---
###models.rbを作る

```shell
$ touch models.rb
```

```ruby:models.rb
ActiveRecord::Base.establish_connection(ENV['DATABASE_URL']||"sqlite3:db/development.db")

class Count < ActiveRecord::Base

end
```

---
###migrateファイルを反映
```
$ bundle exec rake db:migrate
== ....... CreateCounts: migrating =====================================
-- create_table(:counts)
   -> 0.0011s
== ....... CreateCounts: migrated (0.0012s) ============================
```

---
###app.rbに反映する

```
require 'bundler/setup'
Bundler.require
require 'line/bot'
require './models'
```

---
###gitignoreの追加
- .gitignoreを追加します。

```shell
$ touch .gitignore
```
```:.gitignore
db/development.db
db/schema.rb
```

---
###ここまでのチェック
rubyの動的実行を行います
Countが新しくできることを確認します。

```shell
$ irb 
2.3.0 :001 > require './app'
 => true 
2.3.0 :002 > Count.new
 => #<Count id: nil, number: nil, created_at: nil, updated_at: nil> 
```

---
###Countの初期化
app.rbにCountがない場合に新たなカラムを追加します。

```ruby:app.rb
before do
  if Count.all.empty?
    Count.create(number: 0)
  end
end
```

---
## herokuの設定

```shell
$ heroku addons:create heroku-postgresql
$ heroku run rake db:migrate
```

---
##カウントアップしよう！
カウントアップのメッセージを受け取った時に数をあげます

```ruby:app.rb
if event.message['text'] =~ /おみくじ/
  message[:text] = ["大吉", "中吉", "小吉", "凶", "大凶"].shuffle.first
elsif event.message['text'] =~ /カウントアップ/
  c = Count.first.number + 1
  Count.first.update(number: c)
  message[:text] = "カウントアップ > 数は#{c}だよ"
end
```

---
###カウントアップ解説1
Countデータベースの一番初めの要素のnumberを取得し1足します。

```ruby:app.rb
c = Count.first.number + 1
```
---
###カウントアップ解説2
Countの最初の要素のデータを更新します。
データベースの操作は[ActiveRecord](https://railsguides.jp/active_record_basics.html)は、Railsでも同様の物を使っています。updateの他にも様々な操作があるので見て見ましょう

```ruby:app.rb
Count.first.update(number: c)
```
---
###カウントアップ解説3
変数は""の中で#{}で囲むことにより文字列の中で表現できます。

```ruby:app.rb
message[:text] = "数は#{c}だよ"
```
---
###同様にカウントダウンを作ります。
---
## リッチメニューの導入
- LINEにはリッチメニューというボタンを押したらアクションを起こしてくれる機能があります。
- リッチメニューはプログラミングをしなくても使えるため非常に便利です。
- [LINE@MANAGER](https://admin-official.line.me/)から設定できます。
- アカウント一覧 > bot名 > リッチコンテンツ をクリックします。

---
### リッチメニューの設定
リッチメニューの設定は次の様にしてください。
テンプレートの画像タイプは6です。
<img width="949" alt="スクリーンショット 2018-03-18 18.38.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/64677/730940d2-09ac-6abd-12a3-2431e7d5624f.png">

---
###画像の設定
1. [URL](https://qiita-image-store.s3.amazonaws.com/0/64677/5c4bfb37-66e2-d17c-b288-d575c65e4ac7.jpeg)から画像をダウンロードしてアプロードします。
2. ボタンを押すとテキストで「カウントアップ」「カウントダウン」を送信できる様にします。
<img width="956" alt="スクリーンショット 2018-03-18 18.38.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/64677/ada2d31d-46b8-d03a-659b-6c38c478b122.png">

--- 
###リッチメニュー完成
カウントアップの隣にデフォルのとメニューが残っています。次にメニューを消します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/64677/f2281b0a-a198-89be-defe-661925318dd6.jpeg" width="200px">

---
###メニューを削除する
LINE@MANAGERのbot名から アカウント設定 > 基本設定 > アカウントページメニューを非表示にします。
<img width="767" alt="スクリーンショット 2018-03-18 18.50.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/64677/c4474a06-edf8-7832-dde6-a29433686159.png">

---
## まとめ
- データベースを使って数を保存する機能を実装した。
- リッチメニューを使って操作を行える様にした。