DirectCloud-BOX APIでファイル共有 URL 作成をシンプルにする Web ツールを作ってみた

はじめに

この記事は「Qiitaエンジニアフェスタ2021」の参加記事です。

クラウドストレージの DirectCloud-BOX API を使って、日常業務の中でトイルしていたファイルアップロード ＆ 共有リンク生成を簡略化する Web ツールの PoC を検証してみました。

背景

システムのマニュアルテストで実施エビデンスを残す際に、大手クラウドストレージのファイル共有リンク URL をテストケースに添付する運用があり、以下の手作業が必要でした。

1. ファイルアップロード
2. ファイルの共有リンク URL 生成（クリップボードにコピー）
3. テストケースにペースト

2 の手順が約 20 秒ほどかかってしまっていたので、1 人での作業でもファイル数が増えると結構な手間感があり、また、テスターの人数が増えた際にもバイパスしたい手作業でありました。

ユースケース

検証用端末（PC, モバイル端末）からエビデンス画像をアップロードして、テストケースに共有リンク URL を記録する。

PoC 検証項目

下記の機能のユーザビリティと、開発体験を検証してみました。

1. ミニマム機能のユーザビリティ検証
2. ログイン、ログアウト
3. ファイル、フォルダリスト表示
4. 画像ファイルのアップロード＆共有リンクを自動生成してクリップボードにコピー。
5. DirectCloud Box API の開発体験
6. Flutter Web のキャッチアップ

成果物

今回は以下のような Web アプリを作って検証してみました。
※ファイルリンク生成機能は API リクエストがうまくいかなかったので、現時点ではスタブ実装となりました。

開発ログ

DirectCloud-BOX API の利用開始

DirectCloud-BOXのフリープラン に申し込み後、管理画面に管理者用アカウントでログインし、以下のセットアップを行いました。
※今回は、ドキュメントが見当たらず、自己解決しましたが、これから始められる方は、まず、他のイベント参加者の方の投稿を事前にご一読されることをお勧めします。

1. API キーの発行
2. API サーバ URL の確認
3. 作業用ユーザーアカウントの作成

利用した DirectCloud-BOX API

今回のアプリでは以下の API を利用しました。それぞれ Postman で実行して API 動作を確認しつつ、アプリに組み込んでいきました。

リンク作成 API のリクエストパラメータ関連で成功レスポンスを受け取れなかったので、スタブにし、アプリ機能のユーザビリティ検証を先に進めました。

1. アクセストークンの発行 /openapi/jauth/token
2. アクセストークンの破棄 /openapi/jauth/tokenExpire
3. フォルダリストの照会 /openapp/v1/folders/index/{node}
4. ファイルの照会 /openapp/v1/files/index/{node}
5. ファイルのアップロード /openapp/v1/files/upload/{node}
6. リンクの作成 /openapp/v1/links/create

Flutter Web の開発体験

Flutter/Dart の知識ほぼほぼゼロベースで、以下のチュートリアルから始めましたが、既存の情報がたくさんあったので、クライアント開発自体は特に困ることはありませんでした（先人に感謝 ）。

キャッチアップできた技術要素

• ListView
• DDD for Flutter
• dio
• Shared preferences plugin
• riverpod
• Freezed
• ImagePickerWeb

最後に

今回のイベントをきっかけに、これまでトイルしていた、ファイル共有 URL を自動生成するアプリの PoC 検証をしてみました。

一部、スタブではありますが、アップロードと同時にリンク URL が取得できるのは、個人的に便利だったので、引き続き、ツール化を進めたいと思います。