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


[スキーマを登録](http://qiita.com/takeyama/private/2ea32e60c8b9252cfe27)したら、いよいよ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はサービスを作成した管理者にも例外なく振り分けられます。

```lang: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](http://www.ietf.org/rfc/rfc4287.txt))によって表現されます。
XMLやJSON、MessagePackなどに変換できます。

[ATOMについて](http://reflexworks.jp/documentation.html#taggingservice_all.html#R2)

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

```lang:Feedの基本構造
<feed>
   <entry>
      ...
   </entry>
   <entry>
      ...
   </entry>

   ... { n個 }

</feed>
```
### entryについて
リソースの最小単位であり、1件のデータが1Entryになります。
Entryは一つのidを持ちます。これは、システム全体で一意となるように、KeyとRevisionを組み合わせた形をしています。 
<id>タグの値には、Entryの実体を示す一意の値(Key,Revision)が入ります。
RevisionはEntryの更新回数です。

```lang: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形式です。
なので、以下のようなデータを準備します。

```lang: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形式にします。
以下のような形になります。

```lang: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の型が配列になっている理由は、**複数のデータを同時に登録するため**です。
例えば以下のようなデータにすると、複数のデータを同時に登録できます。

```lang: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リクエストを実行します。
基本設計は以下の通りです。

```lang: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ステータス一覧](http://reflexworks.jp/documentation.html#taggingservice.html#H)

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

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