Zenn
🐡

あすけんMyレシピのWeb登録機能を使って非対応レシピサイトからも簡単にレシピ登録できるようにする

に公開
スクレイピング
jsonld
tech

概要

あすけんでMyレシピを作る際にWeb登録機能が利用できないレシピサイトからもレシピ登録ができるようなツールを作りました。

あすけんMyレシピと課題

あすけんの有料会員はオリジナルレシピを「Myレシピ」として登録し、食事を記録することができます。これは自炊派にはとても便利な機能で、よく利用しています。
あすけんMyレシピ
https://www.asken.jp/info/3399
Myレシピは一般的な料理であれば、メニュー名を検索して登録ができますが、レシピサイトやオリジナルレシピの料理の場合は一つずつ食材を検索してレシピを作成する必要があり、手間がかかってしまいます。
あすけんでは、レシピサイトのURLを入力すると、記載されている食材を自動で入力してくれる「Webから登録(β)」という便利な機能もありますが、対応してないサイトもあるため、そのような場合は手作業で材料・分量を一つ一つ登録することになります。
私はとあるレシピサイトをよく利用するのですが、そのサイトが「Webから登録(β)」に対応しておらず登録に手間がかかるため、この課題を解決できないか考えてみました。

解決方法

「Webから登録(β)」に対応しているレシピサイト一覧は公表されておらず、入力されたURL先のページから何らかの情報をスクレイピングして材料等の情報を取得しているような動きに見えたため、どのような記述をすれば「Webから登録(β)」でスクレイピングできるようになるのか、必要な情報を特定することにしました。

対応しているレシピサイトのページソースを確認すると、Webページに構造化データを記述するためのフォーマットであるJSON－LDでレシピに関する情報を記載していることが分かりました。
JSON-LDはGoogleが推奨しており、記載のあるページは、検索エンジンが情報収集時にそのページの内容を正確に理解することができるため、一定のSEO効果があり、また検索結果でリッチリザルトを返すようになり、よりユーザの興味を引くことができます。

SEOを重視する多くのレシピサイトでJSON-LDが利用されると考えられるため、ここに目をつけて、簡単にレシピ登録ができるように「Webから登録(β)」が開発されたのかもしれません。

Google 検索における構造化データのマークアップの概要
参考：Google 検索における構造化データのマークアップの概要

レシピサイトの場合の構造化データはこちらに記載例があり、いくつか記載項目がありますが、以下3つの項目の記載があれば「Webから登録(β)」機能でレシピ情報を取得できることが分かりました。

  1. name（レシピ名）
  2. recipeYield（出来上がりの量）
  3. recipeIngredient（材料名・分量）

そのため、あすけん「Webから登録(β)」機能がスクレイピングできるように、対応できていないレシピサイトから(1)～(3)の情報を取得し、JSON-LDにこれらの情報を記述したサイトを作成することにしました。

実装詳細

本ツールのアーキテクチャ概要図

Cloud Functions上にFlaskベースでツールを開発しました。
本ツールのアーキテクチャ概要図

使用技術

  • Python
  • Flask
  • Google Cloud Functions
  • BeautifulSoup (スクレイピング用)

レシピ詳細ページの記述

htmlのscriptタグにJSON-LD形式で(1)レシピ名(name)、(2)出来上がりの量(recipeYield)、(3)材料名(recipeIngredient)を以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
...
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>あすけん簡易登録ツール</title>
    <script type="application/ld+json">
    {
        "@context": "https://schema.org/",
        "@type": "Recipe",
        "name": "豚バラと野菜蒸し",
        "recipeYield": "2人分",
        "recipeIngredient": [
            "豚バラ切落し 170g（全量）",
            "緑豆もやし 300g（全量）",
            ...
            "こしょう 少々"
        ]
    }
    </script>
...

出来上がったツール

あすけん内の材料検索がうまくいかずにレシピ通りに登録されない物もありましたが、だいたいは登録できるものを作ることができました。
一つ一つ登録していた頃にに比べて、格段に登録が楽になり、あすけんで食事管理を続けるモチベーションが上がりました。

最後に

「Webから登録(β)」機能には、要望や意見があればフィードバックを送ってほしいという記載があり、登録対応ができていないレシピサイトも要望を送れば対応してくれる可能性もあるので、まずは送ってみることをおすすめします。
一方でよく使う特定のレシピサイトがある人は、このようなツールを作って登録を簡単にできるようにしてみてもよいかもしれません。

参考

Google 検索における構造化データのマークアップの概要
レシピ（Recipe、HowTo、ItemList）の構造化データ
json-ldの仕組みとは？SEO効果と構造化マークアップの方法を解説

Discussion