【LINE】LIFFアプリを試してみる~Webからトークにメッセージを送信する~

概要

• 前回までの記事でLIFFアプリを作ってLINEのトーク上で実行しユーザ情報の取得とトークへのメッセージ送信をやってみました
• ちょうど今月(2020年3月)Share Target Pickerという機能がリリースされたので試してみます
• Share Target Pickerを使うと送信先のトークを選択することができるようになるためLIFFアプリをブラウザで開いたときにもトークへのメッセージ送信ができるようになります

設定

• Share Target Pickerを使うためにはLINE DeveloperのWebコンソール上での設定が必要です
• LIFFのタブから有効化してください

実装

• 前回の記事でメッセージを送信する部分でLIFF APIのsendMessages()を使用していました
  • この状態でLIFFアプリをブラウザから開いてメッセージ送信しようとするとエラーが発生して送れません

src/hooks/useLiff.js

// 抜粋
  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);
    }
  };

• これをブラウザから開いている場合はShare Target Pickerを表示するようにして送信先を選べるようにします
  • isInClient()でLINE上で開いているかどうか判定することができます
  • shareTargetPicker()でShare Target Pickerを表示することができます

src/hooks/useLiff.js

// 抜粋
  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);
    }
  };

• ブラウザから利用する場合はLINEへログインさせておく必要があるのでその実装も追加しておきます
• LIFFのinit処理をするメソッドを修正します

src/hooks/useLiff.js

  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);
    }
  };

• これでブラウザからアクセスした場合のログイン処理にも対応できるようになりました

動作確認

• ブラウザからアクセスして動作確認してみます
• メッセージの送信ボタンを押すとどのトークに送信するか選択する画面が表示されます
• LINEにアクセスして確認するとちゃんと送信することができています

まとめ

• Share Target Pickerを使うとブラウザからLIFFアプリにアクセスした場合でもメッセージ送信などLINEとの連携ができるようになりました
• この機能を使えばLIFFアプリの活用のシーンが広くなりそうですね