モテる男は LINE Notify を使って 2タップ で LINE を送信できるらしい



[Myuon Corp. Advent Calendar 2016](http://qiita.com/advent-calendar/2016/myuon) 2日目です。

---
[![モテる男は LINE Notify を使って 2タップ で LINE を送信できるらしい](https://qiita-image-store.s3.amazonaws.com/0/41522/ba78b444-f9e5-424e-ceae-a06c79cd206b.png)](https://www.youtube.com/watch?v=ySy7wNuF1SE)

# LINE Notify とは？
_[LINE Notify](https://notify-bot.line.me/ja/)_
![line-notify-official.png](https://qiita-image-store.s3.amazonaws.com/0/41522/33a6c24b-211d-9929-da4a-a34f72db7dbe.png "line-notify-official.png")

2016年9月29日、技術者向けカンファレンス「LINE DEVELOPER DAY 2016」にて、LINEと外部アプリケーションなどの通知連携サービス「LINE Notify」が発表された。[GitHub](https://notify-bot.line.me/github/repos/select)、[IFTTT](https://ifttt.com/line)、[Mackeral](https://mackerel.io/) などと連携ができる。

```
Webサービスからの通知をLINEで受信
Webサービスと連携すると、LINEが提供する公式アカウント"LINE Notify"から通知が届きます。
複数のサービスと連携でき、グループでも通知を受信することが可能です。
```
らしい。これをiOSから叩いてみようというのが今回試したいこと。
（基本的にはWebサービスから利用されることを想定しているのだろうか？）

# LINE Notify API Document を読んでみる
_[LINE Notify API Document](https://notify-bot.line.me/doc/ja/)_

### OAuth2
![line-auth.png](https://qiita-image-store.s3.amazonaws.com/0/41522/ee7a394a-0532-e7fe-7087-d9f2ead065c8.png "line-auth.png")
認証は [OAuth2](https://tools.ietf.org/html/rfc6749) 。


### API 全体の流れと、実装の必要な箇所について
![line-api-流れ.png](https://qiita-image-store.s3.amazonaws.com/0/41522/9529f602-9ffc-f0c4-91f9-93bfb725405a.png "line-api-流れ.png")

*「連携サービス」* の箇所を実装すれば良さそうだ。

### API の一覧

```
- 認証系
	- GET https: //notify-bot.line.me/oauth/authorize
	- POST https://notify-bot.line.me/oauth/token

- 通知系
	- POST https://notify-api.line.me/api/notify
	- GET https://notify-api.line.me/api/status
	- POST https://notify-api.line.me/api/revoke
```

APIは5つだけ。


# 早速やってみた

## アクター
- 自前iOSアプリ
- 自前作成のWebページ
- LINE側のWebページ

## 流れ
1. アプリ内のボタンをタップWebViewで上記で作成したページを表示（自前iOSアプリ）
2. Login with LINE リンクをタップ（自前作成のWebページ）
3. LINE のログイン画面が表示される（LINE側のWebページ）
4. 送信先グループトークを選択（LINE側のWebページ）[^1]
5. 指定したリダイレクトURLに access_token がセットされた形でリダイレクトされる（自前作成のWebページ）[^2]
6. 取得した access_token を使用してメッセージをポスト（自前iOSアプリ）

## 1. サービスの作成
まずはサービスを作って ClientId、ClientSecret を取得する
![register-line-service.png](https://qiita-image-store.s3.amazonaws.com/0/41522/c472155a-f28e-f6f0-589e-ae6fc35d75f3.png "register-line-service.png")

「今から帰ることを伝える」こんなのサービスを作った。（ _「Gome」_ の由来は _「Go home」_ をギュッと縮めたもの。笑わないでくださいね...）
![line-service-detail.png](https://qiita-image-store.s3.amazonaws.com/0/41522/0105d53a-6348-6681-1cf1-55b630fa0bed.png "line-service-detail.png")


### 2. とりあえず curl でメッセージを送信してみる
1. authorize API で code を取得
2. code を使用して token API を叩いて token 取得
3. notify API で メッセージを送信

```
$ curl -X POST -H 'Authorization: Bearer [access_token]' -F 'message=foobar' https://  
notify-api.line.me/api/notify
{"status":200,"message":"ok"}
```
おおお
![line-line-notify.png](https://qiita-image-store.s3.amazonaws.com/0/41522/7b58b7ca-7c54-21d8-83e2-6fdc6c6544ed.png "line-line-notify.png")


## 3. OAuth2 authorization endpoint へリダイレクトする HTML作成
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Welcom Gome</title>
  </head>
  <body>
    <h1>Welcom Gome</h1>
    <a href="https://notify-bot.line.me/oauth/authorize?response_type=code&client_id=[client_id]&redirect_uri=[redirect_uri]&scope=notify&state=[state]">Login with LINE</a>
  </body>
</html>
```
（ホスティング先はお手軽に [firebase](https://firebase.google.com) を使用した）

## 4. iOS アプリを作成
ソースコードはメインとなる ViewController.swift を gist にアップロードしました。ご参考まで。
https://gist.github.com/RyoAbe/1ceae86df6ec5fea10a81963a4905a42


# 完成したのがこちら
[![LINE Notify を iOS から使ってみる](https://qiita-image-store.s3.amazonaws.com/0/41522/ba218dfa-0476-8b1c-a162-06a246682a37.png)](https://www.youtube.com/watch?v=BeRsgEt0lHw)


# まとめ
手軽に通知ができて良いですね。今回作ったものは近日中に Apple に申請を出す予定。
次は LINE Bot 触ってみたい。

[^1]: 特定の誰かにポストできず、送信できるのは **グループトーク** と **LINE Notify ユーザ** のみです
    - そういう意味でやはりLINE側の意図してる利用用途ではないのかなと感じています（公式の説明にもWebサービスと連携して〜と書かれていましたし）
[^2]: AccessTokenの取得を若干特殊なことをしてます。（リダイレクト後のURLのGETパラメータをパースして...みたいな。やはりWebからやるものなのかな）

---
明日は、 @YasuakiNakazawa さんです。