クックパッドの検索結果にレシピ動画情報が追加されたので早速スクレイピングしてみたよ
こんばんは。ツムさんです。
最近、料理動画サイトが流行っていてぼくも触発されたので、一にスクレイピング、二にスクレイピング、そして三もスクレイピングしてみました。
よく目にするサイトは、
- kurashiru（クラシル）
- DELISH KITCHEN
- COOKPAD（クックパッド）
あたり。
kurashiruのように、テレビCMを出すところもあって特に注目されてきていますよね。うちもちょくちょくお世話になっています。
テキストと動画は比べるというよりも、つくり方の説明を「補間する関係」になっています。動画はレシピの冒頭に用意されていて、動画でざっくり作り方を把握してから、テキストの詳しいレシピを見るという導線になっています。
うちでは茗荷にハマっているので、茗荷で見つけた料理動画はこちら。
茗荷まるごと～豚肉巻き巻き★ by naonaos [クックパッド] 簡単おいしいみんなのレシピが267万品
動画は長すぎず、短すぎず、見ていて丁度いいと思う内容です。
この動画を自分のアプリからも検索したい！
ということで、早速スクレイピングです。
AndroidアプリはJavaで作っているので、スクレイピングのためにJsoupライブラリを使います。
んで、GETしたHTMLをダンプしてみるとこんな感じでした。
<div class="pickup_recipe_movie">
<a class="pickup_recipe_movie_button opened" href="#movie">
<div class="watch_movie">
レシピ動画（1分55秒）
</div> </a>
<div class="pickup_recipe_movie_content clearfix">
<div class="clearfix video_player_wrapper">
<iframe frameborder="0" height="169" src="https://cookpad-video.jp/videos/28/embed" width="300"></iframe>
<div class="right">
<a class="link_to_video" data-icon="https://assets.cpcdn.com/assets/themes/videos/video20.png?2030b6cb461fb0894152cc0c2839047241e4cc18a71dcfa44f720f6cd00a777e" href="/videos/28">クックパッド料理動画でみる</a>
</div>
</div>（以下省略）
pickup_recipe_movieのclassで括られたdivタグが料理動画に関する記述です。注目したいのは、レシピ動画の再生時間（緑）と動画URLへのリンクが書かれたiframeタグです。
レシピ動画の再生時間は、そのまま料理の手間がわかる大切な指標です。動画だけで5分も10分もかかるようだと、「この料理難しそう」となってしまって、作る側のやる気を削いでしまうので、運営側もなるべく簡潔な動画になるよう工夫しています。
青字のiframeタグ中、src属性に書かれたURLが料理動画そのものです。試しにブラウザにこのURLを直接入力してみると、再生されました。
ここまでで、自分がやりたいことは見えました。
1. レシピページのHTMLをGETする
2. watch_movieクラスのdivタグをサーチ
3. 動画の再生時間情報を抜き出し
4. 料理の難易度計算式に反映
5. clearfix video_player_wrapperクラスのdivタグをサーチ
6. src属性から動画のURLを取得
という感じで、動画の再生時間と動画のURLを抜き出します。
あとは、動画アイコンを表示してタップされたら動画を再生するようにプログラムを作ってやります。
次回、動画の再生まで実装したプログラムを紹介します。
ベースとなるアプリはみなレシ - Google Play の Android アプリです。
余談ですが、動画でざっくり様子を伝えて、テキストで詳細を補って紹介するという方法は、Googleのアプリストアのゲームソフトでよく見かけるASO（アプリストア最適化）の手法と同様です。
ユーザーはゲームをインストールする前に、どんなアプリなのかを知りたがっており、動画はそのためのものです。実際にインストールしたユーザーは細かい情報をテキストから入手します。
つまり、動画で興味を引けなければ、ゲームをインストールされることもないということで、いかに短い時間に魅力たっぷりのストーリーを紹介できるかにかかっているわけです。
