piroki ご参加ありがとうございました！
WordCamp Haneda 2019にご参加いただいた皆さまありがとうございます！
イベントもスポンサーブースもおおいに盛り上がりましたね！
「ThemesPark」ブースはこんな感じでした。ひっきりなしに来場者の方にお立ち寄りいただいて、弊社代表の大串も楽しそうにサービスの紹介をしていました。
当日配布していたチラシは下記のリンク先からダウンロードできますので、ご興味がおありでしたらぜひご覧くださいね！
実は、当日配布していたチラシは表と裏の印刷がほとんど同じで、5ヶ所だけ違うところがありました。
それを「間違い探し」としてチラシを手にとってくださった皆さまにご案内していました。
肝心の答え合わせ
いかがでしたでしょう、5つの間違いを全部みつけられましたか？
では答え合わせ
1.【初級】星マークとハートマークの違い
これはきっとみなさん見つけてくださいましたよね。すぐに気づくはず！！
2.【初級】ホスティング 保守サポートのアイコンの違い
これも見つけやすかったですね！「ThemesPark」は保守サポートもしていますよ！
3.【中級】「！」と「。」の違い
これはどうでしょう、見つかりましたか？ちょっと小さいところで見つけにくかったかもですね。
4.【上級】「Snow Monkey」アイコンのサルの鼻の穴の大きさが違う！！
これはちょっと難易度高いですね…。ちょっと見ただけだとこれはわからないですね！
5.【超上級】「間違い探しにチャレンジ！」の右にある「三角」の数が違う！！！
いやいや、これはわからないですよね…。これ、問題にします？これもわかったらスゴいですね！こんなの普通見逃すでしょ…。
さてさて皆さん、結果はいかがでしたか？全部正しく見つけられましたか？
6. 番外編 タイポがありましたorz
イベント当日にご来場者の方からご指摘をいただいたのですが、なんとチラシにタイポが…orz リアルで気づいておりませんでした。作者の北島さんごめんなさい！m(_ _)m
5つすべて見つけられた方、おめでとうございます！
タイポをご指摘くださった方、ありがとうございました。
なんで「間違い探し」？
ところで、なんでチラシに間違い探しを入れたと思いますか？
面白いから？
そうです←
いえいえ、もちろんそれもありますが、実はこれもサービスのご紹介なんです。
間違い探し、人の目でやるのはとても大変
間違い探しに参加してくださった方にはもうおわかりですが、これをやるのは一苦労でしたよね？
簡単に見つけられるところももちろんありますが、ちょっとした違いやズレなどは「人の目で」見つけるのには限界もありますし、「あれ、前からこうじゃなかったけ？」とか記憶に頼るのも怪しかったりしますよね。
Webサイト、特にWordPressのWebサイトを運用しているとコアやプラグインのアップデートは頻繁にあります。
セキュリティを担保するためにも、この「アップデート」は必須になります。
そのたびに、全部のページで「どこかレイアウトが崩れたり、表示にエラーが出ちゃったりしてないかなー」って目視でチェックするのってめちゃくちゃ大変ですよね…。
それを自動でチェックして差分を簡単に確認できるツールの導入のご紹介、というわけです。
そこで「BackStopJS」です
そこでわたしたちは「BackstopJS」を使って変更のチェックを簡単にできるようにしています。
これは「ビジュアルリグレッションテスト」と呼ばれるもので、リグレッション（regression）とは「回帰、復帰、退行」という意味になります。つまり、簡単に言うと見ための変更をテストする、ということになります。
どんなふうにテストするの？
どんなふうなチェックになるのかは実際にご覧いただくのが早いと思いますので、今回皆さんにがんばっていただいた「間違い探し」をBackstopJSでやったらどうなるのか、以下のリンク先をご覧ください！
ただし、スマホからだとうまく表示させるのが難しいので、リンク先へ飛ばずにまずはこのまま読み進めてくださいね！
テスト結果の見方
いま画面はこんなふうに「BackstopJS Report」のページが見えていると思います。
でもこれだけではちょっと画像が小さくて「おいおい、これじゃどこが違うんだかそもそもわからないよ」という状態になっていると思うので、画像が3枚並んでいるうちの一番右、タイトルに「DIFF」と書いてある画像をクリックしましょう。
そうすると「差分表示」の画像だけの表示に切り替わります。
その画面で下へスクロールしてみると、なにやらピンクのマークが…？
そう、これが「BackstopJSが検出した2つの画像の差分」なんです。
簡単に「変更前」「変更後」の差分が確認できる！！
これを見れば一目瞭然、どこが変更になっているか簡単にチェックできます。今回の「間違い探し」にはありませんでしたが、BackstopJSでは「表示されている色の違い」や「表示のズレ」も検出できます。
ちなみに、ヘッダー部分にあるボタンの「REFERNCE（リファレンス）」をクリックすると変更前の画像、「TEST（テスト）」では変更後の画像を参照できます。
一番右の「SCRUBBER（洗浄機？）」をクリックすると、画像の真ん中にドラッグできる「赤い線」が表示されます。赤い線の左側は変更前（リファレンス）、右側は差分表示（DIFF・差分）の画像が表示されます。赤い線を左右に動かして確かめてみてくださいね！
BackstopJS導入のススメ
ご覧いただいたように、BackstopJSを導入すると、作業前後の表示の差分を簡単にチェックできます。
例えばスマホ、タブレット、PCそれぞれの表示での差分を確認できたり、BackstopJSにはもっとたくさんの機能があるのですが、詳しくはまたいずれ…。
WordPressのサイトであれば、最初にご説明したようにコアやプラグインのアップデートの前後でBackstopJSでのチェックをすれば、手軽に差分の確認ができますね！
アップデートが気軽にできるようになれば「アップデート祭り」も怖くなくなりますし、心に平穏が訪れます。
わたしたちThemesParkでは、皆さまが安心してWebサイトを運用できるようお手伝いをいたします。
なにかご不明な点などございましたら、どうぞお気軽にお問い合わせくださいませ。
お問い合わせはこちらからどうぞ！
