Webサイトを「100デバイス」以上でチェックできるスクリーンキャプチャー・ツール作った＃１ #JavaScript

普段、大学やプログラミングスクール等で教えてたりするのですが、
「 1週間で何か作るっていう課題」
を学生にも出してたりします。私もやってみる！というスタンスで作ってみました。
創ることの大切さを改めて認識しました。以下スクリーンショットです。URLも掲載しております。

【公開URL 】
WebSite shot!! https://webshot.azurewebsites.net/

サイト名は「 WebSite Shot!! 」
上記でURLと機種を選択してポチ、っと少し待つと以下のように表示されます。
いくつか実行した例をお見せします👇

例）「デジタルハリウッド・オンライン」のサイトをスクショしてみました
【表示】PCブラウザ ZOOM：100％

例）Laravel.com をスクショしてみました
【表示】PCブラウザ ZOOM：100％

【表示】PCブラウザ ZOOM：25％

とこんなに簡単に・・・！！

スマホで対応してますが「1デバイス」づつ確認がおススメです！
画面が小さいので「複数選択」すると結果的に見れないので (´▽｀)

開発期間は1週間

HTML/CSS/JavaScript/NodeJS/PHP...ライブラリの調査、環境構築、デプロイ
Faviconや細かい部分も、あと先ほどGoogle検索にひっかかるように設定。
Lighthouseを使ってSEO/パフォーマンスなどサイトの点数を調整。
5日目にしてお披露目・現在Qiitaを書いています。

【何の問題解決したいのか？】

Webサイトの画面チェック（このデバイスだと？）が面倒だったから。
他にツールあったんじゃない？コマンド打って、短いスクリプト書いて「ごにゅごにょ」してっ、Chromの機能で1ページずつみてって、、、
Webデザイナーはそんなことしたくないんだよ！！…多分(#^^#)

『いや、そんなことに誰も時間は使いたくない！！　』

ですよね。
もっとクリエイティブに時間をかけたいんだよね。
その為に、少しでも楽になるかもしれない、だから作った。

【公開URL 】

Web shot!! https://webshot.azurewebsites.net/

【開発で工夫・苦労したこと】

UXの部分で3クリック以上はできないように変更
※当初はバリデーションを後でかける方にしてたが、エラーがでたあとにチェックボックスをまた外してもらうのはNGだと思った（もちろんサーバーサイド側でも制御している(*^^)v ）。
※~~デバイス数十個を一気に画像にすると、クラウド料金が心配なので、３つにしたのは察してくださいませ~~1回で6個選択できるようにしました！！！
チェックボックスが多いので、Resetボタンで全て解除させる
※~~URLも一緒に消せた方が良いと判断したのでURLも削除しているが、これも今後の検証で、消さない方向もあるかも。~~
URLは削除しないほうが良いと判断して修正！
画面をシンプルに
※できるだけシンプルにし、選択の間違いが起きない、迷わないように制作
間違ったURLのリターン
※間違ったURL（Webページの無い）の場合、PHP側でチェックを走らせてからアクションするよう変更
スクリーンキャプチャーができないサイトのケース
画像が無いときの表示ってちょっと間抜けな感じですよね。
それは嫌なのでJavaScriptで画像が生成されてるかチェックするコードを用意。
以下簡易サンプルコード

JavaScript

//image:Cheker
const imageCheck = (path) => {
    var xhr;
    xhr = new XMLHttpRequest();
    xhr.open("HEAD", path, false);
    xhr.send(null);
    return xhr.status;
 }
const img_status = imageCheck("**画像のPath**");
if(img_status == 200){
...

てな感じで対応。

Base64でHTMLに埋め込みの予定だったが辞めた
そもそも、なぜbase64でHTMLに埋め込んでダウンロードさせようかと思ったかですが、
Storageにファイルが溜まるのが嫌だったから。結構な画像の数になるのでStorageに溜めずに
埋め込んで終了を目指した。が、、、画像が膨れた（133％増加するらしい）。あ～～これはダメだ。
PHP側でファイルの削除をブラウザ側がHTML読み込み後に削除する方法を取った。
※現在は上手く削除されている。これがいいかはこれも、今後の分析してから。
ダウンロード機能
そもそも、今この機能に時間使う必要あるか？？？あればカッコいいけど、右クリックで保存できるし、
開発のスケジュール上これは後だな。
Safari/Firefoxはどうする？
Safariはなんとか動作してる（~~現在20223/01/14 Safari対応しました。~~ 機能的に重かったので辞めました）。
※Firefox対応は多分しない。
チープに見せたくなかった
エンジニアだからと言って、デザインは酷すぎるってのはやめたかった。
なんとか良い感じに仕上がった。（TailwindCSSをやっていて良かった。）
※但し、時間が一番かかったところでもある。
デプロイ
デプロイが一番時間かかりました、クラウド・サーバー系は得意な方ではないので、めっちゃ時間かかりました。(メモリ2倍に上げました！！！それにより6デバイス選択可能にしました！)
ここはクラウドにしてたので、あとでCPU・メモリ等も管理画面で変更できるので選択が良かった
課題は今後でてくるでしょう
随時対応ですね。ここに書いてないことで大変だったことも多くありあますが、
既に忘れ始めている（笑）

Youtubeに解説動画を用意（よければこちらもどうぞ！）

【環境・使用した技術】

Microsoft Azure
NodeJS (puppeteer→Playwright)
PHP (データ・ファイル処理)
HTML / TailwindCSS / JavaScript

PuppeteerからPlaywrightへ作り直した理由

AzureのLinux環境でChromium-linuxの設定が大変だったことと、今後の運用保守考えたときに先が見えない・・・あ…見えない、って感じになったので、調べた！
なんと、「Playwright」たるものがあるらしい！
なんと、 Puppeteerは元Googleの社員が作っていて、その人がMicrosoftに入って新しく作ってるのが・・・
「Playwright」だという記事を発見。どこかで発見！
あー、これはFirefox/Safariもいけるらしい。（まだ試していない、Future update かなー）
と色々と良い感じなので全て作り直した。

想定と違うところも多少あったけど、

1週間以内でβ版公開できて良かった。Google検索にはまだデプロイ仕立てなので上がってこないです。
（β版を更新しまくってるので、たまにUpdateで変な画面になるかもしれませんが、ご容赦ください）
皆様のご感想もお待ちしております！！
前向きな要望等お待ちしております！！

Webサイトを「100デバイス」以上でチェックできるスクリーンキャプチャー・ツール作った＃１

開発期間は1週間

【 何の問題解決したいのか？ 】

『 いや、そんなことに誰も時間は使いたくない！！ 』