今回のWEBアプリデモでは、HtmlServiceを活用して複数の画像ファイルをGoogleドライブに一括でアップロードするためのWEBアプリをご紹介します。最近の画像ファイルは端末の性能向上に伴いファイルサイズが大きい傾向にあります。そのままファイルをアップロードするとアップロード時間が長くなってしまいますので、今回のアプリでは選択した複数画像をブラウザ上で圧縮してからGoogleドライブにアップロードしたいと思います。
『アプリリンク』
Upload Multiple Image Files to Google Drive Made By Google Apps Script
『アプリのインターフェイス』
※モバイル用画面はAndroidの一部端末でしか動作確認を行っていませんので、端末によっては正常に表示されない場合があります。
【初期画面】
【画像選択時】
【初期画面（モバイル）】
【画像選択時（モバイル）】
『アプリの操作方法』
- 『ファイル選択』ボタンをクリックし画像ファイルを選択
- 『ファイル選択』ボタンの下に『ファイルを削除』ボタンと『アップロード』ボタンが表示され、その下に選択した画像のサムネイル画像が表示されます。
- 『ファイルを削除』ボタンをクリックすると選択した画像をすべて削除し、初期画面に戻ります。（確認のダイアログが表示されます）
- 『アップロード』ボタンをクリックすると選択した画像をGoogleドライブにアップロードします。（確認のダイアログが表示されます）
- 個々の画像をクリックすると1枚ずつの画像の削除が行なえます。（確認のダイアログが表示されます）
- アップロードが完了するとこちらのフォルダに画像がアップロードされます。
『アプリの説明』
複数の選択された画像を一括でGoogleドライブの指定したフォルダに保存するアプリになります。今回のでもファイルでは画像ファイルに限定していますが、コードを変更すれば画像以外のファイルもアップロードできるアップローダーを開発することもできます。
【WEBアプリの公開設定】
アプリケーションにアクセスできるユーザー: 誰でも
アプリケーションの実行者: 開発者アカウント（管理人のアカウント）
アプリは誰が実行しても開発者が実行するように設定されています。そのためアプリを試用する上で、利用者のアカウントへアプリからアクセス許可を求めることはありません。
開発者アカウントに共有されていない情報にはアクセスすることができませんので、利用者のアカウントに保存されている情報にはアクセスすることはありません。
【アップロードされた画像の処理について】
アップロードした画像はGoogleドライブの容量の関係上、毎日午前0時〜1時の間にGoogleドライブから完全に削除されます。ただし、管理人のドライブ上に一定時間（最長丸1日）格納されますので個人が特定されるような画像や猥褻な画像等はアップロードしない様にお願いします。
【ブラウザ上の処理の流れ】
このWEBアプリでは画像を選択した段階で画像のリサイズと圧縮処理を実行しています。そのため、端末のスペックによってはサムネイル画像が表示されるまでに少し時間がかかる可能性があります。リサイズの理由は、GASでスプレッドシートに画像を挿入できる限界サイズの横幅1024pxに設定しています。このサイズよりも横幅が狭い場合はそのままのサイズで圧縮のみ実行されます。
- 画像を選択
- 選択した画像をループ処理で解析し、横幅を確認
- 横幅が1024pxを超える場合は、HTMLのキャンバスを用いて画像を1024pxにリサイズ。超えない場合は処理はスルー
- 画像をDataURI形式に変換して画像を圧縮
- imgタグを生成してsrcにDataURIを指定してサムネイル展開エリアに表示
このような流れで処理を行っています。
コードの仕様上画像が読み込まれた順に処理が行われてしまうため、画像の作成日（撮影日）を元に古い順に表示されるように処理しています。
【アップロード高速化の為に工夫した点】
今回は複数画像ファイルがアップロードされる事を考慮してアップロード処理を高速化するために、画像データはDataURI形式のままGAS側に渡し、一旦スプレッドシートに文字列として保存します。データを渡し終えた段階でブラウザ側に一旦処理は戻りますので、処理が終わったように見えますが、バックグラウンドではすぐにGAS側のDataURIを画像に変換してGoogleドライブに保存する関数を起動させて指定のフォルダにファイルを保存しています。
Googleドライブにファイルを保存する際のネックは保存に時間がかかる部分です。1つのファイルを作成やコピーするだけでも基本的には数秒程度かかってしまいますので、例えば10個のファイルをアップロードしてGoogleドライブに保存しようとすると単純計算で数十秒の時間がかかる計算になります。
この処理時間の長さを解消するために、今回のでもアプリではデータのサーバーへの送信処理とデータの保存処理を分けて開発しました。これでアップロードの待ち時間は劇的に改善されています。
『コード構成』
- コード.gs（サーバーサイドGAS）
- Body.html（クライアントサイドHTML）
- CSS.html（クライアントサイドCSS）
- Javascript.html（クライアントサイドJavascript）
※実際のコード名は任意のコード名で問題ありません。
『コードの内容』
希望があれば共有します。
『開発難易度』
★★★★☆
開発にはGoogle Apps Script、HTML、CSS、Javascriptの知識が必要です。CSSやJavascriptは他のページからのコピペで対応できる部分もありますが、記載内容の意味がわかれば自分用にカスタマイズする際にやりやすいと思います。
今回のWEBアプリでは、画像ファイルのリサイズと圧縮を行っているため少し癖があり、ハマりやすいポイントが結構あると思います。私も選択した画像をの横幅などを取得するときにかなりハマった記憶があります。
Javascriptの処理が画像の読み込みスピードよりも早く終わってしまい、読み込み前のデータから横幅などのデータを取得しようとしていたためにundefinedが返って来てしまったり、画像のリサイズでハマったりとなかなか手強かったことが思い出されます。
『拡張性』
今回のWEBアプリのメリットとしては、企業でGSuiteを利用しているような場合に運用上のメリットがあると思います。Googleドライブでファイルをアップロードや作成する場合、アップロードしたアカウントをオーナーとしてファイルが生成されます。
企業で利用されている場合は従業員が退職したりする可能性がありますが、退職時に対象従業員のアカウントを削除してしまうとそのアカウントがオーナーとしてGoogleドライブに格納しているファイルも一緒に削除されてしまいます。そのような場合にオーナー権限を一括で移譲できる項目もGSuiteの管理コンソールには用意されているのですが、削除対象アカウントのファイルすべてが移譲の対象となるため、いらないファイルも含めてオーナー権が移譲されてしまいます。そうなると、移譲したファイルの整理だけでも多大な労力がかかってしまいますので、そのような状況にならないためにも従業員アカウントに紐づくファイルの運用は控えたほうが良いと思われます。
チームドライブを活用するという方法も検討の余地はあるかと思いますが、チームドライブはファイル数や階層の条件が厳しく、企業ででの利用ではすぐに上限に達してしまう可能性があります。
【アップローダーの活用方法】
機械学習やOCRで画像を解析しなくても画像の文字検索を高い精度で実施できます。Googleドライブには個々のファイルにメモ書きをすることができます。このメモ欄に入力された内容はGoogleドライブの検索対象となります。
これを利用して、画像アップロード時にキーワードを埋め込んでおくことで高精度の画像の文字検索が実現できます。
これは例えば、どこかの建物の3階で撮影したと言う内容をフォームで入力させ、その情報をメモ書きに書き込んでおく事で検索文字で3階と入力することでその画像が検索結果として表示されます。地名を入力してもらいアップロード時に地名情報を埋め込めばGPS情報がない画像だとしても検索結果で対象の画像が表示されます。なかなか使える活用方法ですので、また別の機会に記事を書いてみようと思います。
『まとめ』
今回は、複数の画像ファイルを圧縮してアップロードするためのWEBアプリのご紹介をしました。いくつかの機能を組み合わせて作成しているため、コードはやや複雑になっていますが、長い待ち時間を削減してより生産的な作業に従事できるといいですね。
