見出し画像

LIFFアプリの項目を調査しました!

LIFFアプリを作成する際、まずLINEログインチャネルを作り、LIFFを追加します。何度も作っていますが、項目の設定は毎回同じ、、、
この設定を変えたらどのようになるのか、調査しました!
(前提:LIFFアプリではユーザーのプロファイルの取得と、メッセージ(シェアターゲットピッカーも)を投稿する仕様になっています。)

LINEログインチャネルの公開

スクリーンショット 2020-08-27 22.03.23

チャネルを公開すると、すべてのLINEユーザーが、チャネルに関連付けられたアプリでLINEログインできます。この操作は元に戻せません。「非公開」に戻すには、チャネルを削除して再作成してください。
非公開のまま自分以外のユーザーが利用すると下記のような画面が出ます。

画像2

シェアターゲットピッカー

スクリーンショット 2020-08-27 22.43.28

LIFFアプリでliff.shareTargetPicker()を使用する場合、「情報利用に関するお願い」に同意をしてオンにしてください。これがオフのままだと下記のようなエラーが出ます。

画像10

下記コードのliff.isApiAvailable('shareTargetPicker')のFalseにあるアラートが表示されています。

if(liff.isApiAvailable('shareTargetPicker')){
  liff.shareTargetPicker([
    { type: 'text',
      text: 'Hello! }
  ]).then(function (res) {
    //略               
  }).catch(function (error) {                 
    window.alert('something wrong happen')               
  });             
}else{
  window.alert("Failed to launch ShareTargetPicker");           
}

スコープ(Scope)の選択

スコープを選択すると以下を取得できます。2パターンのスコープを選択していない場合の結果を確認しました。スクリーンショット 2020-08-27 22.25.27

スクリーンショット 2020-08-27 22.25.53

①OpenID Connectの申請をしておらず、profileにチェックを入れていない場合は下記のようなエラーが出ます。

メールアドレス取得権限を申請すると、OpenID Connectを使用して、ユーザーのメールアドレスを要求できます。詳しくはこちら

スクリーンショット 2020-08-27 14.36.38


画像3

下記コードのliff.getProfile()のcatchにあるアラートが表示されています。

liff.getProfile().then(function(profile) {
  document.getElementById('displayName').textContent = "こんにちは!" + profile.displayName + "さん";
}).catch(function(error) {
  window.alert('Error getting profile: ' + error);
});

②chat_message.writeにチェックを入れていない場合は下記のようなエラーが出ます。

スクリーンショット 2020-08-27 14.36.31

画像8

下記コードのliff.sendMessages()のcatchにあるアラートが表示されます。

liff.sendMessages([
 {
   type: 'text',
   text: 'Hello!'
 }
]).then(() => {
 liff.closeWindow();
}).catch((err) => {
 window.alert('Error sending message: ' + err.message);
});

シェアボタンの表示

画面サイズをFullに設定しているLIFFアプリでは、ヘッダーにシェアボタンが表示されるようになります。(画像左)詳しくはこちら
モジュールモードをオンにすると、シェアボタンが非表示になります。(画像右)

スクリーンショット 2020-08-27 23.31.27

スクリーンショット 2020-08-27 23.29.24

さいごに

LIFFの各APIのエラーもどのようにしたらなるのか、と思ったこともあったので同時に調査することができました!
また他にも色々試してまたブログにしていきますね。

この記事が気に入ったらサポートをしてみませんか?