Liff開発でメッセージ送信まで

目次

1 - アプリ
2 - 準備
3 - 開発開始
4 - 最後に

1 アプリ

liffとは

Liffでメッセージを送信するだけのアプリを作成しました。
lineで開く事を前提に開発しているのでログイン機能などは実装していません。
2024年7月に作成しています。バージョンなどによって動かない可能性があります。

2 準備

.gitignoreに .envを追加します。
.envを作成して
REACT_APP_LIFF_ID=作成したLIFFID
で準備はできました。

3 開発開始

1-liffで作成したアプリにあるgitのliff-q/src/App.jsから抜き出しています。
下記のようにすると初期化ができます。

//liffの初期化とのLiffID指定
  useEffect(() => {
    const create=async ()=>{
    console.log("start liff.init()...");
    await liff
      .init({ liffId: process.env.REACT_APP_LIFF_ID })
      .then(() => {
        console.log('init() OK')
      })
      .catch((error) => {
        console.log(`liff.init() failed: ${error}`);
      });
    }
    create()
  }, []);

そして、簡単に入力した文字を送信するプログラムを書きます。

  const [message,setMessage]=useState("") //メッセージ
  //メッセージ送信関数
  const post=()=>{
    liff.sendMessages([
      {
        type:'text',
        text:`${message}`,
      }
    ])
  };

出来たらnpm startで動かしてみましょう。
まずLiffIdがちゃんとセット出来ていると適当なところで右クリックして検証が出るとコンソールというところに「init.OK()」と出るはずです。
まだメッセージは送信できません。

次にデプロイですが、環境変数にkey[REACT_APP_LIFF_ID]value[liffid]を設定しましょう。
忘れがちで私は変数を設定せずに長い時間悩まされました。気をつけてください。

liffのエンドポイントを設定するところにデプロイできたURLを設定します。

そのURLを適当なLine上のトークに貼ります。
クリックして文字を入力送信するとライン上に入力した文字が表記されていたら成功です。

お疲れ様でした。

4 最後に

Keepメモで使用しないでください
エラーが起きます。
エラー内容：不正な受信

また、携帯の画面でエラーメッセージの内容が見たい場合は
console.log()では無くwindow.alertで出るはずです。少なくともiphoneは
例

//liffの初期化とのLiffID指定
  useEffect(() => {
    const create=async ()=>{
    console.log("start liff.init()...");
    await liff
      .init({ liffId: process.env.REACT_APP_LIFF_ID })
      .then(() => {
        window.alert('init() OK') //console.log(init() OK')を変更
      })
      .catch((error) => {
        window.alert(`liff.init() failed: ${error}`);//ここも変更
      });
    }
    create()
  }, []);

今回はメッセージを送るだけなので、意味がないのですが、
私は割り勘アプリを作成してみました。

gitはプライベートに設定しているので質問や改善点がありましたら遠慮なくお願いします。
皆さんのなにか作ったものがありましたら教えてください。