作業報告書アプリを作る — Glideを使って

インクルキャット JP
12 min readMar 20, 2021

--

No-Codeツールで完全に作ることができるのか?

この記事は ” Build a Work Report App — with Glide”を翻訳したものです。

なぜこれを試すのか?

Google Sheetsは、すべてのビジネスパーソン、特に中小企業で働くシステム管理者にとって素晴らしいアプリです。社内のデータを管理するのに非常に適しています。
しかし、特に中小企業では、Google Sheetsも普通の社員には使いづらいものです。(言うまでもなく、Excelもそうですが)
そこで私は、社員がGoogle Sheetsを使いやすくするためのツールやサービスを調べてきました。
最終的には、No-Codeツールという良い解決策を見つけました。そこで、これらのサービスを試してみたいと思います。

Glideについて

“Glide “は、あなたのGoogle Sheetsと通信し、非常に簡単にアプリを作ることができるNo-Codeツールです。
その特徴について、良い説明がありましたのでご紹介します。

デフォルトで美しい。Glideは、すべてのアプリが洗練され、親しみやすくなるように設計されています。あらかじめ用意されたコンポーネントのライブラリを使ってアプリをカスタマイズし、ドラッグ&ドロップで簡単にデータに接続することができます。
コード不要。必要なのは、スプレッドシートだけです。Glideは、スプレッドシートのロジックを簡単にする強力な計算列を提供します。シート間のリンク、データの検索、計算の実行、条件文の記述などを、数式やコードを一切使わずに、わずか数クリックで行うことができます。
リンクで共有する。誰でも、どこでも、簡単にアプリをクロスデバイスで共有することができます。また、携帯電話のカメラでQRコードをスキャンしてアプリを共有することもできます。
テンプレート。あらゆるユースケースに対応する100種類以上のすぐに使えるテンプレートをすばやく複製、カスタマイズできます。

NoCode 3.0

サンプルアプリについて

Glideの潜在的な能力を検証するために、非常にシンプルなサンプルアプリを作ってみました。このアプリは、作業報告書を見たり書いたりするもので、ビルメンテナンスで働く人が使うようなものです。(といっても、目的にそって非常にシンプルですが😅)。
デザインと構成は以下のようになっています。

画面

  1. 現場(サイト)一覧
    社員が担当している現場を表示します。現場を選択すると、次の画面が表示されます。
  2. レポート一覧
    選択した現場のレポートが表示されます。また、レポートの追加、編集、削除ができます。レポートには、撮影した写真を含めることができます。
サンプルアプリのデザイン

データ構造

Glideでは、スプレッドシートはRDBのテーブルに似ています。当初は、レポートのスプレッドシートをサイトごとに分けて作りたかったのですが、Glideではこのような複数のスプレッドシートに1つのスプレッドシートを関連付けることができないため、それらを1つのシートにすることにしました😥。上の2つの画面に対応して、2つのスプレッドシートがあります。

  1. 現場リスト
    現場とそのスタッフの情報を表します。
  2. レポートリスト
    現場の作業報告を表しています。
サンプルアプリのデータ

注意:シートには少なくとも1つのレコードを持たせるべきです。そうしないとシートのデザインができなくなります。

構築方法

新規アプリの作成

  1. Glideのダッシュボードページで「New App」を選択し、ソースとして「Google Sheets」を選択します。
  2. Select a file」ダイアログで、先ほどの2つのリストを含むスプレッドシートを選択します。
  3. すると、Glideは美しいデフォルトアプリを構築してくれます。驚きですね!
新規アプリ作成フロー

サイトリストとレポートリストの関係を作る

サイトを選択したときにレポートリスト画面を表示させるためには、関係を作っておく必要があります。ここでは、1つのサイトが複数のレポートを持つことができるので、 「Multiple Relationとします。

  1. 「Site list」のデータシートページに移動し、右上のプラスボタンをクリックします。
  2. Column Type」を「Relation」に変更し、「Match multiple」にチェックを入れて「Done」をクリックします。
  3. デザインページに戻り、左ペインの「Inline List」を選択します。
  4. 右側の「Action」の値を「Link to Screen」に変更し、「タイトル」に「Site Name」を設定します。そして、「Data」に「New Column」(2.で追加)を設定します。
  5. すると、「Site List」画面で現場を選択したときに、選択した現場のレポートを含む「Report list」画面が表示されるようになります。
新しい関連列を作成
項目を選択したときのアクションを設定する

レポートリスト画面に新しいレコードを追加できるようにする

  1. 任意のサイトを選択した後の「Site List」画面(現在は「Report list」が表示されています)で、左ペインの「Inline List」を選択します。
  2. 続いて、右ペインの「Add Form」を選択します。そして、「Allow users to add items」にチェックを入れます。
  3. すると、右上にプラスボタンが表示されます。プラスボタンをクリックすると、「New item」フォームが表示されます。これで、新しいレコードを追加することができます。

注意:ユーザーは、新しいアイテムを追加する際に、正しい「サイト名」を入力する必要があります。正しいサイト名を自動的に入力する機能があってもいいと思うのですが、簡単な方法が見つかりませんでした。

ユーザーがアイテムを追加できるようにする

レポート一覧画面を編集・削除できるようにする

  1. レポートを選択した後の「Site List」画面(レポート詳細画面)で、右ペインの「Edit form」を選択します。そして、「Allow users to edit」にチェックを入れます。
  2. すると、右上に鉛筆のボタンが表示されます。このボタンをクリックすると、「Edit item」フォームが表示されます。これで編集が可能になります。
  3. Allow users to delete」にチェックを入れると、下に「Delete item」ボタンが表示されます。( これでアイテムを削除できるようになります )
ユーザーがアイテムを編集できるようにする
ユーザーがアイテムを削除できるようにする

写真のアップロードに対応

  1. 次に、左ペインの 「photo」の 「Text entry」を選択し、×ボタンをクリックして、フィールドを削除します。
  2. SCREEN」ペインの右端にあるプラスボタンをクリックし、「Image Picker」ボタンをクリックします。これで、アイテムの画像をアップロードすることができます。
  3. イメージピッカーボタンで画像をアップロードすると、レポートのスプレッドシートに写真コンテンツのURLが表示されます。これは、Google Cloud Storageに保存されている写真画像へのリンクです。

注:Glideには、自分のGoogle Drive Storageに画像を保存する方法がないようです。

写真アップロードをできるようにする

ユーザーごとに表示サイトをフィルタリング

この状態では、従業員は自分が担当しているかどうかに関わらず、どのサイトも見ることができます。
ユーザーごとに表示されるサイトをフィルタリングするには、 「Row Ownersを使用する必要があります。

  1. そこで、Google Sheetsを使って、「Site list」に個別のメールを格納する列(「Email」という名前)を追加します。そして、テスト用の電子メールアドレスを入力します。
  2. Glideを起動し、「Site list」のデータシートページに移動し、「Email」列のヘッダー内にあるドロップダウンボタンをクリックします。
  3. Make Row Owner」を選択し、フィルタリングを有効にします。
  4. デザインページに戻ると、現在のユーザーが正しくないため、「Site list」画面に現場が表示されなくなります。
  5. Viewing as …」のドロップダウンをクリックし、正しいユーザーのメールアドレスを入力します。すると、そのユーザーが所有している現場がいくつか表示されます。
  6. 「Row Owners」を有効にした場合、プライバシー設定を変更する必要があります。そこで、設定ページに行き、「PUBLIC SIGN-IN」を「Public with email」に変更します。こうすることで、アプリのホーム画面がログイン画面に変わります。(アプリを公開した後に表示されます。)
Email列を追加
Email列にRow Ownerを設定する
閲覧するユーザーを変更する
プライバシー設定を変更する

その他

  • もうひとつ「作業報告」の画面がありますが、これは不要です。そのために、画面の横にある目の形をしたアイコンをクリックすると見えなくすることができます。
  • 「Report List」画面には適切な情報が表示されていないので、「DATA」セクションに「スタッフ」と「日時」が表示されるように変更してください。

アプリの公開

アプリの公開方法はとても簡単です。右上の「Publish」ボタンをクリックし、「Publish app」をクリックすれば完了です。

アプリを公開する

アプリのページにアクセスすると、ログイン画面が表示されます。ログインすると、アプリの利用や自分の現場の閲覧が可能になります(現場に対する権限を得ている場合)

ログイン画面

結論

Glideは、Google Sheetsを使って非常に簡単にアプリを作成できる素晴らしいツールです。公開されたアプリは、まるでプロのデザイナーが作ったかのような美しい仕上がりになっています。ニーズに合ったアプリを作るためのカスタマイズ方法も非常に豊富です。
しかし、他のツールと同様に、Glideにもいくつかの欠点があることを認識しました。

制限された関係

私は、Glideには1つのスプレッドシートが複数のスプレッドシートと関係を持つ方法があると思っていましたが、そうではありませんでした。多くの場合、仕事の報告書は現場ごとに分けられているので、Glideを使って印刷可能な報告書のようなものを作らなければならない場合は、別の仕組みを用意しなければなりません。

プライバシーの問題

無料プランである限り、アプリは公開アプリでなければなりません。「Row Owners」を使えば、社外の人からデータを守ることができますが、公式動画では「機密データをフィルタリングに頼らないようにしてください」と言っています。つまり、プライバシーの問題が発生する可能性があります。
もし、アプリを非公開にしたいのであれば、月額40ドルかかる「Private Pro App」プランを選択するべきです。(20ユーザーの場合。追加1ユーザーにつき+2ドル)

写真のデータ保存

レポートの写真が自分のGoogle Driveストレージに保存されていればいいのですが、Glideが所有するGoogle Cloud Storageに保存されていました。撮影した写真を柔軟に運用するのは難しそうです。

いくつかの問題はあるものの、Glideは中小企業で働くシステム管理者にとって素晴らしいサポーターだと思います。簡単なアプリで試してみることをお勧めします。この記事が皆様のお役に立てれば幸いです。

--

--

インクルキャット JP
インクルキャット JP

Written by インクルキャット JP

情報格差の壁に挑む(挑みたい)個人アプリ開発者。

No responses yet