WinActor + enebular + LINEログインハンズオン

1-1. enebularのフローを開く

enebularにログインしてフロー画面を開いてください。まだenebularの環境が整っていない方はこちらの手順に沿って作業を進めてください。

https://www.enebular.com

1-2. http in を設置する

入力カテゴリにある http ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、URLに /liff と入力してください。

①入力カテゴリ	http
③URL	/liff

s100

1-3. change ノードを設置する

機能カテゴリにある change ノードをドラッグアンドドロップします。先に設置した http ノードと change ノードを線でつなぎます。ブロックをクリックしてエディタ画面を開き、 liffid と入力します。

①機能カテゴリ	change
④名前	変数代入
⑤ルール	liffid

s101

1-4. template ノードを設置する

機能カテゴリにある template ノードをドラッグアンドドロップします。先に設置した change ノードと線でつなぎます。ブロックをクリックしてエディタ画面を開き、構文は HTML を選択します。テンプレート部分に下記コードをコピペしてください。

※既に入力されている部分は一度削除して下記コードを上書きします。

①機能カテゴリ	template
④名前	LIFF-HTML
⑤構文	HTML
⑥テンプレート	下記コードをコピペ ※既に入力されている部分は一度削除して下記コードを上書きします。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
        <title>LIFF-enebular-WinActor</title>
    </head>
    <body>
        <div id="label-container"></div>
        <input type="button" value="ログアウト" onclick="myfunc()">
        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script>
            let labelContainer;
            labelContainer = document.getElementById("label-container");
            
            liff.init({
                liffId: '{{liffid}}'
            })
            .then(async () => {
                if (liff.isInClient()) {
                    console.log('Client Logged in.');
                } else {
                    if (liff.isLoggedIn()) {
                        console.log('Logged in.');
                        // プロフィール取得
                        liff.getProfile()
                            .then(profile => {
                                
                                labelContainer.innerHTML = "<h1>" + profile.displayName + "</h1>"
                            })
                            .catch((err) => {
                                console.log('error', err)
                            })
                    } else {
                        liff.login();
                    }
                }
            })
            .catch((err) => {
                console.log(err.code, err.message);
            });
        
            var myfunc = function(){
                liff.logout();
                window.location.reload();
            }        
        </script>
    </body>
</html>

s102

1-5. http response ノードを設置する

出力カテゴリの http response ノードをドラッグアンドドロップします。先の template ノードと線でつなぎます。このノードは特に編集する必要はありません。画面右上の［デプロイ］ボタンをクリックしてください。

s103

1-6. URLを確認する

デプロイボタンの左にある「i」マークにマウスカーソルを当ててください。URLが表示されるのでメモしておきます。

s104

コピーしたURLの末尾に liff を入力してアクセスしてみてください。ログアウトボタンだけが表示されていることを確認します。

https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff

s105

2-1. LINEログインチャネルの作成

LINE Developerページにアクセスしてください

https://developers.line.biz/console/

「LINEログイン」をクリックします。 s200

2-2. チャネル設定

LINEログインチャネルの設定を行います。下記のように設定してください。

①チャネル名	LIFF-LOGIN
②チャネル説明	LIFF-LOGIN
③アプリタプ	ウェブアプリ, ネイティブアプリ共にチェックを入れる
④メールアドレス	ご自身のメールアドレスを入力

s201

下にスクロールしてチェックを入れてから［作成］ボタンをクリックします。

s202

2-3. LIFFの追加

LIFFのタブをクリックして、［追加］ボタンをクリックします。

s203

2-4. 基本情報の設定

基本情報を下記のように埋めていきます。

①LIFFアプリ名	LIFF-LOGIN
②サイズ	Full
③エンドポイントURL	https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff ※enebularのURLに「liff」を追加を追加
④Scope	profileにチェック

s204

ボットリンク機能は Off を選択して、［追加］ボタンをクリックします。

①ボットリンク機能

Off

s205

2-6. LIFFIDをメモ

発行されたLIFFIDをメモしておきます。下記の赤枠部分がLIFFIDです。

s206

2-7. enebularに設定する

enebularのエディタ画面を開いて、変数代入部分に先程メモした赤枠部分のLIFFIDを設定します。設定したら［デプロイ］ボタンをクリックします。

s207

2-8. URLにアクセス

enebularのURLに再度アクセスすると、今度はLINEのログイン画面が表示されます。

https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff

s208

ログインすると権限ページが表示されるので、［許可］ボタンをクリックして権限を許可しておいてください。

s209

画面が切り替わるとあなたのお名前が表示されたページに遷移します。

s210

3-1. WinActorを起動する

インストールしたWinActorを起動してください。

s300

3-2. 変数を追加する

シナリオで使用する変数を追加します。変数一覧ウィンドウの［＋］をクリックして下記の変数を追加してください。 name の初期値は chrome と入れておいてください。

変数名	初期値
name	chrome
result	未入力で大丈夫です

s301

3-3. ブラウザ起動

ライブラリタブをクリックして、「23_ブラウザ関連 - ブラウザ起動.ums6」を探してください。それを右側のエディタ画面にドラッグアンドドロップします。ブロックをダブルクリックしてプロパティ画面を表示します。

ブラウザ名に先程設定した変数名の name をプルダウンメニューから選択します。ブラウザの種類は chrome を選択してください。

s302

3-4. ページ表示

「23_ブラウザ関連 - ページ表示.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。

ブラウザ名	name
URL 値⇒	enebularで開いたURLを指定する https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff

s303

3-5. 指定時間待機

LINEログインページへ遷移するのを待つために1秒ほど待機します。「09_待機 - 指定時間待機（変数指定可）.ums6」をドラッグアンドドロップします。指定秒数は半角数字で 1000 を設定します。

s304

3-6. クリック処理（メールアドレス）

LINEログインページにはメールアドレスとパスワード入力画面が表示されています。WinActorのロボにメールアドレス入力欄にカーソルを合わせるために要素をクリックする処理を設定します。

「23_ブラウザ関連 - クリック.ums6」をドラッグアンドドロップします。ブラウザ名とXPathの設定を行います。XPathはどの要素をクリックするのかHTML構文の場所を指定するのに必要なものです。

ブラウザ名	name
XPath 値⇒	//*[@id="app"]/div/div/div/div[2]/div/form/fieldset/div[1]/input ※余計なスペースなどが入らないよう気をつけてコピペしてください

s305