システム開発

ファイルアップロード自動化の手順をまとめてみた(前編)

はじめに

オンラインストレージにファイルをアップロードする、という要件があり、自動アップロードするプログラムを作成しました。

今後、対象となるオンラインストレージの種類が増える可能性があるため開発メンバーが誰でも担当できるように開発手順としてまとめてみました。

(1) APIなどが使えないか検討する

オンラインストレージへのファイルアップロードを自動化する方法として

  • (a) ブラウザでの操作時に発行されるHTTPリクエストを真似して送信
  • (b) オンラインストレージが提供するAPIなどを使用する


があります。
(a)の方法で行う場合、一般的なオンラインストレージの画面では、

ログイン→アップロードフォルダへ移動→ファイルアップロード→結果確認

のような操作が行われ、この操作でそれぞれHTTPリクエストを発行する必要があります(内部的にセッション管理などされている場合が多く、ログイン→アップロードをいきなり行ってもエラーになることがあるため、最初は手順通りに試す必要がある)。

作るのが非常に面倒なうえに、オンラインストレージのサイトが更新されるとそれに合わせてアップロードプログラムも修正する必要が発生することがあります。そのため、まず初めに(b)のAPIが使えないかを検討すべきだと思います。
APIを使用するメリットとして、

  • オンラインストレージサイトの更新の影響を受けない(はず)
  • アップロード結果が判定しやすい
  • 実装が容易(たいていサンプル通りでうまくいく)
  • WebDAVのように標準化されたAPIだとプログラムを共通化できる

デメリットは、

  • ストレージとは別にオプション料金が必要な場合がある

となります。
金銭的な面や開発要件に問題がなければAPIを使うべきではありますが、現実は厳しく対象の8つのオンラインストレージのうち2つでしかAPIが使えませんでした。

(2) selenium、RPAの使用について

(1)で上げた直接HTTP通信を行う方法とは別にseleniumやRPAを使う方法もあります。seleniumはChrome, Firefoxなどのブラウザをプログラムから操作できるライブラリです。この方法では、

 ・ブラウザを起動
 ・urlを入力してログイン画面を表示
 ・ユーザID、パスワードのテキストボックスを入力
 ・ログインボタンを押下

などのブラウザ上の一連の操作をプログラムから行います。
seleniumを使った場合は、HTTPリクエストを自分で送信するよりは実装が簡単になりますが下記の問題点があります。

  • 想定していない標準のメッセージダイアログなどが表示された場合、OKボタンを押下するまで他の操作ができなくなる(フリーズする)
  • ブラウザを起動して操作しているためブラウザ自体がフリーズして操作できなくなることがある
  • HTTPリクエストを送信する場合と同様でサイトが更新(操作方法が変更)された場合に動かなくなる可能性がある

自動実行のバッチにするには安定性の面で不安があるため、今回の開発ではseleniumの使用は不可となりました。

RPAもseleniumと同じようにブラウザを操作してファイルアップロードなどを行うことができますが、ブラウザを操作するためseleniumと同じ問題点があり、やはり安定性の面で不安があるため使用は不可となりました。

(3) ブラウザ操作のHTTP通信を取得する

ここからはHTTPリクエストを使用する場合の手順になります。
始めに実際にブラウザでオンラインストレージの画面を開き、ログイン~ファイルアップロードまでの一連の操作を行い、その際に発行されるHTTPリクエストとレスポンスの内容を取得する必要があります。
HTTP通信の内容を取得するにはどのブラウザを使用しても手順はほぼ同じで、

  1. ブラウザを開いて、F12キーを押下してデベロッパーツールを開く
  2. デベロッパーツールの中からNetworkのタブを選択する
  3. ウェブ画面を操作する(ログイン画面表示、ログインなど)
  4. デベロッパーツールのNetworkに出力されたリクエストとレスポンスを保存する


となります。
デベロッパーツールのNetworkの通信結果は以下のように表示され、1行が1つのリクエストに対応しています(画像はChrome)。


通信結果のTypeによってリクエストの内容を記録するかどうかを判断します。判断基準は以下の通りになります。

Typeリクエストとレスポンスを保存するかどうか
stylesheetレイアウト定義。不要
scriptjavascriptのファイル
標準ライブラリ(jqueryやvue.jsなど)の場合は不要
システムで作成されたjsの場合はトークンIDなどを含んでいる場合もあるため念のため保存しておく
png
jpeg
x-icon
画像、アイコンファイル。不要
fontwebフォント。不要
document
xhr
その他
中身によっては不要な場合もあるが、保存しておく


リクエスト・レスポンスの送信・受信項目は後でプログラムからリクエストを作成する際に参考にするためメモ帳などに内容をコピーして保存しておいた方がいいと思います。ブラウザにはまとめて保存のような機能がなく全て手動でコピペする必要があるので量が多いと結構手間がかかります。記録しておくべき項目は以下の通りになります。

  • Request URL
  • Request Method(GET, POST, PUTなど)
  • Request Header
  • Form Data(サーバーに送信されたフォームデータ)
  • Query String Parameters(urlにつけて送信するクエリパラメタ)
  • Response Header
  • Response


デベロッパーツールのNetworkの通信結果のリクエストの一覧は上から順番にリクエストを実行した順に並んでいます(表示順番を変更しなければ)。実際にリクエストをプラグラムから実行する場合はこの順番を守る必要があるため、順番も併せて記録しておく必要があります。

ただし、特殊なケースですが8つのオンラインストレージのうち1つで、リクエストをサーバーに投げた後にレスポンスが返ってくる前に別のリクエストで追加情報を送るようなものがありました。リクエストを順番に送ってもエラーになるような場合はリクエストの送信時間が重なっていないかまで確認する必要があります。

次回後編で、今回保存したリクエストを実装に移す手順と実装で発生した問題などを書きたいと思います。

ABOUT ME
Kishino
Kishino
フリーの開発者としてトライステージでの開発に参加させてもらっています。