💨

NestJSとHBSを使ってLINE LIFFアプリを作成する方法

2023/05/08に公開

LINE

概要

このチュートリアルでは、NestJSとHandlebarsを使ってLINEのLIFFアプリを作成する方法を説明します。具体的には、次の手順が含まれます。

LINEのチャネルを作成
NestJSプロジェクトを作成
HBSを用意してHTMLをレンダリング
JavaScriptを実行できるようにする
ngrokを使ってローカルサーバーを公開
LIFFアプリ設定
LIFF SDKを組み込む

これらの手順を順に実行し、最終的にはLINEプロフィール名が取得できるLIFFアプリを作成します。

チャネルを作成する

https://developers.line.biz/console/ にログインします
プロバイダーを作成or選択
新規チャンネル作成
- 今回は、LINEログインとして作成します

NestJSプロジェクトを作成する

https://docs.nestjs.com/

globalに@nestjs/cliを入れたくなかったので、gitで初期プロジェクトをcloneする方法にします。

hide@hidenoMacBook-Pro line-google-calnder % git clone https://github.com/nestjs/typescript-starter.git .

Cloning into '.'...
remote: Enumerating objects: 1000, done.
remote: Counting objects: 100% (205/205), done.
remote: Compressing objects: 100% (46/46), done.
remote: Total 1000 (delta 180), reused 165 (delta 159), pack-reused 795
Receiving objects: 100% (1000/1000), 1.81 MiB | 19.77 MiB/s, done.
Resolving deltas: 100% (547/547), done.

yarnにしたかったので、package-lock.jsonファイルを削除後に、

yarn install

その後、

yarn start:debug

でサーバーを起動して、ブラウザで確認します。

hbsを用意

https://docs.nestjs.com/techniques/mvc
LIFFアプリとしてJSを実行する必要があるので、htmlをレンダリングするためにテンプレートエンジンを使います。
今回はhbsを使用します。

yarn add hbs

src/main.ts

import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";
import { NestExpressApplication } from "@nestjs/platform-express";
import { join } from "path";

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, "..", "public")); // 後のjsに使います
  app.setBaseViewsDir(join(__dirname, "..", "views"));
  app.setViewEngine("hbs");

  await app.listen(3000);
}
bootstrap();

src/app.controller.ts

import { Controller, Get, Render } from "@nestjs/common";
import { AppService } from "./app.service";

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  @Render("index")
  getHello() {
    return { message: this.appService.getHello() };
  }
}

![](https

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>App</title>
  </head>
  <body>
    {{ message }} by hbs
  </body>
</html>

hbsによってレンダリングされていることが確認できました。

JSを実行できるように

public/main.js

console.log("hello");

hbsでscriptタグで読み込みます。

views/index.hbs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>App</title>
    <script src="main.js"></script>
  </head>
  <body>
    {{ message }} by hbs
  </body>
</html>

これでjsも実行できるようになりました。

ngrokを実行する

LIFFアプリの設定時にhttpsで公開されたURLを用意する必要があります。
今回は開発用として、ngrokを使用します。
https://ngrok.com/

ngrok http 3000

ngrokによって発行されたhttpsのURLでもアクセスできることを確認します。

LIFFアプリ設定

https://developers.line.biz/console/ のチャンネル詳細画面で、LIFFアプリを追加します。

下記のエンドポイントURLに、先程発行したngrokのURLを設定します。

LIFF SDKを組み込む

LIFFアプリとして起動するには、LIFF SDKを組み込む必要があります。

今回は手軽にCDNを使う方法です。

views/index.hbs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>App</title>
    <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    {{ message }} by hbs
  </body>
</html>

public/main.js

const LIFF_ID = "YOUR LIFF ID";

async function initializeLiff() {
  try {
    await liff.init({ liffId: LIFF_ID });
    const profile = await liff.getProfile();
    alert(`displayName: ${profile.displayName}`);
  } catch (error) {
    console.error("Error initializing LIFF:", error);
  }
}

window.addEventListener("DOMContentLoaded", () => {
  console.log("start");
  initializeLiff();
});

LIFF IDは https://developers.line.biz/console/ のチャネル詳細画面のLIFFタブに記載されています。
(※下記のものは削除済み)

LINEで適当なトーク画面に上記のLIFF URLを投稿して、アクセスしてみます。

LINEのプロフィール名が取得できました。

これでLIFFアプリが実行できていることが確認できました。