スキーマを登録したら、いよいよ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はサービスを作成した管理者にも例外なく振り分けられます。
<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などに変換できます。
feedについて
データはリスト形式でfeedの中に複数のentryが入る形になります。
<feed> <entry> ... </entry> <entry> ... </entry> ... { n個 } </feed> entryについて
リソースの最小単位であり、1件のデータが1Entryになります。
Entryは一つのidを持ちます。これは、システム全体で一意となるように、KeyとRevisionを組み合わせた形をしています。
タグの値には、Entryの実体を示す一意の値(Key,Revision)が入ります。
Revisionは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形式です。
なので、以下のようなデータを準備します。
{ 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: { 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: { 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リクエストを実行します。
基本設計は以下の通りです。
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を使用したデータの取得方法についてです。