Q&A

liff.sendmessage()が出来ない機種の見つけ方と原因

前提・実現したいこと

liff.sendmessage()にてLINEにメッセージ送信が出来ない機種と何故送信出来ないかの原因の理解

発生している問題・エラーメッセージ

webからliff.sendmessage()をしてもLINE側にメッセージが送信されない事象が発生しています。 全ての端末ではなくAndroidが大半を占めているそうです。

知り合いのお店で運用しており、OSまでは聞いているのですが具体的な機種や挙動等は不明です。

該当のソースコード

import React, { useState, useCallback } from "react";
import TextInput from "../components/TextInput";
import RadioGroup from "../components/RadioGroup";
import { useLiff } from "react-liff";
import { menu } from "../assets/js/menu.js";

const Reservation = () => {
  const [date, setDate] = useState("");
  const [hour, setHour] = useState("");
  const [radio, setRadio] = useState(menu[0]);
  const [name, setName] = useState("");
  const [remarks, setRemarks] = useState("");
  const [flag, setFlag] = useState(true);
  const { error, liff, loggedIn, ready } = useLiff();

  const handleRadioChange = (event) => {
    const target = menu.find((obj) => {
      return obj.value === event.target.value;
    });
    setRadio(target);
  };

  const inputDate = useCallback((e) => {
    setDate(e.target.value);
  }, []);

  const inputHour = useCallback((e) => {
    setHour(e.target.value);
  }, []);

  const inputName = useCallback((e) => {
    setName(e.target.value);
  }, []);

  const inputRemarks = useCallback((e) => {
    setRemarks(e.target.value);
  }, []);

  const sendText = () => {
    if (date !== "" && hour !== "" && name !== "") {
      setFlag(true);

      const objectDate = new Date(date);
      const textDate = `${objectDate.getMonth() + 1}/${objectDate.getDate()}`;

      const text = `希望日:${textDate} ${hour}\nメニュー:${radio.label}\nお名前:${name}\n備考:${remarks}`;

      if (!liff.isInClient()) {
        // Webブラウザからメッセージ送信
        liff
          .shareTargetPicker([
            {
              type: "text",
              text: text,
            },
          ])
          .catch(function (error) {
            console.log("Webブラウザからのメッセージ送信エラー:" + error);
            throw new Error(error);
          });
      } else {
        // LINEトーク画面上でメッセージ送信
        liff
          .sendMessages([
            {
              type: "text",
              text: text,
            },
          ])
          .then(function () {
            liff.closeWindow();
          })
          .catch(function (error) {
            console.log("LINEトーク画面上のメッセージ送信エラー:" + error);
            throw new Error(error);
          });
      }
    } else {
      setFlag(false);
    }
  };

  return (
    <div className="reservation_box">
      <p className="reservation_box_description">
        以下に予約情報を入力して送信ボタンを押してください!
      </p>
      <div className="reservation_box_form">
        <p>
          希望日<span className="required">必須</span>
        </p>
        <div>
          <TextInput
            value={date}
            type={"date"}
            onChange={inputDate}
            label={"日付"}
          />
        </div>
        <div>
          <TextInput
            value={hour}
            type={"time"}
            onChange={inputHour}
            label={"時間"}
          />
        </div>
      </div>
      <div className="reservation_box_form">
        <p>
          メニュー<span className="required">必須</span>
        </p>
        <div>
          <RadioGroup
            ariaLable="menu"
            name="menu"
            value={radio.value}
            handleChange={handleRadioChange}
            radioGroup={menu}
          />
        </div>
      </div>
      <div className="reservation_box_form">
        <p>
          お名前<span className="required">必須</span>
        </p>
        <div>
          <TextInput value={name} type={"text"} onChange={inputName} />
        </div>
      </div>
      <div className="reservation_box_form">
        <p>備考/ご要望・ご相談等</p>
        <div>
          <TextInput
            value={remarks}
            type={"text"}
            onChange={inputRemarks}
            multiline={true}
            rows={3}
          />
        </div>
      </div>
      <div className="loginbtn-wrap">
        <button className="loginbtn" onClick={sendText}>
          送信
        </button>
      </div>
      <p className="form-validation-msg">
        {flag ? "" : "必須項目を入力してください"}
      </p>
      {/* <div>{showDisplayName()}</div> */}
    </div>
  );
};

export default Reservation;

試したこと

catch時にエラーを投げてsentryに通知するようにしましたが、検知できておらず。

補足情報(FW/ツールのバージョンなど)

"@line/liff": "^2.12.0" "react": "^17.0.2"

  • 0
  • 0
  • 324
  • twitter facebook
本当によろしいですか? question.vm