どうもこんばんは、みかんです。

！！！！とつぜんですがたいせつなおしらせ！！！！

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1

??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・

！！！！おしらせはおわりです！！！！！

今回は「DrivePickerでドライブのドキュメントURLを取得する」方法を書いてみます。
下記ステップでやっていきます。

1 下準備
2 動きの確認
3 プロパティの確認
4 resultオブジェクトを見てみる

1 下準備

下記サンプルが必要なことをほとんど整えてくれているのでそこから始めます。

開くと、下記の様な感じです。

(AdventCalendar的には)久々に、日本語化もしてみます。

ﾄﾞﾄﾞﾝ

Pickerと言いつつアップロードもできたりして。ただバグによって動きません。

こちらを参考にダミーコードを仕込んでおきましょう！

2 動きの確認

プレビューで動きを確認してみます。色々出ちゃうので今回は画像でお届けします。

ボタン一個だけのワイルドなUI。ならば押すしかありません。

こういう感じのダイアログが表示されます。見たことがある人も多いのではないでしょうか。「Google Drive」タブが選択されている状態です。

こちらは「Shared drives」です。Google Driveには普通のドライブのほか、共有ドライブ(旧名チームドライブ)というのがあります。このDrive Pickerでは、普通のドライブと共有ドライブを一緒に検索することはできないようになっているので、、探したいものがどちらにあるかは知っている必要があります。

最後にアップロードタブです。他のタブでは既にドライブにあるファイルを選択する感じですが、ここではファイルをアップロードすることができ、それが選択されている状態になります。

一旦「Google Drive」タブに戻り、検索バー右端の下矢印を押した状態です。このように、探すファイルのタイプで結果を絞り込むことができます。

選択すると、検索バーの左端に「Documents x」という表示が増えました。Google Documentsのファイルだけが対象になっています。

適当に選択した結果がこちらです。ファイルの名前は当然のこと、そのファイルのURLや、ファイルの種類を表すFileType、アップロードの結果なのか否かなどが表示てきているようです。

3 プロパティを確認

というわけで、Drive Pickerウィジェットのプロパティを見ていきます。

そんなに数は多くありません。それぞれ見ていきましょう。

text
ボタンに表示されるテキストです。

dialogTitle
ボタンを押して開くダイアログの上部に表示されるタイトルです。

features
Drive Pickerの機能を設定します。複数設定できます。

MINE_ONLY : 自分がオーナーのファイルだけが表示されます。
MULTISELECT_ENABLED : 複数選択が可能になります。
NAV_HIDDEN : タブが消えます。
SIMPLE_UPLOAD_ENABLED : アップロードだけのダイアログになります。ただ何も指定しなくても「Upload」タブは表示されてしまうので、設定する必要が無さそうです。
SUPPORT_TEAM_DRIVES : 共有ドライブも検索対象にする場合はセットする必要があります。先程の「Shared drives」はこれを設定していたので表示されていました。TEAMは旧名ですね。

views
どのようなタブをダイアログに表示させるかを制御します。

DOCS : なんでも検索です。とりあえずこれ指定しておけばいいでしょう。
DOCS_IMAGE/DOCS_IMAGES_AND_VIDEOS/DOCS_VIDEOS/DOCUMENTS/DRAWINGS/FOLDERS/FORMS : このあたりは、このファイルタイプで絞り込んだ状態のタグが表示されます。用途に応じたPickerを作る場合はしっかりと設定したいところです。
IMAGE_SERACH : これはGoogle画像検索です。Drive Pickerといいながら外部へ検索しにいきます。自由ですね。

後半部分です。
MAPS : 地図から住所を選びます。開発者モードになっているせいで表示が残念な感じです。。動きは大体確認したんですが、、まあ開発者モードなので実用できませんね。GoogleMapウィジェットを活用して自分で作成したほうがいいでしょう。
PDFS/PRESENTATIONS/SPREADSHEETS : このあたりは、このファイルタイプ(省略)
RECENTLY_PICKED : 最近選択したファイルが表示されます。これは入れておいてあげると良いでしょう。
VIDEO_SEARCH : Google動画検索でしょう。ただなぜか上手く動きませんでした。。

めちゃんこ長くなるので、それぞれの画像を貼るのは止めておきます。

迷ったら
features : SUPPORT_TEAM_DRIVES
views : DOCS/RECENTLY_PICKED
で良いと思います。

selectedDocUrl
ここには選択したファイルのURLが入ります。本時期のタイトル、「DrivePickerでドライブのドキュメントURLを取得する」の答えはこれです。

selectedDocName
選択したファイルの名前が入ります。

onDocumentSelect
ドキュメントを選択した時、ファイルのURLや名前は専用のプロパティにセットされますが、それ以外の情報も取得することができます。このメソッドに「result」というオブジェクトが届くので、それを色々みる感じです。

他にもDrivePicker用のイベントがあります。

onCancel
選択せずキャンセルした時に呼び出されます。あまりすることは無さそうです。

onPickerInit
DrivePickerのライブラリを初期化するタイミングで何か処理を挟むためのイベントです。DrivePickerを知る手練向けのイベントになります。
たとえば必ず追加されてしまうUploadタブを消すとか、、、は上手くいきませんでした。

4 resultオブジェクトを見てみる

ドキュメントの名前とURLは専用のプロパティがあるのでサクっと使えそうですが、それ以外の情報はどうでしょうか。

ということで、onDocumentSelectイベントで渡されるresultオブジェクトをどう扱っているか？を見てみます。

onSelectFile

/**
 * Drive Pickerウィジェットでファイルが選択された時のイベントを扱う.
 * @param {widget} widget - Drive Picker ウィジェット.
 * @param {Object} result - ユーザの選択情報を含むオブジェクト.
 */
function onSelectFile(widget, result) {
  var props = widget.root.properties;
  props.FilesCount = result.docs.length;

  var firstItemInfo = result.docs[0];
  props.FileId = firstItemInfo.id;
  props.FileType = firstItemInfo.type;
  props.FileMimeType = firstItemInfo.mimeType;
  props.FileIsShared = firstItemInfo.isShared === true;
  props.FileIsNew = firstItemInfo.isNew === true;
}

ドキュメントの詳細はresult.docsという配列に入っているようです。
長さを取得した後、とりあえず1番上のオブジェクトについてのみ詳細情報を控えていますね。

どのような情報が含まれているかは
こちら
を参考にすると良いと思います。

propsはカスタムプロパティのことで、DrivePickerSampleページに用意してあります。
画面側の項目もそのプロパティとデータバインディングをしています。

思った以上にDrivePicker専用のサンプルだったので、動きに迷ったらとりあえずこれを立ち上げていじってみる感じが良さそうですね。

以上です。良いApp Makerライフを!