I wanted to know the balance of electronic money, so I Headless with Puppeteer and tried IFTTT

I am always indebted to the Osaifu-Keitai function of Arrows NX F-01K.The two electronic money I usually use is Mobile Suica and Nanaco, and I usually use one of them to shop and get on a train.However, since the auto -charge was not set, when the balance was uneasy, I started each application before passing through the ticket gate or shopping.

Aside from nanaco, Mobile Suica is very annoying when you are in a hurry, as it takes time to start the app or sometimes an error.I don't want to start the app just to check the balance.If possible, I am glad if it can be as easy as it can be confirmed by just one push the power button on the smartphone.

If it's true, it's most thankful that Google Pay will respond to that kind of thing, but for now, there are no such features that can be realized with other apps.Then you have to make it.But creating a new app takes too long.Can you manage it by combining the existing services and tools?

Therefore, I thought about pushing the electronic money balance displayed on the web service linked to electronic money.There seemed to be various ways, but the easiest thing to do was to "Headless with Puppeteer and IFTTT" according to the title.

Do you understand what it means?I'm not sure because I say it myself.Roughly, however, get a screenshot on a web page where the balance of electronic money is displayed, plunge it into a Dropbox synchronous folder, detect the upload, and notify you with the image.The figure is as follows.

Let's explain a little more carefully.First, in order to obtain the balance of electronic money, use the "MF cloud expenses" that is used for applying and managing the company's expenses.With this service, you can automatically get the history of bank accounts, credit cards, and electronic money.There is also a page that can list those balance, so it seems quick to automate the acquisition of this screenshot.

Use "Headless Chrome" that runs on a PC (MacOS or Linux) to get a screenshot.This is a new feature installed from the recent Google Chrome, which allows you to execute Web browsing without a GUI.Run from the command line, read the specified page, take screenshots, or get page information.

However, if this is the case, the authentication page will appear before displaying the MF cloud expenses account balance page.So, use a tool called "Puppeteer" to operate Headless Chrome behind the scenes to operate the login.The JavaScript coordinary rules make programming and clicking on the web browser and clicks so that it can be executed.

Start the web browser with a script, enter your ID and password in the login form, and click the button to access the account balance page.Then take a screenshot and save it in a predetermined folder.Since everything is executed in an invisible state, work on the PC does not hinder.

[Script running in Puppeteer] (Emoney.JS)

CONST PUPPETEER = Require ('Puppeteer'); Var Date = New Date (); Var Mon = Date.getmonth ()+1; var dt = data.getFullyear () + "-" + mon + "-" + date.getdate () + "_" + date.Gethours () + "-" + Date.Getminutes (); Var imgpath = '/ * Upload folder */' + dt + '.png ';

Puppeteer.Launch ({Headless: True}).then(async browser => {const page = await browser.Newpage (); await page.SetViewPort ({Width: 1200, Height: 800}); AWAIT Page.GOTO ('https: // expense.moneyforward.Com/Accounts'); Await Page.Type ('#sign_in_session_service_email', '************.Type ('#sign_in_session_service_password', '***********.Click ('[name = "commit"]'); await page.Waitfor (5000); await page.Screenshot ({Path: imgpath, fullpage: true});.Close ();});

The save destination was set to a "screenshot" folder synchronized with "Dropbox".This is uploaded to Dropbox the moment you save the screenshot.Then detect this upload and send a notification to your smartphone.

I used "IFTTT" to send a notification.It is a service that enables automation to execute the specified action with the specified trigger.IFTTT created a recipe that "If you detect a new file upload in a Dropbox screenshot folder, you will notify it with a rich push notification."

The generated notifications are displayed on the smartphone notification panel or lock screen.By default, only the notification text is visible, but you can preview screenshots by swiping the notification.The screenshot has a wonderfully displayed electronic money balance.

Of course, in order to know the latest electronic money balance at that time, this process must be performed regularly.This time, it was operated on MacOS, so we used the regular execution mechanism called "Launchd", a standard function of MacOS, to check the balance every six hours.

[Emoneych.Shell script for performing JS regularly] (Emoneych.sh)

#!/Bin/Bash/USR/LOCAL/BIN/NODE/ * Script saving directory */Emoneych.js

[Emoneych.Settings for execution of SH regularly every hour] (com.ftprt.Emoneychecker.plist)

Labelcom.ftprt.EmoneycheckerProgramArgumentssh/※シェルスクリプトの保存ディレクトリ※/emoneych.SHSTARTINTERVAL21600RUNATLOADEXITTIMEOUT300

However, with this method, it is not executed unless the Mac is running, and the midfielder cloud expenses are long and have a long interval to acquire information in each account.In IFTTT, it is difficult to use the balance in real time, as the interval between the file uploading is available for a few minutes to 10 minutes.It is also an issue that the number of files will increase each time you take a screenshot.

Therefore, I want to improve various things, such as moving on the operating Linux server, scraping the page, shaping it into text, reducing the capacity of the upload file, or not uploading if the content is not changed from the previous time.However, for the time being, I can quickly check the electronic money balance with just the power of the smartphone and swipe, so I want to keep it good.