フロントエンドエンジニアの価値を高めるBaaS(vte.cx) セミナー資料#2

1. vte.cxの基礎知識

2. アカウント登録〜Hello Worldまで
Qiitaの記事に説明が書いてあるので、そちらを見ながら行っていきます。
「Qiita アカウント登録〜Hello Worldまで」
と検索

3. 記事を見ながら説明

4. Hello Worldが表示できたら説明

5. vte.cxのデータ構造と階層
vte.cxではどのようなデータ構造でどのようなデータ管理を行っているのか

6. データはURLベースでアクセスする

7. リソースデータへのアクセスの仕方
h2ps://{自分のサービス}.vte.cx/d/hoge
URLパスの基本形
これで「/hoge」データにアクセスできる
「/hoge」データを登録していた場合

8. URLのパスは基本的に「/d」から始まる
○○○○データにアクセスする場合：
h8ps://{自分のサービス}.vte.cx /d /○○○○
××××データにアクセスする場合：
h8ps://{自分のサービス}.vte.cx /d /××××

9. URLのパスは基本的に「/d」から始まる
/dはデータにアクセスするためのAPI
「/d」としているのは対象がリソースデータであることを示す意味があります。
○○○○データにアクセスする場合：
h8ps://{自分のサービス}.vte.cx /d /○○○○
××××データにアクセスする場合：
h8ps://{自分のサービス}.vte.cx /d /××××

10. データはディレクトリ構造で
成り立って、自由に構築できる

11. ディレクトリ構造の例
h8p://{自分のサービス}.vte.cx/d
/hoge
/hoge1
/hoge2
/foo
/foo1
/foo1_child1
/foo1_child2
/foo2

12. ディレクトリ構造の例
h8p://{自分のサービス}.vte.cx/d
/hoge
/hoge1
/hoge2
/foo
/foo1
/foo1_child1
/foo1_child2
/foo2
こういったディレクトリ構造を
自由に構築できます

13. データの形式は
どうなっているのか？

14. データの形式はATOM(RFC4287)によって表現される
<feed>
<entry>
<author>
<uri>urn:vte.cx:created:20</uri>
</author>
<id>/_group,1</id>
<link href="/_group" rel="self"/>
<published>2015-12-01T13:39:26.919+09:00</published>
<updated>2015-12-01T13:39:26.919+09:00</updated>
</entry>
</feed>

15. データの形式はATOM(RFC4287)によって表現されます
Feed項目（一覧）
Entry項目（1個）
データ情報
<feed>
<entry>
<author>
<uri>urn:vte.cx:created:20</uri>
</author>
<id>/_group,1</id>
<link href="/_group" rel="self"/>
<published>2015-12-01T13:39:26.919+09:00</published>
<updated>2015-12-01T13:39:26.919+09:00</updated>
</entry>
<entry>
</entry>
</feed>
Entry項目（n個）

16. <feed>
<entry>
fooデータ
</entry>
</feed>
<feed>
<entry>
/hoge/hoge1データ
</entry>
</feed>
<feed>
<entry>
hogeデータ
</entry>
</feed>
全体の構造をまとめると
h8p://{自分のサービス}.vte.cx/d
/hoge
/hoge1
/foo

17. 実際にデータにアクセスしてみる

18. 下記のURLをブラウザで開いてみてください
h8ps://{自分のサービス}.vte.cx/d/_group?x

19. 下記のURLをブラウザで開いてみてください
h8ps://{自分のサービス}.vte.cx/d/_group?x
<feed>
<entry>
<author>
<uri>urn:vte.cx:created:20</uri>
</author>
<id>/_group,1</id>
<link href="/_group" rel="self"/>
<published>2015-12-01T13:39:26.919+09:00</published>
<updated>2015-12-01T13:39:26.919+09:00</updated>
</entry>
</feed>

20. 下記のURLをブラウザで開いてみてください
h8ps://{自分のサービス}.vte.cx/d/_group?x
<feed>
<entry>
<author>
<uri>urn:vte.cx:created:20</uri>
</author>
<id>/_group,1</id>
<link href="/_group" rel="self"/>
<published>2015-12-01T13:39:26.919+09:00</published>
<updated>2015-12-01T13:39:26.919+09:00</updated>
</entry>
</feed>

21. ちなみに
h8ps://{自分のサービス}.vte.cx/d/_group
URLになにもパラメータをつけないとJSON形式で取得できます。
セキュリティ上、ブラウザで表示はできませんが、
JavascriptではJSON形式で確認することができます。

22. クライアントから通信する方法

23. Ajax通信でアクセスする
クライアント側からサーバーにアクセスする場合は、Ajax通信を行います。
Ajax通信とは、クライアントとサーバー間の通信を行う標準的な方法です。
サーバー クライアント
Ajax通信
リクエスト
レスポンス

24. jQueryでサーバにデータ登録する

25. データの登録方法には２種類ある
①キーを自動採番して登録
②キーを指定して登録

26. POSTリクエストのデモページ
自動採番する登録:
h8ps://test.1.vte.cx/post.html
キーを指定して登録
h8ps://test.1.vte.cx/post2.html

27. 自動採番とは

28. 自動採番とはサービスで一意の識別番号
・文字どおり、サーバがデータに自動的に付与する番号（キー）です。
・データを登録した時にそのURLが重複しないようにサーバー側で
他のデータと重複しない一意の番号が割り振られます。
・指定された登録先の配下に自動番号が付与されたデータが登録されます。
/hoge ここを登録先とする
/1-1-1-1231231
/1-1-1-1287911
/hoge配下に
自動採番された
データが登録さ
れる

29. キーを指定して登録する方法

30. キーを指定して登録するおさらい
・キーを指定して登録する場合は、自分でデータに名前（キー）をつける
・データのキーはlink項目のhref属性に入力し、rel属性をselfとする
・同じ階層に同じ名前があった場合はエラーとなる
/hoge
/test
/abcde
Link項目のhref属性が「/hoge」
Link項目のhref属性が「/test」
Link項目のhref属性が「/abcde」

31. jQueryでデータを取得する

32. データの取得方法には２種類ある
① 単体を取得する
② 一覧を取得する

33. GETリクエストのデモページ
h8ps://test.1.vte.cx/get.html

34. データ取得のおさらい
・単体データを取得する場合は「?e」パラメータを使用する
・一覧を取得したい場合は、「?f」パラメータを使用する
GET /hoge?e hogeデータの単体取得
hoge配下のデータ一覧取得 GET /hoge?f

35. jQueryでデータを更新する

36. データの更新方法には２種類ある
① 楽観的排他をする更新
② 楽観的排他をしない更新

37. PUTリクエストのデモページ
楽観的排他をする更新:
h8ps://test.1.vte.cx/put.html
楽観的排他をしない更新
h8ps://test.1.vte.cx/put2.html

38. データ更新のおさらい
・データの更新先はlink項目のrel=“self”を参照している
・更新の際は、id項目のリビジョン管理を行っており、サーバと不一致な場合、
楽観的排他が発生する
・id項目を省略し、強制的に更新も行えるが、楽観的排他をすることを
推奨する。
リクエストのid: /hoge, 1
更新成功
サーバのid: /hoge, 1
リビジョン番号が一致

39. jQueryでデータを削除する

40. データの削除方法には3種類ある
① 一件削除
② 全件削除

41. DELETEリクエストのデモページ
一件削除:
h8ps://test.1.vte.cx/delete.html
全件削除
h8ps://test.1.vte.cx/delete2.html

42. では、このような子供がいるデータ一覧
を削除したい場合はどうすればいいか

43. データ削除のおさらい
・一件削除にも楽観的排他を行う方法と行わない方法がある
・全件削除したい場合は「?_rf」を使用する
一件削除: DELETE /d/hoge
全件削除： DELETE /d/hoge?_rf

44. これでjQueryを使ったデータの操作
方法については終わりです

45. スキーマについて

46. スキーマとは
・ 自分が決めた項目名に値を入れて保存したい
・ スキーマを定義することで任意の項目に
任意のデータを保存することが可能
・ データの設計図の役割
・ IndexやACLなどをサーバで管理

47. スキーマの形
userinfo
id(int)
email
favorite
food!=^.{3}$
music=^.{5}$
hobby{}
type
name
updated(date)
スキーマの形

48. スキーマの形
userinfo
id(int)
email
favorite
food!=^.{3}$
music=^.{5}$
hobby{}
type
name
updated(date)
スキーマの形
サーバに登録すると

49. スキーマの形
userinfo
id(int)
email
favorite
food!=^.{3}$
music=^.{5}$
hobby{}
type
name
updated(date)
スキーマの形
<feed>
<entry>
<userinfo>
<id></id>
<email></email>
</userinfo>
<favorite>
<food></food>
<music></music>
</favorite>
…..
</entry>
</feed>
このようなデータが登録できる
ようになる
サーバに登録すると

50. スキーマの登録方法
vtecblankプロジェクト
/setup
/_serngs
template

51. スキーマの登録方法
vtecblankプロジェクト
/setup
/_serngs
template
<feed>
<entry>
<link href="/_serngs/template" rel="self"/>
<contributor>
<uri>urn:vte.cx:acl:/_group/$admin,CRUD</uri>
</contributor>
<contributor>
<uri>urn:vte.cx:acl:+,R</uri>
</contributor>
<content type="text/html">userinfo
id(int)
email
favorite
food!=^.{3}$
music=^.{5}$
hobby{}
type
name
updated(date)
</content>
<rights>
userinfo.id:/.+/registrason
</rights>
</entry>
</feed>

52. スキーマの登録方法
vtecblankプロジェクト
/setup
/_serngs
template
<feed>
<entry>
<link href="/_serngs/template" rel="self"/>
<contributor>
<uri>urn:vte.cx:acl:/_group/$admin,CRUD</uri>
</contributor>
<contributor>
<uri>urn:vte.cx:acl:+,R</uri>
</contributor>
<content type="text/html">userinfo
id(int)
email
favorite
food!=^.{3}$
music=^.{5}$
hobby{}
type
name
updated(date)
</content>
<rights>
userinfo.id:/.+/registrason
</rights>
</entry>
</feed>

53. スキーマについては記事を参照してください
スキーマには項目名にバリデーションやindexをつけることもできます。
非常に便利な機能ですので、是非使用してみてください。
「Qiita vte.cx スキーマ定義」で検索

54. 以上で終わります。
また、ここでは時間の関係上、説明しきれていない大事な情報がたくさんあります。
「vte.cx Advent Calendar 2015」で検索
ご静聴ありがとうございました。