概要

Googleドライブ上から、データベース・アプリケーションを動作させるフロントエンドのUI／UXフレームワーク＆サーバーサイドDriveBase APIサービスに、開発時のフォームデザイナー（統合開発環境／IDE）を加えたGoogleドライブ拡張機能です。

DriveBaseは、フォームデザイナーにて作成された、HTML5のフォームコンポーネントとクリック時などのユーザーアクション毎に記述されたスクリプトを、実行時にDriveBaseから読み出して解析し、ブラウザで実行します。

• 開発時は、DriveBaseフォームデザイナー（ブラウザ上での統合開発環境／IDE）にて、HTML情報、実行スクリプトを、フォームファイルとして作成します。（※ DriveBaseフォームデザイナーはGoogle Chromeのみ対応）

• 実行時(DriveBaseランタイム)は、ブラウザのスクリプトエンジンにて、フォームファイルのHTML情報、実行時用スクリプトを読出・解析する事により、業務データベースアプリケーションとして動作します。(Chrome、FireFox、Safari、Edge、Operaのモダンブラウザ対応）

構成と動作

Googleドライブ上のDriveBase専用ファイル（フォームファイル）は、ユーザー及びDriveBaseアプリ開発者側から見て、唯一存在するDriveBase用の実行・HTML設計・スクリプトファイルです。

• Googleドライブ上に一般のファイルとして置かれます。

• ファイルの拡張子は.dbf、mimeType（ドキュメント識別）は、application/vnd.uapps.drivebaseとなります。

• HTML構成、アプリケーションプログラム（JavaScript）が、全てこのファイルに暗号化され、入っています。

インストール

• Googleドライブの設定アイコンをクリックし、”設定”を選択します。

• 設定ダイアログの"アプリの管理"メニューをクリックします。

• "アプリを追加"のリンクをクリックし、検索ボックスに"DriveApps"(契約ドメインによって、UT DriveAppsかDSK DriveAppsいずれか)と入力し、Enterキーにて検索し、表示させ、ドメインインストールもしくは個別インストールを選択します。

• OAuth認証を行ったら、インストールは完了です。Googleドライブの"新規"から、DriveApps（DriveBaseが同梱されているアプリ）で、DriveBaseフォームファイルが作成できます。

フォームファイルの作成方法

• Googleドライブの”新規”→”その他”→”UT DriveApps”又は"DSK DriveApps"を選択します。

• アカウント利用認証を行い（マルチアカウントで利用時のみ）、DApps選択画面にて、DriveBaseを選択します（画像はVer 1.00のもの）。Ver 1.03以降は、DriveBaseを選択後、"新規フォームの作成"アイコンをクリックして下さい。

• UIデザインはMS-VisualStudioのようにHTMLのコンポーネント配置と、配置されたコンポーネントのプロパティ設定で行います（画像はVer1.00のもの）。

• 保存したフォームをダブルクリック（右クリックからXX DriveAppsを選択でも可）すると、実行されます。

DriveBaseのデータベース

• DriveBaseのデータベースはMySQL5.7を利用します。

• 作成されるデータベースはユーザーが利用するドメイン事に変更されます。複数ドメインで一つのデータベースにアクセスするには事業者側で設定が必要です。

• データベースに作成されるテーブル（デザイナー上でD&Dで配置した項目のfieldTypeプロパティをDBFieldにした時に、DBTableNamesというプロパティに入力した値で実行時に自動で作成されます）は、全て”id”、”value”の２つの列のみ（プライマリキーはこの”id”列になります）のテーブルです。

• 保存するする全てのデータ（fieldTypeがDBField）は、全てJSONObject型に変換され、”value”というJSON型の列に入ります。

• MySQL5.7のJSON型は、JSONアクセスを指定したSQL文を書くことが可能で、上記例では、

select * from 社員テーブル where json_extract(value,'$.[よみがな]’) like 'やまだ%'

の、ように、"やまだ"さんでlike条件を記述したSQL文を発行する事が可能です（"は[や、]で置き換える）。

但し、DriveBaseでは、一般的なSQLの書き方を模倣する事が出来て、

select * from 社員テーブル where "よみがな" like '%やまだ%'

のように、JSONKeyNameに指定した項目はダブルコーテーションで囲めば、通常のRDB列に対してアクセスする様な記述が可能です（一部制限あり）。

DriveBaseの、データベースに対する考え方は"列指向データベース"という概念に基づいています。メリットとしては、RDBアクセスとNoSQL的な予め列を定義しなくてもよい、という側面を持ちます。

データベーステーブルとDriveBase項目の連携

• 画面をデザインモードに変更し、項目を選択して、プロパティを表示します。

テーブルへの保存

• データベースへ書き込む項目の設定は、各配置コンポーネントに、fieldType="DBField"、DBTableNames="テーブル名"とJSONKeyName="RDBでは列名に該当するJSONキー名"をプロパティに指定して終了です。この状態で、DriveBaseのデータ登録API(_db.insertDBData())を呼び出せば、DBTableNamesに指定したテーブルへ登録が行われます。

• 実行してデータが保存されるか確認してみます。

一覧表の作成

• 登録されたデータを一覧表示してみます。DriveBaseでは、HTMLのtableを利用し、その中に、DriveBaseコンポーネントのラベル等を組み合わせることにより、実現できます。

• テーブルに組み込む、DriveBaseラベル等をキャンバスへ配置した後、そのプロパティ、tableProperty.id="組み込むテーブルのid"、tableProperty.row="body（データ行）またはhead（見出し）"、tableProperty.columnNo="組み込む列位置"を指定し、テーブル表示を完成させます。

• テーブルのプロパティ、row="テーブル行数（ヘッダー行数＋明細繰り返し行数）"を設定します。この値に"max"と指定すれば、外枠全部を使って、表示する表が作成できます。行数を"2"とした場合、ヘッダーと明細のみのテーブルとなり、明細はデータが存在する限りスクロールし続けるタイプの表となります。但し、データ量が多いと初期読み込みに時間がかかるので注意が必要です。

• 検索機能を付与します。検索は、テキストコンポーネントを配置し、fieldType="DBSearchField"、DBTableNames="テーブル名"とJSONKeyName="検索するRDBでは列名に該当するJSONキー名"と設定すれば、部分一致で検索するフィールドが完成します。

• 検索を実行します。

• よみがな検索を実行してみます。

画面遷移

• フォームファイルが２つ出来たので、この２つのファイルを新規作成ボタン押下で連携させてみます（_db.moveTo("遷移先フォームID")。Ver 1.04以降では、"アクションを選択"から、UIで設定する事が可能です）。

• 明細行をクリックして、既存データの更新を行います。

• 最後に入力用のフォームにて、既存データ呼び出しと更新処理(update)を記述します。

DriveBaseスクリプト

• DriveBaseのスクリプトは、通常のJavaScript(利用ブラウザに依存したECMAScriptバージョン）が記述できます。

• DriveBaseスクリプトはサーバーサイドの処理を、Node.jsのようにJavaScriptスクリプトで書くものではなく、サーバー側に予め用意されているWebサービス呼び出しを制御するフロントエンド(ブラウザ)側のユーザーイベント処理を記述します。

• サーバー側Webサービスは、データベース操作、印刷機能、CSVダウンロード機能、Googleドライブ操作、Google他API制御等のサービスが用意されているので、通常のアプリケーションであれば、まず問題ありません。重くなりがちなサーバー側の処理スピードに依存度の少ない軽快なアプリケーションが作成できます。

• DriveBaseスクリプトにはjQuery2.x系、jQuery-UI、sweetalertのライブラリが使用できるようになっています。クライアントMVCフレームワーク（React.js、Angular.js等）については、最もノーマルな形に近いHTMLを出力する事を念頭に置いていて、且つ、DriveBase自体がクライアントフレームワークの性質も持っているため、対応はしていません。

DriveBaseスクリプトの書き方

• DriveBaseのスクリプトはイベントドリブン型です。デザイナーにて、各項目のプロパティを表示し、Actionプロパティのボタンをクリックすると、スクリプトエディターが表示され、スクリプトを記述することが出来ます。

• スクリプトエディターのバインドイベントを変更して、そのイベントの処理を記述します

• 配置したコンポーネントの"id"プロパティは、エレメントIDになるので、jQueryセレクタ、またはgetElementByIdでアクセス出来ます。また、プロパティの"fieldName"を設定していれば、この名前でもコンポーネントのjQueryオブジェクトにアクセスできます（スクリプト内にて、fieldObject又は_fというオブジェクトが用意されています）。

ex. 配置したボタンコンポーネントのclickイベント時に、id=text1、fieldName="部署名"のDriveBaseコンポーネントの値を表示