enebularにログインしてフロー画面を開いてください。まだenebularの環境が整っていない方はこちらの手順に沿って作業を進めてください。
入力カテゴリにある http
ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、URLに /liff
と入力してください。
①入力カテゴリ | http |
③URL | /liff |
機能カテゴリにある change
ノードをドラッグアンドドロップします。先に設置した http
ノードと change
ノードを線でつなぎます。ブロックをクリックしてエディタ画面を開き、 liffid
と入力します。
①機能カテゴリ | change |
④名前 | 変数代入 |
⑤ルール | liffid |
機能カテゴリにある 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>
出力カテゴリの http response
ノードをドラッグアンドドロップします。先の template
ノードと線でつなぎます。このノードは特に編集する必要はありません。画面右上の[デプロイ]ボタンをクリックしてください。
デプロイボタンの左にある「i」マークにマウスカーソルを当ててください。URLが表示されるのでメモしておきます。
コピーしたURLの末尾に liff
を入力してアクセスしてみてください。ログアウトボタンだけが表示されていることを確認します。
https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff
LINE Developerページにアクセスしてください
https://developers.line.biz/console/
「LINEログイン」 をクリックします。
LINEログインチャネルの設定を行います。下記のように設定してください。
①チャネル名 | LIFF-LOGIN |
②チャネル説明 | LIFF-LOGIN |
③アプリタプ | ウェブアプリ, ネイティブアプリ共にチェックを入れる |
④メールアドレス | ご自身のメールアドレスを入力 |
下にスクロールしてチェックを入れてから[作成]ボタンをクリックします。
LIFFのタブをクリックして、[追加]ボタンをクリックします。
基本情報を下記のように埋めていきます。
①LIFFアプリ名 | LIFF-LOGIN |
②サイズ | Full |
③エンドポイントURL | https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff |
④Scope | profileにチェック |
ボットリンク機能は Off
を選択して、[追加]ボタンをクリックします。
①ボットリンク機能 | Off |
発行されたLIFFIDをメモしておきます。下記の赤枠部分がLIFFIDです。
enebularのエディタ画面を開いて、変数代入部分に先程メモした赤枠部分のLIFFIDを設定します。設定したら[デプロイ]ボタンをクリックします。
enebularのURLに再度アクセスすると、今度はLINEのログイン画面が表示されます。
https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff
ログインすると権限ページが表示されるので、[許可]ボタンをクリックして権限を許可しておいてください。
画面が切り替わるとあなたのお名前が表示されたページに遷移します。
インストールしたWinActorを起動してください。
シナリオで使用する変数を追加します。変数一覧ウィンドウの[+]をクリックして下記の変数を追加してください。 name
の初期値は chrome
と入れておいてください。
変数名 | 初期値 |
name | chrome |
result | 未入力で大丈夫です |
ライブラリタブをクリックして、「23_ブラウザ関連 - ブラウザ起動.ums6」を探してください。それを右側のエディタ画面にドラッグアンドドロップします。ブロックをダブルクリックしてプロパティ画面を表示します。
ブラウザ名に先程設定した変数名の name
をプルダウンメニューから選択します。ブラウザの種類は chrome
を選択してください。
「23_ブラウザ関連 - ページ表示.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。
ブラウザ名 | name |
URL 値⇒ | enebularで開いたURLを指定する |
LINEログインページへ遷移するのを待つために1秒ほど待機します。「09_待機 - 指定時間待機(変数指定可).ums6」をドラッグアンドドロップします。指定秒数は半角数字で 1000
を設定します。
LINEログインページにはメールアドレスとパスワード入力画面が表示されています。WinActorのロボにメールアドレス入力欄にカーソルを合わせるために要素をクリックする処理を設定します。
「23_ブラウザ関連 - クリック.ums6」をドラッグアンドドロップします。ブラウザ名とXPathの設定を行います。XPathはどの要素をクリックするのかHTML構文の場所を指定するのに必要なものです。
ブラウザ名 | name |
XPath 値⇒ | //*[@id="app"]/div/div/div/div[2]/div/form/fieldset/div[1]/input |
入力フォームにWinActorから文字列を送信することができます。ノードタブをクリックして「アクション - 文字列送信」をドラッグアンドドロップします。「ウィンドウ識別名」の右側にターゲットアイコンがあるのでクリックします。
予めChromeブラウザでLINEログインページを開いておいてください。
https://ev2-prod-node-red-xxxxxxx-xxx.herokuapp.com/liff
マウスカーソルがターゲットアイコンに変わるので、起動しているChromeブラウザをクリックします。送信文字列にLINEログインで使用しているメールアドレスを入力してください。
送信文字列 値⇒ | メールアドレスを入力 |
ライブラリタブをクリックして「23_ブラウザ関連 - クリック.ums6」をドラッグアンドドロップします。ブラウザ名とXPathの設定を行います。
今度はパスワード部分をクリックしてほしいので、その部分のXPathを設定します。
ブラウザ名 | name |
XPath 値⇒ | //*[@id="app"]/div/div/div/div[2]/div/form/fieldset/div[2]/input |
ノードタブをクリックして「アクション - 文字列送信」をドラッグアンドドロップします。「ウィンドウ識別名」の右側にターゲットアイコンがあるのでクリックします。3-7で行ったのと同様にブラウザウィンドウをクリックしてください。
送信文字列にLINEログインで使用しているパスワードを入力してください。
ライブラリタブをクリックして「23_ブラウザ関連 - クリック.ums6」をドラッグアンドドロップします。ブラウザ名とXPathの設定を行います。
今度はログインボタン部分をクリックしてほしいので、その部分のXPathを設定します。
ブラウザ名 | name |
XPath 値⇒ | //*[@id="app"]/div/div/div/div[2]/div/form/fieldset/div[3]/button |
LINEログイン完了後に表示されるログイン者名を取得します。「23_ブラウザ関連 - 値の取得.ums6」をドラッグアンドドロップします。ブラウザ名、XPathと取得した値を格納する変数名を指定します。
ブラウザ名 | name |
XPath 値⇒ | //*[@id="label-container"]/h1 |
値を格納する変数 | result |
これまで作ったフローをグループ化します。これを行うことで作業フローをまとめることができるので、別の方が後で見返したときにどういう自動化が行われているかひと目でわかるようにするメリットもあります。
マウスで作ったものを選択して、右クリックメニューにある「グループ化」をクリックしてください。
すると、下記のようにグループ化されます。グループ名を変更することができるので、処理内容を記載することも可能です。
このままではロボを実行しても何も動きません。動かすためにシナリオ部分に作ったグループをドラッグアンドドロップしてください。
取得した値をメッセージボックスで表示してみます。ノードタブの「ユーザー - 待機ボックス」をドラッグアンドドロップします。表示メッセージの変数名に result
を設定します。
ここまでできれば、いよいよWinActorを動かしてみます。[実行]ボタンをクリックしてください。
すると自動的にブラウザが起動して、メールアドレスとパスワードも勝手に入力されます。ログインできればメッセージボックスにログインした方の名前が表示されます。
最後にシナリオを保存しておきましょう。
プログラムの記述をほとんどせずに、GUI画面で簡単にロボを作ることができました。enebularとの連携でさらに面白いことができるかもしれません。色々試してみてはいかがでしょうか?
どうしてもうまくいかない方は、下記からシナリオファイルをダウンロードしてみてください。ダウンロードしたファイルをダブルクリックして開いてください。
url
、mail
、pass
はそれぞれご自身の環境を入れてください。