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

プログラミング不要で自社の業務に合わせて様々なアプリを作ることができるkintone(キントーン)。
「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．マスタからデータ参照、ルックアップ機能を設定してみよう！

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

「ルックアップ」フィールドを配置し、参照元となるアプリと、参照してくるキーとなるフィールドを指定します。
この時、商品名と一緒にコピーしてくる項目も指定することができますので、「商品コード」を参照するようにしました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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