Zenn
💬

ChromeのRecord機能で記録した操作をFileMakerから実行する

2022/01/09に公開
Chrome
Node.js
Puppeteer
FileMaker
tech

ChromeのRecord機能で記録した操作をFileMakerから実行する

動作検証

Mac OS 11.5.2
FileMaker Pro 19

■準備 Mac

Node.js
Google Chrome を操作するには、「node_modules」の「puppeteer」が必要です。
モジュールをインストールするためにNode.jsをインストールします。

Node.js https://nodejs.org/ja/ (動作検証時、Ver.16.13.1)
Node.jsをインストール

NodejsEvalServer(.exe)｜puppeteerが必要です。

NodejsEvalServer(.exe)の設定方法は、以下を参照
https://qbxxdp.blogspot.com/2020/08/filemakergoogle-chrome-nodejs-puppeteer.html

NodejsEvalServer(.exe)｜puppeteer
NodejsEvalServer1.2.0.zip(500円)
https://fm-aid.stores.jp/items/5f1d8cdbd7e1d8292f17f0a3

ダウンロードした「NodejsEvalServer*...zip」を展開
フォルダ「Mac」内のフォルダ「NodejsEvalServer」を任意の場所に保存
例では、「/Applications/NodejsEvalServer/NodejsEvalServer」に保存

Google Chrome のRecord機能を利用するには Ver.97以降が必要です。

Choromeで操作を記録

Googleで検索を行うカンタンな操作を記録してみる

DevTools を開く(F12)
「⋮」→「More tools」→「Recordeing」

「Recorder」を選択
「Start new recording」をクリック

「RECORING NAME」に任意の名前を設定(ここでは、TEST01)
「Start a new recording」をクリック

Googleで「MarkdownThing」を検索

DevTools
「End recording」をクリック

操作が記録されます。
「Replay」で記録した操作を実行できます。

操作記録をエクスポート
「Export as Puppeteer」アイコンをクリック
任意の場所へ保存

エクスポートした jsファイルを書き換え

コメントアウト
//const puppeteer = require('puppeteer');
...
    //const browser = await puppeteer.launch();
    //const page = await browser.newPage();
    
追加
    const page = (await browser.pages())[0];
    
コメントアウト
    //await browser.close();

NodejsEvalServer を起動

以下を参照して下さい。

Node.js で簡易サーバーを建て FileMakerからJavaScriptを送信し、実行結果を取得。
https://qbxxdp.blogspot.com/2020/07/nodejs-filemakerjavascript.html

FileMaker

「NodejsEval.fmp12」を開く
「chrome」を検索
「🧙 01 puppeteer launch 起動 Chrome/Chromium」の
//,executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe'/*Chromium ではなく、Chromeを使用*/
をコメントアウト
「Fire」をクリック

「Chromium」が起動すればOK

以下のコメントアウトを外せば、インストール済のChromeを操作することができます。
,executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'/Chromium ではなく、Chromeを使用/
Chromeのパスは、環境により異なる場合があります。

puppeteer = require("puppeteer");
browser=null;
browserWSEndpoint = null;
(async () => {
browser = await puppeteer.launch({
		headless: false /*ブラウザ表示:false*/
		,timeout: 30000
		,defaultViewport: null /*デフォルト800x600｜効かない?*/
		,args:['--start-maximized'  /*ウインドウ最大化*/,'--no-sandbox', '--disable-setuid-sandbox','--disable-infobars']
		//,executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe'/*Chromium ではなく、Chromeを使用*/
		//,executablePath: 'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe'/*Chromium ではなく、Edgeを使用*/
		,executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'/*Chromium ではなく、Chromeを使用*/
		//,userDataDir:'C:/Users/PCUSER/AppData/Local/Google/Chrome/User Data' //ユーザープロファイルを指定｜要らない→/Default
});
browserWSEndpoint = await browser.wsEndpoint();
return browser.version();
})();

*新規レコード を作成し、先程 エクスポート・編集した .js ファイルをフィールド：Script へ貼り付け。
Titleは「Chrome's Recorder TEST01」(任意)

「Fire」をクリック。
記録した操作が、Chromium で実行されます。

最後に以下を付けてHTMLソースを取得

//await browser.close();
return await page.$eval('html', element => element.innerHTML );
})();

Discussion