スキーマを登録したら、いよいよ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を使用したデータの取得方法についてです。

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