Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

More Decks by みんなのマーケット株式会社/ Minma Inc.

Transcript

  1. 本資料のコンテンツ
 • 題材
 ◦ 「自分の給与の次回の改定額」をシミュレーションするアプリを作成しました。
 ◦ この作成における流れや気付きをまとめています。
 ◦ なお、本稿で提示しているアプリは実際のものから内容を多少変更しています(データもダミー)。
 •

    資料の流れ…以下の順番で説明します。
 1.はじめに
 2.作成フロー
 ①プロトタイプ作成
 ②データテーブル化
 ③UIへの落とし込み
 3.実際の作成画面の紹介
 4.まとめ
 2
  2. Glide利用の背景
 • 社内で使えるシミュレーションツールを作成する必要があった
 • UIをアプリ仕様にしたかった
 ◦ 視覚的で、入力→反応の関係が分かりやすい
 ◦ スプレッドシートでも必要最低限の入出力機能は作成可能だが、不要な計算式、データ、シートが表示されるな ど、UIとしては不十分


    • そしてエンジニアの力を借りることなく対応したかった
 →ということで、ノーコードアプリツールを触ることを決意
 • 「ノーコード」「アプリ開発」で検索するといくつか出てきたが、事例・チュートリアルが充実していたことを理由に、Glideを 選択(https://www.glideapps.com/)
 • 次ページから、作成の流れを紹介
 
 4 1.はじめに
  3. ①プロトタイプ作成
 • アプリの裏側のロジック(そもそもどんなデータが必要なのか、どんな計算の順番になるのか、等)を整理しないとアプリ を作れません。このためのプロトタイプとして、自分はスプレッドシートを利用しました。理由としては、
 ◦ エクセルモデリングに慣れているというか、それしかできなかったから 
 ◦ ロジックがまだハッキリしていないので、考えながら作りたかったから 


    ◦ 適用する変数について結果を見ながら調整したかったから 
 • 今回欲しいのは、『自分の今の給与、成果、グレードを入力すると、次回の給与改定額が試算できる』という機能です。 本稿用に単純化してますが、以下のロジックを採用しています。これに沿ったスプレッドシートを作成しました。
 ◦ 改定後給与額 = 現給与額 × (1+{グレードごとに定められた昇給率 × 成果に応じた掛け目}) 
 • プロトタイプのスプレッドシートは、以下のような構造となっています。後述しますが、スプシの構造(計算過程)を整理し て把握しておくことが重要です。
 ◦ 入力 :現給与額、グレード、自分の成果 
 ◦ 参照① :入力されたグレードに 対応する昇給率
 ◦ 参照② :自分の成果に対応する昇給率の掛け目 
 ◦ 計算 :給与×グレードごとの昇給率×昇給率掛け目 
 ◦ 出力 :改定後給与額
 ◦ 赤が入力変数、青が出力値、緑が計算式、紫が対応表(vlookup関数で参照するデータ表)を意味してます。 
 5 2.作成フロー
  4. ②データテーブル化
 • 先ほどのスプシの構造を、以下のようにデータテーブルに再構成します。機能ごとにテーブルを分けます。この段階か ら、Glideを活用していきます(これらのテーブルをGlideに収録していく事になります)。なお、テーブル④のように、複数 テーブル間のリレーション構造を作ることが可能です。
 入力 :現給与、グレード、自分の成果 
 スプレッドシートの構造 Glideに収録するデータテーブル

    テーブル①:入力されたデータが収録される表(空欄) 
 • 収録データ:現給与、グレード、自分の成果 
 テーブル②:各グレード毎に対応する昇給率の関係表 
 • 収録データ:グレード、昇給率 
 テーブル③:成果に対応する昇給率掛け目の関係表 
 • 収録データ:成果、昇給率掛け目 
 テーブル④:改定額を算出するテーブル(クエリ) 
 • データa:テーブル①で入力されたデータ(グレード)をテーブル ②から探し、対応する昇給率を返す 
 • データb:テーブル①で入力されたデータ(成果)をテーブル③ から探し、対応する昇給率掛け目を返す 
 • データc:上記のデータをもとに算出された改定後給与額 
 参照① :入力されたグレードに 対応する昇給率
 計算 :給与×グレードごとの昇給率×昇給率掛け目 
 参照② :自分の成果に対応する昇給率の掛け目 
 出力 :改定後給与額
 7 2.作成フロー
  5. ③UIへの落とし込み
 • Glide上で収録されたデータテーブル内のデータのうち表示させるものについて、UI画面上のどこに表示させるかを紐づ けていくプロセスとなります。全部のデータを画面上に表示させる必要がないことも分かります。
 Glideに収録されたデータテーブル テーブル①:入力されたデータが収録される表(空欄) 
 • 収録データ:現給与、グレード、自分の成果 


    テーブル②:各グレード毎に対応する昇給率の関係表 
 • 収録データ:グレード、昇給率 
 テーブル③:成果に対応する昇給率掛け目の関係表 
 • 収録データ:成果、昇給率掛け目 
 テーブル④:改定額を算出するテーブル(クエリ) 
 • データa:テーブル①で入力されたデータ(グレード)をテーブル ②から探し、対応する昇給率を返す 
 • データb:テーブル①で入力されたデータ(成果)をテーブル③ から探し、対応する昇給率掛け目を返す 
 • データc:上記のデータをもとに算出された改定後給与額 
 UIのイメージ 入力画面 出力画面 現給与 グレード 自分の成果 →試算する 試算結果 →戻る 9 2.作成フロー
  6. 実際の作成画面
 12 ①次に、アプリの名前を聞かれますのでアプ リ名を入力(後で変更できます。
 また、表示携帯をモバイルかPCか聞かれま すので、選択(これも後で変更できるのであ まり気にしないで大丈夫だと思います)。
 ②データソースは何にするか聞かれま す。Google Spreadsheetなど、外部の

    シートを持ってくることもできます。
 今回はGlide内でテーブルを作成する ので、「Glide Tables」を選択
 ③そうすると、以下のようなアプリ画面が表示されます。(前 触れなくいきなり出てくるので、私の場合は???となりまし たが、いったんココは無視して大丈夫です)。
 3.作成画面
  7. 最後に
 • 以上が、初めてノーコードツールを使ってアプリを作成した事例となります。以下振り返りとなります。
 • プロトタイピングにはスプシは有効、ただしスプシ作成の前に設計図を書くと更に早かったはず
 ◦ 思考を整理する目的や、前提を調整する目的でスプシを触りながらプロトタイプをすることは引き続き有効な手段だと考えます。 
 ◦ 一方で、スプシに手を付ける前に、最低限必要なインプット・アウトプットと、関係するデータセット、数式を整理しておくと圧倒的に作業効

    率は上がった気がします。 
 • データテーブル構造を作らないと行けないという事が分かった
 ◦ 「データテーブル化」をやらないとGlide上で先に進めないというのを、延べ10時間ぐらい触ってようやくわかりました。 
 ◦ 何で時間がかかったかというと、頭が固いからなんですが、「アプリ作成」と聞いて先に見せ方(UIの画面)を想い浮かべてしまい、「入力」 →「出力」の関係を見やすくする仕組みである、という単純なことに気が付かなかったことが理由です。なので最初Glideを触ってもチンプ ンカンプンでした…。 
 ◦ しばらくチュートリアルと試行錯誤を行ったり来たりしてようやく、収録されたテーブル内のデータをアプリ画面に表示する仕組み、と自分 なりに理解することができました。Glideがその商品紹介のタグラインで、 ”Turn your data into custom apps without coding” と言ってること に後から気づきました。 
 17 4.最後に
  8. 最後に
 • 生成AIの活用可能性
 ◦ 今はLLMを使ってアプリ開発を進めることも取り組まれているようで、様々な事例の記事も拝見します。これまでの自分であればサッパリ 意味が分からなかったと思うのですが、今であれば本稿のような簡単な機能のものについて言えばLLMの活用余地も探せる気がいたし ました。
 ◦ 参考まで、GlideにはAIに回答してもらうQ&Aのチャット機能がありました(日本語でも対応)。なんとなく分かったようで結局わからない、と いった使い勝手でしたが、進化しているかもしれません。

    
 • UIへの興味
 ◦ 今回社内向けのアプリという事で機能を作ることが第一の目的だったので、UIには拘っておりません。然しながら、UIへの落とし込みは、 自分が最初イメージしていた「アプリ作成」感を感じる楽しい作業でありました。見やすさやCVをあげるための方法論などがあり、弊社の UIデザイナーもしのぎを削っている奥深い世界だと素人ながらに認識しております。いずれ学んでみたいと思っております。 
 必要に迫られた対応ではありました。それなりに時間も使いましたが、やってみたら気付きも多く、個人的な興味の幅も広がり ました。業務にも色々と活用できる気がします。
 
 以上
 18 4.最後に