TypeScriptでLIFFのShare Target Pickerを試すぞ！

はじめに

本日（といっても昨日になりましたが）LINEのオンラインハッカソンに参加しました。成果物はこれになります（READMEが雑だなあ。。。）が、あまりLINEの新機能を試せなかったのが悔しかったので、その熱の冷めぬうちにShare Target Pickerを試してみようと思いました。しかしただ試すのも出遅れた感あるので、TypeScriptでやろうと思います。

Share Target Pickerとは

公式の記事よると、任意のユーザーにLINEメッセージを送ることができるWEBアプリをつくることができるライブラリみたいです。この新機能を試してみたという記事は既にあるのであまり詳細な説明は省きます。

TypeScriptで実装する

TypeScriptでやってみた記事は既に書いたので、TypeScriptでの導入方法については省きます。いつも使っているliff-typeがどうやらShare Target Pickerに対応していたみたいですので、特に問題なくTypeScriptができます！
コードはこんな感じです。

target-picker-test/src/App.tsx

import React, { useState } from 'react'
import './App.css'
import { buildReplyText } from 'line-message-builder'

function App() {
  const [message, setMessage] = useState<string>('')
  const pushShareTargetPicker = () =>
    liff.init({ liffId: process.env.REACT_APP_LIFF_ID! }).then(() => {
      if (!liff.isLoggedIn()) {
        liff.login()
      }
      liff.shareTargetPicker([buildReplyText(message)])
        .then(() =>
          console.log('send: ', message)
        ).catch((err: Error) =>
          alert(err)
        )
    })
  return (
    <div className="App">
      <input value={message} onChange={e => setMessage(e.target.value)} />
      <button onClick={pushShareTargetPicker}>送信</button>
    </div>
  )
}

export default App

全体はこちらで公開しています。

さいごに

デモ写真とか見せたいところですが、LINE友達が見えるところとか消す作業とか面倒なので各自動かして試してみてください。ここのURLより公開しています。
あとは余談です。多分今後はこういったLINEチャット画面以外（つまりは普通のブラウザ）でも動くLIFFのライブラリが増えるんじゃないかなと思ってます。むしろsendMessges()のようなLINEアプリに依存するようなLIFFアプリは非推奨になっていくのでは？？とかも考えたりしてます（実際のところわかりませんが）。
しかも今日のハッカソンで作ったMessagingAPIのチャンネルはもうLIFFが登録できなくなってました。この流れでLINEチャット上でないと動かないLIFFアプリとかは非推奨になっていくんですかね。。。