【LINE】 LIFF 앱을 사용해보세요 ~ 웹에서 토크로 메시지 보내기 ~

개요

설정

구현

// 抜粋
  const sendMessage = async ({ text }) => {
    setLoading(true);
    try {
      // メッセージを送信
      liff.sendMessages([{ type: 'text', text }]);
      console.log(`success send message: ${text}`);
    } catch (error) {
      console.log({ error });
      setError(error);
    } finally {
      setLoading(false);
    }
  };

// 抜粋
  const sendMessage = async ({ text }) => {
    setLoading(true);
    try {
      // LINEアプリ上で開かれているかを判定
      liff.isInClient()
        // LINEアプリ上なら今まで通り開いているトークに送信
        ? liff.sendMessages([{ type: 'text', text }])
        // ブラウザなら送信先選択画面を表示
        : liff.shareTargetPicker([{ type: 'text', text }]);
      console.log(`success send message: ${text}`);
    } catch (error) {
      console.log({ error });
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  const initLiff = async ({ liffId }) => {
    setLoading(true);
    try {
      await liff.init({ liffId });
      console.log('success liff init');
      // ログインチェック処理を追加
      if (liff.isLoggedIn()) {
        console.log('logged in!');
      } else {
        console.log('not logged in');
        // LINEの提供するログイン画面へリダイレクトさせる（完了するともとのページにリダイレクトされる）
        liff.login();
      }
    } catch (error) {
      console.log({ error });
      setError(error);
    } finally {
      setLoading(false);
    }
  };

동작 확인

요약