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

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

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

清野克行[著]

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

ポスト

3.2　gaedirectを使用したエンティティ参照

（1）参照画面例

　次に参照ですが、これも一般的な参照処理とまったく同じで、キーを指定して「参照」ボタンをクリックすると、指定されたキーに対応するエンティティの内容が表示されます。

図3-5　エンティティの参照

（2）参照用プログラム例

リスト3-6　参照用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(){
    prop = "name,tel,menu,bill";
    $("#rev").click(function(){
        var key = $("#key").val();
        $.get(gae(),rev("cook",key,prop),function(res){dsp(res, prop);});
    });
});
</script>
</head>
<body bgcolor="#cadbdb">
<span style="color:#aa0022;font-weight:bold" >コース参照処理
<input type="button" id="rev" 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>

　参照処理の書式は登録の場合と同様に大変シンプルです。

　参照はjQueryの$.getで行い、第二引数の関数名は「rev」ですが、レスポンスとしてサーバから受け取ったデータの表示処理は（2）のdsp関数だけで行っています。

　dsp関数では第1引数にレスポンスデータ、第2引数にプロパティ値（ID値）並び文字列を指定しています。この指定によって、登録の場合と同様に表示フィールドのタグやUIコントロールの種類などをgaedirectがチェックして、そのタグに合った形で自動的に表示するようになっています。gaedirectでは参照実行で何らかのエラーが発生した場合は、レスポンス文字列最初の3文字で"NO："が返されます。（1）がその判定を行っており、エラーがない場合は次の行からの表示処理に移り、エラー発生の場合は（3）からエラーメッセージを表示します。

注）

　参照で指定するプロパティ文字列（prop）では、登録や更新の場合と異なり、データ型の指定を含みません。ただしgaedirectのv1.1では登録・参照・更新処理すべて共通してデータ型を含むプロパティ文字列を使用するように変更されています。

参照処理の書式

$.get(gae(), rev(kind名, キー値, プロパティ名の並び), function(戻り値){表示処理});
第一引数：  gae()  
第二引数：  rev
    第1引数：  kind名（例  " dtype"）
    第2引数：  キー名
    第3引数：  カンマ区切り参照プロパティ並び

3.3　gaedirectwp使用したエンティティ更新

（1）更新画面例

　更新処理では前の参照処理を使用して、更新対象のエンティティ項目を表示した後（図3-7）、更新するプロパティ項目の内容を変更後、「更新」ボタンをクリックすることによって行われます。

図3-6　更新エンティティの参照

図3-7　エンティティ更新実行

図3-8　更新前のエンティティ

図3-9　更新後のエンティティ

　更新処理によって、図3-8のリストプロパティ（billとmenu）がスカラー型に変換されています。

（2）更新用プログラム例

リスト3-7　更新用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 key;
    var prop1 = "name,tel,menu,bill";       //（1）
    var prop2 = "name,tel,menu,in:bill";    //（2）
    $("#rev").click(function(){
        key = $("#key").val();
        $.get(gae(), rev("cook",key,prop1),function(res){dsp(res, prop1);
    });});
    $("#upd").click(function(){
        $.post(gae(),upd("cook",key,prop2),function(res){$("#stat").html(res);
    });});
});
</script>
</head>
<body bgcolor="#cadbdb">
<span style="color:#aa0022;font-weight:bold" >コース参照・更新
<input type="button" id="rev" value=" 参照 "/></span>
<input type="button" id="upd" 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-6の部分だけで更新処理は完了します。更新処理は基本的には登録での第二引数の「add」が「upd」になるだけであとは同じです。しかしRDBでの更新処理とは異なる特徴があり、既存のプロパティ項目の値を変えるだけでなく、登録の場合と同様に、プロパティ項目のデータ型を変更したり、追加や削除をしたりすることもできます。

注）

　更新処理では、（1）のデータ型を含むプロパティ並びと（2）のデータ型を含まないプロパティ並びの両方が使用されますが、v1.1ではデータ型を含むプロパティ並びだけで処理できるようになります。

更新処理の書式

$.post(gae(), upd(kind名,キー値, プロパティ名の並び),function(戻り値){    ステータス表示  }
第一引数： gae() //固定
第二引数： upd   //固定
    第1引数： エンティティ名（任意指定  例"gaekvs"）
    第2引数： キー名（任意指定）
    第3引数： カンマ区切り更新プロパティ並び

3.4　gaedirectを使用したエンティティ削除

（1）削除画面例

　サンプルの削除処理は、更新処理と同様に削除対象のエンティティをキー指定で参照し（図3-9）、「削除」ボタンのクリックによって行います。

図3-10　エンティティの削除

（2）削除用プログラム例

リスト3-8　削除用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 key;
    var prop = "name,tel,menu,bill";
    $("#rev").click(function(){
        key = $("#key").val();
        $.get(gae(), rev("cook",key,prop),function(res){dsp(res, prop);
    });});
    $("#del").click(function(){
        $.post(gae(),del("cook",key),function(res){$("#stat").html(res);
    });});
});
</script>
</head>
<body bgcolor="#cadbdb">
<span style="color:#aa0022;font-weight:bold" >コース参照・削除
<input type="button" id="rev" value=" 参照 "/></span>
<input type="button" id="del" 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-7の（1）で削除処理が行われていますが、削除の場合はkind名とキー値を指定するだけになります。

削除処理の書式

$.post(gae(), del(kind名,キー値),function(戻り値){ ステータス表示 }
第一引数： gae()  //固定
第二引数： del    //固定
    第1引数： エンティティ名（任意指定）
    第2引数： キー名（任意指定）

次のページ
4　gaedirectでの条件検索

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

印刷用を表示

ポスト

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

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

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

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

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

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