FileMakerでWebスクレイピング。APIのないECサイト管理を半自動化する活用事例（デモ動画あり）
目次
- 1. はじめに - 複数のECサイト運営の課題
- 2. Webスクレイピング × FileMaker という選択
- 3. デモ1 - ログイン処理の半自動化
- 4. デモ2 - 商品情報を自動入力する
- 5. デモ3 - CSVデータを取得して取り込む
- 6. 取得したデータの活用と連携
- 7. まとめ
この記事のポイント
- API非公開のWebサイトをFileMakerから操作するアプローチ
- ヘッドレスなWebスクレイピングと「半自動化」の違い
- JavaScriptを用いたWebビューアとFileMakerのデータ連携事例
- 取得したデータをSlackやクラウドへ連携する拡張性
1. はじめに - 複数のECサイト運営の課題
以前より、ECサイトを運営されている企業の技術サポートを行っております。
一口に「ECサイト運営」といっても、利用するプラットフォームは多岐にわたります。Amazon、楽天、Shopify、ZOZOTOWN、Creema、minne、BASEなど、ターゲットに合わせて複数のサービスを併用することが一般的です。
もし4つの異なるECプラットフォームを運営している場合、担当者は4つの管理画面を行き来しなくてはなりません。商品登録、注文情報のダウンロード、お客様とのメッセージ対応など、繁雑な作業が日々発生します。
さらに出荷管理や在庫管理といったバックヤード業務も加わると、すべてを人間が手作業で行うには限界があります。操作ミスのリスクも高まり、運営コストは膨らむばかりです。
各ECサービスが業務に合わせた「API」を公開していれば、それを活用してシステム連携するのが正攻法です。しかし、すべてのサイトがAPIを公開しているわけではありません。
2. Webスクレイピング × FileMaker という選択
今回ご相談いただいたお客様も、API非公開のサイトを含む業務効率化に悩まれていました。
実は私にご相談いただく以前に、開発会社へ依頼して一般的な「Webスクレイピング（クローラーによる自動取得）」を運用されていたそうです。しかし、以下の課題に直面していました。
課題
- ログイン周りのセキュリティ強化（2段階認証など）への対応が困難
- 突然表示される確認ダイアログ（
window.confirm等）で処理が止まる - エラーが起きても「どこで止まっているのか」「何が原因か」がブラックボックス化して見えない
バックエンド（Puppeteer等）で完全に自動実行するプログラムは強力ですが、画面が見えないため、仕様変更や予期せぬエラーへの対応が難しくなりがちです。
そこで今回は、「FileMakerのWebビューア」と「JavaScript」を活用した半自動化アプローチをご提案しました。
FileMakerのWebビューアであれば、ブラウザ画面をユーザーが直接見ることができます。
スクリプトによる自動操作（テンプレート文の挿入やCSVダウンロードなど）を実行しつつ、もしエラー画面が出ても、人間がその場で状況を見て判断できる点が最大のメリットです。
3. デモ1 - ログイン処理の半自動化
今回は「BASE（ベイス）」というECプラットフォームのアカウントを使用し、FileMakerから操作するデモを作成しました。
昨今のWebサービスは、セキュリティ向上のためSMS認証やワンタイムコード入力が必須となるケースが増えています。そのため、ログイン処理をプログラムで「完全自動化」することは、コストとメンテナンスの観点から最適解ではない場合があります。
このデモでは、IDとパスワードの入力からログインボタンのクリックまでを自動化しています。
もしログイン後に認証コードの入力が求められた場合は、そこだけ人間が手動入力すれば良いため、柔軟な運用が可能です。将来的にセキュリティ仕様が変わっても、Webビューアならすぐに対応できます。
4. デモ2 - 商品情報を自動入力する
ログイン完了後は、FileMaker内の商品データをWeb側のフォームへ転記します。
以下のデモ動画では、FileMakerのスクリプトからJavaScriptを実行し、商品名や在庫数などのデータをWebフォームへ自動入力、登録ボタンのクリックまでを行っています。
このように、FileMaker上のデータを任意のWebサイトへ自由に流し込むことが可能です。
5. デモ3 - CSVデータを取得して取り込む
管理画面から「注文データのダウンロード」を行う業務も頻繁に発生します。
このデモでは、任意のページへアクセスし、ダウンロードリンク（a要素）を特定。JavaScriptのFetch API等を利用してデータを取得し、その結果をFileMakerへ直接渡してインポートする処理を実装しています。
手動でファイルをダウンロードして、フォルダから選んでインポートする...といった手間を削減できます。
6. 取得したデータの活用と連携
FileMakerを使う大きなメリットは、単にデータをWebからインポートして終わりではないという点です。
FileMakerは「業務のハブ」として機能するため、取得したデータをトリガーにして、さらに次のアクションへ自動で繋げることができます。
活用と連携
-
コミュニケーションツールへの通知
処理完了時や特定のエラー発生時に、Slack、Chatwork、Teamsなどへメッセージを自動投稿する。 -
クラウドストレージへのバックアップ
ダウンロードしたCSVや生成したPDFを、Amazon S3、Google Drive、Dropboxなどへ自動アップロードして保存する。 -
ファイルの加工と転送
複数のファイルをZIP圧縮してメールに添付して送信したり、FTPサーバーへアップロードして取引先と共有する。 -
柔軟なエラーハンドリング
Webサイト側の構造変化などで処理が失敗した場合に、「管理者へメールを送る」「処理をスキップしてログに残す」など、業務に合わせた例外処理をスクリプトで細かく制御できる。
このように、Web操作の部分だけを自動化するのではなく、その後の業務フロー全体を一気通貫で効率化できるのが、FileMakerを採用する強みです。
サンプルファイルについて
本記事で使用したサンプルファイルは公開しておりませんが、具体的な導入をご検討の方は無料相談よりお問い合わせください。
7. まとめ
今回のデモのように、APIがないWebサイトであっても、FileMakerをブラウザ代わりに使用することで、業務を大幅に効率化できます。
技術的な補足となりますが、WebビューアからのJavaScript操作では、CORS（クロスオリジン）制限によって外部との通信がブロックされるケースがあります。そのような場合でも、Cloudflare Workersなどを経由してプロキシAPIを構築することで解決できる場合があります。
「このサイトの入力を自動化したい」「APIがないけれど連携したい」といったご要望がありましたら、ぜひお気軽にご相談ください。
まとめ
-
FileMaker × Webスクレイピング
視認性が高く、エラー時のリカバリーが容易な「半自動化」システムが構築可能。 -
柔軟な連携
JavaScriptを活用することで、フォーム入力の自動化やCSVデータの直接取り込みが実現できる。 -
無限に広がる連携
Slack通知、クラウド保存、メール送信など、取得したデータを即座に次の業務フローへ接続できる。
FileMaker と Web の連携でお困りですか？
本記事のような WebビューアからのJavaScript操作 や Webスクレイピング連携 について、技術的なサポートを行っております。「実現したいことはあるが、技術的なハードルが高い」とお悩みの方は、ぜひ無料相談からお気軽にご連絡ください。
