herokuとPHPでオウム返しlinebotを作る(Windows10)

#目的
目的は，LINEでオウム返しをするBOTを作ること．
※当方はPHPを含め初心者であるため，内容についてのミス等あればぜひご指摘頂きたいです．

#作成したBOTとリポジトリ
こちらから友達追加ができます．
https://lin.ee/eNVEud5
![M.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/3ec1b4b4-ddb1-8f0a-7491-5c969d25d8d8.png)　　<a href="https://lin.ee/eNVEud5"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png" alt="友だち追加" height="50" border="0"></a>
Githubのリポジトリ：https://github.com/rintaro9147/linebot20200328

#準備
1. [heroku](https://jp.heroku.com/)の登録！
2. [LINE BOT](https://developers.line.biz/ja/services/messaging-api/)の登録！プロバイダーを作成し，Messaging APIのチャネルを作る．詳しくは後述．
3. phpとcomposerをインストール！（このへんは省略）
4. 正常にインストールできたか，バージョンの確認をする．

```
heroku -v
php -v
composer -v
```
composerは，ヘルプとともにでかでかとCOMPOSERと表示されます．

また，gitのアカウントは登録しているものとして進めます．

#オウム返しのphpの準備
アカウントを登録後，ubuntsuでログインします．コマンドを打つとブラウザに遷移するので，ログインボタンをポチる．

```
$ heroku login
```
次にherokuのアプリケーションを作ります．適当なアプリ名をつけてください．使えない場合，エラーとなるので，ほかのものを試してください．

```
heroku create <アプリ名>
Creating  <アプリ名>... done
https://<アプリ名>.herokuapp.com/ | https://git.heroku.com/<アプリ名>.git
```
以下のコマンドを順に打ってください．フォルダ，phpファイルを作成して，とりあえずデプロイしておきます．

```
$ mkdir linebot
$ cd linebot
$ touch index.php
$ git init
$ git commit -m "make it better"
$ git push heroku master
```
続いて，composerでLINE-BOT-SDKを導入していきます．

```
$ composer require linecorp/line-bot-sdk
```
これで`ls`コマンドを打つと，中にvenderファイルなどができると思います．

次はLINE BOTの設定です！こっちはそこまで難しくありません！

#LINE BOTの設定
[ここ](https://developers.line.biz/console/)からコンソール画面にアクセスし，作ったプロバイダとチャネルをクリックしていくと，この画面にたどり着きます．

![home.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/d3583913-8c9d-882e-1912-be9f3d6fa6dd.png)

###チャネルシークレットの発行
その画面の下のほうに，チャネルシークレットとあるので，横の発行ボタンを押して，テキストファイルか何かにコピペして控えておきましょう．

![channel_secret.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/29b6872c-7ffa-9a70-b57a-b661eb6aeb00.png)

###アクセストークンの発行
次に，「Messaging API設定」タブに移動し，一番下のチャネルアクセストークンを発行します．同様に控えましょう．

![channel_acces_token.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/b394d84f-904a-edd8-6047-24ceff23f26c.png)

###アカウント機能の編集
次に，すぐ上のアカウント機能の編集を行います．下2つのどちらかの編集をクリックします．

![kinou.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/b56f48e8-faf8-a8dc-b4dd-ebbf2f17d3c6.png)

そうしたら，以下のようにしてください．

![kinou2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/176b5b93-edb8-99cb-9e8a-0fc29fd7e603.png)

###Webhookの設定
最後にすぐうえにあるwebhook設定です．`https://<アプリ名>.herokuapp.com/index.php`と入力します．`index.php`の部分はなくても良し．webhookの利用をONにして，検証ボタンを押してください．成功と表示されたらOKです．

![webhook.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/4f7652bd-9efd-1547-4b24-2cb1d9d18b78.png)

そのページにあるQRで自分のスマホで友達追加をしておきましょう．
LINE側の設定は以上です．

#phpファイルの記述

```index.php
<?php
require_once __DIR__ . '/vendor/autoload.php';

$httpClient = new \LINE\LINEBot\HTTPClient\CurlHTTPClient(getenv('CHANNEL_ACCESS_TOKEN'));
$bot = new \LINE\LINEBot($httpClient, ['channelSecret' => getenv('CHANNEL_SECRET')]);
$sign = $_SERVER["HTTP_" . \LINE\LINEBot\Constant\HTTPHeader::LINE_SIGNATURE];
$events = $bot->parseEventRequest(file_get_contents('php://input'), $sign);

foreach ($events as $event) {
	if (!($event instanceof \LINE\LINEBot\Event\MessageEvent) ||
	    !($event instanceof \LINE\LINEBot\Event\MessageEvent\TextMessage)) {
	    continue;
	}
	$bot->replyText($event->getReplyToken(), $event->getText());
}
```
記述したら，前と同じ方法でデプロイしましょう．

#環境変数の設定
最後に控えておいたアクセストークンとアクセスシークレットの設定です．これをやらないとherokuとLINEがやり取りできません．cmdを開いて，以下のコマンドを入力してください．

```
$heroku config:set CHANNEL_ACCESS_TOKEN="控えたアクセストークンをコピペ" -a <アプリ名>
$heroku config:set CHANNEL_SECRET="控えたチャネルシークレット" -a <アプリ名>
$heroku config
```
最後のコマンドで正しく入力されたか確認してください．

#参考にした記事
　参考にしたQiita記事をここに記します．感謝いたします．

1. [Herokuにデプロイするまでに使うコマンド](https://qiita.com/morishima0524/items/cccb355649bc753e1d21)
2. [git push heroku master がエラーを吐く](https://qiita.com/shiroux/items/f0e1844ff3ef301d88b9)
3. [PHPで作成したLINEBOTをHerokuで動かしてみた](https://qiita.com/masaki-ogawa/items/2521d29c17eb8664cab8)

#結果
目的通り，オウム返しするbotを作ることができました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488221/05b086f1-2eb5-0ce7-cecf-16aa7cc1d4bb.jpeg" width="300">

#考察
- 最初だけオウム返しが遅い　→　解明中
- git add .をしたとき，`warning: LF will be replaced by CRLF in`がたくさん出た．→[ここ](https://normalblog.net/system/lf_replaced_crlf/)で解決した．ありがとうございます．
- 先にindex.phpの中身を書いてデプロイすると，webhookの検証でエラーがでる．→空もしくはhello worldくらいのphpファイルを先にデプロイして検証すると，上手くいった．そのあとにindex.phpの中身を書く．先に中身を書いてしまうことが問題なのではなく，今回たまたまであって，ほかに要因がありそう．

#最後に
初めてLINE BOTを作成したが，なんだかんだ作ることができてよかったです．また，Qiita記事も初めての投稿なので，また一つ経験ができたので，今後も書いていきたいと思います．重ねて記事に不備等があれば，編集リクエストお願いします．