LINE のフロントエンドをカスタマイズするフレームワーク LIFF(LIne Front-end Framework) の新機能 targetSharePicker を使ってみました。
まずこれまでも LIFF を使ったアプリは公開しているもの／していないもの合わせて多く作ってきました。LIFF SDK のバージョンが v2.1 になってからの変更に振り回されつつ、魅力的な新機能を試してきました。今回紹介する targetSharePicker も最近実装された新機能の１つです。どんな機能なのかを試せるサンプルアプリを期間限定で公開しているので、興味ある方は後述の URL にアクセスして使ってみてください。
アプリのベースにしているのはオープンソースとして公開している「お絵描きスタンプ」です：
LINE のトークルーム内に LIFF URL と呼ばれる特殊な URL を貼り付けてからタップすると、指でお絵描きできるキャンバスが現れ、最後に POST すると描いた絵がスタンプのように元のトークルームに表示される、というものです。以前にこのブログでも紹介しているので興味ある方はこちらもご覧ください：
お絵かき LIFF アプリを作ってみた
この LIFF アプリは（LIFF SDK v1.0 の頃に作ったものですが）HTML5 の Canvas を使って絵を描き、IBM Cloud に絵の画像を保存してから（画像を URL で表示できるようにしてから）、LIFF SDK の関数である sendMessages() を使って画像の URL をトークルームに送信することで実現しています。IBM Cloud の勉強会などでもネタとして使っていて、人気コンテンツの１つです。
今回 shareTargetPicker に対応した LIFF アプリケーションもベースはこのままです。LIFF URL を取得して、トークルームに貼り付けた URL をタップして起動させた場合は全く同じように使うことができます：
ただ今回の対応で少し進化している部分もあります。それは（上記画像内にも表示されていますが）実際に動いているウェブアプリケーションの URL（上記では https://line-liff-doodle-2020.mybluemix.net/ ）に PC のウェブブラウザからも利用できるようにしている点です。実際にウェブブラウザ（FireFox または Chrome ）でこの URL を開くと、初回は LINE へのログインを求められるので、ID とパスワードを入力するか QR コードを利用して自分の LINE アカウントでログインしてください：
LINE にログイン後、ウェブブラウザでアプリケーションの画面が表示されます。当たり前ですがスマホの LINE で開いた時よりも大きなキャンバスが表示されます。ここにマウスで絵を描いてもいいですし、タッチスクリーン対応の PC であれば画面に直接指で描くこともできます。またペンタブレットを持っている方であればペンタブで描くこともできます：
こんな感じで描き終わったら、スマホの時と同様に POST ボタンをクリック。すると・・・
別ウィンドウが開いて友達の一覧が表示されます。ここから描いた画像を送信したい人を選んで「シェア」すると・・・
選んだ人に PC ブラウザで描いた画像がスタンプのように送信されます。これが今回作った新機能です：
実現方法としては（PC から送信する場合は）LIFF の sendMessages 関数ではなく、shareTargetPicker 関数を使っています（実行パラメータの指定方法や内容は sendMessages と同様です）。またこの機能を実現するために（PC から実行しているのか、LINE アプリから実行しているのかを判断するために）isInClient 関数なども併用しています。興味ある方は公開しているソースコードを参照ください：
https://github.com/dotnsf/line_liff_doodle
（↑ソースコードの中で LIFF や targetSharePicker を使っている該当ファイルは public/index.ejs 内です）
この新機能の最大のメリットは、これまでどうしても LIFF URL の共有方法が（最初に入力する必要があったり、友達登録した上で送信したりする必要があったため）面倒だったのですが、新しい方法であれば LIFF URL を意識する必要がなくなったことです。単にウェブブラウザから URL を指定して開き、（ログインし、）絵を描いて POST する際に友達一覧から送信先を選ぶことができるようになったので、アプリケーションの URL だけを（必要であれば QR コードや短縮 URL などにした上で）事前に教えておけばよくなりました。またこれまでの LIFF URL を使う方法だとトークルームごとに LIFF URL を貼り付けておく必要がありましたが、新しい方法であれば送信時に宛先（トークルーム）を指定できるので、トークルームごとに用意しておく必要がなくなる、という副産物的なメリットも生まれます。
※理想を言うとスマホのウェブブラウザからも shareTargetPicker が使えるといいですが、スマホのブラウザはセキュリティ設定が厳しくて友達一覧のポップアップをできるようにするまでの設定がちと面倒です。詳しくはこちら：
http://dotnsf.blog.jp/archives/1077186965.html
というわけで、予定としては３月いっぱいまで以下の URL を公開するので、PC から LINE へのお絵描きスタンプを試したい場合は使ってみてください：
https://line-liff-doodle-2020.mybluemix.net/
まずこれまでも LIFF を使ったアプリは公開しているもの／していないもの合わせて多く作ってきました。LIFF SDK のバージョンが v2.1 になってからの変更に振り回されつつ、魅力的な新機能を試してきました。今回紹介する targetSharePicker も最近実装された新機能の１つです。どんな機能なのかを試せるサンプルアプリを期間限定で公開しているので、興味ある方は後述の URL にアクセスして使ってみてください。
アプリのベースにしているのはオープンソースとして公開している「お絵描きスタンプ」です：
LINE のトークルーム内に LIFF URL と呼ばれる特殊な URL を貼り付けてからタップすると、指でお絵描きできるキャンバスが現れ、最後に POST すると描いた絵がスタンプのように元のトークルームに表示される、というものです。以前にこのブログでも紹介しているので興味ある方はこちらもご覧ください：
お絵かき LIFF アプリを作ってみた
この LIFF アプリは（LIFF SDK v1.0 の頃に作ったものですが）HTML5 の Canvas を使って絵を描き、IBM Cloud に絵の画像を保存してから（画像を URL で表示できるようにしてから）、LIFF SDK の関数である sendMessages() を使って画像の URL をトークルームに送信することで実現しています。IBM Cloud の勉強会などでもネタとして使っていて、人気コンテンツの１つです。
今回 shareTargetPicker に対応した LIFF アプリケーションもベースはこのままです。LIFF URL を取得して、トークルームに貼り付けた URL をタップして起動させた場合は全く同じように使うことができます：
ただ今回の対応で少し進化している部分もあります。それは（上記画像内にも表示されていますが）実際に動いているウェブアプリケーションの URL（上記では https://line-liff-doodle-2020.mybluemix.net/ ）に PC のウェブブラウザからも利用できるようにしている点です。実際にウェブブラウザ（FireFox または Chrome ）でこの URL を開くと、初回は LINE へのログインを求められるので、ID とパスワードを入力するか QR コードを利用して自分の LINE アカウントでログインしてください：
LINE にログイン後、ウェブブラウザでアプリケーションの画面が表示されます。当たり前ですがスマホの LINE で開いた時よりも大きなキャンバスが表示されます。ここにマウスで絵を描いてもいいですし、タッチスクリーン対応の PC であれば画面に直接指で描くこともできます。またペンタブレットを持っている方であればペンタブで描くこともできます：
こんな感じで描き終わったら、スマホの時と同様に POST ボタンをクリック。すると・・・
別ウィンドウが開いて友達の一覧が表示されます。ここから描いた画像を送信したい人を選んで「シェア」すると・・・
選んだ人に PC ブラウザで描いた画像がスタンプのように送信されます。これが今回作った新機能です：
実現方法としては（PC から送信する場合は）LIFF の sendMessages 関数ではなく、shareTargetPicker 関数を使っています（実行パラメータの指定方法や内容は sendMessages と同様です）。またこの機能を実現するために（PC から実行しているのか、LINE アプリから実行しているのかを判断するために）isInClient 関数なども併用しています。興味ある方は公開しているソースコードを参照ください：
https://github.com/dotnsf/line_liff_doodle
（↑ソースコードの中で LIFF や targetSharePicker を使っている該当ファイルは public/index.ejs 内です）
この新機能の最大のメリットは、これまでどうしても LIFF URL の共有方法が（最初に入力する必要があったり、友達登録した上で送信したりする必要があったため）面倒だったのですが、新しい方法であれば LIFF URL を意識する必要がなくなったことです。単にウェブブラウザから URL を指定して開き、（ログインし、）絵を描いて POST する際に友達一覧から送信先を選ぶことができるようになったので、アプリケーションの URL だけを（必要であれば QR コードや短縮 URL などにした上で）事前に教えておけばよくなりました。またこれまでの LIFF URL を使う方法だとトークルームごとに LIFF URL を貼り付けておく必要がありましたが、新しい方法であれば送信時に宛先（トークルーム）を指定できるので、トークルームごとに用意しておく必要がなくなる、という副産物的なメリットも生まれます。
※理想を言うとスマホのウェブブラウザからも shareTargetPicker が使えるといいですが、スマホのブラウザはセキュリティ設定が厳しくて友達一覧のポップアップをできるようにするまでの設定がちと面倒です。詳しくはこちら：
http://dotnsf.blog.jp/archives/1077186965.html
というわけで、予定としては３月いっぱいまで以下の URL を公開するので、PC から LINE へのお絵描きスタンプを試したい場合は使ってみてください：
https://line-liff-doodle-2020.mybluemix.net/
