Engine's blog

MVNOやガジェットに関する散財履歴、れびゅー、エンジニア的な技術に関する何か

Googleフォームでファイルアップロード機能をつけようと思ったら存外大変だった

Googleフォームでファイルアップロード機能をつけようと思ったら存外大変だった話

isseiです。 ずっと記事更新しているつもりで数ヶ月たってたんだけど、よくみたら更新したはずの記事全部下書きにいってました。

今回はタイトル通りなんだけど、 Googleフォームでユーザーがログインすることなくファイルアップロードできるフォームをつくろうと思ったら存外大変だった話 です。

こんなこと多分滅多にないと思うんだけど、今回とある知人(?)が困ってて、なんとかしてあげられんかなと思って手を挙げたら思いの外大変だったので備忘的に書き記したいと思う。

Googleフォームとは

www.google.com

Googleフォームは、WEBの知識は一切必要とせず画面の支持にしたがって進めれば誰でも手軽に、しかもちょっと凝ったこともできるアンケート作成ツール。


凝ったことっていうのは、例えば選択肢をいくつか作って、選択された回答によって次に提示する質問を変えられたり、ファイルアップロード機能を使えたりするのである。


HTMLで作るの結構めんどいんだよね。もちろん作ること自体は簡単だけど、条件分岐とかアップロード、そもそものデプロイ先の手配とか全部やると地味な作業の連続なのです。(もちろん私はそれでお金をもらっている人なのでごにょごにょ)

で、今回は勝手に色気付いて条件分岐、必須であるファイルアップロード機能をつけたフォームを作ったらハマったよという。

今回作るもの

テーマ:

**画像をアップロードできる** WEBフォーム

必須要件:

  1. 画像投稿フォーム
  2. ログイン認証なし

ファイルアップロード機能をつけるとログインは強制

まず前提として書いておかなければいけないのは、大抵のフォームは フォーム作成画面からテンプレート選んで進めば作れます ということ。

で、今回は完全にログインを不要にしなければいけないんだけど、このアップロード機能を利用しようとするとGoogleフォームではどうやってもログインを強制されてしまった。


ここから考察。

googleフォームを作成すると、作成者自身のアカウントのGoogle Driveに作成したgoogleフォーム専用のフォルダが作成されます。回答者の回答結果もここに蓄積されていく。

アップロード機能を使用した場合も上記に漏れず、作成されたGoogle Driveのフォルダ内に格納されるんだけど、 Google Driveって人のページを見るときもログイン必要なんですよ。確か。

GoogleフォームもDriveを使っているわけなんで、それでかなってのが一つ目の考察。

(パブリックな設定にしている特定のファイルだかディレクトリならフリーアクセスにできたかも)

もう一つあって、ウィルスが混入したデータがアップロードされた場合の検知、および特定を目的にしてたりするのかなと。(セキュリティ的な観点ですね)

考察終了。

アンケートフォームを作る方法はWEBのテンプレートからだけではなかった

で、どうやらログインを強制しない方法として、GASというGoogleスプレッドシートからのみ作成できるJavascriptに似たプログラムからフォームを作ればいけるらしいという情報を得た。

ここからは手順系の話になっていきます。

GASのエディタ画面にいくまでの手順

まず以下にアクセスして [ Googleスプレッドシートを使う ] を押す。
Google スプレッドシート - オンラインでスプレッドシートを作成、編集できる無料サービス

[ 新しいスプレッドシートを作成 ] から [ 空白 ] という項目を選択。 f:id:engine_is:20181012162151p:plain

画面上部の [ ツール ] -> [ <> スクリプトエディタ] を選択 f:id:engine_is:20181012162921p:plain

そうすると 無題のプロジェクト というタブが新規で作成されて、こんな感じの画面になっている。 f:id:engine_is:20181012163144p:plain

フォームを作成して見る

お待ちかねのフォーム作成。

超簡単。

今は以下のようになっていると思います。

function myFunction() {
  
}

これを以下のように書き換えてください。

function createEventForm(){
  FormApp.create('てすとふぉーむ');
}

続いて保存します。 f:id:engine_is:20181012164554p:plain ※確認画面が出てきますが、新しいプロジェクト名を てすとふぉーむ とかにしてくとわかりやすいかも。

保存が完了したら実行してみましょう。
[ ▶️ ]のボタンを押して出てくるウィンドウの [ 許可を確認 ] を押してください。 f:id:engine_is:20181012165104p:plain

この [ 許可を確認 ] は、 あなたのGoogleドライブ上にフォームのファイルを作成する許可が必要です。 ということを示しています。
画面を進めて許可をしてください。

さて、どうでしょう。

さっきまでのGASエディタ画面に戻っただけじゃね?

って感じですよね。

もうフォームはできています。

作成したフォームをみて見る

Google ドライブ - 1 か所であらゆるファイルを保管
ご自身のGoogle Driveに上記からアクセスするとありませんか?

てすとふぉーむ f:id:engine_is:20181012170012p:plain

※ クリックして開いてください。

質問ももちろんコードから作成できる

function createEventForm(){
  FormApp.create('てすとふぉーむ');
  
  
  form.addMultipleChoiceItem()
  .setTitle('ご自身は人間だと思いますか?')
  .setChoiceValues(['はい', 'いいえ']);
}

※ 上記でラジオボタンの質問が作成できます。

最後に

ここから今度はWEBアプリケーションで起動してどうこうやったら ログインさせるより恐怖心をかられるメッセージが画面上に表示されたり 色々あったんですが今日はここまでにしておこうと思います。

ちなみに今回作ったアンケートはフォルダIDを取得していたりするわけではないので、ぼんぼこぼんぼこファイルが作成されていきます。 カスタマイズしないともちろん使えないので気をつけてくださいね。

それではまた。