Webサイトのちょっとしたテスト用ツールを作った

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

---

どうも！GrowGroupでエンジニアをしております石原です。

今日は、作成したツールについてちょっと報告のブログ記事にします。

Webサイトテスト用のツールを作った

普段の業務フローの中で、時間がかかるけど大切なのがテスト・デバッグ工程。

デザインチェック、誤字脱字はもちろん、マークアップやらリンク切れなど、"テスト・デバッグ"と一言でいえど、ものすごく時間のかかる大変な作業です。

正直なところ、私のもっとも不得意な工程でして、なんとかせねばとずっと考えていました。

効率化に取り組もう！

現状の作業フローとしまして、以下のような流れにてテスト・デバッグを進めています。

1. コーダーでのテスト・デバッグ
   1. ページリストの作成 
   2. ブラウザチェック
   3. デバイスチェック
   4. マークアップチェック
   5. リンク切れチェック
   6. SEOチェック
2. デザイナーによるデザインチェック
3. ディレクターも含めた文字校正チェック

この中でも、今回解決しようと定めた作業は以下の通りです。

• ページリストの作成
• SEOチェック
• デザインチェック
• マークアップチェック

順に説明していきます。

ページリストの作成

リニューアル案件等の場合には、既存URLを抽出してURLのリストを作る必要があります。(リダイレクト設定等のため)

また、その後のチェック工程にて利用するために、コーディングしたWebサイトのURLリストを作成する必要もありました。

そんな時間はかからないですが、地味に面倒な作業でした。

SEOチェック

title, meta description, h1 等のSEOに関する設定は、とても重要ですが、チェックすることがとても大変な作業でした。

人力で確認していても、漏れ・抜けなどがでる可能性が非常に高い....何度も何度も確認するのに非常に時間がかかる作業でした。

デザインチェック

デザインチェックでは、デザイナーとコーダーとのコミュニケーションが最大の障壁でした。

チェック項目をすべて文字で起こして タスク管理ツールに課題として上げてもらっていましたが、デザイナーからすると非常に時間がかかる。

しかし、口頭でのチェック項目の伝達は高確率で抜け・漏れがでる....

よって、GrowGroupでは スクリーンショットを撮り、Dropboxに上げ、コメント機能を利用してスクリーンショットの該当箇所にコメントを付ける、というフローで今後試すことにしました。

しかし、スクリーンショット撮るのも面倒....

マークアップチェック

閉じタグ忘れや、img タグの alt属性など、HTMLのマークアップに関するチェックにも時間がかかっていました。

w3c validator を利用していましたが、1ページずつしか見れないので、ページ数が多い時は非常に辛い作業となっていました。

弊社では最終的にCMSを導入することが多いので、HTMLコーディング時点での htmllint 等のチェックツールをタスクランナーに導入しても、最終成果物でも担保できないという問題もありました。

上記4つの課題を解決するために、何か自動化ツールを作ろうということで、まだCUIでしか動かないですが、sitetestpack というパッケージを作成しました。

sitetestpack について

https://github.com/growgroup/sitetestpack

上記リポジトリにおいてあります。

既に Node.jsを動かす環境がある方は、以下のコマンドでグローバルにインストールすることができます。

$ npm install -g sitetestpack

インストール後は、sitetestpack コマンドを打つことでプロンプトが立ち上がるようになっています。
取得したURLのリストとチェック結果は、コマンドを実行したディレクトリ下に sitetestpack_results ディレクトリを作成し、CSVに出力するようにしています。

流れとしては、以下のような流れです。

1. 基点となるURLを入力
2. 取得する最大ページ数を設定
3. 除外するURLのパターンを入力( 正規表現可 )
4. 再帰的にURLを取得
5. 取得したURLをCSVに出力
6. 取得したURLを元に、SEO、htmllint をチェック(電話番号もチェックしてますが、これは僕の歴史的な経緯です)
7. チェック結果をCSVに出力
8. 取得したURLを元に、スクリーンショットを取る (現状では1ページに対して 1920px と 320px のスクリーンショットを出力) 

スクリーンショットには pageres を利用しています。

ただ、ページ数多いとマシンパワーが必要です。寝室で子供が寝ている隣ではやめた方がいいかもしれません。

技術的に意識したこと

• es2015を利用する
• Node.js を利用してコマンドを作る

正直これまでこういうツール的なものをNode.jsで作ったことがなかったので、これを機に作ってみようと考えました。

悩んだこと、悩んでいること

正直、お作法的なことは調べながら作ったため、結構おかしな、非効率的なコードを書いている可能性があります。

Promise とか、この方法いいのかなとか思ったり...

プログラミングって難しい....
指摘して教えていただけますと非常に嬉しいです。

今後について

テストを書ききれていないのでとりあえず書くきる。

electron あたりを利用してGUIのアプリケーションを作る。

命名が汚いので考える。リファクタリングする。

以上、淡々とした記事でしたが、ご意見等あればぜひぜひ https://github.com/growgroup/sitetestpack までいただけると幸いです。

現場からは以上です。

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】