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

## はじめに

この記事は「[Qiitaエンジニアフェスタ2021](https://qiita.com/official-events/64ff6ba4e653a822fce9)」の参加記事です。

https://qiita.com/official-events/64ff6ba4e653a822fce9

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

## 背景

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

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

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

## ユースケース

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

## PoC 検証項目

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

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

## 成果物

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/UXwnWrfYURs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 開発ログ

### DirectCloud-BOX API の利用開始

[DirectCloud-BOXのフリープラン](https://directcloud.jp/freeplan) に申し込み後、管理画面に管理者用アカウントでログインし、以下のセットアップを行いました。
※今回は、ドキュメントが見当たらず、自己解決しましたが、これから始められる方は、まず、他の[イベント参加者](https://qiita.com/search?q=Qiita%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%95%E3%82%A7%E3%82%B9%E3%82%BF_DirectCloud-BOX)の方の投稿を事前にご一読されることをお勧めします。

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

https://qiita.com/mikkame/items/e47cdb2e6df35831bac7

https://qiita.com/tk3fftk/items/ca71fa6af47411d2738a

### 利用した DirectCloud-BOX API

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

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

1. [アクセストークンの発行 /openapi/jauth/token](https://directcloud.jp/api_reference/detail/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/Auth#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E7%99%BA%E8%A1%8C)
1. [アクセストークンの破棄 /openapi/jauth/tokenExpire](https://directcloud.jp/api_reference/detail/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/Auth#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3%E3%81%AE%E7%A0%B4%E6%A3%84)
1. [フォルダリストの照会 /openapp/v1/folders/index/{node}](https://directcloud.jp/api_reference/detail/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/Folder#%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%AA%E3%82%B9%E3%83%88%E3%81%AE%E7%85%A7%E4%BC%9A)
1. [ファイルの照会 /openapp/v1/files/index/{node}](https://directcloud.jp/api_reference/detail/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/File#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E7%85%A7%E4%BC%9A)
1. [ファイルのアップロード /openapp/v1/files/upload/{node}](https://directcloud.jp/api_reference/detail/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/File#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89)
1. [リンクの作成 /openapp/v1/links/create](https://directcloud.jp/api_reference/detail/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC/File#%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E4%BD%9C%E6%88%90)

### Flutter Web の開発体験

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

https://flutter.dev/docs/get-started/codelab#step-1-create-the-starter-flutter-app

https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0

https://flutter.dev/docs/development/ui/layout/tutorial

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

* ListView
* DDD for Flutter
* [dio](https://pub.dev/packages?q=dio)
* [Shared preferences plugin](https://pub.dev/packages/shared_preferences)
* [riverpod](https://pub.dev/packages/riverpod)
* [Freezed](https://pub.dev/packages/freezed)
* [ImagePickerWeb](https://pub.dev/packages/image_picker_web)

## 最後に

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

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