Google Pickerっていう、Google Docs(Google Drive)を前提としたPickerがめちゃ便利な事に気づいていませんでした。ずっと GWT 専用のコンポーネントなんだと勘違いしていたという。Pickerですが、基本的にはリソースのURLが返されます。Docsネイティブなリソースの場合にはそのアイコンやらも取得できます。
こんなカンジでDocs内の文書を選択させたり。
地図からPlaceを選択させたり。
Docsへアップロードさせて、アップロードされたファイルを選択したり。
使い方
google.picker.PickerBuilder()をインスタンス化して、Builderを用意するaddView() addViewGroup()で、左側に表示するカテゴリやグループ化したカテゴリを追加する- リソースが選択されてポップアップが閉じた時のコールバック関数を登録する
build()して、setVisible(true)する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> <meta charset="utf-8"> </head> | |
| <body> | |
| <div> <button id="show-docs-picker">Select Documents in Google Docs</button> </div> | |
| <div> <ul id="picked"></ul> </div> | |
| <script src="https://www.google.com/jsapi"></script> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| (function () { | |
| google.setOnLoadCallback(function () { | |
| $('#show-docs-picker').on('click', showDocsPicker); | |
| }); | |
| google.load('picker', '1'); | |
| function showDocsPicker() { | |
| new google.picker.PickerBuilder() | |
| .addViewGroup( | |
| new google.picker.ViewGroup(google.picker.ViewId.DOCS) | |
| .addView(google.picker.ViewId.DOCUMENTS) | |
| .addView(google.picker.ViewId.SPREADSHEETS) | |
| .addView(google.picker.ViewId.PRESENTATIONS) | |
| .addView(google.picker.ViewId.FOLDERS) | |
| .addView(google.picker.ViewId.FORMS) | |
| .addView(google.picker.ViewId.PDFS) | |
| ) | |
| .addView(google.picker.ViewId.MAPS) | |
| .addView(google.picker.ViewId.IMAGE_SEARCH) | |
| .addView(new google.picker.DocsUploadView()) | |
| .enableFeature(google.picker.Feature.MULTISELECT_ENABLED) | |
| .setCallback(onPicked) | |
| .build().setVisible(true); | |
| } | |
| function onPicked(data) { | |
| if (data.action !== 'picked') return; | |
| var k, v, picked, li; | |
| $('#picked').empty(); | |
| for (k in data.docs) { | |
| picked = data[google.picker.Response.DOCUMENTS][k]; | |
| li = $('<li></li>').appendTo('#picked'); | |
| $('<img>', {src:picked.iconUrl}).appendTo(li); | |
| $('<a></a>', {href:picked.url}).text(picked.name).appendTo(li); | |
| } | |
| } | |
| }()); | |
| </script> | |
| </body> | |
| </html> |
リファレンスのURL 書き忘れてたので追記: https://developers.google.com/picker/
0 件のコメント:
コメントを投稿