KBrowserによるKintone アプリの外部公開

# KBrowser とは？
- Kintone アプリのデータを手軽に公開・編集出来るシステムです。
- Kintone のユーザ登録不要です。（API アクセス用のユーザーは必要です）
- 表示フォーマットは、Kintone の設定情報から再現しますので、短時間で公開できます。
- KBrowser で月額費用・開発費を抑えられれば、Kintone アプリの導入がしやすくなります

PHP と JavaScript で作成されているため、安価なレンタルサーバーで稼働できます。

##KBrowser デモサイト
[KBrowser デモサイト](https://dgdg.sakura.ne.jp/kdemo/)
デモ用ID / パス : guest01 / test1234  

#KBrowser の画面
## 一覧画面
![1一覧画面.png](https://qiita-image-store.s3.amazonaws.com/0/100572/00964a6b-4187-9ff1-4b81-0d009417c2f5.png)
## 詳細画面
![２詳細画面.png](https://qiita-image-store.s3.amazonaws.com/0/100572/ffc8ccbb-4ab5-3823-c740-0d2b4911baf2.png)
## 編集画面
![3編集画面.png](https://qiita-image-store.s3.amazonaws.com/0/100572/b08c3a4d-7a1c-ac92-0c5e-6db73421f417.png)

入力支援機能が豊富です。
- エラー項目のみ表示可能
- サブテーブル複写機能
- サブテーブル行位置・列位置変更
- サブテーブルの先頭行に追加可能

![5サブテーブル操作.png](https://qiita-image-store.s3.amazonaws.com/0/100572/68dfecb9-72aa-8769-1f39-cb05c9fb8780.png)

#サブテーブル行コピー機能
サブテーブル行の追加・複写・編集・削除が可能です。
追加または、複写された行は黄色で表示され区別できます。
添付ファイルは、コピーされません。
![行コピー.png](https://qiita-image-store.s3.amazonaws.com/0/100572/47b871cd-7049-1bbb-1efa-0d9897c68fc5.png)

#サブテーブル行抽出と列移動
編集するデータ行を指定条件で抽出して、項目列をドラッグ＆ドロップ移動することで、対象項目の編集をしやすく出来ます。
サブテーブルの抽出条件は文字単位。空白で and 条件になります。>=等は、指定できません。

![行抽出と列移動.png](https://qiita-image-store.s3.amazonaws.com/0/100572/feb32ac2-99ef-6dc2-364f-90b9493c7c4d.png)

#サブテーブル行移動
編集画面でドラッグ＆ドロップで行移動後、「保存」すると行位置がレコードに反映されます。

![行移動1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/f43586ae-c5b5-51ce-dcd1-23006bfb349a.png)

# ルックアップ
「ルックアップ項目」で、データの表示・選択出来ます。
データ選択後に、ルックアップコピー対象項目に反映されます。

![6ルックアップ.png](https://qiita-image-store.s3.amazonaws.com/0/100572/85e6929c-f3b0-6b21-f3b7-0550c2d0330b.png)

#関連テーブル
![関連テーブル.png](https://qiita-image-store.s3.amazonaws.com/0/100572/0187f901-68d2-0a62-7794-f96bd6e5ae31.png)

#エラーチェックとエラー行表示
- 「保存」で、エラーがある場合に該当行がピンクで表示されます。
- 「エラーチェック」をクリックすると、エラー行のみ表示します。

![エラー表示1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/9ed0af66-bce8-2133-389f-3b7471b06576.png)

#ファイルアップロード機能
既存の添付ファイルに追加も可能です。
![ファイルアップロード1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/c15d42b2-9877-248b-3d3a-dd05c138bd75.png)

#印刷機能 ( PDF 出力可 )
Chorme ブラウザー限定ですが、ヘッダ部を除いた印刷が可能です。
※ IE, FireFox では、帳票タイトルなどが印字されます。

![印刷1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/ee95d90a-b661-7029-7897-dc0d69dfe2ab.png)

#削除確認画面
削除指示時に確認画面を表示します。

![削除1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/d654eae5-60c4-4951-57c8-b8064ae21ecd.png)

#一覧画面の抽出条件指定機能
検索キーを指定して、対象データを抽出できます。

- テキスト項目は、Kintone API の like 条件で、単語単位の検索になります。
- 数字と日付時間項目は、>,>=,=,<=, の条件を指定できます。(検索キーの直前に空白を入れずに指定すると、対象項目は自動判定します)
- 空白で区切るとAND 条件になります。

![一覧抽出条件.png](https://qiita-image-store.s3.amazonaws.com/0/100572/fa56d971-62a3-6da1-1758-cb63e3f7f297.png)

# メニュー例 
１つの職責に、６メニューグループくらいまで割り当て出来ます。
![8メニュー.png](https://qiita-image-store.s3.amazonaws.com/0/100572/10880ce1-3286-6acb-acb8-fa208bf2339f.png)

#更新・照会履歴情報の取得
メニュー設定により、更新・照会履歴の取得条件を設定出来ます。
照会履歴は、レコード単位か REVISION 単位を選択出来ます。
REVISION 指定の場合、更新ごとに照会履歴が取得されます。
![更新・照会履歴1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/93569c02-625b-1157-5c39-7d3827f148fc.png)

#更新・照会履歴情報の表示
KBrowserユーザが対象レコードを更新・参照したか確認出来ます。
照会履歴は、kintoneアプリで関連レコードとして表示出来ます。

![照会履歴の表示1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/160f7814-f63e-8ffa-f48c-078e41ec7bc5.png)

# 比較画面
表示フォーマットは、Kintone の設定情報から再現しますので、違和感が少なくそのまま使用できます。
![4比較.png](https://qiita-image-store.s3.amazonaws.com/0/100572/7e714aeb-9a4b-8bb0-8f70-8ecd779eebe8.png)

# システム構成
![7KBrowserシステム構成.png](https://qiita-image-store.s3.amazonaws.com/0/100572/61244a43-d206-1a6a-74b9-c0a3aedf9e4f.png)

#ユーザ別メニューの設定と表示
ユーザー別メニューは、Kintone の職責・メニューアプリ情報から表示します
![ユーザメニュー1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/706e0b09-9071-6eb2-471e-12c7598ef0cd.png)

#メニュー別非表示項目設定
メニュー設定で、非表示項目を設定出来ます。
職責毎に表示出来る項目を選択して使用します。
![メニュー別設定1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/5ace7a40-9e6b-720f-0653-b399df2768c7.png)
#カスタムビューの設定
専用のphpプログラムを開発して、カスタムビューとしてメニューに設定出来ます。

![カスタムビュー1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/92912075-dfa9-ab86-ec39-f89b33503655.png)

#KBrowser のユーザ登録
Kintone の KBRユーザアプリに、ユーザ登録し職責を割り当てます。
職責に割り当てられているメニューが使用できます。

![ユーザ登録1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/2d0eaa5e-cdd2-568d-2d43-d649e221732c.png)


#アプリ詳細設定情報の収集・送信
アプリの詳細画面を表示して、Sendボタンをクリックすると、設定が完了します。
公開するアプリ毎に、Send ボタンをクリックします。
項目の追加・変更などがあった場合は、再送信を行うだけで反映されます。

![アプリ詳細設定情報1.png](https://qiita-image-store.s3.amazonaws.com/0/100572/a83f9179-58ce-5766-c8b2-dc18eed13a12.png)

- Downloadアプリ詳細設定情報のダウンロード（保守用）
- Sendアプリ詳細設定情報の送信
- Link ShowKBrowser での表示確認

#アプリ一覧設定情報の収集・送信
アプリの一覧を選択して、Sendボタンをクリックすると、設定が完了します。
公開する一覧毎に、Send ボタンをクリックします。
項目変更などがあった場合は、再送信を行います。

![アプリ一覧設定情報.png](https://qiita-image-store.s3.amazonaws.com/0/100572/4938d33f-86b0-f463-73cd-379088ae6da9.png)