LINEのLIFFv2とOAをほぼ素人が一日でつくってみた！

# LINEのLIFFとOA(オフィシャルアカウント)をどう作ってみたか
2019年にLIFFのv2がリリースされ、作ってみたいと思っていたが、やっとやろうと思いました！
そして、作成していたらOAと連動する流れがあり、おまけでOAも作りました！

## ぶっちゃけ感想
Webアプリを作ってリリース経験が無い私が挑みましたが、本当に簡単だし、これからちゃんとしたものを作ろうと思いました！

## 作成説明の流れ
1. 実際に公開済みのWebアプリを用意
2. Developers にログイン
3. プロバイダーを作成
4. 色々設定
5. WebアプリをLIFF用に色々変更
6. LIFF完成！
7. OAの作成！
8. OAのアドミン設定


### LIFFとOAの説明
#### [LIFF](https://developers.line.biz/ja/docs/liff/overview/) とは
> LINE Front-end Framework（LIFF）は、LINEが提供するウェブアプリのプラットフォームです。このプラットフォームで動作するウェブアプリを、LIFFアプリと呼びます。

#### [OA](https://www.linebiz.com/jp/service/line-account-connect/) とは
> LINE公式アカウントのこと

### 1. 実際に公開済みのWebアプリを用意
githubで後悔したWebアプリにします。

- 新しいリポジトリを作成
- index.htmlを作成(下のコードは参考までに)

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HAPPY NEW YEAR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <h1>HAPPY NEW YEAR</h1>
    <h2>LIFFtest's Page!</h2>
  </body>
  <script>
  </script>
</html>
```

- settingでGitHub Pagesをmaster branchにする
<img width="600" alt="setting.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/a17959a8-a118-f5d0-101c-04e9b276370e.png">
<img width="600" alt="スクリーンショット 2020-01-10 18.18.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/0d63937b-18ff-1705-84c6-1db7812aae8a.png">

- するとURLが発行される！
<img width="600" alt="スクリーンショット 2020-01-10 18.19.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/f960b987-b2ce-a798-eb02-9e0740ff4310.png">

- 公開されているか確認！

<img width="300" alt="スクリーンショット 2020-01-10 18.21.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/8ec04534-857c-a41b-4228-0b2f57f216c3.png">

- 公開されてました！
これでとりあえずLINEのアカウントの方に移動します！

### 2. Developers にログイン
- Developersにログインする！[こちらから](https://developers.line.biz/ja/?status=success)
<img width="600" alt="スクリーンショット 2020-01-10 17.53.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/19a6b911-1e0f-93af-181e-cd98f9b5970a.png">

- 「LINEアカウントからログイン」を選択
<img width="300" alt="スクリーンショット 2020-01-10 17.43.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/eac1a250-addd-c2e5-7aa6-d053a797141e.png">

### 3. プロバイダーを作成
- プロバイダーを作成
<img width="600" alt="スクリーンショット 2020-01-10 17.53.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/ff010126-f0e2-8f19-2815-7160d34e98a2.png">

- 「作成」ボタンを選択し、名前を入れ、下の作成ボタンを押す
<img width="600" alt="スクリーンショット 2020-01-10 17.54.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/0e62f5d5-b50c-203c-c7f3-941caf2f5e73.png">

- ファイルが作成されたらチャネルを選択（今回は左のLINEログインを選択）
<img width="600" alt="スクリーンショット 2020-01-10 17.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/320ba547-3d6d-39f1-fc15-f205e1e0cd01.png">

- 必要な内容を入力し、作成ボタンを押す（メールはフィクションです。自分のメールをちゃんと設定してください）
 ![make_provider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/0aef396b-e08b-bd44-680c-95223c2c604d.png)

- プロバイダー作成完了！


### 4. LIFFを作成する
- でも、まだLIFFではありません！
<img width="600" alt="スクリーンショット 2020-01-10 21.59.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/a8e9eb6a-fb03-6506-6336-6ca20fff8b2b.png">

- 「追加」を選択し設定をする(エンドポイントURLはgithubで最初に作成したURLを貼る)
![LIFF_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/ae3afd99-0404-fe94-b04e-940911963bf3.png)

- LIFFのURL作成された！！！
<img width="600" alt="スクリーンショット 2020-01-10 22.21.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/41aa8bc8-f84b-2ce1-eae2-72ed35e79085.png">

これをLINEのどこかのトークに送りそれをタップ！
できています！！
<img width="375" alt="IMG_5381.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/8c148a50-4c1c-afe9-3cd9-3984a2bbf03a.png">

### 5. WebアプリをLIFF用に色々変更
LIFFで色々できるらしいですが、LoginとgetProfileとsendMessageとcloseWindowをやってみます！
[こちら](https://developers.line.biz/ja/reference/liff/#initialize-liff-app)のAPIの説明をもとに作成した。

#### 0. SDKを設定

```
<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
```

#### 1. LIFF init(LIFF初期化) 2. Login(ウェブアプリ向けのLINEログインの処理)
liffIdはLIFF用に作成されたURLの最後の部分である

```
// <script>タブ内の話
liff.init({liffId}).then(() => {
　if (liff.isLoggedIn()) {
　}
　else{
　　liff.login();
　}
})
```


#### 3. getProfile(LOGINしてる人のLINE情報を取得)
ボタンを作成し、それが押されたら以下のfunctionが呼ばれるようにした。
以下では、ログインしてるユーザーの名前とプロフィール画像とステータスメッセージを取得する。
最後に、ボタンあたりのコードを載せるのでそちらで確認してください。

```
// <script>タブ内の話
function showProfile() {
      liff.getProfile()
      .then(profile => {
        const name = profile.displayName;
        const pic = profile.pictureUrl;
        const status = profile.statusMessage;
        console.log('name', name);
        console.log('pic', pic);
        console.log('status', status);
        Name.innerHTML = name;
        Status.innerHTML = status;
        Img.src = pic;
      })
      .catch((err) => {
        console.log('error', err);
      });
    }
```

#### 4. sendMessage(トークに自動でメッセージを送信)
LIFFからトークにメッセージを送信することができる。　
LIFF上にあるボタンを押したらメッセージが送られるように作成した。
以下は、タイプを指定し、送信する内容を指定すればOK.

```
// <script>タブ内の話
const text = "I sent test message!"
    function sendMessage() {
      liff.sendMessages(
        [{ type: "text", text}]
        ).then(function() {
            window.alert('Message sent');
        }).catch(function(error) {
            window.alert('Error sending message: ' + error);
        });
    }
```

#### 5. closeWindow(LIFFを閉じる)
こちらも、ボタンを押したらLIFFが閉じられる仕様にした。

```
// <script>タブ内の話
function closeWindow() {
      if (!liff.isInClient()) {
          sendAlertIfNotInClient();
      } else {
          liff.closeWindow();
      }
    }
```

#### すべてを含めたコード

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MINAKO TEST LIFF</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .btn {
        height: 40px;
        border: #DDD;
        box-shadow: 0 4px 4px #BBB;
      }
      .flex {
        margin-bottom: 10px;
        width: 100%;
        text-align:center;
      }
      .img {
        border-radius: 50%;
        width: 100px;
        height: 100px;
      }
      .h1 {
        text-align:center; 
        width: 100%;
      }
      .h2 {
        text-align:center;
        width: 100%;
      }
    </style>
    <!-- Load LIFF SDK -->
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
  </head>
  <body>
    <div class="flex">
      <h1>MINAKO TEST LIFF</h1>
      <h2>Welcome!</h2>
    </div>
    <div class="flex">
      <button class="btn" id="showProfile">showProfile</button>
      <button class="btn" id="sendMessage">sendMessage</button>
    </div>
    <div class="flex">
      <img id="profile_img" class="img" src=""/>
      <p id="profile_name"></p>
      <p id="profile_status"></p>
    </div>
    <div class="flex">
      <button class="btn" id="closeWindowButton">close</button>
    </div>
  </body>
  <script>
    // My LIFF ID
    const liffId = "1653746756-2Lrl3yld"
    // Text I want to send
    const text = "I sent test message!"
    // Containers displaying profile information
    const Name = document.getElementById('profile_name');
    const Img = document.getElementById("profile_img");
    const Status = document.getElementById("profile_status");

    // Callbacks being called after clicking the button
    function showProfile() {
      liff.getProfile()
      .then(profile => {
        const name = profile.displayName;
        const pic = profile.pictureUrl;
        const status = profile.statusMessage;
        console.log('name', name);
        console.log('pic', pic);
        console.log('status', status);
        Name.innerHTML = name;
        Status.innerHTML = status;
        Img.src = pic;
      })
      .catch((err) => {
        console.log('error', err);
      });
    }

    function sendMessage() {
      liff.sendMessages(
        [{ type: "text", text}]
        ).then(function() {
            window.alert('Message sent');
        }).catch(function(error) {
            window.alert('Error sending message: ' + error);
        });
    }

    function closeWindow() {
      if (!liff.isInClient()) {
          sendAlertIfNotInClient();
      } else {
          liff.closeWindow();
      }
    }

    liff.init({liffId}).then(() => {
      if (liff.isLoggedIn()) {
      }
      else{
        liff.login();
      }
    })

    // Declaration to bind buttons and callbacks
    document.querySelector("#showProfile").addEventListener("click", showProfile)
    document.querySelector("#sendMessage").addEventListener("click", sendMessage)
    document.getElementById('closeWindowButton').addEventListener('click', closeWindow)

  </script>
</html>

```

### 6. LIFF完成！
「5.WebアプリをLIFF用に色々変更」をおわらせ、LINEであるトークにそのLIFFのURLを貼り、それを自分の端末で開く！
もし、思うように動かなかったら自分のコードを確認し、また、LIFFをiPhoneで開くを繰り返しデバックをする。
ちなみに、

![ezgif-1-1ee9014e00a6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/a6f7fce1-2a9f-0f5d-11d6-1b8e6d5fac64.gif)

以上のようになった。

### 7. OAの作成
[OAを作ろうと思ったきっかけはこちら](https://developers.line.biz/ja/docs/line-login/web/link-a-bot/)

[OA作成方法の詳細はこちら](https://www.linebiz.com/jp/column/technique/20190418-3/)

OAと合体させると、LIFFを初めて開いた時の認可画面でOAの友だち追加を促すことが可能。
連携がユーザー側にも伝わり、とても便利です。

1. [ここ](https://www.linebiz.com/jp/entry/)の右の「未認証アカウントを解説する」を選択
<img width="600" alt="スクリーンショット 2020-01-11 22.56.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/53ffed49-86ea-ad67-3ead-fa0b969a24c9.png">

2. いくつか設定
 <img width="663" alt="スクリーンショット 2020-01-11 22.57.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/1d0a5e1e-af71-b48b-e9af-c5f7fa60939e.png">

ついにOA作成完了！
<img width="651" alt="スクリーンショット 2020-01-11 22.57.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/9683a2c4-9b5d-9695-d1da-4bd0aa62008f.png">

### 8. OAのアドミン設定
1. ↑の画像の「LINEOfficial Account Managerへ」を選択

2. 右上の「設定」→「Messaging API」でMessagingAPIの設定
<img width="600" alt="スクリーンショット 2020-01-11 23.04.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/9e7c95f2-1878-73c7-8d24-75ed40d56ef4.png">

3. 利用するボタンを押すと、下のプロバイダー選択が出てくるので最初に作成したプロバイダーを選択
 <img width="600" alt="スクリーンショット 2020-01-11 23.04.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/e5b87a4e-af41-b34d-9820-7bc8c7227e8e.png">

4. プロバイダーの修正をするので、Developersの方へ戻る
<img width="600" alt="スクリーンショット 2020-01-11 23.04.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/2fb23d78-4c1b-d60d-ffe6-41f91bdbd5de.png">


5. 「リンクされたボット」を編集すると、先ほど作成したOAが選択できるようになるので選択
<img width="481" alt="スクリーンショット 2020-01-11 23.05.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253836/63bf3929-7fdc-b351-f7dc-b7a8c84d34ea.png">

## 最後に
今後やりたいことは、
- LIFFを発展させる
- OAでできることを全部試す
- 友達や周りの人に使ってもらう

このようなことに挑戦して行きたいです！