DXやkintoneの伴走支援について、皆で考える研究所。

0596-72-8020 (平日:9:00〜17:30まで)

kintoneハンズオン対面開発「自分でアプリを作る」ための7つのステップ

kintone 対面開発大公開 ハンズオンでアプリを作ろう!

プログラミング不要で自社の業務に合わせて様々なアプリを作ることができるkintone(キントーン)
「kintoneアプリを自分で作れるようになりたい」とお考えの企業さまも多いでしょう。

今回は、kintone対面開発の初回打合せで実際に経営者の方がアプリを構築した事例をご紹介!
ハンズオンでアプリを構築していくためのポイントをお伝えしました。

社内のペーパーレス化を促進……作業日報をアプリ化したい!

ミツ株式会社さまは、昆布やわかめ、ひじきなど海藻食品の輸出入と製造を行う伊勢市の企業です。
受発注に関わる書類の管理に悩まれていたミツさまでは、以前小型スキャナーScanSnap(スキャンスナップ)を導入。
ScanSnapをDropboxやEvernoteと連携させることで、受発注に関わる書類を即座にデータ化できる環境を整えました。

▼ペーパーレス化をScanSnapで!紙資料をデータ化して情報共有をもっと簡単に

社内のペーパーレス化・業務効率化を進める中で、ミツ株式会社さまが次にデータ化したいと考えたのは作業日報
ミツ株式会社さまで利用していた日報は、商品ごとの書式にその日の作業内容に合わせて適切な用紙を選択手書きで内容を記載していくものでした。

商品によってチェック項目が異なるため、当然記入すべき日報の書式も異なります。
何百もある商品に適した書式を用意していたら、その数なんと200種類。
あらかじめ商品名や原材料名の入ったエクセルを作成して印刷しておき、従業員の方は自分がその日作業する商品の用紙を探して日報を作っているとのことです。

ミツ株式会社さまの理想は、タブレットで直接その日の作業内容を登録していく形。
数多くある日報の中から、初回のお打合せではまず一つをkintone化していくことになりました。

コムデック 対面開発初回打ち合わせ

アプリ化する書類・エクセルを決めよう

ミツ株式会社さまでまずkintone化することになった書式はこちら。

コムデック 対面開発初回打ち合わせ

パッと見ただけでも、日付や時間、チェックボックスに文字列等多種多様な項目があり、アプリ化するのは大変そうに見えます。

ですが安心してください、「紙の書式と全く同じ見え方」は難しくても、「同じことを入力するための項目」を「近いレイアウトで」アプリ化することは可能です。
それでは、早速アプリを作成していきましょう!

ステップ1.まずはフィールドを配置してアプリを公開してみよう

まずはkintoneにログインし、アプリのところで+ボタンを押してアプリを作っていきましょう。

コムデック 対面開発初回打ち合わせ
今回は「はじめから作成」でいちからアプリを構築していきます。

コムデック 対面開発初回打ち合わせ
その他のアプリの作り方や各フィールド(項目)の詳細はこちらをご覧ください。
▼kintoneの使い方 基本的な機能から拡張機能までを分かりやすく解説!

「はじめから作成」を選ぶと、以下のような画面になります。
まずは、アプリの名前を書式に合わせて変更しましょう。

コムデック 対面開発初回打ち合わせ

名前を変えたら、いよいよアプリの中身をつくっていきます。
kintoneでは、ドラッグ&ドロップで項目を配置でき、一度配置したものを移動・変更・削除するのも簡単です。

まずは、手元にある紙の資料をそのまま置き換えるイメージで、左の項目一覧から使いたいフィールドをマウスでドラッグして右のうすい灰色の部分にドラッグで配置していきます。

基本は「文字列」「数値」ですが、入力してほしい内容が限定的な場合には「日付」「時刻」のフィールドを使います。
どれか一つしか選ばないものは「ラジオボタン」「ドロップダウン」にしてもいいでしょう。

コムデック 対面開発初回打ち合わせ
配置したフィールドの上にマウスのカーソルを合わせると歯車のマークが表示されますので、そこから設定画面を開き、名前等を変更します。

コムデック 対面開発初回打ち合わせ
名前の変更ができたら、必ず「保存」をしてください。

コムデック 対面開発初回打ち合わせ
このようにして、書式に沿った項目を配置していきます。

ここでポイントとなるのは「一気に作ろうとしない」こと。
項目が少ないのであれば全ての項目を配置してもらっても構いませんが、項目がたくさんある場合にはある程度のところで一度「アプリを公開」してみてください。

コムデック 対面開発初回打ち合わせ

ステップ2.アプリができたら入力してみよう!

アプリが出来上がったら、以下のような画面になります。まだ何も登録されていないため、「データがありません」の状態です。

早速、出来上がったアプリにデータを登録してみましょう!
アプリにデータを登録したい場合には+ボタンを押してください。

コムデック 対面開発初回打ち合わせ
プラスボタンを押したときに表示されるのが、データを入力する登録画面です。

コムデック 対面開発初回打ち合わせ

入力が完了したら「保存」を押すことで、入力した内容が1レコード(=エクセルにおける一行のデータ)となります。

コムデック 対面開発初回打ち合わせ

入力画面

コムデック 対面開発初回打ち合わせ

保存されたレコード

ステップ3.ポータル・一覧・詳細…kintoneの基本構造を知ろう

アプリの作成・レコードの登録ができたところで、一度kintoneのトップページに戻りましょう。トップページに戻りたい時は、画面左上の家のマークをクリックします。

コムデック 対面開発初回打ち合わせ
先ほど作成したアプリが、トップページの「アプリ」部分に表示されています。
アプリ名をクリックすることで、登録されたデータを確認することが可能です。

コムデック 対面開発初回打ち合わせ

アプリ名をクリックして、一番最初に表示される画面が「一覧画面」です。
この画面では、まさにエクセルと同じように登録されているデータを一覧で確認することが可能です。

ここにも、先ほど登録したデータが表示されています。
左の鉛筆アイコン×を押すことで一覧画面上での編集・削除が可能ですが、ここでは一旦、一番左のメモのようなアイコンをクリックしてください。

コムデック 対面開発初回打ち合わせ
メモのアイコンをクリックすると、レコードを登録したときと同じ画面が表示されます。

コムデック 対面開発初回打ち合わせ
この画面で、右上の鉛筆アイコンをクリックすると登録されたレコードの内容編集できます。
編集画面は入力画面と同じです。変更したら、保存を押してください。

コムデック 対面開発初回打ち合わせ

レコードの内容を編集

鉛筆アイコンの横、書類アイコンをクリックすると、今見ているレコードを複製して新しいレコードを作ることができます。
複製するとすべての項目がコピーされた状態でレコード登録画面になりますので、必要に応じて内容を変更して保存しましょう。

コムデック 対面開発初回打ち合わせ

レコードを複製

削除したいときには、「…」アイコンをクリックするとメニューが表示されますので、その中から「レコードを削除」を選びます。

コムデック 対面開発初回打ち合わせ

登録されているこのデータに対して、コメントを行うことも可能です。

コムデック 対面開発初回打ち合わせ
他にも、いつ誰がどのレコードを編集したのかの履歴も自動で保存されています。

コムデック 対面開発初回打ち合わせ

 

ステップ4.エクセルから商品マスタアプリを作ろう!

ここで、ミツ株式会社の西村社長さまより、「商品名や商品コードは自分で入力するのではなく、自動で入るようにしたい」とのご要望がありました。
それこそ、まさにkintoneが得意とするところです。

日報を作る際、これまでであれば既に商品名やコードが印刷されたものを使っていたため、自分でいちいち入力するのでは手間がかかってしまいます。
加えて、人による入力のブレ等を無くすことを考えても、商品名等の基本情報は自動入力したいとのことでした。

ミツ株式会社さまでは、kintone導入以前から販売管理システムを利用して在庫管理等を行っていました。
そのため、販売管理システムには商品や原材料のマスタデータが登録されています。

マスタデータから商品名とコードを参照して自動入力する、これを実現できるのがkintoneの「ルックアップ」機能です。

ルックアップについて、詳しくはこちらの記事で解説しています。
▼kintoneのルックアップ機能設定方法、よくあるご要望を徹底解説!

ルックアップを設定するため、まずは「商品のマスタデータ」を登録しておくアプリを作ります。
今回は、販売管理システムに登録されている商品マスタデータをエクセルに書き出し、「エクセルを読み込んで作成」からアプリ化しました。

コムデック 対面開発初回打ち合わせ
エクセルを読み込むと、内容に応じて自動で「文字列」「数値」「日付」「ドロップダウン」といった項目が割り当てられます。

コムデック 対面開発初回打ち合わせ

今回は、日報アプリで参照したい情報だけに絞ってアプリを作成しました。

コムデック 対面開発初回打ち合わせ
このやり方で作ると、最初からアプリにデータが入った状態で作成されます。

一度アプリを作成して、そのあと一気にデータを登録することもできますが、その場合には登録するデータkintoneアプリのフィールド種類が合致する必要がありますので、最初の内は既にあるエクセルからそのまま作成するのが良いでしょう。

コムデック 対面開発初回打ち合わせ

アプリ作成と同時に登録された商品マスタデータ

ステップ5.マスタからデータ参照、ルックアップ機能を設定してみよう!

商品マスタアプリを作ったら、今度はそのデータを参照したい日報アプリ側にルックアップ項目を設定していきます。
一度作ったアプリを修正する時は、アプリの一覧画面で歯車のボタンを押してください。

コムデック 対面開発初回打ち合わせ
「ルックアップ」フィールドを配置し、参照元となるアプリと、参照してくるキーとなるフィールドを指定します。
この時、商品名と一緒にコピーしてくる項目も指定することができますので、「商品コード」を参照するようにしました。

コムデック 対面開発初回打ち合わせ

ルックアップ項目の設定ができたら、アプリを公開します。
ルックアップ項目では、「取得」を押すことで参照元のアプリのレコードを一覧表示してくれます。

また、検索ワードを入れて「取得」を押すと、そのキーワードに合致するものだけが一覧表示されるので、ミツ株式会社さまでは商品マスタアプリであらかじめ「商品コード+商品名」の項目を作成しておき、商品名の一部でも、商品コードでも参照ができるような仕組みにしています。

コムデック 対面開発初回打ち合わせ

商品名だけではなく、商品コードと商品名を一つの項目にすることで検索利便性を上げている

 

これにより、日報アプリから商品マスタアプリを参照し、自動で商品名と商品コードを入力できるようになりました。

コムデック 対面開発初回打ち合わせ

ステップ6.複数行のデータを入れたい…そんな時にはテーブルデータ

ミツ株式会社さまの日報のように、同じ書式の中に「複数行」のデータを入れたいケースは多々あります。
状況によっては一行だけで終わることもありますし、二行、三行と増えることももちろんあるでしょう。

そんな時、kintoneでは「サブテーブル」機能を使って複数行の書式を柔軟に設定することができます。

コムデック 対面開発初回打ち合わせ

テーブルデータにすることで、任意の行数のデータを一つのレコードの中に追加していくことができます。

コムデック 対面開発初回打ち合わせ

サブテーブルの設定方法も簡単です。
まずサブテーブルにしたい項目を横に並べ、その列に表示される表アイコンをクリックします。項目は後からでも追加可能ですが、一度テーブルにしたものを解体することはできませんコムデック 対面開発初回打ち合わせ
あとは「この行をテーブルにする」を押せば、プラスボタンで行を追加できるサブテーブルの出来上がりです。コムデック 対面開発初回打ち合わせ

ステップ7.自動計算もできるんです!計算フィールドを設定しよう!

日報によくある「作業時間」、紙だと自分で開始時間と終了時間の差を見て算出してもらうしかありません。
しかし、kintoneならそこも自動計算可能!「計算」フィールドでエクセルの関数に近い形の計算設定ができます。

まず、計算の下準備として計算に使いたい項目の「フィールドコード」を変更します。
kintoneでは、項目を配置した段階では以下のように規則的につけられたフィールドコードを持ちます。

コムデック 対面開発初回打ち合わせ

項目設定画面の一番下にあります。項目名とは別のものです。

もちろんこのままでも計算には使えるのですが、あとから 計算式を見たときにどのフィールドとどのフィールドを参照しているのかわからない……!となるのを防ぐため、ミツ株式会社さまでは各項目名とリンクしたフィールドコードを設定していきました。

コムデック 対面開発初回打ち合わせ

フィールドコードを設定したら、計算フィールドで先ほど設定したフィールドコードと演算子を組み合わせて計算式を入力していきます。
ミツ株式会社さまでは、「開始時刻」と「終了時刻」の差から、実際の作業時間を計算したいため、計算式は「終了時刻-開始時刻」、表示形式は「時間」を指定しています。

コムデック 対面開発初回打ち合わせ
これにより、入力した時間に応じて自動で作業時間が計算されるようになりました。

コムデック 対面開発初回打ち合わせ

日報アプリが完成!「自分で作る」を後押しするkintone対面開発

ミツ株式会社さまの初回対面開発で作成したアプリは以下のような形となりました!

従来の日報の書式をほぼそのまま置き換えていますが、ルックアップや自動計算を使うことで、紙よりも入力しやすくまた手間なく便利に使えるものになっています。

コムデック 対面開発初回打ち合わせ

kintone対面開発では、課題をヒアリングしてコムデックで構築をしていくことも、ミツ株式会社さまのように機能等をご説明しながらアプリ作成そのものをご支援させていただくことも可能です。

コムデックのおすすめは、自社での内製化
自分たちでアプリを作れる、修正できることは、目まぐるしく変わる社会や業務に適応していくために是非とも社内で持っておきたい能力です。

ミツ株式会社さまの初回対面開発では、実際に社長さまにアプリをつくっていただくことで、kintoneにどんな機能があるのか、それを使うことでどう自社の業務が変わるのかを体感いただくことができました。
今後はまずすべての日報のkintone化を進め、入退室の管理や作業スケジュール管理、そして販売管理との在庫連動等、会社全体のデジタル化を進めていきたいとのことです。

kintoneアプリを自分で作成するための7ステップまとめ

今回ご紹介した、kitnoneを自社構築するための7つのステップをまとめました。
「どうやってアプリを作ったらいいかわからない……」そんなときに是非ご活用ください!

ステップ1.まずはフィールドを配置してアプリを公開してみよう

…いきなり全ての項目をアプリに配置する必要はありません。まずはとにかく「フィールドを配置して編集してみる」「アプリを公開してみる」ところから!

ステップ2.アプリができたら入力してみよう!

…レコードの登録、編集、複製等、「kintoneでできること」を体感しましょう!

ステップ3.ポータル・一覧・詳細…kintoneの基本構造を知ろう

…ひとまずアプリを公開したら、いったんトップページに戻ってみましょう。

ステップ4.エクセルから商品マスタアプリを作ろう!

…ここから少しレベルアップ!「ルックアップ」を使うための下準備をしましょう。

ステップ5.マスタからデータ参照、ルックアップ機能を設定してみよう!

…ルックアップを設定して、「自動入力」の便利さを体感してください。

ステップ6.複数行のデータを入れたい…そんな時にはテーブルデータ

…さらに応用編、「複数行のデータ」を入力するフォームを作ってみましょう

ステップ7.自動計算もできるんです!計算フィールドを設定しよう!

…項目と項目を足したり引いたり掛けたり、自動計算の設定をしてみましょう!

 

この記事を書いた人

西道涼

『クラウドサービスの先導者』

日本人の心のふるさとである”三重県伊勢市”を拠点に、中小企業のDX化を支援しています。 主に中小企業のクラウドサービスの提案から導入支援まで、一貫してサポートさせていただいております。 たくさんのクラウドサービスが普及する中、どのクラウドサービスが自社に合っているのか…お悩みではありませんか? 是非一度御社の理想をお聞かせください。ぴったりのクラウドサービスをご提案させていただきます!

日本人の心のふるさとである”三重県伊勢市”を拠点に、中小企業のDX化を支援しています。 主に中小企業のクラウドサービスの提案から導入支援まで、一貫してサポートさせていただいております。 たくさんのクラウドサービスが普及する中、どのクラウドサービスが自社に合っているのか…お悩みではありませんか? 是非一度御社の理想をお聞かせください。ぴったりのクラウドサービスをご提案させていただきます!

IT導入のお悩みなら、
コムデックラボ

まずはお気軽にお問い合わせください。

0596-72-8020
(平日:9:00〜17:30まで)