サーバ側コーディング不要のGoogle App Engine開発ツール「gaedirect」

クラウドアプリケーション開発をJavaScriptだけで！

サーバ側コーディング不要のGoogle App Engine開発ツール「gaedirect」

更新日: 2012/03/19
公開日: 2011/09/02

ポスト

3　gaedirectでのCRUD（登録・参照・更新・削除）処理

　gaedirectの機能としては、Googleのデータストア（Bigtable）へのCRUD（登録・参照・更新・削除）処理の他に条件検索機能がありますが、最初にCRUD処理について紹介します。

3.1　gaedirectを使用したエンティティ登録

　ここで紹介する登録操作によって、ユーザ入力データはクラウド上データストア（Bigtable）への書き込み（永続化）が行われます。GAEのクラウドデータストアは分散キー・バリューストアと言われもので、RDB（リレーショナルデータベース）とはもともと構造が異なるものですが、各部の名称も違っていますので最初に確認しておきます。

kind（カインド）
RDBのテーブルと類似の概念で、条件検索などはすべてkind内の登録データを対象に行われます。
entity（エンティティ）
RDBのレコードとほぼ同じで、書き込みやキー検索などはエンティティ単位で行われます。
property（プロパティ）
RDBのレコード列項目に対応する概念です。プロパティには配列のように複数のデータ項目を格納できるリストプロパティもあります。

（1）登録画面例

図3-1　エンティティ登録（登録実行）

　図3-1はgaedirectを使用したエンティティ登録例です。登録ではキーを指定して行い、「登録」ボタンクリックで登録が実行されます。もし指定したキーをもつエンティティがすでに有る場合、警告が表示されて登録は行われません。

（2）登録データ

図3-2　エンティティの登録内容

　GAEの管理者画面には、登録されたデータを確認できる画面（Datastore Viewer）があり、登録（永続化）内容を見ることができます。図3-2は登録されたエンティティですが、登録項目（プロパティ）以外にmoddate（登録・更新時間）が自動的に追加されます。全体としては、サーバサイドでJavaやPythonを使用した登録処理の場合と同じ形式で登録されます。

（3）登録用プログラム例

リスト3-1　登録1用HTML＆JavaScript

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>コース登録処理</title>
<script type="text/javascript" src="/jslib/gaedirect.js"></script>
<script type="text/javascript" src="/jslib/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#add").click(function(){
        var key = $("#key").val();         //（1）
        prop = "name,tel,menu,in:bill";    //（2）
        $.post(gae(),add("cook",key,prop),function(res){$("#stat").html(res);});
    });
});
</script>
</head>
<body bgcolor="#cadbdb">
<span style="color:#aa0022;font-weight:bold" >コース登録処理
<input type="button" id="add" value=" 登録 "/></span><br/>
結果:<nobr id="stat"></nobr><hr/>
キー：<input type="text" id="key" size="12"/><br/>
名前：<input type="text" id="name"/><br/>
分類：<input type="text" size="2" id="menu"/><br/>
&nbsp;(1：和食、2：洋食、3：中華)<br/>
料金：<input type="text" id="bill" size="12"/><br/>
</body>
</html>

　リスト3-1はエンティティ登録のサンプルコードです。gaedirectでは、CRUD（登録・参照・更新・削除）処理すべてjQueryを使用したJavaScriptでの非同期通信で行われます。

　外部JavaScriptファイルではjQueryの他にgaedirect.jsを指定します。gaedirect.jsはgaedirect専用のJavaScriptライブラリです。

　次に、（2）で登録するkind（テーブル）の名前、（3）で登録するプロパティ（フィールド）項目を文字列で列記します。プロパティ項目の指定では、例えば「in:bill」と指定した場合は、「Integer型」でプロパティ名は「bill」になります。データ型ではそれぞれの型の最初の2文字を小文字で指定します。データ型を指定しない場合は文字列（String）型とみなされるため、文字列の場合は指定する必要がありません。

　登録処理は簡単です。「登録」ボタンのクリックで（4）の匿名関数が起動され、（5）で画面入力のキー値を取得した後、（2）でjQueryのpostメソッドによって登録処理を実行します。gaedirectのCRUD処理では、参照では$.getを、それ以外の登録・更新・削除処理では$.postを使用します。

　登録サンプルで、$.postの第一引数は gae() となっていますが、これはすべての処理で同じように指定します。登録での第二引数はadd関数の呼び出しです。add関数での第1引数は登録対象となるkind名（テーブル名）、第2引数は登録するエンティティ（レコード）のキー名になります。第3引数は文字列で、登録するエンティティのプロパティ項目名をカンマ区切りで指定します。ここでプロパティ項目名はHTMLの<input>タグでID属性の値として指定する必要があります。

データ型

　現状ではデータ型として以下のものが指定可能ですが、将来的には追加を検討しています。

表3-1　サポートデータ型と指定文字列

データ型	Javaデータ型	指定
文字列：最大500バイト	String	st（デフォルト）
テキスト：最大1メガバイト	Text	te
8ビット符号付き整数：-128～127	byte（8ビット）	by
符号つき整数：-32768～32767	short（16ビット）	sh
符号つき整数：2147483648～2147483647	int（32ビット）	in
符号つき整数：9223372036854775808～9223372036854775807	long（64ビット）	lo
浮動小数点数：±3.40282347E+38 ～ ±1.40239846E-45	float（32ビット）	fl
浮動小数点数：±1.79769313486231570E+308 ～±4.94065645841246544E-324	double（64ビット）	do
真偽値：true または false	boolean（1ビット）	bo

　データ型は表3-1右のように指定しますが、指定文字列は左側データ型表記の最初の2文字になっています。

注）

　表3-1のデータ型の内、Text型（MAX 1MB）はv1.0ではサポートされていませんが、v1.1.からサポートされています。

データ型、リストプロパティ、ソフトスキーマ、UIコントロール

図3-3　エンティティ登録2

　図3-3のエンティティ登録は、図3-1と同じkind「cook」に対する登録処理ですが、画面表示では電話番号のフィールドが追加され、分類のフィールドがチェックボックスに変更され、また料金のフィールドにカンマ区切りで2種類の数値（金額）が入力されています。

リスト3-2　登録2用HTML＆JavaScript

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"/> 
<title>コース登録処理</title>
<script type="text/javascript" src="/jslib/gaedirect.js"></script>
<script type="text/javascript" src="/jslib/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
    var prop = "name,tel,menu,in:bill";    //（1）
    $("#add").click(function(){
        var key = $("#key").val();
        $.post(gae(),add("cook",key,prop),function(res){$("#stat").html(res);    });
});
});
</script>
</head>
<body bgcolor="#cadbdb">
<span style="color:#aa0022;font-weight:bold" >コース登録処理
<input type="button" id="add" value=" 登録 "/></span><br/>
結果:<nobr id="stat"></nobr><hr/>
キー：<input type="text" id="key" size="12"/><br/>
名前：<input type="text" id="name"/><br/>
TEL：<input type="text" id="tel"/><br/>
分類：
<span id="menu">
    <input type="checkbox" name="class" value="1">和食
    <input type="checkbox" name="class" value="2">洋食
    <input type="checkbox" name="class" value="3">中華
</span><br/>
料金：<input type="text" id="bill"/><br/>
</body>
</html>

　リスト3-2は図3-3のエンティティ登録用ですがJavaScriptでの変更箇所は、（1）の文字列に「tel」が追加されている点だけです。タグ記述では追加・変更所がいくつかありますが、JavaScriptへの変更箇所は、驚く程少なくて済んでいます。

　ここ画面表示での変更と、それに対するgaedirectへの対応・特徴は次のようになります。

ソフトスキーマ

　GAEのBigtableのような分散キー・バリューストアの特徴として、ソフトスキーマがあります。ソフトスキーマとは、同じkind（テーブル）に登録するエンティティ（レコード）のプロパティ項目（列項目）やその数を、登録のたびに任意に変更したり、追加・削除などもしたりできることを意味します。gaedirectでもソフトスキーマをサポートしていますが、これは登録する列項目をスキーマで定義された内容に必ず合わせなければならないRDB（リレーショナルデータベース）では不可能なことです。

　図3-2では前の登録画面に電話番号のプロパティ項目（tel）を追加しています。登録対象となるkind（テーブル）は図6と同じcookですが、このように同じkind（テーブル）への登録でプロパティ項目を追加しても問題なく実行され、ここでは1つのプロパティ項目の追加ですが、任意数プロパティ項目の追加や変更・削除が可能です。

リストプロパティ

　GAEではリスト形式のプロパティを登録することができますが、gaedirectでもリストプロパティをサポートしています。gaedirectでリストプロパティを登録する場合は、図3-3のByteフィールドのように登録項目をカンマ区切りで指定します。

　図3-2では分類と料金の項目がリストプロパティとして登録され、リストプロパティの登録結果を「Datastore Viewer」で確認すると図3-4のようになります。

図3-4　登録後のcookエンティティ表示

　図3-4で2行目のbillとmenuがリスト項目として登録されています。またtelプロパティは最初の登録画面にはなかったため<missing>と表示されています。

UIコントロール

　図3-2では分類がチェックボックスからの選択に変更されていますが、gaedirectではデータの入力や設定がテキストフィールドから行われているのか、あるいはチェックボックスなどのUIコントロールから行われているのかを自動的に判別して、Bigtableに登録するデータを取得できるようになっています。gaedirectでは入力フィールドをID値で指定するのが原則になっていることから、UIコントロールのタグ記述では次のように行いますが大変シンプルです。

ラジオボタンのタグ記述例

リスト3-3　ラジオボタンの記述例

<span id="sel1">
    <input type="radio" name="stat1" value="true"/>有効
    <input type="radio" name="stat1" value="false"/>無効
</span><br/>

　ラジオボタンのタグ記述では、複数のラジオボタン用の<input>タグの並びを<div>や<span>、<td>タグなどで囲み、そのタグにプロパティ名のID値を指定します（ここでは「id="sel1"」）。ラジオボタンでは、name属性で選択グループを指定し、value属性で選択されたときの値を指定します。

チェックボックスの記述例

リスト3-4　チェックボックスの記述例

<span id="sel2">
  <input type="checkbox" name="stat2" value="1"/>1&nbsp;
  <input type="checkbox" name="stat2" value="12"/>12&nbsp;
  <input type="checkbox" name="stat2" value="123"/>123&nbsp;
  <input type="checkbox" name="stat2" value="1234"/>1234&nbsp;
  <input type="checkbox" name="stat2" value="12345"/>12345
</span><br/>

　チェックボックスの場合もラジオボタンと同様に、タグの並びを<div>、<span>、<td>タグなどで囲み、そのタグにプロパティ名のID値を指定します。チェックボックスの場合は複数項目が選択されることも多いですが、選択された複数の項目は、エンティティ内でリスト形式のプロパティ項目として登録されます。

セレクトメニューの記述例

リスト3-5　セレクトメニューの記述例

<select id="sel3">
      <option value="">選択</option>
      <option value="選択1">選択1</option>
      <option value="選択2">選択2</option>
      <option value="選択3">選択3</option>
      <option value="選択4">選択4</option>
      <option value="選択5">選択5</option>
</select>

　セレクトメニューの場合はリスト3-4のように<select>タグにID値を指定すれば、それで登録できます。

登録処理書式

$.post(gae(), add(kind名, キー値, 登録プロパティ名並び),  function(戻り値){ ステータス表示});
第一引数：  gae() 
第二引数：  add
    第1引数：  カインド名（任意に指定  例：" dtype"）
    第2引数：  キー名（任意に指定）
    第3引数：  カンマ区切りの登録プロパティ（データ型：名前）並び
               プロパティは任意数指定可能
               データ型指定可能

注）

　データの登録では、例えば必須入力フィールドと任意入力フィールドなど、データ項目の一部が未入力のまま実行される場合もありますが、gaedirectの登録処理での未入力フィールド（プロパティ）は次のように扱われます。

文字列フィールドが未入力 ⇒ "na" が登録され、データ表示も同様
整数フィールドが未入力 ⇒ 整数値「0」が登録され、表示も同様
実数フィールドが未入力 ⇒ 実数値「0.0」が登録され、表示も同様

次のページ
3.2　gaedirectを使用したエンティティ参照

この記事は参考になりましたか？

印刷用を表示

ポスト

サーバ側コーディング不要のGoogle App Engine開発ツール「gaedirect」連載記事一覧: gaedirectを利用したAndroidからの緊急連絡とサーバプッシュ表示の実装

クラウドアプリケーション開発をJavaScriptだけで！

この記事の著者: 清野克行（セイノカツユキ）

慶應義塾大学工学部電子物理専攻卒。日本IBM、日本HPで、製造装置業を中心とした業務系／基幹業務系システムのSE／マーケティングや、分散アプリケーションによる社内業務システム開発などに携わる。現在は、クラウドやAjax関連の/ソフト開発/書籍執筆/セミナー講師/コンサルティング、などを行っている。情...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事