LINE Messaging API & LINE ログインの使い方を学ぶ！｜ProgLearn｜エンジニアのためのプログラミング情報メディア

みなさん、こんにちは。どんぶラッコです。

前回、Developerアカウントの作成方法をお伝えしました。

次は、LINE APIを使ったMessaging API と LINE ログインの使い方をハンズオン形式で学んでいきましょう！

今回は、Zennに本の形式で掲載してみました。

ハンズオン資料

こちらの記事では、最終的に完成するコードを掲載しておきたいと思います♪

app.js

const express = require("express")
const app = express()
const port = 8888
const line = require('@line/bot-sdk')

const config = {
  channelAccessToken: 'CHANNEL_ACCESS_TOKEN',
  channelSecret: 'CHANNEL_SECRET',
}
const client = new line.Client(config)

const handleEvent = async (event) => {
  // メッセージじゃなかったら返信しない
  if (event.type !== 'message' || event.message.type !== 'text') {
    return null;
  }

  // ここで返信用メッセージを作成
  await client.replyMessage(event.replyToken, {
    type: 'text',
    text: event.message.text
  })
}

// 8888番ポートでlisten
app.listen(port, () => {
  console.log("Node.js app listening at http://localhost:" + port)
})

// webhook設定
app.post('/webhook', line.middleware(config), (req, res) => {
  const events = req.body.events
  console.log(events)
  events.map(handleEvent)
})

// /liff の飛び先を publicフォルダに指定
app.use('/liff', express.static(__dirname + '/public'))

/public/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LIFF Handson</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="./js/jquery-3.5.1.min.js" defer></script>
  <script src="./js/bootstrap.min.js" defer></script>

</head>
<body>
  <div class="container">
    <h1>LIFF EXAMPLE</h1>

    <p>
      <span id="line-name"></span> さんのTODO
    </p>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- LIFF SDK の読み込み -->
  <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <script>
    (async function () {
      await liff.init({liffId: 'LIFF_ID'})
      if (!liff.isLoggedIn()) {
        liff.login();
      }

      // LINE ID情報の取得
      const profile = await liff.getProfile();
      $('#line-name').text(profile.displayName)
      console.log(profile)
    }())
  </script>
</body>
</html>

また、今回のハンズオンではNode.jsを構築するので、その勉強にも最適だと思います。

Node.jsについてはこんな記事も書いているので参考にしてみてください♪