LIFF入門＆デバッグ環境構築の詰まったところまとめ

はじめに

LIFFの開発環境作ってデバッグできるようにするまで対応したら二点詰まり（特にデバッグの方）、それについて発信している方がいなかったので作成しました。

短い内容ですが公開することに意味があると思っているので、同じような問題にあった人の助けになれば。

スタックしたところ

LIFF入門記事の動作環境

この記事通りに進めれば問題ないですが、記事内で指定されている動作環境のバージョンを抑えておくのが大切です。
私は横着して最新のLTSのNode.jsで動かそうとして失敗しました。

• Node.js
  • v16.13.1
• Yarn
  • v1.22.17
• Netlify-CLI
  • 9.16.3

デバッグ環境構築

"LIFF 実機　デバッグ"と調べてみるとトップに出てくるliff-inspectorですが、doc通りにやってもうまく動かず...
Xで調べると何人か同じように使えないと言っている方がいたのでやはりライブラリ自体が動かなくなってしまっているのではと思います。
（ちゃんと利用できている方がいれば教えていただきたいです！）

なので今回は、vConsoleを導入し、実機デバッグができるようにしました。

npm install vconsole

して、src/vanillaであれば直下のindex.jsを下記の様に変更します。

import './index.css';
import liff from '@line/liff';
import VConsole from 'vconsole';

document.addEventListener("DOMContentLoaded", function() {
  // 実質的な追加はこの二行だけ（console.logも何ならいらないけど一応確認用に入れています）
  const vConsole = new VConsole();
  console.log('Hello world');

  liff
    .init({ liffId: process.env.LIFF_ID })
    .then(() => {
        console.log("Success! you can do something with LIFF API here.")
    })
    .catch((error) => {
        console.log(error)
    })
});

スマホの小さい画面だと見づらいので本当はliff-inspector使いたかったのですが、これでデバッグできるようになりました。