かんたんLINE botをつくろう！【ノーコード編】

RUNTEQイベント「かんたんLINE botをつくろう！」の配布用ドキュメントです。
いちおう、この通りに作業してもらえればLINE botが簡単に動かせるものです。

最初に、[【個人開発】通勤時にQiitaのトレンド記事が届くLINE Botを開発した #Ruby - Qiita](https://qiita.com/KNR109/items/e1b5ebd94393441fff74)
こちらの記事を大きく参考にさせていただきました。ありがとうございます。

# 全体の流れ

1. LINE botをつくろう！ノーコード編
2. LINE botをつくろう！Rails編
3. あれって、何してたの？会（イベント内のみで、2次会的に開催）

こんな感じで進行していこうと思います！
「かんたん」がテーマなので、とりあえず「こいつ・・・動くぞッ！！」を目指します。

「何をしているのか」については興味ある人のみ、2次会で説明できたらと思います。
考えながら作るより、完成品を見ながら説明する方が楽ですし、理解しやすいはず。
完成品があれば、あとで調べることもできますしね。
<br>

それでは・・・
<font color="LimeGreen" size=5>「かんたん」「楽しい」LINE botの旅へGO！！</font>

# 1. LINE botをつくろう！ノーコード編

## やること

- LINE Developerアカウントの作成
- プロバイダーの作成
- チャネル（LINE bot）作成
- LINE botを友達追加
- LINE botをノーコードでカスタマイズしよう

## 1-1. LINE Developerアカウントの作成

[LINE Developers](https://developers.line.biz/ja/) こちらのサイトにアクセスし、
右上「コンソールにログイン」をクリック


![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/688edb8e-e62c-d0a1-41e0-190f697200c0.png)

LINE Developerアカウントを持っている人はログイン

LINE Developerアカウントを持っていない人がほとんどだと思うので、
「アカウントを作成」からアカウントを作成
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8f48378d-79cf-2d96-0fa7-a94075438bc5.png)

「LINEアカウントで登録」がおすすめ
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/28fddccb-9458-0248-0f6e-24f6b3dc88fb.png)

## 1-2. プロバイダーの作成

<font color="LimeGreen">LINE Developerアカウントの作成ができました！LINE bot開発者の第一歩です。</font>

プロバイダーとは、「サービス提供者」のことです。

今後すべての命名に言えることですが、
**名前は公序良俗に反する内容でなければ、なんでもよいです。**
ちなみに、ユーザーから見える部分です。個人情報が嫌な人は避けましょう。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/39239407-d9e2-db6c-86a5-208b02097661.png)

## 1-3. チャネル（LINE bot）作成

<font color="LimeGreen">プロバイダーを作成できました！次は、いよいよbotを作成します。</font>

プロバイダーの作成後、以下のような画面になっていると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/a2327f56-21e4-7349-6939-201804abe91e.png)

もしくは以下のような画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/56ece235-ce9f-8f34-b8be-035b891c8d67.png)

もし、どちらの画面でもないときは、サイドバーからプロバイダーの画面に移動しましょう。
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/98d60ed8-7a79-7fe9-c538-36f5a5bfce0f.png)

それでは、LINE botを作成していきましょう。
LINE botは "Messaging API" というAPIを使用します。クリックしましょう。

「新規チャネル作成」⇒「Messaging API」でも同様の操作です。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/89335d46-8f12-ff50-17ea-3130bb88adb1.png)

新規チャネル作成画面になりましたね。
設定すべき部分は以下です。
- [ ] 「会社・事業者の所在国・地域」を「日本」に設定
- [ ] 「チャネル名」を設定（なんでもいい。`railsLineBot`など。）
- [ ] 「チャネル説明」を設定（`railsのLINE bot`など）
- [ ] 「大業種」を「ウェブサービス」に設定
- [ ] 「小業種」を「ウェブサービス（エンターテインメント）」に設定
- [ ] 「LINE公式アカウント利用規約 の内容に同意します」にチェック
- [ ] 「LINE公式アカウントAPI利用規約 の内容に同意します」にチェック

以上が完了したら、「作成」をクリックします。
同意を求める内容が出てきたら、同意します。

## 1-4. LINE botを友達追加

<font color="LimeGreen">LINE botを作成できました！さっそく友達追加しましょう！</font>

「Messaging API設定」をクリックすると、QRコードが出てくるはずです。
そのQRコードをLINEアプリで読み込み、友達追加しましょう。

なお、このQRコードを見せれば、だれでもbotを友達追加できます。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/671e637d-29f2-0c66-6561-e396d5a6f876.png)

## 1-5. LINE botをノーコードでカスタマイズしよう

<font color="LimeGreen">LINE botを友達追加できました！</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/89841acb-ad0d-f95f-b4df-ee9cfbc96c36.png)

さっそくメッセージを送ってみましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/4716ec5b-d734-8bc4-063a-1f4c243f4b67.png)

返信が来ました！
しかし、ちょっと寂しい返答です。カスタマイズしていきましょう。

先ほどの画面から、「チャネル基本設定」に戻ります。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/ecc23a3d-8a32-514e-42d1-eb944ce8fcf8.png)

「LINE Official Account Manager」をクリックします。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/d3a4df06-f14f-55db-dbdb-5fd9e1a8b5e3.png)

サイドバーから「応答設定」をクリックします。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/c48ed941-b4d2-b69e-a80e-1edeb3ff42ff.png)

「応答メッセージの設定画面を開く」をクリックします。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/91fd1e23-977d-b5d8-3273-0f59c693cc58.png)

「作成」をクリックします。

![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/8433bdeb-7ed5-7ce1-d6e1-f748cc6783aa.png)


- [ ] 「タイトル」を入力します（なんでもいいです）
- [ ] 「キーワードを入力」に「テスト」と入力し、「追加」を押します
（キーワードはなんでもいいですが、今回は「テスト」にします。）
- [ ] 「メッセージ設定」の「テキストを入力」に「テスト成功！」と入力します
（テキストはなんでもいいですが、今回は「テスト成功！」にします。）

完成サンプルは以下です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/60259a1f-9dd8-d290-116a-c74f0e6dc5d1.png)

ここまでできたら、「利用開始」を押しましょう。

### もういちど、メッセージを送ってみよう

「テスト」と送信してみましょう！
「テスト成功！」と返ってくれば成功です！
<font color="LimeGreen">これであなたも、LINE bot開発者！🤗</font>

うまくいかない方は、「テスト」がカタカナであることを確認してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/ce3f32b0-40b5-8d11-ff99-708b6e8cd0bd.png)

LINE bot開発者であるあなたは、先ほどの「メッセージ設定」を変更して遊ぶことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/30c9249f-889c-fb98-8a27-113004fd1c28.png)

- 「テスト成功！」のテキストを変えてみたり
- 複数の応答設定を作ってみたり
- 「スタンプ」を返信するようにしたり

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/b7c363e5-6148-5932-1d65-07d801180983.png)


# おわりに

おつかれさまでした！

LINE bot開発者になれましたね！🎉🎉🎉

さらにやる気のある人は、アドバンス編（Rails編）に進みましょう！

https://qiita.com/kohki_takatama/items/278b1f47e355e08df43a