プラガブルSDK
プラガブルSDKとは
プラガブルSDKとは、LIFF SDKに含めるLIFF APIを選択できる機能です。
LIFFアプリで利用するLIFF APIのみをLIFF SDKに含めることで、LIFF SDKのファイルサイズを最大約34%削減できます。その結果、LIFFアプリの表示速度を向上させることができます。
プラガブルSDKの使用条件
LIFF v2.22.0以降のnpmパッケージ版でのみ利用できます。CDN版では利用できません。npmパッケージの利用方法について詳しくは、「npmパッケージを利用する」を参照してください。
プラガブルSDKの使用方法
プラガブルSDKの使用方法は、以下のとおりです。
liffオブジェクトをインポートする
まず、liffオブジェクトを@line/liff/coreからインポートします。
import liff from "@line/liff/core";
このliffオブジェクトには、以下のプロパティとメソッドのみが含まれています。
liff.idプロパティliff.readyプロパティliff.init()メソッドliff.getVersion()メソッドliff.use()メソッド
上記以外のLIFF APIを利用するには、対応するモジュールをインポートします。以下の例では、liff.getOS()メソッドとliff.getAppLanguage()メソッドに対応するモジュールをインポートしています。
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
import GetAppLanguage from "@line/liff/get-app-language";
各LIFF APIに対応するモジュールについては、「LIFF APIと対応するモジュール一覧」を参照してください。
LIFF APIを有効化する
次に、インポートしたLIFF APIのモジュールをliff.use()メソッドに渡し、LIFF APIを有効化します。LIFF APIのモジュールはクラスで定義されているため、liff.use()メソッドにインスタンスを渡す必要があります。
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
import GetAppLanguage from "@line/liff/get-app-language";
liff.use(new GetOS());
liff.use(new GetAppLanguage());
LIFF APIを有効化すると、LIFF APIを利用できるようになります。
以下の例では、有効化したliff.getOS()メソッドとliff.getAppLanguage()メソッドは利用できますが、有効化していないliff.login()メソッドは利用できません。
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
import GetAppLanguage from "@line/liff/get-app-language";
liff.use(new GetOS());
liff.use(new GetAppLanguage());
liff.init({
liffId: "123456-abcedfg",
});
liff.getOS(); // 利用できる
liff.getAppLanguage(); // 利用できる
liff.login(); // 利用できない
プラガブルSDKの注意事項
技術的な制約から、liff.use()メソッドはliff.init()メソッドより前に実行してください。liff.init()メソッドを実行した後にliff.use()メソッドを実行した場合の動作は保証されません。
liff.use()メソッドの正しい実行例
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
// liff.use()メソッドをliff.init()メソッドより前に実行している
liff.use(new GetOS());
liff.init({
liffId: "123456-abcedfg",
});
liff.use()メソッドの間違った実行例
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
liff.init({
liffId: "123456-abcedfg",
});
// liff.use()メソッドをliff.init()メソッドより後に実行している
liff.use(new GetOS());
LIFF APIと対応するモジュール一覧
| LIFF API | モジュール |
|---|---|
liff.getOS() | @line/liff/get-os |
liff.getAppLanguage() | @line/liff/get-app-language |
liff.getLanguage()（非推奨） | @line/liff/get-language |
liff.getLineVersion() | @line/liff/get-line-version |
liff.getContext() | @line/liff/get-context |
liff.isInClient() | @line/liff/is-in-client |
liff.isLoggedIn() | @line/liff/is-logged-in |
liff.isApiAvailable() | @line/liff/is-api-available |
liff.login() | @line/liff/login |
liff.logout() | @line/liff/logout |
liff.getAccessToken() | @line/liff/get-access-token |
liff.getIDToken() | @line/liff/get-id-token |
liff.getDecodedIDToken() | @line/liff/get-decoded-id-token |
liff.permission.getGrantedAll()liff.permission.query()liff.permission.requestAll() | @line/liff/permission |
liff.getProfile() | @line/liff/get-profile |
liff.getFriendship() | @line/liff/get-friendship |
liff.openWindow() | @line/liff/open-window |
liff.closeWindow() | @line/liff/close-window |
liff.sendMessages() | @line/liff/send-messages |
liff.shareTargetPicker() | @line/liff/share-target-picker |
liff.scanCodeV2() | @line/liff/scan-code-v2 |
liff.scanCode()（非推奨） | @line/liff/scan-code |
liff.permanentLink.createUrlBy()liff.permanentLink.createUrl()liff.permanentLink.setExtraQueryParam() | @line/liff/permanent-link |
liff.i18n.setLang() | @line/liff/i18n |
liff.createShortcutOnHomeScreen() | @line/liff/create-shortcut-on-home-screen |