なぜこのサービスがあなたに必要なのか
ありがちなシチュエーション
転職情報サイトの画像アップロード機能を、ゆとりをもって一通り開発することができた。
しかしCIで実行したstylelintに怒られて、ちょっとだけ修正を入れてしまった。念には念を入れて、最後にもう一度動作確認をしておこう。
今回開発したのは、募集内容詳細画面に複数の画像を表示可能にする機能追加だ。これまではアイキャッチ用の1枚しか画像が載せられなかったが、これからは企業の雰囲気を伝えるための様々な画像をアップロードできるようになる。
テストに使う画像は……、まぁダウンロードフォルダに入ってる、いつもの適当な画像でいいか。
無事アップロードできたし、レイアウトを再確認しよう。
詳細画面の下に、正しく複数のインド人が表示されてる。大丈夫そうだな。完成。
今日はプルリク（Pull Request）の説明を少し書き足してから帰ろう。
「すみません。一個だけお願いしていいですか」
問合せ窓口担当の田代さんが、デスク越しに話しかけてきた。
「先方がマニュアルを先に作りたいらしくて、画像追加後の画面がどうなるか教えて欲しいって言ってるんですけど、画面設計書とかって、ないですかね？」
先方というのは、この機能追加を要望してきた顧客企業だ。サービス黎明からの大事な顧客で、頭が上がらないらしい。
設計書は無いですが、もう機能はほぼできてるので、Slackで開発画面のスクショは送れますよ。
「おっ。素晴らしい。それではお願いしますね」
大したお願いじゃなくて良かった。それじゃあ開発画面のスクショを送ってあげよう。
Command + Shift + 4で範囲を選択して、田代さんにDMで送信。
プルリクのGitの差分についてdescriptionを書き加えていると、困った顔をした田代さんがやってきた。
「すみません……あれではお客さんに出せないので、スクショを取り直して頂いてよいでしょうか」
えっ。
「流石にもうちょっと真面目なデータじゃないと、ほら、弊社も会社としてのブランドがあるので」
なるほど、確かに。もちろん私は真面目にデベロッパテスト（Developer Test）を行っているが、このスクショからはテストに対する真摯さが伝わって来ないというのは一理ある。
もう既に何度もテストをしていて大丈夫だと分かりきっているから油断していた。しっかりテストをしていることを示すために、このスクショには改善すべき点が2つある。
まず、同じ画像を何度も使うのはテストとして失格であり、異なる画像を使うべきだった。仮にコードに不具合があり、同じ画像ばかり表示されていたとしてもそれを見つけることができないためだ。
もう一つは、境界値のテストとして、この画像アップロードの仕様である「0枚以上5枚以内」をテストしていることが明確に分かるよう、上限5枚の画像をアップロードしておくべきだった。
そして私は、異なる5枚の画像をアップロードして、Command + Shift + 4でスクショを撮り、田代さんに送ったのであった。
「違いますよ！！ ふざけてるんですか！？ 知らない人が増えてるんですけど！ この画像は何！？ 誰！？」
フリー素材のインド人ですけど。
「え、『なんでそんな当然のこと聞いてくるの』みたいな顔してますけど、開発中のテストでフリー素材のインド人を使うのって一般的なんですか！？ お客さんに見せるデータだって言ってるでしょう！ もっとお客さんが使い方を想像できるような、それっぽいデータにして下さい！」
田代さんがギャンギャンうるさいので、仕方なしにそれっぽいデータを作る作業に取り掛かる。まったく注文の多い人である。
それにしてもコミュニケーションは難しい。真面目にデータを作れと言われたので、テストデータとしてより効果的なデータを投入したのに、田代さんのいう「真面目」というのはそういう意味ではなかったらしい。
田代さんはよりお客さんに近い位置でこのサービスに関わっているので、開発者とは違う目線を持っているのだろう。
……やっとのことでデータができた。もう定時を1時間も過ぎている。手間をかけただけあって、かなりそれっぽくなった。
そしてCommand + Shift + 4でスクショを撮り、田代さんに送ったのであった。
「どっちの方向にそれっぽくしてるんですか！！」
いや、だって、新しく画像を探すのって面倒臭いので……。
やってしまいがちなこと
テストをする時に、きちんとしたデータを作るのは面倒臭いです。特に画像やPDFやパワポのファイルは、無難なデータを用意するのが輪をかけて面倒くさいです。
なので、ついつい「万が一顧客に見られても問題ないレベルの無難なデータ」ではなく、ダウンロードフォルダに入ってる適当な画像とか、SlackとかTwitterとかで使ってるアイコンのキャラもの画像とか、顧客には見せてはいけない社外秘のパワポとか、自社の会社組織図のPDFとかをテストに使ってしまいがちです。身に覚えがありませんか？
実際、ほとんどの場合は誰にも見られないのでそれでも問題ないのですが、いきなり顧客から「画面イメージを見せて欲しい」と言われたり、ノートパソコンを持ち出している時に開発中の画面をチラ見されてしまったり、営業の人が顧客にStaging環境を見せた時に、うっかりフリー素材のインド人が登場したり。ふとした一瞬に「無難なテストデータ」が求められ、その瞬間にうまいこといい感じのデータがないと、いらん工数が発生したり、最悪の場合は顧客の信用を失ってしまうこともあるはずです。
しかし、「何の面白みもない、無味乾燥な、無難な画像データをテストで使う分だけ探してくる」のは、それだけで骨が折れます。1枚だったらすぐ見つかりますが、10枚、20枚と探すのは大変です。自分の欲しいサイズの画像があるとも限りません。
その問題を、解消します。
Testaroというサービスを作った
URL
下記URLは２つとも同じ宛先です。
- https://testaro.somewhere.gq/ (メインのURL)
- https://testaro.netlify.app/ (netlifyから標準で配られるURL)
.gqドメイン（赤道ギニア）が会社のプロキシで弾かれてしまう場合はnetlifyの方からどうぞ。無料ドメインゆえの悲しい制約です。
どんな機能があるか
ダミー画像をいっぱい生成する機能
パラメータを入力してあげることで、ダミー画像を好きなだけ生成できます。
沢山ダウンロードしたい場合は、gif動画のように、ブラウザ側で複数ダウンロードを許可して下さい。実際触ってみたら分かります。
100枚でも200枚でも、お好きなだけ保存してください。負荷がかかるのはあなたのブラウザであって、Netlifyのサーバーではありません。なので遠慮は無用です。
これでもう、フリー素材のインド人を頼る必要はなくなります。
その他の機能
「ありがちなシチュエーション」の話を書いて疲れてしまって、説明が面倒くさくなってきたので省きます。実際触ってみたら分かると思います。
- ダミーPDFをいっぱい生成する機能
- ダミーパワポをいっぱい生成する機能
- ダミーユーザー情報を生成する機能
- などなど
もう社外秘のパワポやPDFをテストで使う必要はありません。
技術の話
- Next.js(React) + TypeScript
- Netlify (静的ファイルをホストしてくれるサーバー)
- Freenom (無料ドメイン)
Next.jsを静的サイトジェネレーターとして使っています。つまりTestaroは完全に静的なページです。果たしてWebサービスを名乗って良いんだろうか。
ただ、そのおかげで私はサーバーの管理をNetlifyに丸投げすることができ、Webサーバー側にみなさんの入力が送信されるわけでもないので、安心してデータを入力することができます。
画像もcanvasを使ってJS側で生成しています。PDFもパワポもブラウザのJS側で生成しています。サーバー側で何かを処理することはありません。
その代わりに犠牲になっているものもあります。初回ページ表示時のパフォーマンスです。
- PDF生成
- PDFの生成に必要なフォントをダウンロードするのに時間がかかっています。
- ユーザー情報生成
- 郵便番号と住所も一緒に適当な値を生成させるのですが、その元データの住所jsonをダウンロードするのに時間がかかっています。今はランダムに抽出した郵便番号1000件分のデータが元になっています。
遅延でページを読み込ませるようにはしていますが、この2つの機能は特にページを開くのが遅いです。ご了承下さい。一度ダウンロードが完了すれば、後は別の機能に遷移して戻ってきても快適に使うことができます。そのうち改善したい。
おわりに
この記事は、「ソフトウェアテスト Advent Calendar 2020」２日目の記事です。
このサービスによって楽になる手動テストは、お仕事の中のほんの一部に過ぎないと思いますが、それでも少しでも効率化に寄与できたら幸いです。
あとタイトルに「ありそうでなかった」とか書いてありますが、単に私の調査不足で既に存在していたらタイトル詐欺です。ごめんなさい。
去年のAdvent Calendarでも変な記事書いたのでもし良ければ見ていってください。お祭りならば多少のおふざけは許されるって信じてます。
もし、こんな機能が欲しいという要望があったら、GitHubのissueとかに書いておいてくれれば、気が向いたら対応したり、しなかったりするかもしれません。
ちなみに、Testaro内に「おすすめ書籍」のページがあるのですが、Amazonアソシエイトの審査は通っていないため、そこから書籍を購入しても、1円も私に入ってきません。