背景
今更なのかも知れないが。
自分は長らくWebアプリケーションは仕事で作っているがnode.jsを使う必然性はなかったので手を出さなかった。というか、そもそも私は別に新しい技術大好き!知識とスキルの獲得にいつも興味しんしん!日々自分を成長させていきたいと思っています!というタイプでは全然ないので、別に流行ろうが定番だろうが知らなくて済むものを知りたくはない派だ。
ともあれ、今回は、サーバーサイドでPDFを生成する手軽な方法が欲しかった。自分はいつもLinux + Javaの環境だが、JavaのPDF生成系ライブラリで昔に使ったことがあるものはなんだかすごく面倒な上にCSSも効かないみたいな使えないものだったので、そうではないものが欲しく、いろいろ検証するためにはまず手元のWindowsで動かしてみたいなという流れ。
つまるところ、puppeteerというものを使って、ヘッドレスのchromeでPDFを生成したい。
以下手順
npm i puppeteer
こうすればインストールできると書いてあったのでコマンドプロンプトに入れてみたが、もちろん何も起きないので、npmというのがまず必要。そしてnpmを入れるにはnvmというのが必要らしいということで、
node.jsのためのnpmのためのnvmのインストール
https://github.com/coreybutler/nvm-windows/releases
setup.exe的なものをダウンロードし、実行。よくわからないが選択肢は全部ポジティブ回答する。
そしてコマンドプロンプト
nvm -v
バージョン出たのでOK。
ということで
nvm list available
バージョンが出てくるので、とりあえず一番新しいっぽいのを指定し
nvm install 24.4.0
すると、
Installation complete.
If you want to use this version, type:
nvm use 24.4.0
こんなメッセージが出てきたので、その後に
nvm use 24.4.0
と入力。
これでどうやらnvmが使えるようになった。
npmのインストール
私が使いたいのはnvmでもnpmでもなくnode.jsとやらなんだが、node.jsというのはつまり実行環境的なものであり、そこでライブラリ(と呼ばないらしいが)を管理するのがnpmで、そのnpm自体のバージョン管理をするのがnvmということらしい。クールなアーキテクチャなのだろうが面倒くさいことこの上ない。
さっきnvmが使えるようになったわけなので、コマンドプロンプトで
npm -v
これも反応する。入れるべきものは入ったということらしい。
なので、プロジェクト?を作る。
Gitやらmavenやらgradleやらのそれと似たようなものだろうか。つまりはフォルダ単位で管理みたいなことらしい。
以下フォルダ作成(エクスプローラーで)
c:/d/mynpm
コマンドプロンプトでそこに移動
cd c:/d/mynpm
そして
npm init -y
-yは「すべてデフォルトでOK」のオプション。
変なJSONなどがフォルダ内に出来ている。
そしてpuppeteerを使いたい。
https://pptr.dev/guides/installation
とりあえず書いてあったコマンド実行。
npm i puppeteer
しばし待って
added 97 packages, and audited 98 packages in 24s
7 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
・・・寄付を募ってますよということ?まあその話はまた今度ということでいまはスルーだ。
サンプルを元に作成したコード。(もちろんURLは、実際は違うもので試した)
import puppeteer from 'puppeteer';
(async () => {
// Launch the browser and open a new blank page
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.example.com/');
await page.setViewport({width: 1080, height: 1024});
await page.pdf({path:"c:/d/pptr-pdf.pdf"});
await browser.close();
})();
これをpptr-pdf.mjsと名付けて実行。
node pptr-pdf.mjs
※ 置いたディレクトリにて
結果、指定したパスにPDFは生成された。クオリティは、同じページをChromeで開いて印刷しようとした時と同等(当たり前だが)。これは良い・・・。
補足 途中で引っかかったところ
- 順調に進めていたがモジュールがないとエラー。
- 試行錯誤の結果、作ったスクリプトのファイルをプロジェクトの中、つまり今回で言えばmympmに移動しないとダメだった
- パスの問題なのだろうがよくわからない
- 環境変数にNODE_PATHというのをnode_modulesフォルダで指定すればという話はあるが、やってもダメだった
- 逆に、スクリプトをプロジェクトの中に置いてしまえば、NODE_PATHはなくても大丈夫だった
- Linuxの時はもうちょいマジメに調べるつもりだが、Windowsで試すのにそんないろいろ求めてないのでこれはまあ良い
- 拡張子が.jsではダメで、.mjsにしないとダメだった
- 最初は.jsでやったのだが、nodeコマンドで実行したらなんかそんなエラーメッセージが出たので、ファイル名を変えたらできた。
- それ以外のおそらくもっとクールな解決方法も提示されていた気がするが、面倒そうなのでトライする気にはなれなかった
- でも別に拡張しはmjsでいい気がする。普通にWebページで使ってる奴と見分け付きやすいし。