Firebaseから相席ラウンジのデータをスクレイピングしFlutterアプリで表示する

Last updated at 2019-11-11Posted at 2019-11-10

出会いがない！相席屋にいってみたい！でもどこの店舗に行ったらいいかわからない！そんな人のために簡単なアプリをFirebaseとFlutterで作ってみました。

動画でもかなりわかりやすく説明したつもりなので、5分時間がある方はチェックしてみてください。

【相席屋必勝法】プログラミングで相席ラウンジの女子率を計測ww【スクレイピング】

目的

出会いがない！相席屋にいってみたい！でもどこの店舗に行ったらいいかわからない！そんな人のために、ブルーオーシャン順に並べたアプリを作ろう！というのが目的です。

また、最速で作るために、FirebaseのCloud FunctionとFirestoreだけで作っていきます。

全体構成

firebase cloud functionに毎5分ごとに実行するfunctionを作り、5分ごとに相席ラウンジのサイトをスクレイピングし、相席ラウンジの各店舗の現在の男女の人数を取得します。このデータをfirebaseのfirestoreと呼ばれるデーターベースに記録していきます。

データーベースに保存された情報を可視化するために今回はFlutterでスマホアプリを作ります。スマホアプリで現在のブルーオーシャン店舗ランキングを簡易的に表示し、今行くべき店舗がすぐに分かるようにするアプリを作って行きましょう。

定期実行

Firebaseのドキュメントに関数のスケジュール設定にあるように、最近Firebase Cloud Functionsに定期実行の機能が追加されたため、容易に定期実行をできるようになりました。

（以前はAppEngineを組み合わせて定期実行していた - FirebaseとAppEngineだけでRSSを使った動画アプリやニュースアプリを作る方法）

例えば、15分ごとに実行したい場合は、以下のように書きます。

exports.scrapeAiseki = functions.pubsub
    .schedule('every 15 minutes')
    .timeZone('Asia/Tokyo')
    .onRun(async (context) => {

    });

スクレイピング

スクレイピングとは、あるWEBサイトのHTMLの要素から必要な情報を抽出することを言います。今回は相席ラウンジのHPのHTMLを抽出して、店舗ごとの人数比などを取得していきましょう。というのも、相席ラウンジのトップページからは各店舗ごとの男女比が一目瞭然なのです。

今回スクレイピングにはpuppeteerというライブラリを使います。

簡単に説明すると、puppeteerはヘッドレスブラウザと呼ばれるChromeやSafariみたいなGUIはないブラウザです。つまり目には見えないブラウザで、puppeteerが指定したwebページのサイトを見た目には表示せずに見に行くことができます。

こちらをfirebaseのcloud functionで使いたいので、package.jsonのdependenciesに以下のようにpuppeteerを追加しターミナルでnpm installします。

package.json

  "dependencies": {
    "firebase-admin": "~7.0.0",
    "firebase-functions": "^2.3.0",
    "puppeteer": "^1.20.0"
  }

これで使えるようになったのでFirebase Cloud Functionsの定期実行のファンクションの中身に以下のように書いてスクレイピングします。

exports.scrapeAiseki = functions.pubsub
    .schedule('every 15 minutes')
    .timeZone('Asia/Tokyo')
    .onRun(async (context) => {
        const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
        const page = await browser.newPage();
        await page.goto('https://oriental-lounge.com');

        // 店舗取得
        const shops: [any] = await page.$$('.shop');

        await Promise.all(shops.map(async shop => await setShopData(shop)));
        await browser.close();
    });