そういう、ビジネスモデルです。

ビジネスモデル、設計図、模型などの現状と動向を考察、関連書籍の紹介

Git リモートレポジトリ作成時に .gitignore ファイルを作成したら、後の設定でハマった。

Git リモートレポジトリ作成時に .gitignore ファイルを作成したら、後の Visual Studio Code (VS Code) との同期設定でハマった。

もう二度と .gitignore ファイルその他のファイルは追加しないぞ。

まずはサンプルプログラム用のプロジェクトを用意

プロジェクト名は BotFrameworkSample とした。 

tombi-aburage.hatenablog.jp

  1. GItHub で新しいプロジェクト(レポジトリ)を作成

  2. VS Code で新しいプロジェクトを作成

  3. レポジトリを同期

最初の GitHub でのレポジトリ作成時に、Add .gitignore で Node を選んだら .gitignore ファイルが自動追加され、そのためにレポジトリへの接続手順ページが表示されなくなってしまった。

いつでも参照できるように empty というプロジェクトを作成し、レポジトリ名だけ置き換えて接続手順を表示させた。

さしあたり、用は足せるか。

リモートの .gitignore のせいで git push -u origin master に失敗

echo "# empty" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/tombi-aburage/BotFrameworkSample.git
git push -u origin master

https://github.com/tombi-aburage/BotFrameworkSample.git
! [rejected] master -> master (fetch first)
error: failed to push some refs to 'https://github.com/tombi-aburage/BotFrameworkSample.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

ローカルにはないファイルがリモートにあるので更新できなかった。
push の前に pull して統合しろ、とのこと。

融通利かないなぁ…

コマンドパレット View - Command Palette で Git: Clone したが解消せず。

ローカルのプロジェクトフォルダの中身(.git フォルダ等)を削除して空にしてから、今度は git init だけをまず実行した。

git init

Initialized empty Git repository in E:/Users/tombi/Projects/BotFrameworkSample/.git/

その後で、コマンドパレット View - Command Palette より Git: Clone

f:id:tombi-aburage:20190518101205p:plain

コマンドパレットで Git: Clone

を行ったところ、.gitignoreは同期された。その後、

echo "# empty" >> README.md
git add README.md
git commit -m "first commit"

[master (root-commit) 526826f] first commit
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 README.md

ここまではうまくいったのだが、

git push -u origin master

fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

となり失敗した。

origin が見当たらない…

どうやら、Git: Clone だけでは origin というタグ?が作成されないらしく、

git remote add origin https://github.com/tombi-aburage/BotFrameworkSample.git

を実行する必要があった。しかし追加直後に

git push -u origin master

を実行してみても、やはり同じエラーが再発した。

慌ててしまい、もう一度、コマンドパレット View - Command Palette より Git: Clone を行ったところ、レポジトリが2つに増えてしまった。

f:id:tombi-aburage:20190518101950p:plain

何度も失敗を繰り返した結果、おかしなことに…
pull と clone を勘違いした!

・・・下のほうのレポジトリをクローズ。

ソース制御 Source Control より Pull を実行

f:id:tombi-aburage:20190518102554p:plain

Source Control - Pull

現在のブランチには追跡情報がない、とのこと。

f:id:tombi-aburage:20190518102356p:plain

Git: There is no tracking information for the current branch

もう正しい状態が分からん…

すっかり正しい状態が分からなくなってしまったので、根本的にやり直し。

リモートレポジトリから全部作り直し

  1. GitHub からリモートレポジトリごと削除した。
    Setting - Options - Danger Zone から Delet this Repository
    正気かどうかを何度も確認された。
  2.  VS Codeワークスペースを閉じて、フォルダ内容を削除
    何度も間違えたせいで、BotFrameworkSample フォルダの下にも BotFrameworkSample が入れ子でできてしまっていた。
    .git フォルダ、README.md も含む全てのフォルダ・ファイルを削除。
  3. VS Codeワークスペースを新規作成
    ソース制御 Source Control のタブで、初期状態を確認しておく。

    f:id:tombi-aburage:20190518104609p:plain

  4. GitHub にリモートレポジトリを作成
    今度は .gitignore を作成しない。いかなるファイルも作成しない。
  5. レポジトリを同期
    GitHub のページに表示されたコマンドを、そのとおり VS Code の Terminal で入力。
echo "# BotFrameworkSample" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/tombi-aburage/BotFrameworkSample.git
git push -u origin master

(略)

PS E:\Users\tombi\Projects\BotFrameworkSample> git push -u origin master
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 254 bytes | 254.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/tombi-aburage/BotFrameworkSample.git
* [new branch] master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

何のトラブルもなく、作成された。

master ブランチは、リモートブランチ master を origin から追跡するように設定されたとのこと。

問題なし(でいいのか?)

たぶん追跡を設定する git コマンドをよく理解していれば、リモートレポジトリごと作り直すなどという手段に頼らなくてもよかったのではないかと推測。その勉強は後日。

Microsoft Bot Framework 開発環境 (Node.js、TypeScript)

プログラミングBot Framework (マイクロソフト関連書)

プログラミングBot Framework (マイクロソフト関連書)

 

を読んだのだが、Node.js ではなく C# が開発言語の前提だった。

フロントエンドのボット(チャネル)は何でもよい、という建前の汎用的なフレームワークなので、アーキテクチャは小難かったが大体理解はできた。

しかし Line、Alexa などの勝ち組は、わざわざマイクロソフトの相手をする気もなさそうであり、実質的に Cortana、Skype、Slack ぐらいしか繋がりそうもない。

開発言語 TypeScript / JavaScirpt (Node.js) の場合

たまたま読んでいた 

TypeScript実践マスター

TypeScript実践マスター

 

では、Node.js での説明があった。

ほとんど同じであり、難しくもなかったが記録しておく。

Bot Framework Emurator インストール

ボット・フレームワークエミュレータ本体は、以前に GItHub からダウンロードしてインストールしていた。

が、他に Home · microsoft/BotFramework-Emulator Wiki · GitHub の Resources にあるようなものが必要らしい。

このうち Bot Builder V4 SDK は開発言語別となっているので、Node.js の場合には npm でインストールすることになる。

まずはサンプルプログラム用のレポジトリとプロジェクトを用意

プロジェクト名は BotFrameworkSample とした。 

tombi-aburage.hatenablog.jp

GItHub でレポジトリ生成するさいに、Node.js 用の.gitignore を生成させたところ、ひとくハマってしまった。(ロス2時間)

tombi-aburage.hatenablog.jp

Bot Builder V4 SDK を追加

MSDN のブログも発見したので、

blogs.msdn.microsoft.com

TypeScript実践マスター

TypeScript実践マスター

 

と見比べながら設定を進めた。

前者のブログには

ローカル環境で開発をする方法について紹介します。

とあるので内容的にちょうどよかった。

Git はさきほど設定したので git init は飛ばして、その後の手順を忠実に実行。

entry point は app.js としてください。

がポイントらしい。

SDK を取得すると、node_modules 配下に大量にファイルが追加されたので、.gitignore ファイルを作成&記述して GIt 管理下からnode_modules 配下を外した。

サンプルプログラムを追加

先ほどのブログの途中で、別のブログのページに飛び、そこにある説明どおりにエコーボットを作成した。

Yeoman と JavaScript のジェネレーターをインストールします。

ジェネレーターを使用してエコー ボットを作成します。

Yeoman を使って、サンプルプログラムの生成すらも完全自動化している。
これには自己診断機能があるらしく、全て問題なし!と言い切ってくれた。

Yeoman Doctor
Running sanity checks on your system

√ Global configuration file is valid
√ NODE_PATH matches the npm root
√ Node.js version
√ No .bowerrc file in home directory
√ No .yo-rc.json file in home directory
√ npm version
√ yo version

Everything looks all right!

これは、安心だ(嘘じゃなければネ…)

ジェネレーターを使用してエコー ボットを作成

途中で TypeScript か JavaScript か選ばされた。

本心は TypeScript なのだが、今は手順どおりに稼働確認を優先するため、JavaScript を選択しておく。

ここまで、特に問題なし

JavaScript を選択したのに、Python 実行ファイルが見つからないとのエラー

最終的には

------------------------
Your new bot is ready!
------------------------
Open the README.md to learn how to run your bot.
Thank you for using the Microsoft Bot Framework.

と出力されているので問題ないと思うが、途中で Python 環境に関するものらしきエラーが出力されているので、一応記録はしておく。

E:\Users\tombi\Projects\BotFrameworkSample\my-chat-bot\node_modules\dtrace-provider>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack at FSReqWrap.oncomplete (fs.js:153:21)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd E:\Users\tombi\Projects\BotFrameworkSample\my-chat-bot\node_modules\dtrace-provider
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

たぶん、関係なし

エコーボットの生成を完了

参照先のブログ Bot Framework SDK for JavaScript を使用してボットを作成する - Bot Service | Microsoft Docs では npm start で起動と書かれており、

参照元のブログ Node.js ではじめる Bot 開発 (基本編) – monoe's blog では node app.js で起動と書かれている。

とりあえず参照元のほうの手順で実行したが、モジュールが発見できないとのこと。

node app.js

internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module 'E:\Users\tombi\Projects\BotFrameworkSample\app.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

app.js の場所を確認してみたところ、BotFrameworkSample 直下ではなくて、サブディレクトリの my-chat-bot 配下に生成されていた。

しかも my-chat-bot 配下にも、それ専用の package.json ファイルが二重に存在するという最悪な事態に w

トラブルの匂いがプンプンする・・・

エコーボットを起動

とりあえず稼働確認だけなので、あまり手間をかけたくない。

参照先のブログでは、作成したボットのディレクトリに移動して npm start で起動と書かれていたので、その手順で、そのとおりにやってみる。

起動して、対話待ちになった。いちおう成功といえそうだ。

npm start

> myChatBot@1.0.0 start E:\Users\tombi\Projects\BotFrameworkSample\my-chat-bot
> node ./index.js
restify listening to http://[::]:3978

Get Bot Framework Emulator: https://aka.ms/botframework-emulator

To talk to your bot, open the emulator select "Open Bot"

ポート 3978 でリスンしているとのこと。参照元のブログのほうに戻る。

Bot エミュレーターでの実行(失敗)

ウィンドウ上部の「Enter your endpoint URL」をクリック 

 は最新のエミュレータには存在せず、かわりに「Open Bot」ボタンがあったので、これに読み替えて手順どおり実施した。

http://localhost:3978/api/messages

・・・しかしエミュレータは何も反応せず、繋がってはいないように思えた。

さきほどの起動メッセージにある

restify listening to http://[::]:3978

がすげえ怪しい・・・

Bot エミュレーターでの実行(失敗)

いきなり「Open Bot」ボタンではなくて、ボット設定ファイルを先に作ってから、Open Bot する方法に変えてみた。

f:id:tombi-aburage:20190518120741p:plain

New Bot Configuration

真っ白な画面が表示されており、メッセージ入力欄すらも出てこない。
Converstion - Send System Activity - ping

を送ってみたが、画面のほうもサーバ側ボットの方も、微動だにしなかった。

まったくの無反応…

これは長引きそうだ…

エミュレータ、サーバのどちらとも停止した。

両方とも再起動したら、あっさり治った。

Windows といえば再起動。サーバ、エミュレータの順に再起動した。

あっさり治った。

f:id:tombi-aburage:20190518121827p:plain

Live Chat

restify listening to http://[::]:3978 は犯人ではなかったらしい。

見かけは変だが普通らしい。

 

QUnit インストール、でも使う気があまりおきない…

プロジェクトフォルダに TypeScript環境構築

tombi-aburage.hatenablog.jp

に準じて、VS Code 上での TypeScript 環境をまず構築する。

tsc --init
  • タスク Terminal - Tasks: Configure Default Build Task

  • Debug - Add Configuration で Node.js 用デバッグ構成を追加
    helloworld.js を起動することにする。

"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\helloworld.js",
"outFiles": [
"${workspaceFolder}/**/*.js"
],
  • launch.json に sourceMaps 追加、tsconfig.json の sourceMap コメント解除

  • テストスクリプト helloworld.ts を作成し、ブレークポイントを設定してデバッグ実行。デバッガにより停止され、再開すると HelloWorld が DEBUG CONSOLE に出力されることを確認できた。
console.log("HelloWorld");

QUnit 環境構築 (In Node)

qunitjs.com

の IN Node に記載の通り 

npm install -g qunit

VS Code の TERMINAL から qunit を起動

qunit

TypeScript の型定義を追加

npm install @types/qunit

下記 test.ts をビルド

QUnit.module("Test Suite 1");
QUnit.test("hello test", function (assert) {
assert.ok(true, "Passed!");
});

 QUnit を実行

VS Code の TERMINAL から qunit を起動

qunit

TAP version 13
ok 1 Test Suite 1 > hello test
1..1
# pass 1
# skip 0
# todo 0
# fail 0

どうみても mocha + espower-typescript の方がいい。
Node.js 向けに QUnit を使う意味はなさそう。

なお、いろいろ試したが、VS Codeデバッグ実行で QUnit を起動するデバッグ構成の作り方は分からなかった。

QUnit 環境構築 (In The Browser)

qunitjs.com

の In The Browser に記載の通りであり、とくに環境構築は必要ない。

適当な HTML ファイルの中で

するだけのようだ。試さなくても何となく分かった。

これはこれで簡便でよいが、mocha で同じことができるなら、そちらに統一したほうがいいような気がしてきた。

何せ、実行結果の表示が mocha + espower-typescript と比べるとしょぼいので・・・
記法が異なるテストフレームワークを2つ覚えるのも面倒だし…

少し mocha を深堀りする必要がありそうだ。

Git リモートレポジトリ作成と、ローカルレポジトリとの同期設定

これまでは、ローカル環境に閉じた Git 利用しかしていなかったが、自宅の複数台のパソコンと、職場パソコンに別々に似たようなプロジェクトフォルダと Git レポジトリを次々と作成した結果、さっそく自分の中ですら運用が破綻した w

世の中的には、リモートレポジトリを正本として先に作成してから、ローカルの開発環境に関連付けるという方法が普通だったらしい。そりゃそうだわ・・・

GitHub でレポジトリ作成

GitHub についてはアカウント作成済みだったが、レポジトリは作っていなかったので作った。レポジトリ名を推奨してくれるのだが、なんだコレ・・・

cautious-computing-machine ? 俺への当てこすりか!

f:id:tombi-aburage:20190511093149p:plain

GitHub が考えた Repository の名前

・・・とりあえず素直に TypeScriptSample で作ることにした。

README と .gitignore の追加は行わず、完全に空っぽのレポジトリを生成した。

ほとんど即座に

https://github.com/ユーザ名/TypeScriptSample.git

で作成されたようだ。と同時に、このレポジトリと同期するローカルレポジトリを作成するための方法等が書かれている Code タブが表示された。

なお現在では、無料アカウントでも private レポジトリをいくつでも作れるようになった。

個人レベルではこれで十分。

Azure DevOps (旧称 VSTS)でもプロジェクトを作成し、レポジトリ同期を試みたが断念

さきほどの本家本元 GitHub レポジトリで用は足りているのだが、VSTS から参照するような形に簡単に設定できるのかどうか興味があったので、試してみた。

VSTS すでに無し

まず Visual Studio Team Services (VSTS)を Microsoft のサイトで探したが、もはやこの名称は過去のものとなっており、今では Azure DevOps というらしかった。

VSTS は Azure DevOps に変わりました!

本家本元 GitHub と Azure DevOps は別物

GitHubMicrosoft に最近買収されたが、GitHub サイトは昔のまま存在している。
アカウントについては、Azure DevOps にログインするさいに GitHub アカウントを連動させることができるようになっている。

連動した GitHub アカウントを使って Azure DevOps にサインインして、TypeScriptSample というプロジェクトを作成した。

f:id:tombi-aburage:20190522230439p:plain

Azure DevOps で新規プロジェクト作成

先ほど作成した Git レポジトリと同名のプロジェクト名にしておけば、自動的にレポジトリがプロジェクトに割り当てられるのかも…と思っていたが、特に自動で割り当てられたりはしなかった。

Git レポジトリへの URL の命名体系も全くの別物

新たに別のレポジトリを作成することは左端の Repos タブから簡単に行えるが、そのさいのレポジトリの名称は

https://ユーザ名/@dev.azure.com/ユーザ名/TypeScriptSample/_git/TypeScriptSample

のようになっており、命名規則は全く違うものとなっていた。

「Clone in VS Code」ボタンなんて飾りですよ

なお「Clone in Vs Code」とかいう便利そうなボタンがあったので、押してみたが、VS Code が自動的に起動しただけで、それ以上、別に何も起きなかった。

何なんだ一体・・・

パスワードの規則が微妙に厳しいのがウザい

レポジトリの自動的な複製 Clone は行われなかったようなので、手動でやるしかなさそうだ。

TypeScript実践マスター

TypeScript実践マスター

 

のとおりに資格情報を作成 Generate Git credentials して VS Code 側からアクセスしにいく方法で進めていくことにした。

しかし資格情報のパスワードの条件が本家本元 GitHub よりも厳しく、大文字・小文字・数字・記号のうち3つ混在要とのこと。

新しく別のパスワードを考えないといけない・・・

考えるのが面倒・・・断念。

さっき GitHub で作ったレポジトリで妥協することにした。

とりあえず先ほど本家本元 GitHub で作成したレポジトリの方を使うことにした。

まだ DevOps 使わないんで。

GitHub の画面からローカルレポジトリ作成(無反応)

まだローカル環境(PC環境、VS Code)側にはレポジトリが無いので、正本である GitHub 上のレポジトリの写しを作る必要がある。

f:id:tombi-aburage:20190511175136p:plain

Quick setup - Set up in Desktop

そこで GitHub の画面上にあった「Setup in Desktop 」ボタンを押してみた。
・・・またしても何も起きなかった。

またか。何なんだ一体!?

レポジトリの自動的な構築 Set up とやらは行われなかったようなので手動でやる。

TypeScript実践マスター

TypeScript実践マスター

 

のとおりに VS Code 側からアクセスしにいく方法で進めていくことにした。

  • まず VS Code で適当なプロジェクト(ワークスペース)をローカルに作成。
  • その後、コマンドパレット View - Command Palette から Git : Clone

GitHub へのログイン画面ダイアログが表示された後、VS Code の画面上は特に目立った反応もなく終了した。

一応、指定したローカルディスクのフォルダ配下に新しい .git フォルダが作成されていたので、多分、これで成功したのだろう。

ローカルレポジトリからリモートレポジトリへの反映

VS Code で適当にテスト用のテキストファイルを作成し、まずローカルレポジトリにコミット。その後、VS Code の画面左下にある、きわめて見づらいクラウドへのアップロードボタンを押した。

f:id:tombi-aburage:20190511180615p:plain

リモートレポジトリへ反映するボタン(?)

定期的にリモートレポジトリを参照する設定にするかを訊かれたが、利用者は自分だけなので、いいえ No とした。このタイミングで聞いてくるのは何故だろうと思いつつ。

f:id:tombi-aburage:20190511180725p:plain

定期的に git fetch するか訊かれたが、いいえ No

Git Hub の Code タブの表示がガラリと変わり、このレポジトリと同期するローカルレポジトリを作成するための方法等は最早表示されなくなった。かわりに同期されたファイル名が表示されている。

うまくいったようだ。

なお作成方法を見たい場合は下記のように、空のレポジトリを適当に作ればよい。

GitHub でのレポジトリ作成時には、完全に空っぽで作成するのが吉

さきほど成功した例では、GitHub のレポジトリに README、.gitignore は自動生成させていなかった。しかし READMEはともかくとして .gitignore は必ず使っているので、自動生成させるパターンでやってみることにした。

そしたら見事にハマった。

GitHub のレポジトリ作成画面において、一番下にある Add .gitignore を選ぶと 使用言語に適した .gitignore ファイルが自動追加される。

この .gitignore 自体は、それなりに気が利いている内容のファイルなのだが、

  1. ファイルを生成したためにレポジトリが空ではなくなり、接続手順ページが表示されなくなる
  2. この後に行う VS Code との同期設定が激しく難航する

などの副作用があった。このうち1つめについては

  • いつでも接続・設定方法を参照できるように empty というプロジェクトを作成し、接続手順ページをいつでも参照できるようにする

ことで恒久対処したが、2つめについては実力不足で解決できなかった。

tombi-aburage.hatenablog.jp

とりあえず、レポジトリ作成時には、いかなるファイルも生成しないことに決めた。

ローカルレポジトリを先に作ってしまっている場合

リモートレポジトリ GitHub を作成後、

…or push an existing repository from the command line

に記載のとおり連携させるだけだった。とても簡単。

 プロキシ経由の場合は追加の設定が必要となる

自宅ではプロキシ無しだったため、すんなりインターネット上の GitHub に接続できた。しかし職場ではプロキシ有りなので、最初はうまく接続できず、結局のところ追加設定をする必要があった。

sushichop.blogspot.com

を参考にして、プロキシ環境設定を行った。 

tombi-aburage.hatenablog.jp

の場合と同様に、

  • auth.pacファイルを解析してプロキシの実アドレスを特定
  • プロキシ用のユーザ名/パスワードを含めたURLを git config コマンドで登録
git config --global http.proxy ~
git config --global https.proxy ~

する必要があった。

ローカルPC環境の VS Code から GitHub レポジトリとの同期をかける

プロキシには認証の設定がされているため、都度都度、認証が要求されている。

画面入力は勘弁して・・・
  1. まず GitHub へのログイン画面で、GitHub 用のユーザ名/パスワードを入力させられ、

    f:id:tombi-aburage:20190514173443p:plain

    GitHub Login


  2. そののち、VS Code のコマンドパレット?でも、GitHub 用のユーザを入力させられ、

    f:id:tombi-aburage:20190514173516p:plain

    VS Code でも Username を入力


  3. そののち、GitHub 用のユーザ名/パスワードを入力させられた。

    f:id:tombi-aburage:20190514173622p:plain

    VS Code でも Password を入力

認証がくどいが、とりあえずリモート側との同期には成功したので、良しとする。

特に問題なし

 

画面操作を自動化するツール Puppeteer (パペティア)職場環境では動かない…

ここまでのあらすじ

さまざまなトラブルを乗り越え、とにかく自宅のパソコンでは Puppeteer が動作する状態にした。

tombi-aburage.hatenablog.jp

Google での検索結果の参照先を次々と開いて、画像でひたすら保存するスクリプトなどを書いてみたら、うまいこと動作したので、これなら仕事の情報収集でも使えそうだと判断した。

職場のパソコンにインストール

自宅のパソコンで成功したときと同じ手順で、ローカルインストールしようとしたが、まるでうまくいかない。

npm install から、いきなりコケた。

npm install --save puppeteer

npm ERR! code ENOTFOUND
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmjs.org/puppeteer failed, reason: getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-05-08T03_28_28_136Z-debug.log

親切にもプロキシが怪しいと書いてある。言う通り職場のプロキシのせいに違いない。

qiita.com

を参考にして npm のプロキシ設定を行うことにする。

proxy と https-proxy に職場指定の auth.pac とかいうファイルを指定

call npm -g config set proxy "http://example.com/auth.pac"
call npm -g config set https-proxy "http://example.com/auth.pac"

この環境設定コマンドは成功した。しかし npm install はやはりうまくいかない。

npm install --save puppeteer

npm ERR! code E405
npm ERR! 405 Method Not Allowed: puppeteer@latest

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-05-08T03_31_43_005Z-debug.log

今度は E405 とかいうエラーに変わった。

registry も設定

call npm -g config set registry "http://registry.npmjs.org/"

この環境設定コマンドは成功した。しかし npm install はやはりうまくいかない。

npm install --save puppeteer

npm ERR! code E404
npm ERR! 404 Not Found: puppeteer@latest

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-05-08T03_36_03_259Z-debug.log

今度は E404 とかいうエラーに変わった。

どう見てもプロキシが怪しい

プロキシ認証を通るよう、パスワード等を指定する

普段からプロキシにアクセスするたびにユーザ名とパスワードを入力しているので、これらの指定をしないとダメなのかもしれない。

qiita.com

を参考にして、

  • まず .PACファイルの中を見て、プロキシの実URLアドレスを割り出す
  • ユーザ名とパスワードを指定したURL表記で設定する

ことにした。

.PACファイル http://example.com/auth.pac をブラウザで覗いてみると、JavaScript の関数みたいなものが書いてあった。

どうやら自分のIPアドレスとアクセス先のURLから、使うプロキシを判定する処理の関数らしかったので、スクリプトの処理内容を分析して、職場パソコンのIPアドレスに対応するプロキシの実URLアドレスを割り出した。

npm config set proxy http://userid:password@proxy.example.com:8080
npm config set https-proxy http://userid:password@proxy.example.com:8080

今度は code EPERM, errono -4048, syscall rename  エラー

先の環境設定コマンドは成功した。しかし npm install はやはりうまくいかない。

npm install --save puppeteer

npm ERR! path P:\projects\puppeteer_sample\node_modules\minimist\package.json.3444437947
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall rename
npm ERR! Error: EPERM: operation not permitted, rename 'P:\projects\puppeteer_sample\node_modules\minimist\package.json.3444437947' -> 'P:\projects\puppeteer_sample\node_modules\minimist\package.json'
(中略)
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

OSに拒否されて、ファイルをリネームできないとのこと。

インストール先の P ドライブがローカルではなく、ネットワーク上のドライブであることが関係しているのかもしれない。

職場のネットワークドライブのアクセス権限を変更することはできないので、お奨めしない not recommended と書かれてはいるが「管理者として実行」することにした。(command again as root/Administrator 相当)

なお、このときはすぐに「管理者として実行」をやってしまったが、VS Code を再起動(もしくはパソコンごと再起動)し、ただ同じコマンドを打ち直すだけで治ることも多い。

アクセス権と関係なく、何かのプロセスがファイルをつかんでいて、ファイル操作のタイミングが合わなかった場合にも errno -4048  が出るようだ。

node.js command prompt を管理者として実行してから install

npm install --save puppeteer

> puppeteer@1.15.0 install P:\projects\puppeteer_sample\node_modules\puppeteer
> node install.js

Downloading Chromium r650583 - 144.8 Mb [=== ] 17% 204.2s

Chromiumダウンロードに進んだようだ。よしよし。

やはりプロキシだったか

正しくインストールされた模様

Downloading Chromium r650583 - 144.8 Mb [====================] 100% 0.0s
Chromium downloaded to P:\projects\puppeteer_sample\node_modules\puppeteer\.local-chromium\win64-650583
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN puppeteer_sample@1.0.0 No description
npm WARN puppeteer_sample@1.0.0 No repository field.

+ puppeteer@1.15.0
added 6 packages from 6 contributors and audited 50 packages in 610.199s
found 0 vulnerabilities

ゲージが100%になった後、続きのメッセージが出るまでに30秒以上待たされ、また失敗したのかと思ったが、無事にインストールは完了した。

全く問題なし

自宅パソコンで動作した実績のあるサンプルスクリプトを起動したが、newPage 呼び出しが永久に終わらない orz

職場のネットワークの遅さのせいなのか、プロキシ経由のせいなのか、パソコンの低性能のせいなのか原因は分からないが、自宅のパソコン(環境)と比べると明らかに動作が遅い。

高々 puppeteer の launch、Chromium の起動までに30秒くらいかかった。
しかし、その後 newPage メソッドを呼び出すところで完全に止まってしまい、それ以上はまったく進まず、常にタイムアウトになってしまう。

いろいろ調べたが同一事象の前例はなくて、行き詰ってしまった。

launch が遅いというケースは多いようだが、newPage で止まる事例は見当たらない。

残念ながら職場では使えないようだ…

なぜ newPage で止まる?

ES Lint

VS Code に拡張を追加

f:id:tombi-aburage:20190428143429p:plain

Extension : ESLint

プロジェクト(ワークスペース)配下にパッケージ追加

フォルダは puppeteer_sample

npm install --save-dev eslint

npm WARN puppeteer_sample@1.0.0 No description
npm WARN puppeteer_sample@1.0.0 No repository field.

+ eslint@5.16.0
added 100 packages from 63 contributors and audited 234 packages in 17.361s
found 0 vulnerabilities

node .\node_modules\eslint\bin\eslint.js --init

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? CommonJS (require/exports)
? Which framework does your project use? None of these
? Where does your code run? Node
? What format do you want your config file to be in? JSON

どれを選ぶべきか、よくわからないがもっともらしいものを選んだ。

出力フォルダにて動作確認

出力 OUTPUT のプルダウンより ESLint を選択すると、動作中とのことだった。

[Info - 14:47:41] ESLint server stopped.
[Info - 14:47:42] ESLint server running in node v10.2.0
[Info - 14:47:42] ESLint server is running.
[Info - 14:47:45] ESLint library loaded from: c:\Users\tombi\Documents\projects\puppeteer_sample\node_modules\eslint\lib\api.js

画面操作を自動化するツール Puppeteer (パペティア)グローバルインストールは失敗に終わる

パペティア Puppeteer はセレニウム Selenium よりも環境設定が楽らしい。
React(リアクト)などのSPAアプリにも向いているそうな。

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

 

上記書籍ではグローバルインストールではうまくいかなかったとのことだが、ダメモトでやってみたら入ったので、まずはヨシとする。

ここから悲劇が始まった…

puppeteer パッケージをインストール

npm install -g --save puppeteer

> puppeteer@1.15.0 install C:\Users\tombi\AppData\Roaming\npm\node_modules\puppeteer
> node install.js

Downloading Chromium r650583 - 144.8 Mb [====================] 100% 0.0s
Chromium downloaded to C:\Users\tombi\AppData\Roaming\npm\node_modules\puppeteer\.local-chromium\win64-650583
+ puppeteer@1.15.0
added 43 packages from 22 contributors in 28.838s

一見、全く問題なし

Chromiumと puppeteer がまとめてインストールされたようだ。

Node.js および VS Code のプロジェクト新規作成

npm init

ドキュメントフォルダ配下に projects、さらにその下にpuppeteer フォルダを作成した後、npm init 。その後、VS Codeワークスペースにフォルダを追加した。

puppeteer 公式サンプルプログラム screenshot.js で動作確認(ポカミス)

サンプルの最新版をぐぐったら、以下のサイトに紹介があった。

qiita.com

ここから公式のサンプルプログラムの GitHub へ行けたので、screenshot.js を右クリックし、VIsual Studio CodeVS Codeワークスペース配下のフォルダへとダウンロード。

f:id:tombi-aburage:20190428090221p:plain

screenshot.js

VS Code のターミナル TERMINAL からさっそく起動

node .\screenshot.js

C:\Users\tombi\Documents\projects\puppeteer\screenshot.js:7
<!DOCTYPE html>
^

SyntaxError: Unexpected token <
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)
at startup (internal/bootstrap/node.js:283:19)

エラー?サンプルなのに?

puppeteer パッケージをインストール

ファイルの中身をチェックしてみたら、「screenshot.js そのもの」ではなくて、「screenshot.js の解説ページの html ファイル」だった…

GitHub の一覧から右クリックでいきなり保存したのが間違いだったらしい。

ポカミスでした orz

GitHub Desktop インストール(寄り道)

一覧の先の解説ページを開き、「screenshot.js そのもの」をダウンロードしようとしたところ、このファイルを GitHub Desktop で開くというアイコンがあったのでクリック。

f:id:tombi-aburage:20190428091427p:plain

クリックするとダウンロードページがでかでかと表示された。

すでに GitHub はインストール済みなのだが、それは Desktop Classic とかいう旧式のものであり、実は、もっとカッチョイイ Electron 版バージョンがあるらしい。

f:id:tombi-aburage:20190428091655p:plain

確かに Classic の画面はしょぼかった。かっこいいのが使いたい。

ということでインストールしてみると、Github のアカウントも作りなさい、とのことだったので、それも作った。

その後、

f:id:tombi-aburage:20190428091427p:plain

をクリックすると、またダウンロードページがでかでかと表示された。 
開くんと違うんかい!

・・・いや落ち着け、Chrome を再起動していなかったわ。

再び、サンプルスクリプト(一式)をダウンロード

Chrome を再起動してから、同じアイコンを再びクリックすると、GitHub Desktop と関連付けるか質問された。関連付けすると、直接起動されて以下の画面が出た。

f:id:tombi-aburage:20190428093523p:plain

よくわからないが、リモートレポジトリ(正本)から、ローカルにクローン(コピー)しようとしているようだ。

f:id:tombi-aburage:20190428093742p:plain

Cloning Puppeteer ...

クローン Clone ボタンを押すと、意に反して screenshot.js だけではなく、全てのサンプルプログラムをダウンロードし始めた。

 C:\Users\tombi\Documents\GitHub\puppeteer\examples

配下に、8つのサンプルがダウンロード(クローン) Clone されたようだ。

やった後で言うのも何だが、この GitHub Desktop のインストール作業は余計だったな。

再び、サンプルプログラム screenshot.js の動作確認(失敗)

プロジェクト(ワークスペース)に screenshot.js をコピーしてから、VS Code のターミナル TERMINAL より再び起動した。

node .\screenshot.js

PS C:\Users\tombi\Documents\projects\puppeteer> node .\screenshot.js
internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module 'puppeteer'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
at Function.Module._load (internal/modules/cjs/loader.js:508:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\tombi\Documents\projects\puppeteer\screenshot.js:19:19)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)

モジュール puppeteer を発見できていないとのこと。

やはり、また起きたか…
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

 

の推奨を無視して、puppeteer をグローバルインストールした罰があたったようだ。

しかしもう少し、粘ってみる。

puppeter を依存パッケージに指定して、起動させるようにしてみる。

先ほどは node コマンドで screenshot.js を直接起動していたが、npm コマンドで起動する方法に変更することにした。

そもそも npm init のさいに package.json を適当に作っていたため、

  • dependencies 記述なし
  • scripts 記述なし

だったので、まずはこれを修正する。

{
"name": "puppeteer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

下記のとおり、記述を追加した。

{
"name": "puppeteer",
"version": "1.0.0",
"description": "",
"main": "screenshot.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
,"main": "screenshot.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"puppeteer" : "^1.15.0"
}
}

npm run コマンドから起動してみた。

npm run main

> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js

画面上に盛大なエラー・ダイアログが出現

コード: 800A03EA
ソース:Microsoft JScript コンパイルエラー

f:id:tombi-aburage:20190428100516p:plain

どうも node.js でも Chronium でもなく、Microsoft 謹製の JavaScript 実行エンジンのほうが呼び出されているように思える。

JScript は、お呼びでない!

なお screenshot.js の19行目は

const puppeteer = require('puppeteer');

なので、ほとんど起動直後に落ちているようだ。

「OK」ボタンをクリックすると、ターミナル TERMINAL に、ゾロゾロと続きのエラーが出力された。

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! puppeteer@1.0.0 main: `screenshot.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the puppeteer@1.0.0 main script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-04-28T01_10_54_431Z-debug.log

puppeteer のバージョンは 1.4.0 のはずなのに、1.0.0 と出力されている?のは気になる。最後のログは、中を見ても、よく分からなかった。

node_modules missing ?

まずは、Microsoft JScript 実行環境が呼ばれないようにする。

f:id:tombi-aburage:20190428103048p:plain

Microsoft ® Windows Based Script Host に関連付けされている

試しに JavaScript ファイル (.js)の関連付けを node.exe に変更してみる。

f:id:tombi-aburage:20190428103323p:plain

node.exe に関連付けが変更された。

f:id:tombi-aburage:20190428103602p:plain

JavaScript ファイル(.js) は node.exe に関連付けること

なお別のPCで、JavaScript ファイル(.js) を Visual Studio Code (VSCode) に関連付けしていた(ダブルクリックでソースを開きたいから)ところ、

  • npm run を実行しても、一切スクリプトが実行されない
    console.log('test'); しか書いていないスクリプトなのに何も出力されない

という事象となりハマった。

詳しく調べると:

  1. npm によって package.json は処理されているようだが、スクリプト本体のコード内容は実行されていない
  2. Visual Studio Code の terminal で npm run を行うと、スクリプトソースコードにフォーカス(カーソル)が移動する
  3. Node.js command prompt で npm run を行うと、Visual Studio Code が起動し、スクリプトソースコードが開く

という事象だった。2の挙動は微妙な変化だったので気づかなかったが、3の挙動より、関連付けが原因らしいと、ようやくわかった。(2時間浪費)

Windows 環境では、

  • JavaScript ファイル(.js) は node.exe に関連付けること

は必須であり、それを勝手に変更してはいけないようだ。

Microsoft JScript コンパイルエラー」は消えたが…

再び npm から起動。

Microsoft JScript コンパイルエラー」のダイアログは出なくなった。一歩前進。
しかし、かわりにスタックトレースが吐き出された。

npm run main

> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js

> puppeteer@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer
> screenshot.js

internal/modules/cjs/loader.js:584
throw err;
^

Error: Cannot find module 'puppeteer'
スタックトレースは中略)

npm ERR! code ELIFECYCLE
(内容は先ほどと同じなので、以下略)

さっきのエラーと同じだな...

あいかわらず、

npm WARN Local package.json exists, but node_modules missing, did you mean to install?

のように警告されているので、やはり puppeter をローカルインストールしないといけないのだろうか?

だが、もう少し粘ってみる。

足りないモジュールをインストールするコマンドがあるらしい。

 Cannot find module 'puppeteer’ でぐぐった。

qiita.com

に書かれていた

npm install -g npm-install-missing

C:\Users\tombi\AppData\Roaming\npm\npm-install-missing -> C:\Users\tombi\AppData\Roaming\npm\node_modules\npm-install-missing\bin\npm-install-missing
+ npm-install-missing@0.1.4
added 429 packages from 802 contributors in 22.112s

node.js のインストール先配下に、たくさんのファイルが追加されたようだ。

しかし、 どうやらpuppeteer が追加されたわけではなく、npm run main の結果は

Error: Cannot find module 'puppeteer'

であり、先ほどと同じ。つまり、解決はしなかった。

qiita.com

 とあるが、余計な環境変数を余計なファイルに追加するくらいなら、ローカルインストールの方が依存が少なく素直なので、グローバルインストールはギブアップ。

グローバルでは無理。

グローバルインストールは断念、ローカルインストールに切り替え。

まずはグローバルインストールを削除する。

npm uninstall -g puppeteer

removed 43 packages in 0.836s

ローカルインストールする。 

npm install --save puppeteer

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "puppeteer" under a package
npm ERR! also called "puppeteer". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR! <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tombi\AppData\Roaming\npm-cache\_logs\2019-04-28T03_05_23_475Z-debug.log

プロジェクト(ワークスペース)フォルダが puppeteer という名前だと、ローカルインストールさせてくれないのだろうか?

プロジェクト(ワークスペース)フォルダをリネーム

を行ってから再度インストール

npm install --save puppeteer

同じエラーだった。どうやらフォルダ名は関係がなかったらしい。
とはいえ、元の紛らわしいフォルダ名に戻す必要もないので、そのまま続行。

package.json の name を変更

package.json の "name" が "puppeteer" であることが問題だったらしい。
こちらも puppeteer_sample に修正する。

{
"name": "puppeteer_sample",
"version": "1.0.0",
"description": "",
"main": "screenshot.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"main": "screenshot.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"puppeteer": "^1.15.0"
}
}

修正後に、再度ローカルインストール。

npm install --save puppeteer

> puppeteer@1.15.0 install C:\Users\tombi\Documents\projects\puppeteer_sample\node_modules\puppeteer
> node install.js

Downloading Chromium r650583 - 144.8 Mb [====================] 100% 0.0s
Chromium downloaded to C:\Users\tombi\Documents\projects\puppeteer_sample\node_modules\puppeteer\.local-chromium\win64-650583
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN puppeteer_sample@1.0.0 No description
npm WARN puppeteer_sample@1.0.0 No repository field.

+ puppeteer@1.15.0
added 43 packages from 22 contributors and audited 50 packages in 29.446s
found 0 vulnerabilities

一見、全く問題なし

さっそく、サンプルスクリプトを起動する。

npm run main

ノートンファイアウォール警告が出現した。

Chromium が起動したようだが、これはノートンにとっては、初めて起動された要注意プログラムなので利用者(私)に通信を許可するかをきいてきた。

しかし次から次へと色々起きるな・・・とりあえず画面キャプチャ。

その後、ノートンの設定が「常に許可」となっていることを確認して続行した。

f:id:tombi-aburage:20190428122132p:plain

NORTON

 しかし、上のスクリーンショットを撮り、このブログに張り付ける作業に時間がかかったため、エラーが出力された。

(node:24432) UnhandledPromiseRejectionWarning: TimeoutError: Navigation Timeout Exceeded: 30000ms exceeded
(以下略)

たんなるタイムアウトのようなので、もう一度、実行してみる。

npm run main

> puppeteer_sample@1.0.0 main C:\Users\tombi\Documents\projects\puppeteer_sample
> screenshot.js

PS C:\Users\tombi\Documents\projects\puppeteer_sample>

ついにエラーが出ずに終了した。

puppeteer_sample 配下に、example.png が出力された。

どうやら成功したようだ。

f:id:tombi-aburage:20190428122652p:plain

example.png

念のため、このファイルを削除して、もう一回実行してみたが、今度も成功。 

全く問題なし

結局、

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

 

のとおり、グローバルインストールではうまくいかないので、ローカルインストールするのが正解だったようだ。半日、無駄にしてしまったが、これで puppeteer 開発環境は出来たと思う。