LINE Developer CommunityはLINE APIに関連する最新情報や開発Tipsを共有するコミュニティです。
2022年5月に行われた【LINEミニアプリ】LIFF Deep Dive【LIFFプラグインリリース記念】では、LINEのLIFF担当チームをゲストとし、LIFFと新機能について登壇してもらいました。この記事は、第5回目の書き起こし記事です。
これまででの書き起こし記事はこちら。
自己紹介
まず、自己紹介させていただきます佐藤慎吾と申します。LIFFチームでSDKの開発を担当しています。今まで、LIFFのアプリの開発とかデバッグとか機能の紹介をしてもらってたと思うんですけど、ここからは将来のために拡張を持たせるということでプラグインの機能の紹介をしていきたいと思います。
LIFFプラグインとは
LIFFプラグインはLIFF SDKの機能を拡張できる機能になっています。LIFFプラグインを使うと、SDKに独自の機能を追加したりAPIの挙動を変更したりすることができます。プラグインの実体は、特定のプロパティやメソッドを持っているオブジェクトか、あるいはクラスのインスタンスになります。
LIFFプラグイン アーキテクチャ
まず、最初にSDKの内部のアーキテクチャについて簡単に説明しますLIFF SDKの機能開発時、公開APIを実装するときには、僕ら自身で設計実装したアーキテクチャを用いて開発しています。僕らはこれをLIFFモジューラーアーキテクチャと呼んでます。LIFFモジュールを定義するためのインタフェースが用意されて、これはご覧のようなSDKのAPIとなるメソッドおよびネームスペースを定義するためのものになっています。
各モジュールは、このインタフェースを実装したクラスかオブジェクトになっていて、ご覧のように各モジュールをコアに適用するためのインターフェース自体もLIFFモジュールインタフェースを実装していることになっています。今回紹介するLIFFプラグインのためのインターフェースは、このモジュールを適用するための仕組みを公開したものです。
LIFFプラグイン３つの特徴
次に、LIFFプラグインでできることを紹介したいと思います大きく3つです。1つ目がSDKオブジェクトに独自のNAMEスペースを追加することができます。2つ目がSDKのAPI .liff.initとか先ほどですとshare Target Pickerとかに対して、コールバック関数を登録することができます。最後が自身で書いたプラグイン独自のコールバックイベントを作成して、それに対してコールバック関数を登録できるようになるという機能が3つ目。
独自のNAMEスペースを追加
ここは実際のコードですけど、APIはとてもシンプルです。liff.useというメソッドが用意されているので、第1引数にプラグインを指定して、第2引数にオプションをオプションを渡すシンプルなAPI インターフェースになっています。
じゃあ、最初の1つ目の機能をどのように変えていけばいいか簡単な例を紹介するんですけども、LIFFプラグインはnameというプロパティとinstallというメソッドを必ず設定にする必要があります。nameプロパティで定義した文字列がliff配下にプレフィックスとして$が付いて、その名前でnameスペースが追加されることになります。その値が何が入るかというと、installメソッドで返された値が入ります。この例だとhelloメソッドを持つオブジェクトを返されてるのでliff.useで適用したプラグインをプラグインの適用するとgreet.helloを実行できるようになります。
LIFFプラグインでSDKのAPIのコールバック関数の登録方法
次に、SDKのAPIのコールバック関数の登録方法を紹介します。installメソッドの第1引数にhooksという名前のオブジェクトを値に持ったLIFFプラグインコンテキストと呼ばれる値が渡ってきます。このhooksオブジェクトを介してSDKの各API実行時にhookできるコールバック関数を登録できます。hook.init APIの名前に準じてるんですけど実行させたい関数を渡せばinitメソッドを実行した時に、beforeinitメソッド実行直後afterが終了直前に呼ばれるコールバック登録することができます。
また登録できる関数はSDKのAPIによって決まっていて非同期関数および同期関数のみ登録できる登録できるかどうかが決まってます。initのビフォーアフターに関しては非同期関数を取ることができます。ちなみに現状だと、まだ各SDKのAPIのコールバックとご紹介したんですけどまだliff.initのみに対するコールバックの関数しかサポートしていません。今後、拡大予定ではいます。
LIIFプラグイン独自のコールバックイベントの作成
3つ目のプラグイン独自のコールバックイベントの作成についてご紹介します。さっきのプラグインをクラス形式で書いたものなんですけど、プラグインのプロパティにhooksというオブジェクトを定義します。その中に任意のキー名でイベント定義していきます。このキー名でコールバック関数を受け付けるようにすることができます。SyncHookとAsyncHookというクラスのインスタンスを渡してあげます。同期関数か、非同期関数を登録できるhookを作成することができます。登録された、コールバック関数の実効したい任意の位置で、自身のhooksオブジェクトからその実行したイベントのキー名にcallというメソッドが入っているので、それを実行すると登録されたコールバック関数が全部実行されることになります。
この例でいうと、helloメソッドの実行直後と終了直前に呼んでますね。GreetPluginに対するhooksをプラグインを適用する例なんですけども、この第1引数にインストールの第1引数にhooksというオブジェクトが渡ってくるのでプラグインの名前 $ greetという nameスペースが入っているので、そこに対する helloBeforeと helloAfterhooksに対して関数を登録できます。$greet.helloメソッドを実行すると、コンソールにログが表示されるはずです。
あとは細かいオプションなどご紹介させていただくんですけども、先ほど紹介したそのinstallメソッドで取れる引数を紹介したいんですけどもliff.useは第2引数を渡すことができてこれをプラグインのinstallメソッドの第2引数として受け取ることができます。自身の書いたプラグインをプラグインユーザに対してプラグインの挙動をカスタマイズできる口を提供することができたりします。
また、先ほど紹介したインストールメソッドの第1引数もLIFFプラグインコンテキストなんですけども、liffオブジェクト自体が参照できるようになっているのでここでもliffの各APIを参照および実行することができるようになっています。
先ほどの池田さんが作成していただいていたDeep Diveデモ用のLIFFアプリをプラグイン化する例がこちらになるんですけども。NAMEプロパティに任意の名前を入れた後にそのメソッドが定義されていて、liff.initメソッド LIFFのSDKのAPIに対するinitメソッドのhookに対してhookを登録していますね。ここで何をやってるかというとログイン処理をしています。initメソッドを呼ぶと、自動でliff.loginメソッドが実行されてログに処理が走るということになります。installメソッドで開始する値が、メッセージを送信するメソッドと先ほど紹介したQRコードを読み込んでその値を取るLIFF APIを実行する処理を纏めたものをオブジェクトとして返してます。これを適用すると、liff.loginがinitの後に呼ばれて先ほど定義したshareessagesとreadqrcodeメソッドが使えるようになります。
はい、ということで僕からは以上です。ありがとうございました。
Discussion