Successfully reported this slideshow.
Your SlideShare is downloading. ×

Vtecx20151216 2

Ad

vte.cxの基礎知識

Ad

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

Ad

記事を見ながら説明

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 54 Ad
1 of 54 Ad
Advertisement

More Related Content

Advertisement

Vtecx20151216 2

  1. 1. vte.cxの基礎知識
  2. 2. アカウント登録〜Hello Worldまで Qiitaの記事に説明が書いてあるので、そちらを見ながら行っていきます。 「Qiita アカウント登録〜Hello Worldまで」 と検索
  3. 3. 記事を見ながら説明
  4. 4. Hello Worldが表示できたら説明
  5. 5. vte.cxのデータ構造と階層 vte.cxではどのようなデータ構造でどのようなデータ管理を行っているのか
  6. 6. データはURLベースでアクセスする
  7. 7. リソースデータへのアクセスの仕方 h2ps://{自分のサービス}.vte.cx/d/hoge URLパスの基本形 これで「/hoge」データにアクセスできる 「/hoge」データを登録していた場合
  8. 8. URLのパスは基本的に「/d」から始まる   ○○○○データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /○○○○   ××××データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /××××
  9. 9. URLのパスは基本的に「/d」から始まる /dはデータにアクセスするためのAPI 「/d」としているのは対象がリソースデータであることを示す意味があります。   ○○○○データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /○○○○   ××××データにアクセスする場合:     h8ps://{自分のサービス}.vte.cx /d /××××
  10. 10. データはディレクトリ構造で 成り立って、自由に構築できる
  11. 11. ディレクトリ構造の例 h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /hoge2 /foo /foo1 /foo1_child1 /foo1_child2 /foo2
  12. 12. ディレクトリ構造の例 h8p://{自分のサービス}.vte.cx/d /hoge /hoge1 /hoge2 /foo /foo1 /foo1_child1 /foo1_child2 /foo2 こういったディレクトリ構造を 自由に構築できます
  13. 13. データの形式は どうなっているのか?
  14. 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. 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. 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. 17. 実際にデータにアクセスしてみる
  18. 18. 下記のURLをブラウザで開いてみてください h8ps://{自分のサービス}.vte.cx/d/_group?x 
  19. 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. 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. 21. ちなみに h8ps://{自分のサービス}.vte.cx/d/_group URLになにもパラメータをつけないとJSON形式で取得できます。 セキュリティ上、ブラウザで表示はできませんが、 JavascriptではJSON形式で確認することができます。
  22. 22. クライアントから通信する方法
  23. 23. Ajax通信でアクセスする クライアント側からサーバーにアクセスする場合は、Ajax通信を行います。 Ajax通信とは、クライアントとサーバー間の通信を行う標準的な方法です。 サーバー クライアント Ajax通信 リクエスト レスポンス
  24. 24. jQueryでサーバにデータ登録する
  25. 25. データの登録方法には2種類ある ①キーを自動採番して登録 ②キーを指定して登録
  26. 26. POSTリクエストのデモページ 自動採番する登録: h8ps://test.1.vte.cx/post.html キーを指定して登録 h8ps://test.1.vte.cx/post2.html
  27. 27. 自動採番とは
  28. 28. 自動採番とはサービスで一意の識別番号 ・文字どおり、サーバがデータに自動的に付与する番号(キー)です。 ・データを登録した時にそのURLが重複しないようにサーバー側で  他のデータと重複しない一意の番号が割り振られます。 ・指定された登録先の配下に自動番号が付与されたデータが登録されます。 /hoge ここを登録先とする /1-1-1-1231231 /1-1-1-1287911 /hoge配下に 自動採番された データが登録さ れる
  29. 29. キーを指定して登録する方法
  30. 30. キーを指定して登録するおさらい ・キーを指定して登録する場合は、自分でデータに名前(キー)をつける ・データのキーはlink項目のhref属性に入力し、rel属性をselfとする ・同じ階層に同じ名前があった場合はエラーとなる /hoge /test /abcde Link項目のhref属性が「/hoge」 Link項目のhref属性が「/test」 Link項目のhref属性が「/abcde」
  31. 31. jQueryでデータを取得する
  32. 32. データの取得方法には2種類ある ① 単体を取得する ② 一覧を取得する
  33. 33. GETリクエストのデモページ h8ps://test.1.vte.cx/get.html
  34. 34. データ取得のおさらい ・単体データを取得する場合は「?e」パラメータを使用する ・一覧を取得したい場合は、「?f」パラメータを使用する GET /hoge?e hogeデータの単体取得 hoge配下のデータ一覧取得 GET /hoge?f
  35. 35. jQueryでデータを更新する
  36. 36. データの更新方法には2種類ある ① 楽観的排他をする更新 ② 楽観的排他をしない更新
  37. 37. PUTリクエストのデモページ 楽観的排他をする更新: h8ps://test.1.vte.cx/put.html 楽観的排他をしない更新 h8ps://test.1.vte.cx/put2.html
  38. 38. データ更新のおさらい ・データの更新先はlink項目のrel=“self”を参照している ・更新の際は、id項目のリビジョン管理を行っており、サーバと不一致な場合、  楽観的排他が発生する ・id項目を省略し、強制的に更新も行えるが、楽観的排他をすることを  推奨する。 リクエストのid: /hoge, 1 更新成功 サーバのid: /hoge, 1 リビジョン番号が一致
  39. 39. jQueryでデータを削除する
  40. 40. データの削除方法には3種類ある ① 一件削除 ② 全件削除
  41. 41. DELETEリクエストのデモページ 一件削除: h8ps://test.1.vte.cx/delete.html 全件削除 h8ps://test.1.vte.cx/delete2.html
  42. 42. では、このような子供がいるデータ一覧 を削除したい場合はどうすればいいか
  43. 43. データ削除のおさらい ・一件削除にも楽観的排他を行う方法と行わない方法がある ・全件削除したい場合は「?_rf」を使用する 一件削除: DELETE /d/hoge 全件削除: DELETE /d/hoge?_rf
  44. 44. これでjQueryを使ったデータの操作 方法については終わりです
  45. 45. スキーマについて
  46. 46. スキーマとは ・ 自分が決めた項目名に値を入れて保存したい ・ スキーマを定義することで任意の項目に 任意のデータを保存することが可能 ・ データの設計図の役割 ・ IndexやACLなどをサーバで管理
  47. 47. スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形
  48. 48. スキーマの形 userinfo id(int) email favorite food!=^.{3}$ music=^.{5}$ hobby{} type name updated(date) スキーマの形 サーバに登録すると
  49. 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. 50. スキーマの登録方法 vtecblankプロジェクト /setup /_serngs template
  51. 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. 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. 53. スキーマについては記事を参照してください スキーマには項目名にバリデーションやindexをつけることもできます。 非常に便利な機能ですので、是非使用してみてください。 「Qiita vte.cx スキーマ定義」で検索
  54. 54. 以上で終わります。 また、ここでは時間の関係上、説明しきれていない大事な情報がたくさんあります。 「vte.cx Advent Calendar 2015」で検索 ご静聴ありがとうございました。

×