MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
Webサイトのちょっとしたテスト用ツールを作った

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

公開日:2017年02月21日
最終更新日:2017年02月21日
オンスタ運営
テクノロジー
プログラミング
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > Webサイトのちょっとしたテスト用ツールを作った
このエントリーをはてなブックマークに追加
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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
テクノロジー
マークアップ
公開日: 2017年01月10日
最終更新日: 2022年01月17日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2022年01月17日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
テクノロジー
プログラミング
公開日: 2017年12月06日
最終更新日: 2017年12月06日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
テクノロジー
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【調査】次のweb標準!?まことしやかに囁かれ続けるWeb Componentsとは?
テクノロジー
マークアップ
公開日: 2018年01月20日
最終更新日: 2018年01月20日
【調査】次のweb標準!?まことしやかに囁かれ続けるWeb Componentsとは?
オンスタ運営
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
テクノロジー
公開日: 2018年04月07日
最終更新日: 2018年04月07日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
Google Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?
システム
テクノロジー
公開日: 2019年10月21日
最終更新日: 2019年10月21日
Google Chromeが2020年2月から混在コンテンツを完全にブロック?影響範囲はどこまでなの?
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2017年12月28日
最終更新日: 2017年12月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
プログラミング
公開日: 2017年06月19日
最終更新日: 2022年01月17日
【jQuery】レスポンシブ対応!軽量モーダルウィンドウプラグイン「iziModal.js」
オンスタ運営
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2022年01月17日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # Udemy
  • # セール情報
  • # タイムセール
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。