kintoneCafé 信州 Vol.1 デモ 「家計簿アプリを作成してみる」
Editor's Notes
- kintoneのお試しアカウントがある方は、どうぞご一緒にアプリを作成してみてください。
まず、kintoneにログインします。
- 完成した家計簿アプリはこんなイメージです。
毎月の収入と支出と残高を一覧で確認できるようになっています。
（サブテーブルを開いてみせて）毎日の支出の明細も確認できます。
（レコードを新規追加して見せて）入力するときは、今月の収入と、支出を費目ごとに入力すると、残高が自動的に計算されます。
（一覧からグラフに切り替えて）また、水道光熱費や、食費などの月別の推移をグラフで表示できます。
- 早速作ってみましょう。
ポータルから、アプリを作成します。「はじめから作成」を選んで、一から新しいアプリを作ります。
- フォームの作成画面が表示されます。
まず、アプリの名前を付けましょう。新しいアプリ→家計簿アプリ と入力します。
- フォームを作成する操作ですが、基本的に、左側の部品を右側に置く→設定するの2ステップでできます。
- まずは、どの月の家計簿かわかるように、月を入れられるフィールドを用意しましょう。
「数値」を置きます。フィールドの設定を開いて、設定を変更してみましょう。
フィールド名をわかりやすいように「月」に変えます。
必ず入力するものなので、必須項目にしましょう。
また、同じ月のレコードを作成できないように値の重複を禁止にしておきます。
表示したときに、なんがつ、と表示されるように後ろに、単位記号を後ろにつけておきます。
フィールドコードは、後で計算などに使用する設定です。見た目には関係ありません。
「月」は計算には使いませんが、フィールド名に合わせて「月」に変えておきましょう。
ほか、特に設定が必要がないところはなにもしないでそのままで大丈夫です。変更し終わったら保存します。
- つぎに、今月の収入を入れられるフィールドが必要ですね。
左側から「数値」を選んで置きます。
同じように設定を開いて変更しましょう。
今月の収入は金額を入れるフィールドなので、わかりやすいように桁区切りや単位記号をつけるようにします。
- では、つぎに、費目別に支出を入れるフィールドを作っていこうと思いますが、
左からD&Dするやり方以外に、複製して作る方法もあります。
同じようなフィールドをたくさん作るときに便利です。
支出も金額を入れるフィールドなので、今月の収入を複製して作っていきましょう。
- ご家庭で、特に支出が気になる費目がありますよね。
水道光熱費は季節ごとにどれくらい変動するか、比較できるといいですね。
あとでグラフ化するために、費目を分けて入れられるようにします。
電気、ガス、水道の３つを作ります。
今月の収入の設定内容がコピーされているので、変更したいところだけ、フィールド名とフィールドコードを変えておきます。
- あと、気になる費目は、食費、日用品にかかる費用、外食など週末のレジャーにかかる費用でしょうか。
費用の分け方はご家庭それぞれだと思いますが、今回は、食費、日用品費、娯楽費、の３つに分けて作ることにします。
この３つも金額を入れるフィールドなので複製して作ってみてください。
- ここで、水道光熱費と、食費、日用品費、娯楽費は、ちょっとタイプが違うことがわかりますね。
食費、日用品費、娯楽費は、月に1回ではなくて、毎日支出する項目です。
そこで、いつ支出したか、日付を入れられるようにしましょう。
その前に、フィールドが増えてきたので、見やすいように並べ方を変えましょうか。一回置いたフィールドは、ドラッグすれば好きな位置に移動することができます。
このように、電気、水道、ガス、を一行に、その次の行に食費、日用品費、娯楽費を並べてみてください。
つぎに「日付」を食費の左横に置きます。これが、支出した日付を入力するフィールドになります。
特に設定は変更しなくても大丈夫ですが、フィールド名など変えたい場合は変えます。
- これで日付とその日に使ったお金を入力できるようになりました。
ただ、このままですと、ひと月分入れられないですね。
そこで、テーブルを使って、自由に行を増やせるようにしましょう。
- 日付、食費、日用品費、娯楽費の行の一番右のほうにマウスを置くと、設定メニューが出てきますので、クリックしてみてください。そして、「この行をテーブルにする」をクリックします。
フィールドコード→支出明細と入れて保存してください。すると、テーブルができました。
あとで完成したアプリを見ていただくとわかるのですが、1つのレコードに、同じような内容のデータをたくさん入れたいときはテーブルが便利です。
- ここまでで入力するフィールドは出来上がりました。
つぎは、毎日の支出を合計してみましょう。テーブルの各行に入力された金額を費目ごとに合計したいと思います。合計を出すには、計算フィールドを使って自動計算をさせます。
- まず、食費の合計から。合計するフィールドには、「計算」を使います。「計算」を左から選んで、水道光熱費の行と、サブテーブルの間に、追加してください。フィールドの設定を開いて、計算内容を書いていきましょう。
計算式には、テーブルのフィールドの値の合計を求めるSUM関数を使います。
引数には、合計値を出したいフィールドのフィールドコードを指定します。
SUM(食費)と書くと、テーブルの食費の合計を計算してセットしてくれます。
同じように、日用品費合計、娯楽費合計を複製して作成してみてください。
計算式、フィールド名、フィールドコードをあわせて変更します。
- 同じように、日用品費合計、娯楽費合計を複製して作成してみてください。
計算式、フィールド名、フィールドコードをあわせて変更します。
- つぎは、今月の支出を合計してみましょう。
これも、「食費合計」を複製して作ります。位置は、今月の収入の右横に移動してください。
計算式は、それぞれの費目を足し算すればOKです。
- つぎは、今月の支出を合計してみましょう。
これも、複製して作ります。位置は、今月の収入の右横に移動してください。
計算式は、それぞれの費目を足し算すればOKです。
- これでフィールドの作成は終わりですが、ちょっと見栄えをよくするために、フォームに説明を入れてみましょうか。
- 「ラベル」を「月」の左横に置きます。設定を開いて、ラベル→今月の家計簿、文字の大きさ→大きい、下線→チェックする
というように変えて保存してみてください。
言葉や見た目は好きなように変えてくださって結構です。
- いよいよ、家計簿アプリの公開です。右上の、「アプリの公開」ボタンをクリックしてください。
それでは早速、入力してみましょう。「＋」ボタンを押すと、さきほど作った入力フォームが開きます。
適当に値を入力して、レコードを保存してみてください。ちなみにテーブルの横の「＋」ボタンを押すと、行を増やすことができます。
ちゃんと金額が計算されましたか？
あとでグラフにしてみたいので、7月、8月、9月の3か月分ほどレコードを作ってみてください。
- 作成したアプリは、アプリの設定画面からカスタマイズすることができます。いろいろな機能があるのですが、今回は、一覧とグラフのカスタマイズをご紹介します。
歯車マークをクリックして「アプリの設定」を開いてください。
- まず一覧から。kintoneには、あらかじめ、「（すべて）」という一覧が用意されていますが、自分で一覧を作成することもできます。
「一覧」タブをクリックします。いまは、「（すべて）」しかないですね。「＋」ボタンを押して、新しく追加しましょう。
表示したいフィールドを置いていきます。置いた順番に表示されます。
- つぎは、グラフの設定をしてみましょう。「グラフ」タブをクリックしてみます。「＋」ボタンを押して、新しく追加しましょう。
水道光熱費の月別推移を見るために折れ線グラフを作ってみます。
集計方法は＋ボタンで増やすことができます。
- 「アプリを更新」ボタンをクリックして、設定を反映しましょう。
設定したとおりに、アイコンと説明と、一覧が表示されるようになりました。
グラフマークをクリックして、水道光熱費のグラフに切り替えてみてください。
こんなグラフが設定するだけで簡単に作成できます。グラフの種類も切り替えられます。
