ざっくんのブログ

育児休業中の多動男性のブログ(男目線で気づいたことや日々の行動を綴ります)

小林製薬 製品名当てアプリ

f:id:yoshitsugumi:20190703190107j:plain



育児休業中に困ることは何か?



それは





これだけだと何もやってない人みたいなんですが、「集中して何かをやる時間」を取るのが絶望的に難しいです。



洗濯、掃除、食器洗い、ミルク、オムツ替え、お風呂、散歩の合間に自分のご飯。



これ自体は別にいいんです。



そんなに時間がかからないし。



ただ、子どもが起きている時間が長くなってくるにつれてウニャウニャ言っていたり、きゃっきゃしてたりしたらそりゃ相手するじゃないですか?



そしたらやってる作業中断なんですよ。



前置きが長くなりました。



なんで、とりあえずテレビを見るともなくつけているわけですが。



そこで唐突に始まる「小林製薬 製品名当てクイズ」



小林製薬 製品名当てクイズ



ちょっとわからない方がいるかもしれないので説明すると、「小林製薬 製品当てクイズ」とは?



f:id:yoshitsugumi:20190703185942g:plain



こんなCMが流れたとします。そこですかさず



オシリア!!!

と叫ぶゲームです。



我が家では

f:id:yoshitsugumi:20190703185948j:plain

「あっ!」が聞こえてきたら臨戦態勢をとって準備します。



このゲーム意外に奥が深く、「Riff あせワキパット」と叫んだら「Riff 香るあせワキパット」だったりするんです。
※この2つはイメージです。似た製品名、亜種みたいなのとよく間違うということ。



そこで考えました。製品名とその特徴を覚える方法はないかと。



そして小林製薬のサイトにアクセスしてみたわけです。



そしたらなんということでしょう。



製品がやたらと多い。

f:id:yoshitsugumi:20190703190029p:plain

数えたら 362個ありました。(2019.07.03時点)



普通に覚えたら受験勉強よりつらい気がするのでなんとか楽しく覚えたいなと思いアプリ作成を思いつきました。

小林製薬 製品名当てアプリ 概要

完成した時の出題イメージです。

f:id:yoshitsugumi:20190703190049p:plain

ぼかした製品の写真と製品説明が問いで、正解を含むランダムに抽出された4つの製品名が選択肢です。

ちなみにこれの答えは「女性保健薬 命の母A」です。

実装

実装には大きく分けて2つのステップがあります。

  1. データ収集
  2. 出題アプリ作成

今回は1の途中までやりました。

取得したデータ。
https://docs.google.com/spreadsheets/d/1JaOv-aQi13P6gco2AmnmXVxgyHmv6zLIBwZ810mjXes/edit?usp=sharing

取り合えずglideに突っ込んでみた。
https://lte9z.glideapp.io

どうやってデータ収集したか

今度ちゃんと書きます。(多分)

簡単にいうとスクレピングです。

この辺りを参考にしてやりました。
ScrapyでWebサイトのタイトルとURLを再帰的に取得する(Qiita)

製品説明が改行されてるやつの扱い(別要素になるので)がちょっと面倒でした。

次にやること

画像を取ってきてないので画像を取得する+モザイク

そして2のアプリ作成を行いたいと思います。できればPWAアプリにしたい。