HapInS株式会社で代表を務めている渡邉です！ 当社はシステムの受託開発事業を営んでおり、そのメインターゲットは非IT業を営む中小企業になっています。正直なところ多くの中小企業ではITを十分に活用できておらずIT投資を行い収益向上&業務効率化に対する意欲が薄いというのが現状です。しかしそれは裏を返すと、十分にITを活用できれば業績を大きく伸ばすことができる可能性に溢れているということです。 ただ...HapInSはスクラッチ開発をメインで行っているため、我々がどんなにお客様のためになると信じる提案であってもITに知見の無いお客様には中々ご理解いただけない場面が多々見受けられておりました。それも今振り返ると当然のことで、日用品や家電等の有形商材ならまだしも、システムという目に見えない無形商材をITの専門外の無い人に理解いただくのは中々困難であるということに最近気が付きました。 そこで、ここ最近最も相談の多い販売管理システムについて、AppSheetというノーコードツールを用いてプロトタイプを作成し、具体的に目に見えるものを提示しつつ会話できるよう準備していこう！という話になったため開発を進めるとともに一連の記事を作成することにしました。 今回作成するプロトタイプが持つ機能は概ね以下の通りです。 プロトタイプとは言えど、概ね30人くらいの規模感の企業であればすぐに業務運用できる程度の機能を有しております。
ただ、在庫管理は結構機能弱いかも...（棚卸し関連とか省いちゃってます） 上記機能を実現するためのデータ設計として、以下のような簡単なER図*1を作成しました。開発を進める上で若干データ構造は変わりましたが、概ね当初の設計通りに作れたかと思います。 余談ですが、非エンジニアでもノーコード, ローコードツールを使えばシステムを簡単に作れる！というのは半分嘘です。実装自体はプログラムを書くより遥かに早く行えるケースが多いのですが...ノーコード, ローコードツールを用いた開発作業であっても、業務内容を正しく理解&整理し、適切なデータ構造の検討等の設計作業を行い、その上でノーコード, ローコードツールを駆使して実装を進めていく必要があります。この実装に至るまでの要件整理~設計を正しく行うには相応の開発経験がないと中々に難しいのが実情です。 さて、簡単な設計作業は終わったので早速実装に移りたいと思います。 ちょうど開発を始めたのが2023年2月中旬だったのですが、このタイミングではAppSheetの新機能がプレビュー版としてリリースされており、新しい物好きの僕はシステムに不安定な部分が一部あるということを知りつつも、プレビュー版の機能を使ってシステムを構築してみました。 まず最初はデータベースの構築です。 2022年10月にプレビュー版としてリリースされたAppSheet Databaseを使い、取引先管理, 見積管理機能をはじめとした各テーブルをサクッと構築していきます。プレビュー版ってことなので正直AppSheet Databaseにそこまで期待はしていなかったのですが、直感的に操作できたりデータの型が通常のRDBMSとは異なるユーザーライクな定義になっていたりと、使ってて楽しさを覚えるとても良い製品だと思いました。 取引先名, 代表者名等の必要項目を一通り作成していきます。 updated_atのようなメタ情報も定義として選択可能です。 構築を進める中で気付いたのですが、AppSheet Databaseではidを自身で振る必要がありません。最初はUUIDをセットするためのidカラムを項目として定義していたのですが、AppSheet側でデータベースを読み込んだ際にPacked UUIDなるものが予め振られているようでした。 このような感じで、一旦一通りのテーブルを作成しました。1テーブルあたり3分程度で構築できるのでとても楽ちんです。細かい属性情報とかはアプリケーションを作っていく中で随時追加変更していけば良いので、次に進みます。 AppSheetに先ほど構築したAppSheet Databaseを連携します。連携方法は非常に簡単で、添付にある通りDataページの"+"ボタンからポチポチと選択するだけで連携することができます。 連携するテーブルを選択 これで一旦の連携は完了です。 次は連携したAppSheet Databaseの各項目の定義付けを行います。基本的にAppSheet Databaseで定義した内容が自動で反映されておりますが、一部の項目は手動で設定する必要があるので一つずつ対応していきましょう。 色々と設定可能な箇所はありますが、今回は以下の部分を編集していきます。より発展的な内容に関しては次回の記事で解説していきたいと思います。 いずれの項目も添付の一覧画面から更新できますが、詳細部分の設定が出来ないという弱点もあるため今回は詳細画面から設定を進めていきます。 各項目の左にある鉛筆アイコンをクリックすると以下の編集画面が現れます。今回は見積と見積明細の項目を例に編集を進めます。 見積テーブルに紐付く見積明細テーブルの項目を例に説明いたします。AppSheetでは先述したとおりAppSheet Databaseで定義した型が自動で反映されるのですが、一部手動での対応が必要になる場合があります。特に他テーブルを参照するRef型を持つ項目と、Price型を持つ項目は要注意ですので、この2点について簡単に解説いたします。 Ref型を持つ項目で注意すべきポイントは、Type Details欄にある"Is a part of?"というチェックボックスになります。これの意味するところは、見積テーブルのあるレコードが消えたら、それに紐付く見積明細テーブルのデータを自動で消すかどうか？という質問です。今回のケースですと、見積書が消えたらそれに紐付く明細情報は消えるべきなので、以下の通りチェックを入れます。 次は金額項目の編集です。 AppSheetは海外製のノーコードツールのため、金額項目における通貨は$が基本になっています。今回は日本円で表示したいので、Type Details欄の"Decimal digits"と"Currency symbol"を添付の通り編集します。 これでTypeに関する詳細設定を行うことができました。AppSheetでは他にも設定可能な型定義が多数存在し、それぞれの設定方法もまた異なりますがプロトタイプの作成が目的なので今回は割愛いたします。 AppSheetではアプリケーション上における各項目の表示名を決めることができます。エンジニアの方なら良く分かると思いますが、変数名や関数名, 項目名等には英語を使いたいものですよね。AppSheetは英語で定義した項目に対しても、日本語の表示名を与えることが可能です。 設定は非常に簡単で、"Display name"欄に表示したい日本語名をテキストで入力するだけです。一応、条件に応じて表示名を変えられるよう数式を挿入することもできますが、数式の使い方を覚えてしまえば簡単に対応できるはずですので、ここでは割愛いたします。 最後に、各項目の初期値を決めていきます。見積情報の発行日の初期値と、発行日に連動した見積書の有効期限の初期値を決めていきましょう。使い方は非常に簡単で、以下添付の通り、"Initial Value"欄に必要な数式を埋めていきます。数式は皆さんが使い慣れたExcel関数のような形式で扱えるのでそれほど苦労しないかと思います。 発行日の初期値を本日に設定
同様の手順で、有効期限を発行日の7日後に設定。発行日の情報は[項目名]で参照可能。
これで見積情報を作成する際、その発行日と有効期限の初期値を設定することができました。
このような作業をその他の項目に対し一通り行い、データ定義を完了させていきます。 ここまで少々長かったですが、これで漸く画面の構築に進むことができます。やはり画面の構築は、実際に見えるアプリケーションとして動作を確認できるので、これまで以上に楽しく進められるのではないかと思います。 AppSheetにおける画面は添付の通りメニュー画面にある"Views"から、"+"ボタンを押下し参照するテーブルを選択することで簡単に構築することができます。こちらも様々なView Typeを設定することができますが、今回は最も良く使うテーブル画面と、AppSheetが自動で生成する詳細画面、入力フォーム画面について説明を行いたいと思います。 "こんなViewはどう？"と提案してくれますが、あまり役に立たないです笑
なので、上記の画面は飛ばして以下の画面で"For this data"から対象のテーブルを選択することをお勧めします。
さて、それでは早速画面を構築していきましょう。最初は最も良く使うテーブル画面の構築です。今回も先ほどと同様に見積情報を対象に作業を進めていきます。 添付の通り"For this data"欄に"QUOTATIONS"を選択し、"View type"に"table"を選択します。
たったこれだけの設定*2で、以下のような画面を簡単に構築することができました。自動で付いてくるフィルタ機能も非常に強力です。
また、まだBeta版の機能ですが一覧画面から直接データを編集できるQuickEditをONにしておくと良いかもしれません。Excelのような使い勝手で、パパッとデータを編集することができるようになります。その他、項目のグルーピングができる"Group by"の設定や並び順の変更ができる"Column Order"の設定を試してみると、より良いUI/UXが構築できるようになります。 AppSheetでは、特定のデータソースに対するViewを構築した際に、ほぼ間違いなく必須となる詳細画面とフォーム画面をシステムが自動で生成してくれます。Viewの編集画面で言うと下の方に"SYSTEM GENERATED"という欄があるので、そこから編集を行うことが可能です。 こちらの画面もテーブル画面と同様に、"Group by"の設定"Column Order"の設定ができるので試してみましょう。詳細画面でQuickEditを有効にしておくと、実質フォーム画面が不要になるのでお勧めです。 このように、たったこれだけの設定でテーブル&詳細&フォーム画面を作成することができました。 今回は販売管理システムの設計~基本機能の実装までを一通り紹介させていただきました。エンジニア経験 + AppSheetの利用経験がある私が作業した場合、ここまでの作業は大体10時間くらいでできてしまいます。これをプログラム書いて同等の機能を持たせようとしたらどんなに少なく見積もっても100時間はかかるかな...という感じなので、AppSheetでの開発が如何に効率的かご理解いただけたのではないかと思います。 次回は、より業務アプリケーションらしいシステムに仕上げるための作業を行なっていきます。具体的には、見積情報から受注情報を自動で作成する等の業務効率化に関する機能や、データ間の整合性を確保するための設定作業等になります。 1週間ほどで新しい記事を準備しますので、皆さんも色々とAppSheetを試していただけると嬉しいです！ 今回構築したプロトタイプを触ってみたい！という方は以下のお問い合わせフォームよりご連絡いただけますと幸いです。エンドユーザー様、システム開発会社様どちらでも大丈夫です！皆さんに色々と触っていただいて、より良いプロトタイプに仕上げていけたら何よりです。
はじめに
基本設計
AppSheetによる実装
AppSheet DatabaseによるDB構築
AppSheet ⇄ AppSheet Database連携
データ定義
Type（= 型定義）の編集
Display Name（= 表示名）の編集
Initial Values（= 初期値）の編集
AppSheetによる画面構築
テーブル画面の編集
詳細&フォーム画面の編集
まとめ
最後に