アプリ作成チュートリアル ~ 作ってみよう名刺管理アプリ ~ 第 1.0 版平成 28 年 11 月 1 日制定 株式会社中電シーティーアイ
変更履歴 版数変更日変更内容 1.0 2016/11/1 初版設定 1.1 2018/9/1 名称変更
目次 1 はじめに... 1 1.1 本書の位置付... 1 1.2 名刺管理アプリ... 1 2 ログイン... 3 3 データベースの設定... 4 3.1 作成するデータベースの説明... 4 3.2 データベース設定方法... 5 4 アプリ設定新規作成... 9 5 アプリ設定一覧 登録... 11 5.1 データ一覧表示画面の設定... 11 5.2 新規データ入力画面の設定... 14 5.3 新規データ確認画面の設定... 16 5.4 フローの設定... 17 5.4.1 次のアプリ部品の設定... 18 5.4.2 ボタンの追加... 19 5.4.3 全フローの設定... 20 5.5 動作確認... 21 ( 補足 ) 正常に動作していない場合の修正方法... 23 6 アプリ設定詳細 修正 削除... 24 6.1 アプリ部品の設定... 25 6.1.1 データ詳細表示画面の設定... 25 6.1.2 更新データ入力画面 更新データ確認画面の設定... 26 6.1.3 データ一覧表示画面の設定... 28 6.2 フローの設定... 29 6.3 動作確認... 29 7 アプリ機能の改良... 30 7.1 自動入力の設定... 30 7.2 データの必須チェック... 31 7.3 データ入力画面に登録した画像を表示する... 32 7.4 データの削除の前に確認ダイアログを表示する... 33
1 はじめに 1.1 本書の位置付 想定読者 : アプリ作成者 本書は イット builder で名刺管理アプリを作成する流れについて示す 各項目においての詳細な説明は イット builder アプリ作成ガイドブックなど マニュアルに記載しているため本書では説明しない 1.2 名刺管理アプリ 交換した名刺の情報を管理するアプリケーションである 名刺データの登録 修正 削除 閲覧をすることができる アプリを起動するとデータ一覧画面が表示され 新規登録か登録データの詳細を閲覧できる 新規登録画面でデータを入力するとデータ確認画面に移動する データ確認画面では登録ボタンを押せばデータが登録されて一覧画面に移動し 戻るボタンを押せば登録データを入力しなおすことができる 登録データの詳細表示画面では一覧画面に戻るボタンと 今閲覧しているデータを修正するボタン 今閲覧しているデータの削除ボタンの 3 つがある データの修正ボタンを押すと修正データ入力画面に移動する データの修正は新規登録と同様に入力画面と 入力データ確認画面で成り立っている データの削除ボタンを押すと確認ダイアログを表示し データを削除した後で一覧画面に移動する 以上をまとめたものが下図である データ一覧 詳細表示 1
まずはデータの登録 閲覧を行う部分のみを作成する アプリケーションで使用するデータベースと 必要なアプリ作成を行う 下図の赤枠で囲まれている部分をまず作成し 残りの部分は 6 アプリ設定 詳細 修正 削除 で設定する データ一覧 詳細表示 2
2 ログイン アプリ作成 URL にアクセスする ログイン ID パスワードを入力し [ ログイン ] をクリックする 3
3 データベースの設定 3.1 作成するデータベースの説明 名刺管理アプリで扱うデータを格納するデータベースを作成する データベース名は 名刺管理 とす る データ項目は下表の通り 項目名 データ項目種別 説明 会社名 テキスト (1 行 ) 名刺交換相手の所属する会社名 部署名 テキスト (1 行 ) 名刺交換相手の所属する部署名 役職名 テキスト (1 行 ) 名刺交換相手の役職名 お名前 テキスト (1 行 ) 名刺交換相手の名前 名刺画像 ファイル 名刺交換相手の名刺を撮影またはスキャンした画像 交換日 日付 実際に名刺を交換した日付 登録日 日付 名刺データを登録した日付 交換者 テキスト (1 行 ) 名刺を交換した人の名前 メモ テキスト ( 複数行 ) メモ欄 4
3.2 データベース設定方法 画面左上のボタンをクリックしメニューを表示させる クリックする データベースの [ 新規作成 ] をクリックする [ 新規作成 ] を クリックする データベース名に 名刺管理 と入力し [ 新規作成 ] をクリックする [ 新規作成 ] をクリックする 5
[ 追加 ] をクリックする クリックする データ項目をクリックする 追加する項目をクリックする 追加するデータ項目は 4 ページの表を参照 6
項目を追加したら項目名を設定し [ 変更 ] をクリックする 項目種別名が 初期設定される テキスト (1 行 ) 項目名を設定 会社名 [ 変更 ] をクリックする すべてのデータ項目において 項目名の設定を行う 7
下図のように全項目の項目名が変更されたら設定完了である 8
4 アプリ設定新規作成 メニューからアプリ設定の [ 新規作成 ] をクリックする [ 新規作成 ] を クリックする Web アプリの新規作成を選択し [ 次へ ] をクリックする [ 次へ ] を クリックする 9
アプリ名や URL 等を入力し [ 作成 ] をクリックする アプリ名を入力する URL を入力する [ 作成 ] をクリックする 入力可能な範囲であれば アプリ名や URL は自由に入力してよい 画面デザインは 標準 PC ユーザーマスター利用は しない に設定する 10
5 アプリ設定一覧 登録 5.1 データ一覧表示画面の設定 [ 追加 ] をクリックする データ一覧表示画面をクリックする データベースを選択し [ 追加 ] をクリックする [ 追加 ] をクリックする 使用するデータベースは 3 章で作成した名刺管理を指定する 以下 全て同様 11
[ 一覧表示項目 ] をクリックする クリックする [ 追加 ] をクリックする クリックする 表示する一覧表示項目のチェックボックスをオンにし [ 設定 ] をクリックする チェックボックスをオンにする [ 設定 ] をクリックする 会社名 部署名 役職名 お名前を選択してください 第 1 ソートキーを 登録日 降順 に設定する 12
[ 変更 ] をクリックする [ 変更 ] をクリックする 13
5.2 新規データ入力画面の設定 [ 追加 ] をクリックし データ入力画面を追加する ( 5.1 データ一覧表示画面の設定 を参照 ) アプリ部品名を 新規データ入力画面 と変更した後 [ 入力項目 ] をクリックする [ 追加 ] をクリックする 入力する項目のチェックボックスをオンにし [ 設定 ] をクリックする 入力項目には全データ項目を設 定する このチェックボックスをクリックすると 全選択または全解除の状態にします チェックボックスをオンにする [ 設定 ] をクリックする 14
[ 変更 ] をクリックする [ 変更 ] をクリックする 15
5.3 新規データ確認画面の設定 [ 追加 ] をクリックし 入力データ確認画面を追加する ( 5.2 データ一覧表示画面の設定 を参照 ) アプリ部品名を 新規データ確認画面 と変更した後 [ 表示項目 ] をクリックする [ 追加 ] をクリックし 表示項目を設定する 表示項目には全データ項目を設定する ( 5.2 新規データ入力画面の設定 にて 入力項目を追加した時と同様に行う ) [ 変更 ] をクリックする [ 変更 ] をクリックする 16
5.4 フローの設定 [ フロー ] をクリックする [ フロー ] をクリックする フロー設定画面が表示される 17
5.4.1 次のアプリ部品の設定 Web アプリ起動時の次のアプリ部品にデータ一覧表示画面を指定する [ 変更 ] をクリックする [ 変更 ] をクリックする 18
5.4.2 ボタンの追加 アプリ部品からデータ一覧表示画面をクリックする クリックする テキストボックスに 新規登録 と入力し [ 追加 ] をクリックする 新規登録 と入力 クリックする ボタンが追加される 19
[ 変更 ] をクリックする クリックする 5.4.3 全フローの設定 下表を参考に次のアプリ部品を設定する アプリ部品 イベント 次のアプリ部品 Web アプリ起動 ( なし ) データ一覧表示画面 データ一覧表示画面 新規登録 新規データ入力画面 新規データ入力画面 次へ 新規データ確認画面 戻る データ一覧表示画面 新規データ確認画面登録データ一覧表示画面 戻る 新規データ入力画面 データ一覧表示画面に新規作成は初期状態では存在しないので 5.4.2 ボタンの追加 で説明して いるように作成する必要がある 新規データ入力画面の戻るについても同様 20
5.5 動作確認 画面右上のスイッチをクリックする 稼働中に切り替わったら アプリへのリンクをクリックする 実際に作成したアプリが 正常に画面遷移やデータ登録 閲覧ができたら完成 21
22
( 補足 ) 正常に動作していない場合の修正方法 イット builder ではアプリ実行中にアプリ部品に変更を加えることはできません 編集を行う場合 画 面右上のスイッチが 停止 になっていることを確認してください データ項目 アプリ部品 フローなどの設定が反映されていない場合各作業の最後に [ 変更 ] をクリックする というものがあります 各設定は変更ボタンをクリックすることによって保存されますので 変更ボタンを押さずに他のページに切り替えた場合は入力したものが破棄されています 必ず設定を行ったら変更ボタンをクリックしてください アプリで名刺のデータを入力時 全ての項目を空欄のままにしても登録ができてしまう場合 現段階の設定では 全ての項目が空欄であってもデータ登録ができるのが正常な動作です この問題の 修正は 7 章にて行いますので 次の章にお進みください 23
6 アプリ設定詳細 修正 削除 続いて データの詳細を閲覧する画面や 選択したデータの修正 削除を行う部分を作成する 下図の赤枠で囲まれている部分が今回設定する部分である データ一覧 詳細表示 イット builder ではアプリ実行中にアプリ部品に変更を加えることはできません 編集を行う場合 画面右上のスイッチが 停止 になっていることを確認してください 24
6.1 アプリ部品の設定 6.1.1 データ詳細表示画面の設定 アプリ設定画面の [ 追加 ] をクリックし データ詳細表示画面を追加する ( データ一覧表示画面を追加した時と同様に行う ) 削除機能の利用を利用するに変更する クリックする 表示項目をクリックし 表示項目の設定を行う ( データ一覧表示画面で設定した時と同様に行う ) [ 変更 ] をクリックする 25
6.1.2 更新データ入力画面 更新データ確認画面の設定 5 章で作成した新規データ入力画面と 新規データ確認画面の横のチェックボックスをオンにし [ コ ピー ] をクリックする [ コピー ] を クリックする チェックボックスを オンにする 26
作成された コピー ~ 新規データ入力画面 を選択し アプリ部品名を 更新データ入力画面 データ操作を 更新データを扱う に切り替えた後 [ 変更 ] をクリックする クリックする コピー ~ 新規データ確認画面 を選択し アプリ部品名を 更新データ確認画面 に設定し [ 変更 ] をクリックする ( 更新データ入力画面で設定した時と同様に行う ) 27
6.1.3 データ一覧表示画面の設定 データ一覧表示画面を選択し 表示項目一覧を表示する お名前 のリンク有無のチェックボックスをオンにし [ 変更 ] をクリックする クリックする チェックボックスを オンにする 28
6.2 フローの設定 下表を参考にフローを追加設定する アプリ部品 イベント 次のアプリ部品 データ一覧表示画面 項目リンク データ詳細表示画面 データ詳細表示画面 戻る データ一覧表示画面 削除 更新 データ一覧表示画面 更新データ入力画面 更新データ入力画面次へ更新データ確認画面 戻る データ詳細表示画面 更新データ確認画面登録データ一覧表示画面 戻る 更新データ入力画面 データ表示画面の更新や 更新データ入力画面の戻るは初期状態では存在しないので 5.4 フロー の設定 のデータ一覧表示画面で行った時と同様に 作成する必要がある 6.3 動作確認 5.5 動作確認 と同様に行う 29
7 アプリ機能の改良 この章では 新規データ入力画面 と 更新データ入力画面 を 単に データ入力画面 と呼ぶ 7.1 自動入力の設定 今回作成したアプリでは登録日を手動で設定しなくてはならないが 登録日はアプリを使っているその 時の日付が入力されるのが普通である ここでは 日付の自動入力の設定を行う データ入力画面の入力項目一覧を表示し 登録日の [ 編集 ] をクリックする 初期値を システム日時 に変更し画面右上の [ 設定 ] をクリックする [ 変更 ] をクリックする (6 章までのデータ入力画面で設定した時と同様に行う ) 30
7.2 データの必須チェック 現段階では名前や会社名などが空白の状態でもデータ登録ができてしまう しかし 6 章までで作成した アプリの設定では 名前が未入力の状態だとデータの更新もデータの削除もできないため修正が必要で ある ここでは 名前を必須入力にするための設定を行う データ入力画面の入力項目一覧を表示し お名前の [ 編集 ] をクリックする (7.1 自動入力の設定と同様に行う ) 入力チェックの必須チェックを する に変更し 画面右上の [ 設定 ] をクリックする [ 変更 ] をクリックする (6 章までのデータ入力画面で設定した時と同様に行う ) 31
7.3 データ入力画面に登録した画像を表示する ここでは登録画像をデータ入力画面で表示する設定を行う データ入力画面の入力項目一覧を表示し お名前の [ 編集 ] をクリックする (6.1 自動入力の設定と同様に行う ) 画像イメージを表示するにチェックを入れ 右上の [ 設定 ] をクリックする [ 変更 ] をクリックする (6 章までのデータ入力画面で設定した時と同様に行う ) この設定はデータ入力画面だけでなく 登録データ確認画面でも行うことができる 32
7.4 データの削除の前に確認ダイアログを表示する 今回作成したアプリでは 削除ボタンを押すと即時データを削除してしまう ここでは データ削除ボ タンを押した際に確認ダイアログを表示するように設定する データ詳細画面のフローを表示し 削除の右にある [ 編集 ] をクリックする ダイアログの表示を確認ダイアログに設定し テキストボックスに確認ダイアログで表示するテキス トを設定 その後 [ 設定 ] をクリックする [ 変更 ] をクリックする (6 章までのデータ入力画面で設定した時と同様に行う ) 33