LIFF用js修正


1. Lambdaの環境変数設定変更

前の手順で作成した LIFF AppのLIFF IDを、LIFF用のJavaScriptに設定します。

  • ~/environment/20200206_LIFF_HandsOn/handson-1/liff-starter.js

任意のテキストエディタで下記ファイルを修正します。
ファイル上部のdefaultLiffIdの値が1234567890-abcdef12となっていますので、ご自身のLIFF IDに書き換えてください。

vim ~/environment/20200206_LIFF_HandsOn/handson-1/liff-starter.js

★なおこの例ではエディタにvimを使っていますが、Cloud9ではエクスプローラ感覚でファイルを修正することも可能です。
★その場合、画面左部のファイルツリーから対象のファイルをダブルクリックして、修正->保存(Ctrl+s)してください。

ファイル修正後、AWS CLIを使ってS3にコピーします。
下記コマンドを、バケット名をご自身のものに書き換えた上で実行してください。

aws s3 cp ~/environment/20200206_LIFF_HandsOn/handson-1/liff-starter.js s3://YourBucketName/

2. 動作確認

これで最初のハンズオンの作業は完了です。
LINEの任意のチャンネルに該当のURLをポストして、リンクをクリックしてみましょう!
※下記の例では自分一人だけ入っているLINEグループを作成しています。

A Chapter

例えばProfile情報が簡単に取得できたり、簡単にメッセージを送信できたりします。

なお、このメッセージは、先ほど書き換えたliff-starter.js内に定義されており、例えば下記のように内容を書き換えることでメッセージ内容を追加変更することも可能です。

(snip...)
            liff.sendMessages([
            {
                'type': 'text',
                'text': "You've successfully sent a message! Hooray!"
            }, //ここの , を必ず忘れないように!!!
            {                                                                  //ここから
                "type": "image",
                "originalContentUrl": "https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png",
                "previewImageUrl": "https://a0.awsstatic.com/libra-css/images/logos/aws_logo_smile_1200x630.png"
            },
            {
                'type': 'text',
                'text': "Sent From LIFF app!"
            },                                                                 //ここまで追記
            ]).then(function() {
                window.alert('Message sent');
            }).catch(function(error) {
                window.alert('Error sending message: ' + error);
            });
(snip...)

書き換えた場合は、改めてS3にアップロードしてください。

aws s3 cp ~/environment/20200206_LIFF_HandsOn/handson-1/liff-starter.js s3://YourBucketName/

ここまでで、LIFF Appの簡単な動作確認を終えることができました。