名刺アプリを作ってみる - 作成手順、データ入力、閲覧方法を知る

前回は、kintoneの概要と「無料お試し」の申し込み手順について紹介した。今回から「kintoneの具体的な使い方」を紹介していこう。まずは、自分でアプリを作成してみよう。アプリを作成できたら、データの入力や閲覧を試してみるとよい。kintoneの基本的なサービス内容を、より鮮明に理解できるはずだ。

kintoneを使ってみよう！

前回で紹介したように、「無料お試し」を申し込むと最初の30日間は誰でも無料でkintoneを使えるようになる。ということで、操作しながらkintoneの特長を確認していこう。

今回は例として、取引先などの「名刺情報」を管理するアプリを作成する。実際にアプリを作成してみれば、「業務アプリを簡単に作成できる」ということを実感できるだろう。

• 

  アプリの作成手順とデータの入力、閲覧

あわせて、作成したアプリにデータを入力したり、入力したデータを閲覧したりするときの操作手順も紹介しておこう。

アプリの作成手順

早速、アプリの作成手順を紹介していこう。新しいアプリを作成するときは、「アプリ」の領域にある「＋」アイコンをクリックすればよい。

• 

  アプリの作成開始

すると、アプリの作成方法を選択する画面が表示される。自分でゼロからアプリを作成するときは「はじめから作成」をクリックする。

• 

  作成方法の選択

アプリの作成画面（フォームの編集画面）が表示される。まずは、アプリの「アイコン」を指定しよう。アイコンの部分をクリックする。

• 

  アイコンの変更（1）

アイコンの一覧が表示されるので、好きな図柄を選択して「保存」ボタンをクリックする。そのほか、各自が所有する画像をアイコンとして指定することも可能となっている。この場合は「参照」をクリックして画像ファイルを指定すればよい。

• 

  アイコンの変更（2）

次に、アプリの名前を指定する。「新しいアプリ」の文字をドラッグして選択し、好きな名前に書き換える。

• 

  アプリ名の変更

続いては、フォーム画面（データの入力画面）を作成していく。最初に、“文字のデータ”を入力するテキストボックスを配置する方法から紹介していこう。「文字列（1行）」のパーツをフォーム画面にドラッグ＆ドロップする。

• 

  「文字列（1行）」の配置

フォーム画面に「文字列（1行）」のフィールドが配置されるので、「歯車」のアイコンをクリックして「設定」を選択する。

• 

  設定画面の呼び出し

「文字列（1行）」の設定画面が表示される。ここでは、テキストボックスの上に表示する「フィールド名」（項目名）を指定するのが基本だ。そのほか、このフィールドを必須項目に指定したり、文字数を制限したりする設定なども用意されている。これらは必要に応じて指定すればよい。

• 

  「文字列（1行）」の設定

同様の手順を繰り返して「文字列（1行）」のパーツを配置していくと、以下の図のようなフォーム画面を作成できる。なお、それぞれのテキストボックスは、右端をドラッグすることで「幅」を自由に変更できるようになっている。入力する内容に応じて適当な幅に変更しておくと、見やすいフォーム画面に仕上げられるだろう。

• 

  入力欄の配置とサイズ調整

URLや電話番号、メールアドレスといったデータの入力欄を作成するときは、「リンク」のパーツをドラッグ＆ドロップして配置する。こちらもテキストボックスを配置するパーツとなるが、「リンク」の場合は“入力したデータ”をリンクとして扱えるようになっている。「リンク」を配置できたら「歯車」のアイコンから「設定」を選択する。

• 

  「リンク」の配置

「リンク」の場合は、「フィールド名」に加えて「入力値の種類」を指定しなければならない。この設定を後から変更することはできないので、Webサイトのアドレス／電話番号／メールアドレスを間違えずに指定しておく必要がある。

• 

  「リンク」の設定

備考欄のように、“文章”を入力するためのテキストボックスを配置することも可能だ。この場合は、「文字列（複数行）」のパーツを配置してフィールド名を指定すればよい。なお、「文字列（複数行）」は、テキストボックスの「幅」だけでなく「高さ」も変更できる仕様になっている。

• 

  「文字列（複数行）」の配置、設定

そのほか、「ラジオボタン」や「チェックボックス」などを配置することも可能だ。ここでは「ラジオボタン」を配置する場合を例に操作手順を解説していこう。「ラジオボタン」のパーツをドラッグ＆ドロップして好きな位置に配置する。

• 

  「ラジオボタン」の配置

続いて、「歯車」のアイコンから「設定」を選択して設定画面を開く。「ラジオボタン」の場合は、「フィールド名」に加えて「項目と順番」、「並び」、「初期値」を指定する必要がある。もちろん、「＋」や「－」のアイコンをクリックして選択肢の数を変更することも可能だ。

• 

  「ラジオボタン」の設定

似たような手順で「複数選択」や「ドロップダウン」を配置することも可能となっている。念のため、それぞれの違いを簡単にまとめておこう。

◆ラジオボタン
選択肢の中から項目を1つ選んで選択する。
※どれか1つを必ず選択しなければならない。

◆チェックボックス
各項目をチェックして選択する。
※複数の項目を選択する、何も選択しない、といった操作も可能。

◆複数選択
一覧から項目を選んで選択する。
※複数の項目を選択する、何も選択しない、といった操作も可能。

◆ドロップダウン
一覧から項目を1つだけ選択する。
※複数選択は不可、「選択なし」の指定は可能。

そのほか、フォーム画面の見た目を整える「スペース」や「罫線」といったパーツも用意されている。

◆スペース
入力欄の間にスペース（間隔）を設けるパーツ。
※スペースの「幅」と「高さ」を自由に変更できる。

◆罫線
横方向の罫線を描画できるパーツ
※罫線の「長さ」は自由に変更できる。

以下の図は、先ほどのフォーム画面に「スペース」と「ドロップダウン」を追加した例だ。

• 

  「スペース」と「ドロップダウン」の配置、設定

必要な入力欄をすべて配置できたら「アプリを公開」ボタンをクリックする。以上で、アプリの作成は完了となる。

• 

  アプリの公開（編集内容の保存）

このように、フォーム画面をレイアウトして、各パーツを設定していくだけでアプリを作成できる仕組みになっている。今回の例では「名刺情報」を管理するアプリを作成したが、用途にあわせてフォーム画面の内容を自由に作成できるため、どんなアプリでも作成することが可能だ。

なお、フォームの編集画面には「計算」や「テーブル」、「ルックアップ」など、特別な機能を持つパーツも用意されている。これらの使い方については、次回以降に詳しく紹介していく予定だ。

データの入力

アプリを作成できたら、さっそく動作を確認してみよう。「ポータル」アイコンをクリックしてポータル画面に戻ると、「アプリの領域」に先ほど作成したアプリが追加されているのを確認できる。このアプリ名をクリックすると……、

• 

  ポータル画面に追加されたアプリ

そのアプリに登録されているデータが一覧表示される。とはいえ、まだアプリを作成した直後なのでデータは1件も登録されていない。新たにデータを登録するときは、画面右上にある「＋」アイコンをクリックすればよい。

• 

  新しいデータの登録

フォーム画面が表示され、各項目にデータを入力できるようになる。必要なデータをすべて入力できたら「保存」ボタンをクリックする。

• 

  データの入力と保存

閲覧用の画面に切り替わり、入力したデータが表示される。この画面にある「＋」アイコンをクリックして、次のデータ（レコード）を続けて入力していくことも可能だ。データの一覧画面に戻るときは、画面左上にある「アプリ名」のリンクをクリックする。

• 

  フォーム画面に表示されたデータ

データの一覧画面に戻ると、アプリに登録されているデータが一覧表示されているのを確認できる。今回は、全部で7件のデータ（レコード）を登録してみた。

• 

  アプリに登録されているデータの一覧

なお、画面右上にある「歯車」アイコンをクリックすると、アプリの作成時と同じ「フォームの編集画面」が表示され、アプリを再編集できるようになる。「テキストボックスの幅が小さかった」「データの入力欄が不足していた」といった場合に活用するとよいだろう。

このように、作成したアプリ（フォーム画面）を後から修正することも可能となっている。ただし、フォーム画面から入力欄を削除すると、そこに入力されていたデータも一緒に削除されてしまうことに注意しなければならない。

データの閲覧と修正

続いては、アプリに登録したデータを閲覧したり、修正したりするときの操作手順を紹介していこう。ポータル画面で「アプリ名」をクリックすると、データの一覧画面が表示される。ただし、項目数が多くて、すべてのデータを表示しきれないケースもある。

このような場合は、各列を区切る罫線を左右にドラッグすると「列の幅」を変更できる。また、データの上にマウスを移動させると、そのデータがポップアップ表示される仕組みになっている。この機能を使ってデータの内容を確認することも可能だ。

• 

  列幅の変更とポップアップ表示

データ（レコード）を1件ずつフォーム画面に表示したい場合は、各行の左端にあるアイコンをクリックすればよい（上図を参照）。すると、各レコードのデータをフォーム画面で閲覧できるようになる。

• 

  各レコードを1件ずつ表示（フォーム画面）

この画面でデータを修正することも可能だ。上図に示したアイコンをクリックすると、入力用のフォーム画面に切り替わり、各データを自由に修正できるようになる。その後、「保存」ボタンをクリックすると、修正後の状態でデータを上書き保存できる。

• 

  データの修正画面

このように、kintoneを使うと“プログラミングなし”で業務アプリを作成することが可能となる。特別な知識が必要になる訳ではないので、ある程度パソコンに慣れている方なら誰でもアプリを作成できるだろう。

ただし、現時点では、自分だけがkintoneを利用している状態になる。これではスマートフォンに「名刺情報」を登録している状態と大差がなく、kintoneの魅力が半減してしまう。kintoneの特長は、社内のスタッフ全員でアプリ（データ）を共有できること。ということで次回は、社内の同僚もkintoneを使えるように「ユーザーを追加する方法」を紹介していこう。