2020年8月15日土曜日

FileMakerでGoogle Chrome を操作。Node.js puppeteer

NodejsEvalServer(.exe)が必要です。
NodejsEvalServer(ノードジェイエスイーバルサーバー)
Node.js で簡易サーバーを建て FileMakerからJavaScriptを送信し、実行結果を取得
起動方法は、以下を参照してください。



Google Chrome を操作するには、NodejsEvalServer(.exe) ver.1.1.1が必要です。

動作検証
Windows 10
FileMaker Pro 19

Mac OS 10.15.6
FileMaker Pro 19


■準備 Windows

Node.js

Google Chrome を操作するには、「node_modules」の「puppeteer」が必要です。
モジュールをインストールするためにNode.jsをインストールします。
※NodejsEvalServer(.exe)を単体で使用する場合、Node.jsのインストールは必要ありません。

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

NodejsEvalServer(.exe)｜puppeteer


ダウンロードした「NodejsEvalServer*.*.*.zip」を展開

C:\USERS\...\NODEJSEVALSERVER1.1.1
│  NodejsEval.fmp12
│  お読み下さい.txt
│
├─Mac
│  └─NodejsEvalServer
│          NodejsEvalServer
│          package.json
│
└─Win
    └─NodejsEvalServer
            NodejsEvalServer.exe
            package.json

フォルダ「Win」内のフォルダ「NodejsEvalServer」を任意の場所に保存
例では、「C:\Users\PCUSER\NodejsEvalServer」に保存
コマンドプロンプト(cmd.exe)を起動
以下を入力し、フォルダへ移動
cd C:\Users\PCUSER\NodejsEvalServer
以下を入力し「puppeteer」を」インストール
npm i


「node_modules」が追加されます


NodejsEvalServer.exe をダブルクリックし、以下のようになればOK
起動しない場合は、以下を参照してください。


準備完了

■準備 Mac

Node.js

Google Chrome を操作するには、「node_modules」の「puppeteer」が必要です。
モジュールをインストールするためにNode.jsをインストールします。
※NodejsEvalServer(.exe)を単体で使用する場合、Node.jsのインストールは必要ありません。

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

NodejsEvalServer｜puppeteer

ダウンロードした「NodejsEvalServer*.*.*.zip」を展開
フォルダ「Mac」内のフォルダ「NodejsEvalServer」を任意の場所に保存
例では、「/Applications/NodejsEvalServer/NodejsEvalServer」に保存
ターミナルを起動
以下を入力し、フォルダへ移動
cd /Applications/NodejsEvalServer/NodejsEvalServer
以下を入力し「puppeteer」を」インストール
npm i
「node_modules」が追加されます
NodejsEvalServer をダブルクリックし、以下のようになればOK
起動しない場合は、以下を参照してください。
準備完了

FileMaker
同梱の「NodejsEval.fmp12」を開く

①「puppeteer」を検索
②「🧙 01 puppeteer launch 起動」を選択
③[🔥Fire]ボタンをクリック

Chromenum が起動します


①「🧙 02 puppeteer page.goto URLを開く」を選択
②[🔥Fire]ボタンをクリック で指定ページへ移動

-

FORM input の入力・値の取得の例
🧙 puppeteer e.g.01 サンプルFORMのページを開く
🧙 puppeteer e.g.02 INPUT等入力
🧙 puppeteer e.g.03 値を取得
🧙 puppeteer e.g.04 値を取得 checkbox
🧙 puppeteer e.g.05 値を取得 SELECT multiple

その他 例：
🧙 04 puppeteer PDFを作成
🧙 05 puppeteer screenshot fullPage:true 全体 //スクリーンショットWEBページ全体
🧙 06 puppeteer screenshot element 指定要素 //スクリーンショット指定要素
🧙 07 puppeteer querySelector innerTextを取得 クラス指定
🧙 08 puppeteer リンクをクリック "○○"を含むリンク

インストールされた「Google Chrome」を起動

以下Scriptの
,executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe'
を有効にすれば、インストールされた「Google Chrome」の操作が可能です。
※「chrome.exe」のパスは、「chrome://version」で確認できます


🧙 01 puppeteer launch 起動 Chrome/Chromium
Script：
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']
//,executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe'/*Chromium ではなく、Chromeを使用*/
//,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();
})();

-
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)