LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。
2022年5月に行われた【LINEミニアプリ】LIFF Deep Dive【LIFFプラグインリリース記念】では、LINEのLIFF担当チームをゲストとし、LIFFと新機能について登壇してもらいました。この記事は、第3回目の書き起こし記事です。1記事目はこちら
自己紹介
まず自己紹介すると、去年の4月にLINEに入社した池田と申します。LIFFとLINEマンガの開発に従事しています。開発者Aさんは手元でLIFFの機能を試してみることに成功したので、実際このLIFFの開発環境を作りに行きたいというステージに立ちました。
Create LIFF App とは
今回リリースしたCreate LIFF Appというパッケージを使うことにしました。GitHub上にOSSとして公開しているんですけれども、コマンドを叩くことでNext.js,Nuxt.js,React,Vue,Svelte,TypeScriptやJavaScriptのVanilla Projectが簡単に生成できるパッケージとなっております。先ほども申し上げたとおりOSSになっていますので、興味のある方は実際にコントリビューションぜひお待ちしております。
Create LIFF App のインストール実演
npx @line/create-liff-app@latest を実行してみるんですけれども、これを実行してみるとプロジェクトネームを入力してください、というのが出るので、今回は、my-app とそのままでいきます。テンプレートを選ぶ画面移ります。自分は岡本さんとは違って、Reactを好むのでReactを選びます。JavaScriptかTypeScriptか選べます。
LIFF IDを入力してくださいということが記されていると思うんですけれども、先ほど見ていたLINE Developersコンソール上で実際LIFFのアプリを生成する必要があります。これはドキュメントに詳しく書いてあるので、そちらを参考に生成してもらって、LIFF IDをここに入力してもらったらいいと思います。今回は普通にこのLIFF IDそのままでいきたいと思います。
パッケージマネージャーでそのままインストールしたいかという質問があるので、そのままインストールしてyarnかnpmを選べるのでyarnにします。プロジェクトをインストールが終わったら開発が始められる状態になると思います。cd my-appしてyarn devします。
先ほどのLIFF IDを適当なやつに設定したので、イニシャライズは失敗しましたが、ちゃんと設定している場合はSuccessすると思うので、フローにしたがってもらったら問題ないと思います。
Create LIFF App を使った実装のデモ
開発環境を作ることに成功したので、その後は機能を実際に実装するところに入ります。一番最初のアプリの要件で同人ブースのシェアと、QRコードのスキャンの要件があったと思うんですけれども、こちらのQRコードは携帯などで読み込んでもらえるとこのLIFF Deep Diveデモというアプリが起動できます。ソースコードも、自分のリポジトリ下に公開していますので、詳しい実装が見たい方はぜひご覧になってください。
実際にこのデモアプリ起動してもらったら、LINEで友達にシェアとQRスキャンしたアンケートの回答というボタンがあるんですけども、それぞれliff.share.Target.Pickerとliff.scanCodeV2というAPIになっております。一番最初に説明させていただいた通りShare Target PIckerは友達を選んでその人たちのMessaging APIのメッセージテンプレートを使ってそのままLINEのチャットルーム上に送れるというメチャ便利な機能です。このliff.scanCodeV2はサブウインドウの紹介があったと思うんですけどもサブウインドウを通してスキャンしたQRコードのvalueを取得できるというAPIです。
これらの機能を使うためには、まずLIFFでイニシャライズ初期化をする必要があって、このように簡単に実装できます。イニシャライズLIFF IDを入力してイニシャライズして。ログインまでしておく必要があるので、ログインしていない状態だったらliff.login()というメソッドを実行して初期化を完了します。
その後、liff.shareTargetPickerというメソッドをこのように実装できます。isApiAvailableメソッドで、shareTargetPickerがちゃんと使える状態、つまりアプリに権限があるかどうかを確認した後に、shareTargetPickerの中にメッセージMessaging APIの形をこれはテキストでも画像でもスタンプでもいろいろ送れるんですけれども、今回はテキスト送っている実装になっています。こちらでshareTargetPickerの実装が完了します。
scanCodeV2はさらに簡単ですね。スキャンコードの結果を受け取ることができるので、リザルトとvalueのところを参照すると読み取ったQRコードのvalueが取得できるようになります。
詳しいAPIはこのAPIレファレンスにすごく詳しく書いておりますので、ぜひ実装に困ったら参考にしてもらったらうれしいです。以上で自分のパートは終わりになります。
Discussion