Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vte.cxAdvent Calendar 2015

Day 5
@takeyama(恵悟 竹山)

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

Posted at

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

2
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?