助っ人ChatGPTよ、Glideで画像や文書取り込む方法を教えて！

お疲れ様です。
金融業界で働いている事務員兼主婦です。
以前、ノーコードの**Glide**で管理表アプリを作成してみました。

https://qiita.com/kiku_2005/items/67f67ca8340dab7206de

職場で試作品を見てもらいながら説明したところ、さっそく他にも色々とご要望が入って参りました。

:::note warn
・急ぎの書類を外出先から画像で送ったりできないか。
・画像から文書化できないか。
・書類の到着確認をメールで送信できないか。
・管理者の検印部分をどうするか。
・マニュアルやFAQをチャットボットにできないか。
:::

# Let'sチャレンジ！助っ人ChatGPTにGlideの使用方法を聞いてご要望に応えよう！
次から次へとご要望が出てくるので、今回は助っ人**ChatGPT**にお願いして**Glide**の使用方法についての知識を伝授してもらい、これから色々なご要望に応えていきたいと思います。まず、今回は画像や文書を取り込む方法です。


# 完成品



https://x.com/kiku_2005/status/1737616029470404702?s=20





## 使用ツール
* ChatGPT
* [Glide](https://www.glideapps.com)
* Googleスプレッドシート

# 製作開始
## １. ChatGPTにGlideで画像と文書を取り込む方法を質問

:::note info
Glideで画像や文書を取り込む方法を教えて下さい。
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/cd48ad3c-f912-de68-d7e7-e5f57f164eb7.png)

## ２. Glideに使用するGoogleスプレッドシートを作成
普段使用しているExcelデータの書式を元にGoogleスプレッドシートを作成します。**Glide**の設定次第ではExcelをそのまま使用することも可能です。今回は①画像取込シート②書類添付シートとマスタシートを使用します。　　　

①画像取込シート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/18663147-acaf-95b8-8f39-aa9df0881ec1.png)

②書類添付シート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/7042966c-9346-3df9-5e43-1c93d1b467fd.png)

マスタシート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3129b8e8-3e43-20ba-c582-a39a8000f1a5.png)


## ３. Glideの設定

基本的な使い方は下記を参考にしました。


https://hikari-sedori.com/glide2/


`＋New app`を押して新規作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/dd1468e1-a8c4-3084-2878-5faa719b9f85.png)

名前を付けてモバイル版かＰＣ版かを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/d504d283-8838-76ed-5259-b5c82c4fc1ee.png)

連携させるソースを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a4f41719-54da-b6af-b5bf-a9edb1a46e8e.png)

今回の➀「画像取込」は外出先からでも使用できるようにモバイル版で作成し、➁「書類添付」をＰＣ版で作成してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/483598e4-9339-8116-fee5-b1e552c7d60a.png)

### ➀画像取込（モバイル版）
* 日付＆氏名&画像種類で検索しやすいように`Data Grid`スタイルで表示させるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/36b369c9-607c-2b66-3fc1-9e0afc8ce087.png)


<details><summary><b>詳細設定（折りたたみ）</b></summary><div>

* `＋Add`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6bec3c83-3342-1844-3f49-097337302023.png)
* 画像取込は`Image Picker`コンポーネントを選択すると画像が取り込めるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3d734611-2816-07c7-f9c6-5e6ba1d79dd4.png)
* 画像種類はマスタシートから`Dropdown`できるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5eff3faf-bf22-3d55-62b6-3b2224ec29fe.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3cd8f383-2cbf-9abd-fb15-d2fe757fe9fd.png)
* 説明は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/79d57859-6dd5-a2e9-330a-219afbfe59a9.png)
* 日付は`Date`コンポーネントを選択すると、カレンダーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/90db73f8-9c03-0a5c-d243-bbd88d4eb115.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/4f1bace3-82de-1d00-51a2-0c87ef5b4ab1.png)
* 担当者はマスタシートから`Dropdown`できるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8a62d9cb-70ee-81cf-cc5b-92fc6b79bf71.png)
* 提出ボタンを押すとリストが増えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/1147f644-bc71-d817-baaa-6d317aff76ee.png)
* Date表示でも確認できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/26979c67-42e0-fe1a-0de4-0433edac2646.png)
* スプレッドシートも追記になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/2973c5f7-8059-dc23-4212-34b684ce983c.png)


</div></details>

### ➁書類添付（ＰＣ版）
* `Data Grid`スタイルで表示させるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/18e11b4c-a14d-cab0-2fde-193decbcdc37.png)

<details><summary><b>詳細設定（折りたたみ）</b></summary><div>

* `＋Add`を押します。使用場所は`Choice`コンポーネントで`File Picker`設定にすると書類添付ができるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/41647766-981b-4082-ebe8-8e8e0100ed4f.png)
* 書類種類は`Choice`コンポーネントで右下の`Dropdown`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3b2e7819-64e8-cb36-d10f-6a38412a6569.png)
* 説明は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/e6af4790-52b5-6018-ff09-1b76a1d9bbb4.png)
* 日付は`Date`コンポーネント設定してカレンダーを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/589cd7f2-55c5-40d9-6366-c0717c16bfce.png)
* 担当者は`Choice`コンポーネントで右下の`Dropdown`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/adb8592e-dc02-1819-7228-c52a3685530f.png)
* 提出ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3e70d50f-4262-3fc1-cf45-cb0e38baab46.png)
* Dataが送信されリストが増えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3ef35961-0684-f84b-ee7e-da94a3e30936.png)
* Dataでも確認できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/f44b9d34-65bb-42e7-ef13-d8977a420dcd.png)
* スプレッドシートも追記になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/bfa66adf-44ab-ef2f-a2f5-7efc403d2800.png)


</div></details>


# 感想
今回は助っ人**ChatGPT**にお願いして**Glide**の応用編を教えてもらいましたが、やはり詳細な設定部分については他の情報も参考にさせて頂きました。画像を文書化させるまでには至らず、またさらにこれから要望が増えてきそうなので、このような形でまずは**Glide**がどこまで応用が出来るのかを確認してみたいと思います。その上で同じような機能を持つ**Power Apps**との比較検証にいずれはチャレンジしてみたいと思います。今回は助っ人**ChatGPT**のおかげで少々時間が空いたのでハングル語翻訳も作成してみましたので、お時間ある方はよろしければそちらもご覧ください。


https://qiita.com/kiku_2005/items/cc293e5e45cf79390720




# 参考資料

https://hikari-sedori.com/glide-41/

https://hikari-sedori.com/glide-image/







ここまでお付き合い頂きまして、ありがとうございました。