Amazon Web Services ブログ

Amazon Honeycode を使ってコーディングなしで経費管理アプリケーションを作成する方法

(この記事は、 How to create an Expense Tracking App without coding using Amazon Honeycode を翻訳したものです。)

概要

アプリケーションを作るためにはプログラミングの経験が必要と思っている方も多いと思います。しかし、Gartner社によると「2024年までに、ローコードアプリケーション開発がアプリケーション開発の65%以上を占めるようになる」と言われています。これからのアプリ開発は技術的なバックグラウンドを持つ人も持たない人も、プログラミングやコードを必要とせずにアプリを作ることができるシンプルなインターフェイスになるということです。

AWSはユーザーフレンドリーな "ノーコード" アプリ開発プラットフォームである Amazon Honeycode を提供しています。Honeycode はモバイルやウェブ向けのカスタム生産性アプリケーションをプログラミングなしで構築することができます。 Honeycode は iOS と Android の両方に対応したアプリケーションの開発を無料で始めることができます。

Honeycode を使うメリット

  • デスクトップ、iOS、Android のモバイルデバイスで動作するウェブおよびモバイルアプリケーションを構築できます。プログラミングを必要としないので、誰でもアプリ開発者になれます。
  • Honeycode のアプリケーションはチームの連携をサポートします。すべてのチームメンバーはリアルタイムに更新された同じデータにアクセスできます。
  • Honeycode のアプリケーションは各チームメンバーに関連するデータを表示するようにパーソナライズすることができます。
  • Honeycode を使えば手動の作業を自動化することができます。更新情報をチームに通知したり、アクションが必要なタイミングをリマインドすることができます。

Honeycode を学ぶには実際に使ってみるのが一番です。従来アプリケーションを開発するためには、コーディングスキル、データベースやユーザーインターフェイスへの理解が必要でした。Honeycode ではコードを書く必要はなく、データベースを作成したり維持する必要もありません。このブログでは Honeycode で経費管理アプリを構築する方法を学びます。経費管理アプリはシンプルですが、広く使われているツールです。このチュートリアルでは、コードを一切書かずに、モバイルやウェブで使用できるアプリケーションを作る方法を学びます。必要なのは基本的なスプレッドシートのスキルだけです。

Amazon Honeycode の無料アカウントに登録するか、すでにアカウントをお持ちの場合はサインインしてください。

前提条件

Honeycode のアカウントが必要です。Honeycode の無料アカウントに登録をして、以下手順を進めてください

操作手順

  1. ワークブックを作成し、テーブルを設定する
  2. ウィザードを使ってアプリを作成
  3. アプリオブジェクトの追加とカスタマイズ
  4. アプリのテスト

ステップ1：ワークブックを作成し、テーブルを設定する

  1. Honeycode を開き Create workbook > Start from scratch をクリックします

  1. 次のウィンドウでワークブックに名前をつけます。ここでは、Expense_Tracker と入力します。

  1. Expense_Tracker ワークブックにはテーブルが自動的に作成されます。このテーブルには、アプリのユーザーが入力した経費情報が保存されます。このテーブルの名前を Expense_Records に変更します。

ヒント: Honeycode では テーブル にアプリのデータを保持します。テーブルはフィルタリング、ソート、集計、データのリンク、自動化のトリガー、および計算の実行が可能です

  1. デフォルトではテーブルは3列で作成されます。このテーブルにさらに2つの列を追加し、次のようなヘッダーを付けます。列を追加する際はテーブル右上の＋をクリックします。列名を変更する際は列名のセルをダブルクリックします。
  • Submitted by
  • Type
  • Date
  • Description
  • Amount

  1. 余分な行を削除しましょう。空白の行を選択して右クリックし、 Delete Table Rows を選択します。

  1. 次に経費タイプを格納するための新しいテーブルを作成しましょう。左のナビゲーションバーで、テーブルのアイコンをクリックし、 + > Add a blank table を選択します。

  1. テーブルの名前を Exp_Type に変更します。このテーブルには個人用とビジネス用の2種類の経費タイプを持つ1つの列があります。これらの値はアプリ上でドロップダウンメニューとして表示されます。Honeycode ではピックリストと呼ばれています。余分な列や行を削除し、データを入力します。

  1. 経費タイプ別に合計を表示するため、別のテーブルを作りましょう。名前は Total_Exp です。
  2. 2つの列に Personal と Business という名前を付けます。これらの列には、 Expense_Records テーブルのデータに応じた合計金額が表示されます。

経費タイプ別の合計を計算するには、SUMIF( ) 関数を使用します。個人用の経費については、以下の式を使用してください。

=SUMIF(Expense_Records[Type],"Personal",Expense_Records[Amount])


  1. ビジネス用の経費を計算するには、次の式を使用します。

=SUMIF(Expense_Records[Type],"Business",Expense_Records[Amount])

ステップ2： ウィザードを使ってアプリを作成

  1. アプリの構築を開始します。左のナビゲーションバーからアイコンをクリックし、アプリビルダーを開きます。 + をクリックし、 Use app wizard を選択します。

  1. アプリの最初の画面のデータソースとして、テーブル Expense_Records を選択します。選択可能なテーブルは Choose table… をクリックすると表示されます。テーブル Expanse_Records のすべての列が、左のアプリプレビューに表示されていることに注意してください。これらは右のパネルで配置を変えたり削除したりできますが、ここではそのままにしておきます。画面名を Dashboard に変更して、Next をクリックします。

  1. 次に作るのは、個別の経費情報を表示するための画面です。このタイプの画面は詳細画面とも呼ばれます。Expense Detail と名前を変えてください。各カラム名の横にある 鉛筆アイコン をクリックして、アプリユーザーがこれらのフィールドを編集できるようにします。Submitted by フィールドはそのままにしておきます。続けて残りのフィールドを編集可能にします。

Note: Delete Row ボタン が自動的に追加されていることを確認できます。次に Next をクリックします。

  1. この画面ではアプリのユーザーが経費情報を登録します。このタイプの画面はフォームと呼ばれています。 Expense Form と名前を変えてください。

Note: Cancel と Done ボタンが自動的に追加されています。ボタンのテキストを変更する方法は後ほどご紹介します。 次に画面右下のDone をクリックします。

  1. アプリウィザードの最後のステップではアプリに名前を付けます。必要に応じて画面を追加することも可能です。ここでは アプリ名を Expense Tracker に変更します。アプリウィザードを終了した後、アプリビルダーでさらに変更を行います。 View app をクリックして完成したアプリを確認します。

  1. Webアプリはすでに公開されており、共有する準備が整っています。次のステップではニーズに合わせていくつかのカスタマイズを行います。

Step 3: アプリオブジェクトの追加とカスタマイズ

  1. ブラウザのウェブアプリタブからアプリビルダータブに戻ります。アプリウィザードが表示されている場合は画面右下の Done をクリックしてアプリウィザードを終了させます。アプリビルダーが表示されていない場合、左のナビゲーションからアプリのアイコンをクリックし、 Expense Tracker を選択します。

  1. Screenで Dashboard を選択します。この画面では各ユーザーのビジネス用と個人用の経費の合計を表示します。 + Add objects ボタンをクリックして、Content box を選択します。Content box は、個人用の経費の合計を表示するラベルとして利用するため、ボックス内に Personal と入力します。次に Data cell を選択して画面に追加します。画面に追加した Content box と Data cell はドラッグ操作によってサイズの変更や配置の変更が可能です。Data cell は Content box の横に配置します。
  2. ビジネス用の経費について操作を繰り返します。Content box を追加し、ボックス内に Business と入力します。次に Content box の横に Data cell を追加します。データセルには、Total_Exp テーブルの Personal および Business 列の値を表示させます。これにはいくつかの方法があります。

1 つの方法は、Data cell に shared source の値を数式として入力することです。Total_Exp テーブルの Personal 列の値を表示するには、=Total_Exp[Personal] と入力します。Business 列の値を表示するには、=Total_Exp[Business] という数式を入力します。

また右下の展開アイコンをクリックしてデータビューをアクティブにする方法もあります。 Data cell をクリックしてから、データソースとして使用するテーブルと列を選択します。この例では、個人用の経費を表す Data cell は、Total_Exp テーブルのセル A2 を参照しています。この方法を使って、ビジネス用の経費の合計についても同じ手順を繰り返します。

いずれの方法を選んでも、まだ経費情報が登録されていないため、表示される値は0です。

  1. アプリのユーザーが 経費情報の登録のために Expense Form を開いたときにユーザー名が自動的に入力されるようにします。このような場合はシステム変数 $[SYS_USER] を使います。この変数はアプリを操作しているユーザーを指します。Expense Form を表示するため、Screenで Expense Form を選択します。

$[Submitted By] の Data cell をクリックします。プロパティパネルの source type で Variable を指定し、数式 =$[SYS_USER] を入力します。このフィールドをユーザーが編集できないようにしたいので、 Editable のチェックを外します。

  1. 次にユーザーが経費タイプを画面上で選択できるようにします。アプリでドロップダウンのUIを作成するために $[Type] の Data cell をクリックします。プロパティパネルで Format に Rowlink & picklist、source type に Table、source table に Exp_Type を選択します。

ヒント：Rowlink & picklist 形式は1つのセルからすべての行のデータにアクセスすることができます。アプリでは Rowlink & picklist 形式はピックリストメニュー (ドロップダウン) として表示されます。

  1. Done ボタンのテキストを編集してみましょう。ボタンをダブルクリックするか、右クリックして Edit を選択します。ボタン名を Done から Submit に変更します。

  1. アプリのユーザーが一部しか入力されていないフォームを送信しないようにします。フォームが完全に入力されるまで非アクティブに表示される別の Submit ボタンを追加し、ボタンの表示条件を設定します。+Add objects メニューから、3つ目の Button を追加し、テキストを Submit に変更します。ツールバーの塗りつぶしアイコンをクリックし、灰色を選択します

  1. プロパティパネル Display タブの Set visibility に 以下の数式を入力します。

=OR($[Type]="",$[Date]="",$[Description]="",$[Amount]="")

この条件式により、画面上のすべてのフィールドが入力されるまで Submit ボタンが灰色の非アクティブ状態になります。これにより、ユーザーが空白のデータを送信することを防ぎます。

  1. 有効な Submit ボタンも同様にプロパティパネル Display タブの Set visibility に 以下の数式を入力します。

    =AND($[Type]<>"",$[Date]<>"",$[Description]<>"",$[Amount]<>"")

この条件式により画面上のすべてのフィールドが入力された場合にのみ、有効な Submit ボタンが表示されます。

  1. Expense Detail ではユーザー自身の経費情報のみを表示できるようにするため、他のユーザーの経費情報を表示する Objects を非表示にします。Screenで Expense Detail を選択し、 Jump to item in Dashboard: を含む画面上部のブロックを選択し、プロパティパネル Display タブの Set visibility に =FALSE()と入力します。

お疲れさまでした！　これでテストの準備が整いました。

ステップ4：アプリのテスト

以下のスクリーンショットではアプリにスタイルを追加しています。お好みの組み合わせが見つかるまで、フォントやカラーを自由にお試しください。

  1. ブラウザもしくはモバイル端末の Honeycode アプリから開発したアプリを開きます。最初に表示されるのは Dashboard と命名したホーム画面です。下のスクリーンショットは経費情報が登録されていない状態での画面です。 +Add をクリックするとフォーム画面が表示され、経費情報を登録できます。

  1. フォーム画面が表示されるとユーザーの名前が自動的に入力されます。次のフィールドの経費タイプは Rowlink と設定した Data cell ですが、アプリのユーザーにとっては単なるピックリストメニューにしか見えません。フォームに経費情報を入力します。

  1. フォームへの入力が完了すると Submit ボタンが有効になります。 Submit ボタンをクリックするとデータが Expense_Records テーブルに登録され、Dashboard 画面に戻ります。

  1. バックエンドでは、データはすぐに Expense_Records テーブルに登録されます。

  1. アプリは経費情報を登録すると Dashboard に戻るように構成されています。登録した経費情報が Dashboard にすぐ表示されることも確認してみてください。

  1. ここでさらに経費情報を追加しました。Dashboard には経費タイプ別の合計が表示されることを確認できます。

  1. 経費情報のいずれかをクリックして経費詳細ページを表示します。経費詳細が表示され、内容の編集や削除などの操作を行うことができます。
  2. 編集や削除を行うとアプリはホーム画面に移動し、Dashboard で経費情報の変更を確認できます。それに伴い合計金額も変化します。

API Integration

Honeycode は経験豊富な開発者が AWS CLI や Python SDK を使ってデータを操作するための API を提供しています。GetScreenData と InvokeScreenAutomation は、ユーザーが Honeycode アプリとプログラム的に対話することを可能にします。API はユーザーが Honeycode アプリと対話する際に、Honeycode ワークブックに保存されているデータの読み取り、書き込み、更新または削除に使用できます。外部アプリケーションも API を使用して Honeycode で構築されたアプリと対話します。

ワークブックとアプリケーションの共有

Honeycode ではワークブックやアプリを同僚と簡単に共有できます。

  1. ワークブックを共有するには、ワークブックを選択して Share ボタンをクリックします。

  1. 次に Share with 欄にチームメンバーのEメールアドレスを入力し、Update をクリックします。

アプリケーションを実行するためのコスト

従来はアプリケーションを作成してホストするためのインフラを管理していました。Honeycode はメンバー数20まで、ワークブック1つあたり2,500行までのデータ量であれば無料でご利用いただけます。追加の容量が必要になった場合には、有料プランにアップグレードすることができます。詳しくは、価格 ページをご覧ください。

クリーンアップ

ワークブックと関連するアプリを削除したい場合は、以下のように削除することができます。

まとめ

Amazon Honeycode を利用することで、アプリ開発のスキルがなくてもノーコード・アプリを短時間で開発できることを体験しました。これらのアプリはいつでもカスタマイズでき、変更はすぐに展開されます。Honeycode community では質問の投稿、Honeycode に関するアナウンスの確認、Honeycode courses という学習コンテンツの利用、ハウツー記事やビデオの閲覧、その他のリソースを見つけることができます。

翻訳はソリューションアーキテクトの酒井 賢が担当しました。原文はこちら です。