Posted at
vte.cxDay 5

【vte.cx入門】4.データをサーバーに登録する:jQuery実践編

More than 3 years have passed since last update.

スキーマを登録したら、いよいよJavaScriptを使って画面からサーバに任意のデータを登録します。

ここではjQueryを使用し、Ajaxによるデータ登録の方法を記します。


vte.cxのデータ構造と階層

まずはデータ登録を行う前に、vte.cxではどのようなデータ管理を行っているのか、その仕組みを見ていきましょう。

vte.cxのデータにアクセスするURLパスは、「/d/hoge」というのが基本の形になります。

/dはデータにアクセスするためのAPIと考えてください。

「/d」としているのは対象がリソースデータであることを示す意味があります。

https://{自分のサービス}.vte.cx/d/hoge     ← hogeのデータにアクセスできる

/d以外にも、「/s/hoge」とすればサーバサイドJavaScriptにアクセスできたり、「/x/hoge」とすればexcel変換を行うAPIにアクセスできたりします。


デフォルトで登録してあるデータ

自分で作成したサービスにはデフォルトで以下のデータが登録されています。

https://{自分のサービス}.vte.cx

/d ← データを格納しているAPI

/_group ← グループ(管理者グループ等を含む)を管理している階層

/_html ← デプロイしたHTMLやJSやCSSなどのコンテンツを管理している階層

/_log ← ログを管理している階層

/_settings ← 設定情報を管理している階層

/{uid} ← ユーザ情報および配下にユーザ管理のデータを管理している階層

これらはサービスを管理するために必要なデータ群です。上記のようにシステムがデフォルトでもつものには先頭に「_(アンダーバー)」が付いています。


uidについて

「uid」というのは登録ユーザに自動で振り分けられる識別子です。

自分で作成したサービスに登録者が増える度に、その登録者にはuidが振られ、「/d」に自動登録されます。

ttitle項目にそのユーザのメールアドレスが入りますので、どのユーザにどのuidが振られているかが確認できます。

また、uidはサービスを作成した管理者にも例外なく振り分けられます。


uidデータのサンプルXML

<feed>

<entry>
<id>/34,2</id>
<link href="/34" rel="self"/>
<published>2015-11-30T19:22:36.354+09:00</published>
<summary>Activated</summary>
<title>hoge@foo.com</title> ← hoge@foo.comには「34」のuidが振られている
<updated>2015-11-30T19:22:36.380+09:00</updated>
</entry>
</feed>


データの形式はATOMによって表現されます

vtec.cxのデータはATOM(RFC4287)によって表現されます。

XMLやJSON、MessagePackなどに変換できます。

ATOMについて


feedについて

データはリスト形式でfeedの中に複数のentryが入る形になります。


Feedの基本構造

<feed>

<entry>
...
</entry>
<entry>
...
</entry>

... { n個 }

</feed>



entryについて

リソースの最小単位であり、1件のデータが1Entryになります。

Entryは一つのidを持ちます。これは、システム全体で一意となるように、KeyとRevisionを組み合わせた形をしています。

タグの値には、Entryの実体を示す一意の値(Key,Revision)が入ります。

RevisionはEntryの更新回数です。


Entryの基本構造

<feed>

<entry> ← 1件のデータ情報
<title>データ1</title>
<id>/hoge,1</id> ← 更新の度に「1」からカウントアップします。
</entry>
<entry>
<title>データ2</title>
<id>/foo,4</id> ← データ2は3回の更新がありました。
</entry>
</feed>


デフォルトデータを取得してみる

以下のリンクを画面で開いてみてください。

(開くには自分のサービスにログインする必要があります。)

https://{自分のサービス}.vte.cx/d/?f&x

そうすると画面にATOM形式のXML変換されたデータが取得できます。

<feed>

<entry>
<author>
<uri>urn:vte.cx:created:17</uri>
</author>
<id>/_group,1</id>
<link href="/_group" rel="self"/>
<published>2015-11-30T19:22:36.166+09:00</published>
<updated>2015-11-30T19:22:36.166+09:00</updated>
</entry>
<entry>
....
</entry>
....
</feed>

今のURLについて解説します。

これがアクセスするURLです。GETすることで/dへの参照となります。

https://{自分のサービス}.vte.cx/d/     ← 末尾にある「/」は省略しないでください。

それにURLパラメータを付与します。

?f    ← これは「/d」の配下にあるデータを取得する命令です。

?x ← これは取得するデータをXML形式に変換する命令です。

以上を組み合わせると上記のデータを取得できます。


各デフォルトデータにアクセスするURL

システムのデータにアクセスしたい時はそれぞれ以下のURLになります。

https://{自分のサービス}.vte.cx/d/_group?f&x

https://{自分のサービス}.vte.cx/d/_html?f&x
https://{自分のサービス}.vte.cx/d/_log?f&x
https://{自分のサービス}.vte.cx/d/_settings?f&x
https://{自分のサービス}.vte.cx/d/{uid(数値)}?f&x


/_groupなどにアクセスできるユーザ権限

/dの直下で先頭に「_(アンダーバー)」が付いているデータ には管理者権限がなければアクセスすることができません。

それ以外は「403 Access denied.」もしくは「401 Authentication error.」エラーとなります。


1.登録データを準備する

前置きが長くなってしまいましたが、ここからが本題です。

jQueryでサーバにデータ登録を行っていきましょう。

まずは登録するデータを準備します。

jQueryでデータを扱う際は、一般的にはJSON形式です。

なので、以下のようなデータを準備します。


JSONデータ

{

userinfo: {
id: 12345,
email: hoge@foo.com
},
favorite: {
food: 'りんご',
music: 'J-POP'
},
hobby: [
{
type: '屋外',
name: 'なわとび',
updated: 2015/12/04
},
{
type: '屋内',
name: 'ゲーム',
updated: 2015/09/01
}
]
}


2.登録データをfeed形式に整形する

前述したようにvte.cxはデータの形式にATOM形式を採用しています。

サーバー用のデータにするために、feed形式にします。

以下のような形になります。


feed形式の登録データ

{

feed: {
entry: [
{
userinfo: {
id: 12345,
email: hoge@foo.com
},
favorite: {
food: 'りんご',
music: 'J-POP'
},
hobby: [
{
type: '屋外',
name: 'なわとび',
updated: 2015/12/04
},
{
type: '屋内',
name: 'ゲーム',
updated: 2015/09/01
}
]
}
]
}
}

第一階層にfeedがあり、その配下にentryが入ります。entryの型は配列です。

entryの中に登録データを格納します。これでfeed形式に整形できました。

entryの型が配列になっている理由は、複数のデータを同時に登録するためです。

例えば以下のようなデータにすると、複数のデータを同時に登録できます。


feed形式の登録データ(複数)

{

feed: {
entry: [
{
userinfo: {
id: 12345,
email: hoge@foo.com
},
favorite: {
food: 'りんご',
music: 'J-POP'
}
},
{
userinfo: {
id: 98765,
email: bor@foo.com
},
favorite: {
food: 'バナナ'
}
}
]
}
}


3.ajaxで登録データをPOSTする

上記データをjQueryのajax通信を使用し、POSTリクエストを実行します。

基本設計は以下の通りです。


javascript

var request = {feed: {entry: [{userinfo: {id: 12345,email: hoge@foo.com},favorite: {food: 'りんご',music: 'J-POP'},hobby: [{type: '屋外',name: 'なわとび',updated: 2015/12/04},{type: '屋内',name: 'ゲーム',updated: 2015/09/01}]}]}};;

$.ajax({
url: '/d/{自分のuid}',
method: 'post',
dataType: 'json',
data: JSON.stringify(request)
}).done(function(res) {
alert('登録成功');
}).fail(function( jqXHR, textStatus, errorThrown ) {
alert('登録失敗');
});



■リクエスト

param

url
登録先URL
/d/{自分のuid}

method
POST

dataType
json

data
登録データ
上記参照

登録データは文字列化してからリクエストします。

ですので、paramのdataに値を代入する際に、requestをJSON.stringifyを使用し文字列化しています。


uidの取得方法

以下のURLを画面で開いてください。すると自分のuidが取得できます。

※uidを取得するにはログインが必要です。

https://{自分のサービス}/d/?_uid

レスポンス

{'feed': {'title': (uid)}}}

取得したuidをurlに使用してください。


■レスポンス


成功ステータス

ステータス
メッセージ
レスポンス

201
Created
{"feed" : {"title" : "/{uid}/{登録entryのキー}"}}

レスポンス例

{"feed" : {"title" : "/34/0-8-2-9-1-1-2"}}

feedのtitleにあるurlが登録データのurlになります。

例えば以下のようにすると登録データにアクセスできます。

https://{自分のサービス}/d/34/0-8-2-9-1-1-2?x


失敗ステータス

以下の仕様書の下部に細かく記載されています。ステータスコードに沿って正しいデータを登録してみてください。

HTTPステータス一覧


終わりに

以上でデータをサーバに登録する説明を終わります。

次回はjQueryを使用したデータの取得方法についてです。