2018-09-29.okayama.pdf

Transcript

1. Contentful
   を使ってみました
   岡山城 天守閣
   2018-09-29
   okamuuu
   1 / 17
   

   View Slide

2. あくまで個人の感想です。
   2 / 17
   

   View Slide

3. Contentful
   とは?
   いわゆる Headless CMS
   です。
   Contentful
   ButterCMS
   storyblok
   GraphCMS
   など
   3 / 17
   

   View Slide

4. CMS vs Headless CMS
   ざっくり説明すると
   Response
   を HTML
   で返すのが CMS
   Response
   を JSON
   で返すのが Headless CMS
   わかりやすく言うと
   WordPress
   は CMS
   Contentful
   は Headless CMS
   4 / 17
   

   View Slide

5. Contentful
   の特徴
   型を自由に定義できる
   型に沿ったオブジェクトを出し入れできる
   CRUD
   画面が現れる
   REST API
   も生える
   位置情報検索もできる
   個人で開発する時にとても便利
   5 / 17
   

   View Slide

6. Contentful
   を使ってみた感想
   CRUD
   画面が自動生成される。気持ちいい。
   API
   にちょっと癖がある。
   リレーションできない?
   通信回数がN+1
   にならないように工夫が必要?
   6 / 17
   

   View Slide

7. CRUD
   画面が自動生成される
   7 / 17
   

   View Slide

8. CRUD
   画面が自動生成される
   users
   という型を管理画面で作成する
   この時点で CRUD
   画面が用意される。
   そこに user object
   を追加する
   /entries?content_type=users
   で一覧取得できる
   8 / 17
   

   View Slide

9. API
   にちょっと癖がある
   9 / 17
   

   View Slide

10. API
    にちょっと癖がある
    期待している Response
    {
    "id": 2073765716208129
    "name": "
    神牛前3
    丁目",
    "state: "
    東京",
    }
    10 / 17
    

    View Slide

11. API
    にちょっと癖がある
    {
    "fields": {
    "id": {
    "en-US": 2073765716208129
    },
    "name": {
    "en-US": "
    神牛前3
    丁目"
    },
    "state": {
    "en-US": "
    東京"
    }
    },
    "sys": {
    "id": "5KsDBWseXY6QegucYAoacS",
    "type": "Entry",
    "createdAt": "2016-12-20T10:43:35.772Z",
    "updatedAt": "2016-12-20T10:43:35.772Z",
    "revision": 1
    }
    11 / 17
    

    View Slide

12. リレーションできない?
    12 / 17
    

    View Slide

13. リレーションできない?
    Entry
    取得した場合、関連する型の sys.id
    しか取得
    できない。ドキュメントには include
    を指定するよ
    うに書いているが...
    // console.log(user.fields.status)
    {
    sys: {
    type: 'Link',
    linkType: 'Entry',
    id: '6Bw3NLBDJ6KEyOc2YwucYk'
    }
    }
    13 / 17
    

    View Slide

14. 通信回数がN+1
    にならないよう
    にする
    14 / 17
    

    View Slide

15. 通信回数がN+1
    にならないよう
    にする
    リレーションができないのであれば、の話ですが
    一覧表示画面を実装するときにあえて非正規化す
    る場面がでてくるかも
    Promise.all
    してももっさりしがちなのでできれ
    ば API
    の向こう側で解決したい
    15 / 17
    

    View Slide

16. まとめ
    Contentful
    はかなり便利だった
    なんだけどリレーションができない?
    ドキュメントを分かりやすくして欲しい
    example
    がもっと欲しい
    Cognito
    と Contentful
    があれば色々できる予感
    16 / 17
    

    View Slide

17. おしまい
    17 / 17
    

    View Slide