ヘッドレスChromeや、Chromeをブログラムで操作できるpuppeteer その2

今回は、ヘッドレスモードでも巡回させています。

動画で使ったソースは以下

const puppeteer = require('puppeteer');
(async () => {
  //const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] })
  const browser = await puppeteer.launch({ headless: true, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] })
  const page = await browser.newPage()
  
//  const navigationPromise = page.waitForNavigation()
  
//  await navigationPromise
  
  await page.goto('http://localhost:3000/users')
  
  await page.setViewport({ width: 1316, height: 632 })
  
  await page.waitForSelector('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  await page.screenshot({path: 'test01-1.png'});
  await page.click('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  
  await page.waitForSelector('body > a:nth-child(4)')
  await page.screenshot({path: 'test01-2.png'});
  await page.click('body > a:nth-child(4)')
  await page.screenshot({path: 'test01-3.png'});
  
  await browser.close()
})()

前回の動画のソースに、スクリーンショットを出力する部分を追加しております。

あと上のソースはヘッドレスモードのソースになっていて、表示させながら巡回したい時は

  const browser = await puppeteer.launch({ headless: true .......

のtrue の部分を falseにすればOK!

ヘッドレスChromeや、Chromeをブログラムで操作できるpuppeteer その1

本家

https://github.com/GoogleChrome/puppeteer

動画中にインストールしたChrome用アドオン

https://chrome.google.com/webstore/detail/katalon-recorder/ljdobmomdgdljniojadhoplhkpialdid/related

https://chrome.google.com/webstore/detail/puppeteer-exporter-for-ka/idgpmhfldhpaoiflfleanildmnojchhd/related?utm_source=chrome-ntp-icon

https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda/related

インストール手順(Ubuntu,Debianの場合)

#npmのインストール
sudo apt install npm

#作業ディレクトリにて
npm install puppeteer

動画中に上記アドオンを使って作成し手直ししたソース1

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] })
  const page = await browser.newPage()
  
//  const navigationPromise = page.waitForNavigation()
  
//  await navigationPromise
  
  await page.goto('http://localhost:3000/users')
  
  await page.setViewport({ width: 1316, height: 632 })
  
  await page.waitForSelector('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  await page.click('table > tbody > tr:nth-child(6) > td:nth-child(4) > a')
  
  await page.waitForSelector('body > a:nth-child(4)')
  await page.click('body > a:nth-child(4)')
  
  await browser.close()
})()


動画中に作成したソースその2
const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false, defaultViewport: { width: 1920, height: 1080 }, args: ['--start-maximized'] });
    const page = await browser.newPage();
    let element, formElement, tabs;

    // Original Katalon Recorder info - Command: open, Target: http://localhost:3000/users, Value: 
	await page.goto(`http://localhost:3000/users`, { waitUntil: 'networkidle0' });

	// Original Katalon Recorder info - Command: click, Target: xpath=(.//*[normalize-space(text()) and normalize-space(.)='Show'])[3]/following::a[1], Value: 
	element = await page.$x(`(.//*[normalize-space(text()) and normalize-space(.)='Show'])[3]/following::a[1]`);
	await element[0].click();

	// Original Katalon Recorder info - Command: click, Target: link=Back, Value: 
	element = await page.$x(`//a[contains(text(),'Back')]`);
	await element[0].click();
	await page.waitForNavigation();
    await browser.close();
})();

Ruby on Rails のTutorialやってみたよ動画アップしました!

https://railstutorial.jp/

https://railstutorial.jp/chapters/beginning?version=5.1#cha-beginning

やったコマンド

# rails install
sudo apt install rails

# ファル生成
rails _5.2.2_ new hello_app

# ディレクトリに移動
cd hello_app

# サーバー起動
rails server

# ファイル変更して、hello worldと出力できるように2つのファイルを変更
vi app/controllers/application_controller.rb
vi config/routes.rb


# git 関係 ( 下のメールアドレス使ってません、適当です)
git config --global user.name "NM Max"
git config --global user.email nmmax@123abcsoft.com

# 初期化
git init

# カレントディレクトリ以下のファイルを監視対象に
git add -A

# コミット -m の後の文字はコメント
git commit -m "Initialize repository"

# ファイル足したら、全部のファイルを監視対象に
git add -A

# log確認
git log

# status確認
git status

https://railstutorial.jp/chapters/toy_app?version=5.1#cha-a_toy_app

やったコマンド

#もう夜遅いので、後日追記します。

現状の動画案

  • CSS,Bootstrap関係
  • WordPress関係(ブログ開始でやったし)
  • Qemu関係
  • Ubuntu,Debian,Linux関係
  • Ruby on Rails Tutorial、関係
  • ブロックチェーン関係
  • 機械学習関係
  • MT4とかFXのデータ処理関係
  • プログラム言語作ってみる
  • 将棋関係
  • 過去やった系(PICとかAVR、数式処理、データ処理、Blender、OpenCV、物理エンジン、ブーストライブラリ)

どれが受けが良いかわかんないので、やってみて、受けたらそれを重視で行く感じかな?

Ruby on RailsのTutorial その2

環境はAWSのClould9を勧めているんだけど、それはやめて、Dockerを前から使いたかったので、Dockerでいってみようとおもってます。

Docker Ruby on Rails tutorial

でググってやると、古いタイプと新しいけど、SQLiteじゃなく、PostgreSQLを使う例がでてきました。新しい方を参考に、SQLiteを使うように変更して、やってみたいと思います。

最初の動画は、Docker使った環境構築かな?

今日はよる遅くなってしまったので、明日かな?

CSSもちゃんと勉強してなかったし、CSS、Bootstrapの勉強も開始した

スマホアプリで、Bootstrap関係をいれてやった

動画が楽で、英語だけど、それみてます。

ちょっと英語なまってる気がするけど、比較的聞き取りやすい

アプリの方は以下のやつで、良い内容でやってて負担は少ないけど、スマホで文字打つのが非常に苦痛

https://play.google.com/store/apps/details?id=com.sololearn.csstrial&hl=ja

スマホに接続できるキーボード購入しようかな?

Begineかなにかのコース終わったら、勧誘されて、従ったら無料体験のあるアプリをインストールされて、課金する気ないからドキドキしながら、選択しなかった(無料体験も、課金も)

課金を禁止したいけど、課金禁止が設定としてできず、これやめてほしかった

指紋認証とパスワード認証で、ロックはできるけど、いかなる場合も課金無しの設定欲しいところだ

ということで、CSSとか、Bootstrap関係の動画も作るかも

Ruby on Rails の Tutorial もやることにした

MT4の動画を作るために色々調べていたのですが、Ruby on Rails もやることにしました。

どうやら非常に有名な英語の文書があるらしく、それを日本語に訳してくれてるサイトがあるので、そこの文書にしたがって色々やってるのを動画にしていくことにします。

https://railstutorial.jp/chapters/beginning?version=5.1

最初の方は関係ない、前置きで、前置きも相当ながい

https://railstutorial.jp/chapters/beginning?version=5.1#sec-up_and_running

ここらからようやく、環境構築っぽい

Ubuntuはパッケージになってるとは思うけど、どうなんだろ?

下のリンクのChromeのアドオンをつかって読み上げてもらうと楽にすすめれた(環境構築の前まで)

https://chrome.google.com/webstore/detail/read-aloud-a-text-to-spee/hdhinadidafjejdhmfkjgnolgimiaplp?q=home%20page&hl=ja