GmailにはGoogleドライブのファイルをポップアップ上で検索してGmail本文に貼り付ける機能が用意されています。 以下の様な画面です。 実はこのGoogleドライブからファイルを選ぶという機能をjavascriptを少し書くだけで 自分のWebサイトに簡単に埋め込むことが可能です。 それを行うための機能をGoogleが提供しています。それがGoogle Pickerです。 またGoogle Pickerはドライブのファイルだけではなく Googleマップから住所を選択、Googleフォトから写真を選択など様々なピッカーが用意されています。 <input type="file">のクラウド版みたいなものです。 実際に試してもらったほうが理解しやすいと思います。デモページを用意しました。 @本記事は前半に機能の紹介、後半に開発向けの解説を記載しています。 機能の紹介 デモページを開いて
![Google Pickerを使ってWebサイトのUXを向上させよう - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/153d3154182cc2da1f4db06541ad0d83302186c3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9R29vZ2xlJTIwUGlja2VyJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2V2ViJUUzJTgyJUI1JUUzJTgyJUE0JUUzJTgzJTg4JUUzJTgxJUFFVVglRTMlODIlOTIlRTUlOTAlOTElRTQlQjglOEElRTMlODElOTUlRTMlODElOUIlRTMlODIlODglRTMlODElODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTgwODdlYzRiMjZlMTVlOTc3NWZjYzE0MzE0OGM5YTNl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3dkeTM5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NDNkNjQzMDdmZWY4OGUzNTU0NjE3Zjk1Njk1NDljYQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D01ca0244f65422f1889af90793cb9a68)