[レッツトライAppSheet]10分でできる！名刺管理アプリを作ってみよう

2. AppSheetの導入と基本概念の紹介

まずはじめに、AppSheetの導入方法と基本概念について紹介します。AppSheetとは、プログラミングの知識がなくても簡単にアプリを作成できるプラットフォームです。

AppSheetでは、「アプリケーション」を作成していきます。アプリケーションは、データの入力や表示、操作を行うためのインタフェースです。アプリケーションを作成するには、まずデータの設計が必要です。

AppSheetでは、データを「テーブル」として扱います。テーブルは、関連する情報をまとめたデータの集合です。

例えば、名刺データの場合、名前や会社名、連絡先などの情報が1つのテーブルに格納されます。今回はスプレッドシートをテーブルとして使用します。スプレッドシートに含まれる各シートがテーブルに相当します。

また、アプリケーション内でデータの表示や操作を行うために、「ビュー」が重要です。ビューは、テーブルのデータをどのように表示するかを定義するものです。例えば、一覧表示やフォーム表示などのビューを作成することができます。

さらに、AppSheetでは「アクション」という概念も利用します。アクションは、ユーザーが特定の操作を行ったときに実行される処理です。例えば、データの追加や削除、編集などの操作に対してアクションを設定することができます。

以上がAppSheetの基本的な考え方となります。

3. 名刺データの設計

ここでは

• 名刺データのためのデータベース設計を行います。
• 名刺データを保存する名前、会社名、連絡先情報などのフィールドを持つスプレッドシートを作成します。

データ登録はAppSheetで行いますので、ここで設定するのはAppSheetで処理を行う列の名前だけを決めます。

今回はこのような情報を管理したいと思います。後からでも追加、変更は可能ですし他に追加したい項目があれば追加してください。

<設定項目一覧>

• AppSheetアプリの作成

次に、拡張機能→AppSheet→アプリを作成　と進みます。

※初めてAppSheetを利用される方はアカウント登録を促すメッセージが表示されますが、聞かれた内容に答えて進めて頂ければアカウントが作成できます。

4. フォームの作成とデータの入力

ここでは

• 名刺データを編集するための画面を確認や調整を行います。
• フォームに含める名前や連絡先などのフィールド属性の編集や画像登録時の処理設定を行います。

AppSheetがスプレッドシートの設定をもとに画面構成情報を自動生成してくれます。これで半分程度は完成です。

「Customize your app」ボタンを押し自動生成された結果を望ましい形に修正していくというのがこの先の作業となります。

属性、処理の設定

AppSheetでは、自動的にフォームが生成されますが、それをカスタマイズすることでより使いやすい編集画面を作ることができます。

まず、生成されたフォームのフィールド属性を編集します。例えば、名前や連絡先などのフィールドを必須項目に設定することができます。また、画像登録時の処理設定も行います。

特に重要なのは、画像データの処理設定です。名刺の表面と裏面の画像フィールドには、OCRTEXTという式をINITIAL VALUEとして設定します。これにより、名刺の画像をアップロードした際に自動的にOCR処理が行われ、テキスト化されたデータがOCRTEXTを指定しているフィールドに自動入力されるようになります。

設定が完了したら、フォームの外観や表示方法をカスタマイズすることもできます。

必要に応じて、フォームのデザインやフィールドの並び順を調整して下さい。

以上がフォームの作成とデータの入力の手順です。設定したフィールド属性や画像処理設定に基づいて、効率的な名刺データの入力と編集を行いましょう。使いやすいフォームを作成することで、正確なデータの管理が可能となります。

今回はTYPE, INITIAL VALUE列の各項目を下表の通りに変更します。INITIAL VALUEは中央ペインを右にスクロールすると出現します。

特に　INITIAL VALUEに設定している　OCRTEXT　が今回の肝となる設定となりますので必ず設定するようにしてください。

私の環境の場合、TYPE部分はTextが初期設定されておりText属性以外のところだけを修正しました。

INITIAL VALUEの設定補足

名刺_表_テキスト行のINITIAL VALUE部の枠をクリックしてExpression Assistantを起動します。

設定入力部にOCRTEXTと入力し、カッコ内にData Explorerから[名刺_表_画像]を選択して「insert」ボタンを押します。

正しく設定できたら saveボタンを押しウィンドウを閉じます。

一通り設定が完了したら、TYPEとINITIAL VALUEが表の通りに設定されているかどうかを確認し、画面右上の「SAVE」ボタンを押し保存します。

同様に[名刺_裏_テキスト]部の設定も行ないます。

5. 名刺データの表示画面の設定

作成したデータを見やすく表示するため、画面名称、並び順、データのグループ化などの表示方法を設定します。

名刺一覧内の表示設定

設定が終わったら「SAVE」ボタンを押して保存します。

登録完了後に名刺一覧画面に戻るための設定

Finish view　を　名刺一覧に変更します。設定が終わったら「SAVE」ボタンを押して保存します。

こちらでアプリの作成は完了です。　10分かかりましたでしょうか？

6. アプリのプレビューとテスト

• 作成したアプリをプレビューして動作を確認しましょう。
• スマートフォンやウェブブラウザでアプリをテストしてみます。

ブラウザからでもテストできますが、今回はモバイルデバイスから登録のテストをしてみます。

スマートフォンでAppSheetを起動し、名刺アプリを起動します。

初回起動時はログインを要求されます、AppSheetでアプリを作成したアカウントでログインしてください。

アプリが表示されないときはAppSheetアプリの右上にある三本線から Owned by me を選択すると表示されます。

名刺一覧画面の右下にある＋ボタンを押し登録画面を開きます。

登録画面が表示されたら名刺アプリの登録画面から登録したい名刺の写真を撮影、または撮影済みの名刺画像を選択します。

写真を適用し少し経つと、画像から抽出されたテキストが画面に入力されます。

テキスト化されない場合は画像がボケているなど読み取りがうまくできていない可能性がありますので、再撮影等をしてみてください。

（必要に応じて）各項目への分解と読み取り内容に誤りがあれば適宜修正し、Saveボタンを押して保存します。

これで初期登録完了です。

項目ごとに分解して保存すると所属組織名や役職、メールアドレスを登録するとメールを作成することが可能です。今回はメールアドレスと、電話番号を個別登録しましたのでメールの作成や電話/SMSの発信ができるようになっています。

7.まとめ

AppSheetはまだ日本語化がされていないためメニュー等が英語だったり、はじめはとっつきにくさが少しありますが、スプレッドシートを作成してAppSheetを呼び出して少し設定を修正するだけで簡単にアプリができてしまいます。

読んでくださった皆様が躓くことなく10分で作成できたと信じています。

仮に10分でできなかったという方でも、ものすごい時間を要したということは無かったのではないでしょうか？

AppSheetが無かったら、これをゼロから、しかも自分で作ろうと言う気にはそもそもならないですし、相当な労力とコストが必要になると思います。

またGoogle Apps Scriptを呼び出したり拡張をしようと思えばもっと色々な複雑な処理も実装することができますし、Google Workspace Enterprise Plusをご利用中のお客様であればAppSheetのCore相当のライセンスが付帯されているのでアプリを共有して様々な業務やデータの共有ができるようになりますので活用の幅は無限に広がります。

こちらをきっかけに更に発展として、このアプリを社内で共有して運用いただければ社内の名刺管理ツールとして共同利用と言うようなちょっとした営業DXを実現できたりしますし、個人利用にとどめるにしてもCSV出力して少しヘッダを加工すればGoogleコンタクト（アドレス帳）に連携したりと様々な使い方に広げていくことができると思います。

最後まで読んでいただきありがとうございました。

◆AppSheetに関することは、ぜひソフトバンク窓口又は担当営業までご相談下さい。

Google Workspaceに関することも、ご相談お待ちしております！

関連サービス