関連のツールの紹介、使い方などをやさしく説明しています。Connectorの設定をしよう画面を作ろう実行処理をしよう結果を表示しよう結果を表示しよう~Dexiプラグイン版まとめBubbleでスクレイピングをしてみよう!こんにちは!Bubbleでノーコードライフ楽しんでいますか?ニュースやショッピングサイト等のサイトから必要なデータを自動的に収集したい!それをアプリに表示させたい!という場合ありませんか?それをスクレイピングといいます。これもノーコードでしたいですよね?!というわけで、今回はBubbleでスクレイピングをしてみましょう!!スクレイピングとはスクレイピングとは、Webサイトにアクセスし、HTMLを解析して自動的にデータを収集することです。マーケティングや、自作のアプリに情報を表示したりするときに有効です。気をつけて頂きたいのは、スクレイピングを禁止しているサイトや違法となることもあるので、よく調べてから行いましょう。自分でスクレイピングをするには、コーディングが必要になりますが、スクレイピングをしてくれるサービスがいくつも既に存在するので、そちらを使用しましょう!その中で今回は、dexi.ioを利用してスクレイピングしようと思います。サンプルを作ろう今回のサンプルでは、ノーコードラボのトップページから最新記事のタイトルとその記事のURLを取得し、それを表示するアプリを作成します。サンプルアプリはこちら↓↓https://nocodelab-sample-scraping.bubbleapps.io/dexi.ioの準備をしようまずはdexi.ioのアカウントを作りましょう。Google、Githubからもサインインできます。www.dexi.io多く検索する場合は、有料である必要があるかと思いますが、検索時間が1時間以内であれば無料で使用できます。Robotを作ろうアカウントを作ったら、robotを作りましょう。Robotではスクレイピングの収集元、何を収集するか等のロジックを設定します。robot」から作成します。robot」ボタンをクリックします。Urlには、今回作成するサンプルはノーコードラボのトップページからデータを収集するので、そのURLを設定しています。作成すると、以下のような画面が表示されると思います。上部にはRobotに設定したURLのページ、下部ではスクレイピングのロジックを設定します。サンプルでは、ノーコードラボブログのトップページからタイトルとそのリンク先のURLを取得するようにします。Outputsを設定しようまずは出力する項目を設定します。Outputsのタブを選択し、ここで出力する項目を設定します。field」をクリックして設定します。Stepsを設定しようStepsではどういう動きをするか、どういったデータを取得し、出力するか設定します。output」のみありますが、この間にStepを追加していきます。Stepを追加する場合は、追加したいStepの前か後ろのStepにマウスを持ってくると、上の画像のように色々アイコンがでます。左右の「+」のアイコンをクリックするとStepの追加ができるので、そこから追加しましょう。URL」の次に新しいStepを追加します。elements」を選択します。右側に選択したStepの説明が表示されていますが、選択されたエレメント分、ループ処理を行ってくれます。「Ok」ボタンをクリックすると、詳細設定のウィンドウが開きます。pathで、どのエレメントかを指定します。「◎」のアイコンをクリックすると、上部の画面から選択できるので、これを使うと便利です。ここではタイトルを含むエレメント選択して「Ok」をクリックします。pathに選択したエレメントが表示されます。div.archive-entry-header」と書き換えてください。スクロールすると「Ok」ボタンが出てくるので、必ずクリックしてください。「Ok」ボタンをクリックしないと反映されません。スクロールしないと見えないので忘れがちになってしまうので、気をつけてください。ちなみに上部の画面のエレメントを選択すると、ElementsタブでHTMLでの確認ができます。elements」の次にStepを追加します。value」を選択します。これで値を抽出します。タイトルを抽出しましょう。fieldに、先ほど設定した「Title」を選択します。pathsには◎をクリックし、タイトルが表示されている部分を選択します。a.entry-title-link」と書き換えてください。output」にチェックも入れてください。Titleの中身が書き換わるのではなく、追加されるようになります。ここでも、スクロール下部の「Ok」ボタンをクリックするのをお忘れなく!!次に、URLを抽出します。Title」として表示されていると思いますが、そのStepの次にStepを追加します。attribute」を選択します。attributeはHTMLタグの中の属性を抽出します。fieldに、今回はURLなので「URL」を選択します。pathsには◎をクリックし、タイトル抽出同じように、タイトルが表示されている部分を選択します。a.entry-title-link」と書き換えてください。nameに「href」を設定してください。選択されたaタグにhref属性があるので、その中身を抽出するという設定です。output」にチェックも入れてください。しつこいようですが、スクロール下部の「Ok」ボタンをクリックするのをお忘れなく!!これでStepsの設定は終わりです。実行してみよう先ほど設定したStepsを実際に動かしてみましょう。実行は右上にある矢印群で実行できます。「▶」が実行になるので、それをクリックしてみましょう。開始は、フロー上に緑になっているところが開始地点です。URL」の次の矢印が緑になっていますね。URLはせずに実行されます。開始位置を変更したい場合は、矢印群のback、forwardで設定してください。実行した結果は、というと、「Results」タブの中にあります!Titleにブログ記事のタイトル、URLにブログのURLが取得されていることがわかります。実行に関してはいつでもできますので、フローを作りながら都度確認しても良いでしょう。results」をクリックしてから実行すると結果がわかりやすいです。これでRobotの設定は終わります。最後に必ず「Save」ボタンをクリックしてくださいね!!Runを作成しようRobotはできましたが、実際に実行するためにはさらにRobotに対してのRunを作る必要があります。Run毎に実際に実行する際の設定(スケジューリング等)をすることができます。Projectsの一覧で作成したRobotを選択すると、右側に詳細&ボタンが表示されます。run」をクリックします。name」とポップアップがでますので、名前を入力してください。デフォルトは「Configuration」となっているので、そのまま登録して大丈夫です。登録すると、上図のように、Robotの下にConfigurationができています。選択すると、右側に詳細&ボタンが表示されます。run」で、実際にスクレイピング処理が行われます!!また、「Open」をクリックすると、以下のように色々設定可能になっています。dexi.ioでは色々なIDが出てきて、実際にAPIを使う場合、何がどのIDか迷うことがありますが、このIDは「runId」といわれるものになるので、覚えておいてください。実際に実行してみようというわけで、実際にスクレイピングしてみましょう。run」ボタンを実行すると、上図の画面が出てきます。successed」がでてきて、Resultsのタブに結果が表示されます。ちなみに、この上の画像のIDは「executionId」にあたります。無事に結果が抽出できましたね!ちなみにこの実行検索時間が料金プランに関わってくると思います。Keyを取得しようdexi.ioの設定はここまでですが、他のサービスで使うためにはAPIを使って接続します。BubbleからももちろんAPIを使います。Key等も確認してみましょう。Documentation」のサブメニューを選択します。上のようにIntroductionには、APIに接続するためのID等が表示されています。Keyが外部に漏れた場合は、生成しなおしましょう。keyも生成されるようになります。Id含め、Bubbleから接続する際に必要ですので覚えておいてください!Bubbleの準備をしようそれでは、Bubble側の準備も行いましょう。アプリは作成済みとして、プラグインをインストールしましょう。Connectorプラグインを利用します。Connectorについては以下の記事でも触れているので初めての方は参考にしてください。Connectorを設定しましょう。Nameは「Dexi」にしました。ヘッダーに以下2つの項目を設定してください。Id共通の設定は以上です。実行のAPIの設定をします。以下のAPIを呼ぶと、スクレイピングを実行してくれます。https://api.dexi.io/runs/【runId】/execute※runIdはdexi.ioで作成したRunのIDです。call」を必ずクリックしましょう。ここで正しく返ってきたらO.K.です!!そのとき、「Save」するのも忘れずに。次は、スクレイピングのデータの取得を行いましょう。最新の抽出成功した実行データを取得するようにします。※抽出成功の意味です※runIdはdexi.ioで作成したRunのIDです。call」を必ずクリックしましょう。ここで正しく返ってきたらO.K.です!!そのとき、「Save」するのも忘れずに。これでAPIを呼ぶ準備ができました!!画面を作ろうそれでは、画面を作りましょう。シンプルなサンプルです。実行処理をしようスクレイピング実行ボタンをクリックすると、スクレイピングを実行します。ワークフローを見てみましょう。Run」アクションを呼びます。終わったらアラートを表示させています。スクレイピングするのは規模にもよると思いますが、すぐに実行終了されません。このサンプルの場合、結果も表示されていますが、ボタンを実行した結果がすぐに反映されているのではない、ことをご注意ください。Groupに表示させます。Connetctorで設定したGetLatestResultを呼ぶようにします。表示に関しては少し手を加える必要があります。上の画像が表示の設定内容ですが、少しわかりづらいので詳しく説明していきます。※TextはGroupの中に配置しています。表示するテキストは、タイトルをクリックするとリンクに飛ばすので、urlタグを使っています。変数を【】で囲むと、以下のテキストになります。この中身が、dexi.ioでは、タイトル、URLと項目がわかれているのですが、BubbleでJSONを自動解析したときにはひとつの文字列になってしまっています。【URL】,といった文字列になっているんです。Regexを使い正規表現を使って切り離します。Regexは、正規表現をつかって、設定した正規表現に合う文字列をリストで返してくれます。」(カンマとスペース)で区切るようにするので、正規表現は[\s\S]+(?!,\s)とします。#2がURLとなりますので、埋め込んでください。Connectorでdexi.ioと接続しましたが、実はBubbleにDexiのプラグインがあります。Key」を指しています。key」ではないのでご注意ください。Results」より実行結果を取得することができます。Results(これが結果の型です)にField_1~20用意されていますので、今回のサンプルだと、Field_1にタイトル、Field_2にURLとなり、表示にはこのプラグインを使うと便利でしょう。Idが必要になります。上記で説明した最新の抽出結果を取得する、というのはアクションは残念ながらプラグインには用意されていません。Idを取得するAPIを呼び、プラグインを使ったらできます。dexi.ioのAPIについては色々あるので、ドキュメントをご覧ください。Idを取得できるデータアクションも用意されていますが、なぜかエラーで動きませんでした・・・(泣)まとめ今回はdexi.ioを使ってBubbleでスクレイピングをしてみました!いかがでしたでしょうか?dexi.ioでは、一覧画面から各詳細画面に遷移し、データを取得したり、入力できるので、ログインもできたりと様々なことができます。収集元のサイトのHTMLによっては思うように動かないこともあるかもしれませんのでご注意ください。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。