DriveBase Development Guide

Copyright © 2015 Uniseth Technologies Co.,Ltd. All Rights Reserved.

DriveBaseを効果的に活用するための情報がここにあります。

開発を開始する前にお読み下さい。

DriveBaseとは?

概要

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ドライブのフォームファイルを、Googleドライブページからダブルクリック等で起動すると、フォームファイルのコンテンツ(HTML情報、スクリプト情報)が、GCE上のアプリケーション・サーバー(Tomcat7)に転送され(①を実行すると、Google OAuth2認証後、内部的に②の動作が実行される)、③でクライアントにレスポンスを返し、これ以降、アプリケーション・サーバーのDriveBase Webサービスと、クライアントのDriveBase関数で通信を行い、アプリケーションを動作させます。


特徴

ユーザー対話型のWebアプリケーションを、スクラッチ開発以上のUI・UXを備えたアプリケーションとして、Googleドライブに作成する事ができます。さらに、開発の手軽さ・開発スピードは、Salesforce.comや、Kintone等の他APaaSを凌駕しています。

その理由は、DriveBaseが"データベース設計を行わない、データベースアプリケーションシステム"という一見矛盾しているようにも見える特徴からです。

  • データ登録の登録画面を作成すると、殆どの場合、画面項目とデータベーステーブルカラムは1:1。

  • 人間の脳で考えるデータ記憶行為はマトリックス表上では行われない。データベーステーブルのマトリックス型の記憶はその後の整理を効率追求した結果の形である。

例えば、受発注の仕組みを構築する場合、最初に入手する資料は、注文書や発注書などの表型の資料だと思います。一般的なシステム設計・開発では、

1.資料入手 → 2.必要項目に分解 → 3.抽出項目を分割されたテーブルに整理及び設計 → 4.入力フォームを設計

となりますが、これはシステム側に都合の良いプロセスであり、人側の都合ではありません。人側に合わせるのならば、

1.資料入手 → 2.入力フォームを設計

というプロセスが、一番都合が良く、プラットフォームが行わなければいけないのは、このプロセスに可能な限り近づける事です。

現在のシステム設計・開発プロセスは、半世紀以上前にIBMによって生み出されたものです。コンピューティング環境がどれだけ進化しても、ここには何の変化もありません。

データベースアプリケーションで一般的に良しとされている常識を疑い、既存の固執したシステム開発論をゼロリセットし、より人間が考える方法に近い、新しい形のデータベースアプリケーションプラットフォームを実現する事で、手軽さ・開発スピード向上を実現しています。

これに伴い、システム構築の前段階で、イメージされたビジネスアプリケーションを、すぐに動作するアプリケーションとして、ユーザーに体験してもらう事を最重要視しています(Proof of Conceptを実現)。

  • 開発時、MS-AccessやFileMakerのようなクライアントデータベースアプリケーション開発ツールを凌ぐRAD性を実現

  • 設計時に最も時間のかかるデータベース設計をDriveBaseが吸収

  • 利用権限設定(開発・実行)は、Googleドライブの共有権限を付与することにより設定(権限がオーナー又は編集者で開発及び実行が可能、権限が閲覧者で実行が可能)。

  • GoogleのOAuth2認証を利用(OpenID Connect)。G Suiteに登録されているユーザー情報をアプリケーションにて利用可能

  • DriveBaseのiOS専用アプリ、Android専用アプリを導入することにより、ハイブリッド・アプリとして動作可能

  • 柔軟な他システム連携(RESTFulAPI利用)が可能です。

小〜中規模システムならば、DriveBaseのみでシステム構築を行うことが可能。大規模(トランザクション件数が100万件以上)システム、外部向け向けのシステムには、専用のAPIサーバーを構築することで対応が可能です。


DriveBaseの基本的な開発

インストール

  • 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”の2つの列のみ(プライマリキーはこの”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キー名"と設定すれば、部分一致で検索するフィールドが完成します。

  • 検索を実行します。

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

画面遷移

  • フォームファイルが2つ出来たので、この2つのファイルを新規作成ボタン押下で連携させてみます(_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コンポーネントの値を表示

// テキストコンポーネントのfieldNameプロパティに"部署名"と名前をつけている(idはtext1)

alert(_f.部署名.val()); // 又はalert(_f["部署名"].val());

// jQueryセレクタでアクセスした場合

alert($("#text1").val());