kの雑記ブログ 本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- Google Formの基本的な使い方
- Google Formに投稿された写真をApSheetで表示させる方法
本記事はAppSheetとの相性が非常にいいGoogle Formとの連携についてです。
Google Formを使用したことがある人はご存知だと思いますが、
- 回答はURLを知っていれば誰でも回答可能
- 簡単な設定でそれなりのアンケートが作成出来る
- 回答結果はスプレッドシートに集約される
こういった特徴があります。
スプレッドシートに回答が集約されるので、それをデータソースにするAppSheetとの相性は抜群です(^^)
それでは勉強していきましょう！
Google Formの基本的な使い方
まずは、基本的なGoogle Formの使い方について簡単に説明します。
検索エンジンを立ち上げると画面右上に９つの点があります（Googleアプリ）
これをクリックして中身を確認すると、その中にFormsのアイコンがあるのでそれをクリックします。
Google formのトップ画面
Google formを立ち上げると新規で作成する、もしくはテンプレートを使って投稿フォームを作成することが出来ます。
この記事では新規で作成するを選びたいので、空白のアイコンをクリックします。
まずは入力フォーム上で表示させたいタイトル名とその補足説明文を入力します。
続いてアンケートなど質問したい内容を作成します。
各ボタンのざっくりとした説明は、上図を参考にしてください。
また、入力者に入力してもらうデータタイプの設定もある程度制限をかけることが可能です。
赤字はAppSheetにおけるデータタイプとほぼ同じです
今回の記事では、このGoogle Formに写真を登録、その写真をAppSheetに表示させる方法をレクチャーします(^^)
ブログ記事のためこの内容で今回は質問を作成しています。
早速、プレビュー画面から質問の回答をしてみました。
Google Formの回答はスプレッドシートに集約されます。
毎度おなじみのスプレッドシートをデータソースとし、AppSheetに情報を読み込ませましょう！
AppSheetの設定を更新する
AppSheetを立ち上げると以下のような画面になっていると思います。
ここで、データソースであるスプレッドシートの内容を確認してみましょう。
ここで大事になってくるのが、写真参照のURLが入力されているカラムです。
“https://drive.google.com/open?id=1qUWWBI_MKDHt8H5IjZzKrX0xSHZPcmDM”
上のURLが今回登録したデータの参照先URLになります。
この参照先をAppSheetで表示が可能な参照URLに書き換えることで、写真が表示されるようになります。
AppSheetで参照先URLの写真を表示させたい場合は、
“https://drive.google.com/uc?id=ファイルID“
このようなURLの形にする必要があります。
見比べてみるとわかりますが、その違いは
『https://drive.google.com/open…』と『https://drive.google.com/uc…』
黄色下線の部分のみです。
この部分を書き換えてあげれば解決(^^)
私がおすすめする方法は2つあります。
お好みの方法でどうぞ(^^)
スプレッドシートにフィジカルカラムを用意する方法
1つ目の方法として、フォームの回答を集計しているスプレッドシートに直接フィジカルカラムを作ります。
列を新たに追加してSUBSTITUTE関数を入力します。
私がAppSheetの参照データとして推奨しているのがスプレッドシートで、その理由の1つとして
AppSheetとスプレッドシートの関数は互換性が高いことが挙げられます。
SUBSTITUTE()関数は、AppSheetでも使える関数で、今回はこの関数を採用しました(^^)
SUBSTITUTE(template, old-text, new-text)
第一引数に対象ワード、第二引数に検索ワード、第三引数に置換ワードを指定します
引数の渡し方がわかったので、この関数をスプレッドシートに入力してみましょう！
=SUBSTITUTE(対象セル,”open”,”uc”)
この関数を入力したらAppSheetに戻り、リジェネレイトをします(^^)
続けて作成したフィジカルカラムの設定を少し変更します。
カラムTypeをimage、Spreadsheet formulaの条件式を削除します。
これで設定は完了です。お疲れさまでした(^^)
AppSheetにVirtual Columnを用意する方法
2つ目の方法として、AppSheetに登録された写真URLを書き換えるVirtual Columnを作ります。
考え方はフィジカルカラムの時と全く同じです。
SUBSTITUTE([フォームで写真を登録するカラム],”open”,”uc”)
この関数をVirtual ColumnのApp formulaに入力すればOKです！
設定した関数でどういった表示になるのか確認してみましょう。
どちらも同じ結果が返ってきます。
なので、方法は読者の方の好きな方で構いません(^^)
ちなみに、このSUBSTITUTE()関数の方法は、写真URLの”open”という文字列を”uc”に置き換える方法です。
よって、ファイルID（URLの”=”の後ろの文字列）に”open”の文字列があった場合は写真が表示されませんが、それは天文学的数値なので、気にする必要はないと判断しました(^^)
もし生きている間にお目にかかることが出来れば非常に幸運と言えるでしょう！
まとめ
以上、Google Formに登録された写真データをAppSheetで表示させる方法のご紹介でした。
大事なのは
- 写真のURLをAppSheetで表示可能なURLに書き換える
- 書き換えるのに便利な関数はSUBSTITUTE()関数
この2点だけ覚えていただければ嬉しいです(^^)
SUBSTITUTE()関数はText関数に該当し、当ブログでText関数は
地味だけど知っていると要所で役に立ち、やりたいことがあっさりと叶う
と表現しております。（今回の記事内容はまさにそれ！）
AppSheetはノーコードでアプリ開発ができる優れものですが、やはり関数の知識は必須です。
関数について勉強したい方は、こちらの記事を参考にしてください(^^)
【まとめ】AppSheetでよく使う関数一覧
また面白いネタが思いついたら記事を更新していきます。
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)