みなさん、こんにちは。どんぶラッコです。
前回、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についてはこんな記事も書いているので参考にしてみてください♪
みなさんも是非チャレンジしてみてください！
