Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2018-09-29.okayama.pdf

Okamuuu
September 29, 2018

 2018-09-29.okayama.pdf

Okamuuu

September 29, 2018
Tweet

More Decks by Okamuuu

Other Decks in Technology

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