Glideappの活用… Excelしか使ったことの無い筆者がノーコードツールで社内アプリを作成した件/nocode-app-trial

引越しや庭木の剪定などの出張・訪問サービスのプラットフォーム「くらしのマーケット」を運営する、みんなのマーケット株式会社です。
非開発バックグラウンドの筆者がノーコードツールで社内アプリを作成した過程をまとめました。

## エントリー
全職種で積極採用中！下記リンクより応募ください！(カジュアル面談も歓迎)
https://www.minma.jp/recruit

「話を聞いてみたい」もOKです！
応募フォーム→https://herp.careers/v1/minma/2qUQhRIRUr0Y/apply

Transcript

1. Glideappの活用…
 Excelしか使ったことの無い筆者が ノーコードツールで社内アプリを作成 した件
 みんなのマーケット株式会社 
 コーポレート本部・Yoshioka 
 

2. 本資料のコンテンツ
 • 題材
 ◦ 「自分の給与の次回の改定額」をシミュレーションするアプリを作成しました。
 ◦ この作成における流れや気付きをまとめています。
 ◦ なお、本稿で提示しているアプリは実際のものから内容を多少変更しています（データもダミー）。
 • 資料の流れ…以下の順番で説明します。
 １．はじめに
 ２．作成フロー
 ①プロトタイプ作成
 ②データテーブル化
 ③UIへの落とし込み
 ３．実際の作成画面の紹介
 ４．まとめ
 2
3. はじめに
 • Glideというノーコードツールを用いた社内アプリの一連の作成過程を紹介するものです。 • 筆者は、金融機関や投資会社の勤務が10年以上あったため、Excelや最近ではGoogle spreadsheetなどのスプレッド シートでのモデリングはそれなりの量を作ってきて、土地勘があります。一方でエンジニアバックグラウンドが全くありま せん。なので、ノーコードアプリ、等と言われると固まってしまいます。 • そんな中で必要に迫られてGlideを利用するに至りました。理解するまでに時間がかかりましたが、慣れてしまうと意外 と簡単に活用できることが分かりました。 • 自身の頭の整理の目的と、小職のようなバックグラウンドの方の参考になればという目的で本稿を作成いたしました。 ご覧いただければ幸いです。
 3 １．はじめに
4. Glide利用の背景
 • 社内で使えるシミュレーションツールを作成する必要があった
 • UIをアプリ仕様にしたかった
 ◦ 視覚的で、入力→反応の関係が分かりやすい
 ◦ スプレッドシートでも必要最低限の入出力機能は作成可能だが、不要な計算式、データ、シートが表示されるな ど、UIとしては不十分
 • そしてエンジニアの力を借りることなく対応したかった
 →ということで、ノーコードアプリツールを触ることを決意
 • 「ノーコード」「アプリ開発」で検索するといくつか出てきたが、事例・チュートリアルが充実していたことを理由に、Glideを 選択（https://www.glideapps.com/）
 • 次ページから、作成の流れを紹介
 
 4 １．はじめに
5. ①プロトタイプ作成
 • アプリの裏側のロジック（そもそもどんなデータが必要なのか、どんな計算の順番になるのか、等）を整理しないとアプリ を作れません。このためのプロトタイプとして、自分はスプレッドシートを利用しました。理由としては、
 ◦ エクセルモデリングに慣れているというか、それしかできなかったから 
 ◦ ロジックがまだハッキリしていないので、考えながら作りたかったから 
 ◦ 適用する変数について結果を見ながら調整したかったから 
 • 今回欲しいのは、『自分の今の給与、成果、グレードを入力すると、次回の給与改定額が試算できる』という機能です。 本稿用に単純化してますが、以下のロジックを採用しています。これに沿ったスプレッドシートを作成しました。
 ◦ 改定後給与額　＝　現給与額　×　（１＋{グレードごとに定められた昇給率　×　成果に応じた掛け目}） 
 • プロトタイプのスプレッドシートは、以下のような構造となっています。後述しますが、スプシの構造（計算過程）を整理し て把握しておくことが重要です。
 ◦ 入力 ：現給与額、グレード、自分の成果 
 ◦ 参照① ：入力されたグレードに 対応する昇給率
 ◦ 参照② ：自分の成果に対応する昇給率の掛け目 
 ◦ 計算 ：給与×グレードごとの昇給率×昇給率掛け目 
 ◦ 出力 ：改定後給与額
 ◦ 赤が入力変数、青が出力値、緑が計算式、紫が対応表（vlookup関数で参照するデータ表）を意味してます。 
 5 ２．作成フロー
6. ②データテーブル化
 • プロトタイプが出来たら、これを「データテーブル化」します。データテーブルと言っているのは、データが収録された 「表」です。
 • 何をやるかというと、先ほどの前頁記載のスプシモデル上の計算過程を、幾つかのデータテーブルに分解します。何を 言っているかわかりにくいと思うので、今回の手順を、次頁に記載します。
 6 ２．作成フロー
7. ②データテーブル化
 • 先ほどのスプシの構造を、以下のようにデータテーブルに再構成します。機能ごとにテーブルを分けます。この段階か ら、Glideを活用していきます（これらのテーブルをGlideに収録していく事になります）。なお、テーブル④のように、複数 テーブル間のリレーション構造を作ることが可能です。
 入力 ：現給与、グレード、自分の成果 
 スプレッドシートの構造 Glideに収録するデータテーブル テーブル①：入力されたデータが収録される表（空欄） 
 • 収録データ：現給与、グレード、自分の成果 
 テーブル②：各グレード毎に対応する昇給率の関係表 
 • 収録データ：グレード、昇給率 
 テーブル③：成果に対応する昇給率掛け目の関係表 
 • 収録データ：成果、昇給率掛け目 
 テーブル④：改定額を算出するテーブル（クエリ） 
 • データa：テーブル①で入力されたデータ（グレード）をテーブル ②から探し、対応する昇給率を返す 
 • データb：テーブル①で入力されたデータ（成果）をテーブル③ から探し、対応する昇給率掛け目を返す 
 • データc：上記のデータをもとに算出された改定後給与額 
 参照① ：入力されたグレードに 対応する昇給率
 計算 ：給与×グレードごとの昇給率×昇給率掛け目 
 参照② ：自分の成果に対応する昇給率の掛け目 
 出力 ：改定後給与額
 7 ２．作成フロー
8. ③UIへの落とし込み
 • 次に、Glide上で収録されたデータをUIに落とし込んでいくプロセスに入ります。
 • Glide上で収録されたデータのうち、実際に画面上に表示するもののみを選び、UIの作成画面に反映させていきます。
 • 次ページの概念図の方がわかりやすいと思うので、ご覧ください。
 8 ２．作成フロー
9. ③UIへの落とし込み
 • Glide上で収録されたデータテーブル内のデータのうち表示させるものについて、UI画面上のどこに表示させるかを紐づ けていくプロセスとなります。全部のデータを画面上に表示させる必要がないことも分かります。
 Glideに収録されたデータテーブル テーブル①：入力されたデータが収録される表（空欄） 
 • 収録データ：現給与、グレード、自分の成果 
 テーブル②：各グレード毎に対応する昇給率の関係表 
 • 収録データ：グレード、昇給率 
 テーブル③：成果に対応する昇給率掛け目の関係表 
 • 収録データ：成果、昇給率掛け目 
 テーブル④：改定額を算出するテーブル（クエリ） 
 • データa：テーブル①で入力されたデータ（グレード）をテーブル ②から探し、対応する昇給率を返す 
 • データb：テーブル①で入力されたデータ（成果）をテーブル③ から探し、対応する昇給率掛け目を返す 
 • データc：上記のデータをもとに算出された改定後給与額 
 UIのイメージ 入力画面 出力画面 現給与 グレード 自分の成果 →試算する 試算結果 →戻る 9 ２．作成フロー
10. ③UIへの落とし込み
 • 前頁のテーブルとUIについて、実際のGlide上の画面を示したものが以下になります（注：社内向けのアプリを、本稿用 に単純化した内容で再構成しています。数字はダミーです）。これでアプリは完成になります。
 • Glide上で発行されるURLより、各人がサインインの上、作成されたアプリを利用することが可能です。
 アプリ 使用したテーブル テーブル① （入力） テーブル④ （計算結果出力） テーブル② （グレード別昇給率） テーブル③ （昇給率掛け目） 10 ２．作成フロー
11. 実際の作成画面
 • 以降、実際のGlide上での作業を示した画面を紹介していきます。すべてのステップを網羅的に示せているわけではな いので、あくまで参考としてご覧ください。
 11 開始画面：Glideにサインインして立ち上げると、以下のような画面になります。新しいアプリを作るので、「New app」をクリック
 ３．作成画面
12. 実際の作成画面
 12 ①次に、アプリの名前を聞かれますのでアプ リ名を入力（後で変更できます。
 また、表示携帯をモバイルかＰＣか聞かれま すので、選択（これも後で変更できるのであ まり気にしないで大丈夫だと思います）。
 ②データソースは何にするか聞かれま す。Google Spreadsheetなど、外部の シートを持ってくることもできます。
 今回はGlide内でテーブルを作成する ので、「Glide Tables」を選択
 ③そうすると、以下のようなアプリ画面が表示されます。（前 触れなくいきなり出てくるので、私の場合は？？？となりまし たが、いったんココは無視して大丈夫です）。
 ３．作成画面
13. 実際の作成画面
 13 ①先ず、収録するデータテーブルを作成します。以下の 画面から、「Blank table」を選択し、直接データを入力して いきます。
 ②そうすると、表にデータ入力できる画面が出てきます。
 ここから、適宜行と列を追加して、任意のデータを入力してデータテーブルを作成していき ます。
 ③ところで、新しく表をGlide内に作成すると、勝手に票の名前が付けられてしまう謎の仕 様なので、適宜表の名称を変更します（設定でこの仕様を変更できるかもしれませんが）
 ３．作成画面
14. 実際の作成画面
 14 作成したデータテーブル①　グレード―昇給率対応表
 作成したデータテーブル②　自分の成果（相対的な順位）と昇給率に対する掛け目の対応表
 ３．作成画面
15. 実際の作成画面
 15 ①以下のテーブルは、利用者が入力するデータ（現給与、グレード、順位）を収録するものです。
 これに加えて、それらの入力されたデータと対応するデータを返す機能を付与しています。Lookup機能を利用して、他 のデータテーブル内の同じ数字を引っ張ってくることをしています。
 
 ②また、最終的な改定額を計算する欄 も追加しています。テーブル内で四則計 算が入力できる機能があり、これを活用 しています。
 ③最終的に出来上がったテーブルは以下。入力データ（赤）に対する改定額が算出（青）できるようになっています。
 ３．作成画面
16. 実際の作成画面
 16 ①次に、アプリのレイアウトを決めていきます。「Layout」という画面にて、ア プリのレイアウトを決めていくことが出来ます。
 今回は、入力画面と結果出力画面の二つを作成しました。
 ②データ入力画面の配置
 ・Number entryというフィールドを配置、 収録先のデータテーブルを紐づけること で簡単に入力欄を作成できます。
 ・完成したら次のページに行くボタンも設 置可能です。
 ③結果出力画面
 ・計算結果を表示するフィールドを設置
 ・前の画面に戻るボタンも設置
 →以上で完成です！
 ３．作成画面
17. 最後に
 • 以上が、初めてノーコードツールを使ってアプリを作成した事例となります。以下振り返りとなります。
 • プロトタイピングにはスプシは有効、ただしスプシ作成の前に設計図を書くと更に早かったはず
 ◦ 思考を整理する目的や、前提を調整する目的でスプシを触りながらプロトタイプをすることは引き続き有効な手段だと考えます。 
 ◦ 一方で、スプシに手を付ける前に、最低限必要なインプット・アウトプットと、関係するデータセット、数式を整理しておくと圧倒的に作業効 率は上がった気がします。 
 • データテーブル構造を作らないと行けないという事が分かった
 ◦ 「データテーブル化」をやらないとGlide上で先に進めないというのを、延べ10時間ぐらい触ってようやくわかりました。 
 ◦ 何で時間がかかったかというと、頭が固いからなんですが、「アプリ作成」と聞いて先に見せ方（UIの画面）を想い浮かべてしまい、「入力」 →「出力」の関係を見やすくする仕組みである、という単純なことに気が付かなかったことが理由です。なので最初Glideを触ってもチンプ ンカンプンでした…。 
 ◦ しばらくチュートリアルと試行錯誤を行ったり来たりしてようやく、収録されたテーブル内のデータをアプリ画面に表示する仕組み、と自分 なりに理解することができました。Glideがその商品紹介のタグラインで、 ”Turn your data into custom apps without coding” と言ってること に後から気づきました。 
 17 ４．最後に
18. 最後に
 • 生成AIの活用可能性
 ◦ 今はLLMを使ってアプリ開発を進めることも取り組まれているようで、様々な事例の記事も拝見します。これまでの自分であればサッパリ 意味が分からなかったと思うのですが、今であれば本稿のような簡単な機能のものについて言えばLLMの活用余地も探せる気がいたし ました。
 ◦ 参考まで、GlideにはAIに回答してもらうQ&Aのチャット機能がありました（日本語でも対応）。なんとなく分かったようで結局わからない、と いった使い勝手でしたが、進化しているかもしれません。 
 • UIへの興味
 ◦ 今回社内向けのアプリという事で機能を作ることが第一の目的だったので、UIには拘っておりません。然しながら、UIへの落とし込みは、 自分が最初イメージしていた「アプリ作成」感を感じる楽しい作業でありました。見やすさやCVをあげるための方法論などがあり、弊社の UIデザイナーもしのぎを削っている奥深い世界だと素人ながらに認識しております。いずれ学んでみたいと思っております。 
 必要に迫られた対応ではありました。それなりに時間も使いましたが、やってみたら気付きも多く、個人的な興味の幅も広がり ました。業務にも色々と活用できる気がします。
 
 以上
 18 ４．最後に
19. 最後に
 • ちなみに、実際に作成したアプリはコチラです。
 19 ４．最後に
20. 私たちのプロダクト 生活の「困った」を解決できるプロが集まる プラットフォーム「くらしのマーケット」 頼める出張サービスの種類 事業者の数 300種類以上！
 70,000事業者を突破！
 エアコンクリーニング、引越し、庭木剪定..などの生活関連サービス 日本全国の事業者が登録、売上を伸ばしている 20 *2022年8月現在
21. 私たちのビジョン 正直者が馬鹿を見ない世界を作る
 テスト前に必死で勉強したのに、先輩から過去問をもらっていた友達が自分よりいい成績を取った…
 会社のことを思って地味な仕事も引き受けてきたのに、上司に気に入られている同期が昇進した…
 
 世の中では、不条理なことが起きます。
 でも、悪賢い人が得をして、正直な人が損をする世界なんて嫌です。
 
 江戸時代の思想家、石田梅岩は「二重の利を取り、甘き毒を喰ひ、自死するようなこと多かるべし」
 つまり、悪賢い者には必ず報いがあると説きました。
 さらに「実の商人は、先も立ち、我も立つことを思うなり」とも表し、
 まず相手の利害を優先し、その結果として自身も利益を得ることが商人の本文だと説きました。
 
 私たちは、先も立ち、我も立つ、正直な人が報われる世の中を作ります。
 21
22. 私たちのミッション 「人と人」が関わるサービスを、
 安心して取引できる仕組みを提供する
 私たちは、くらしのマーケットを通じて、
 世の中のあらゆるサービスをインターネットで安心して取引できる仕組みを提供していきます。
 インターネットでモノを買う時、みんなが楽天市場やAmazonを利用するように、
 サービスを買う時は、みんながくらしのマーケットを利用してくれる…そんな世界を目指します。
 
 多くのベンチャー企業が、自社の成長をアピールしますが、いちばん重要なことは、
 その会社がその時に「どれだけ成長しているか」ではなく、その会社が今後「どこまで成長できるか」です。
 
 みんなのマーケットは巨大な市場に挑んでいます。私たちと一緒に、大きく成長していきましょう。
 22
23. JOIN OUR TEAM! 23 https://minma.jp/recruit