# プラガブル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.getLanguage()
メソッドに対応するモジュールをインポートしています。
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
import GetLanguage from "@line/liff/get-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 GetLanguage from "@line/liff/get-language";
liff.use(new GetOS());
liff.use(new GetLanguage());
LIFF APIを有効化すると、LIFF APIを利用できるようになります。
以下の例では、有効化したliff.getOS()
メソッドとliff.getLanguage()
メソッドは利用できますが、有効化していないliff.login()
メソッドは利用できません。
import liff from "@line/liff/core";
import GetOS from "@line/liff/get-os";
import GetLanguage from "@line/liff/get-language";
liff.use(new GetOS());
liff.use(new GetLanguage());
liff.init({
liffId: "123456-abcedfg",
});
liff.getOS(); // 利用できる
liff.getLanguage(); // 利用できる
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.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.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.initPlugins() | @line/liff/init-plugins |
liff.permanentLink.createUrlBy() liff.permanentLink.createUrl() liff.permanentLink.setExtraQueryParam() | @line/liff/permanent-link |
liff.i18n.setLang() | @line/liff/i18n |