microCMSについて (概要編)

microCMS(ヘッドレスCMS)についての概要を発表します。
実務は後ほど投稿する予定です。

Transcript

1. microCMSについて (概要編)
   2020/2/15
   植村修好
   

   View Slide

2. プロフィール
   植村修好：うえむー
   @uemuragame5683
   プログラミング
   html・css・sass・php・javascript・vue.js・jQuer
   y
   プライベート：ruby・golang
   趣味
   プログラミング・麻雀・ビートボックス
   

   View Slide

3. microCMSとは？
   microCMSとは2019年8月に
   ローンチした、API型のヘッド
   レスCMS。
   コンテンツ管理のためのサー
   バ管理は一切不要で、サイン
   アップするだけですぐにサー
   ビスを利用開始できます。
   https://microcms.io/
   

   View Slide

4. そもそもヘッドレスCMSって何なの？
   ヘッドレスの「ヘッド」は、ビュー（表示する画面）を指します。
   ヘッドレスなので、ビューの無いCMSということになります。
   

   View Slide

5. そもそもヘッドレスCMSって何なの？
   ビューがないというのはどういう事・・・？
   

   View Slide

6. そもそもCMSとは？
   CMSとはContent Management Systemの略で、つまりはコンテンツ管理
   システムを指します。
   CMSのビュー（見た目）には以下の三種類があります。
   ●サービス固有の画面（Qiita、Note etc...）
   ●テンプレートを選択できるもの
   （WordPress）
   ●自由に作成可能なもの（WordPress）
   

   View Slide

7. つまりヘッドレスCMSとは。。。？
   つまり、ビューに当たる部分が無いのが
   ヘッドレスCMSです。
   

   View Slide

8. それじゃあ、ビューはどうするのか？
   ヘッドレスCMSの場合、ビューはどうするでしょうか？
   自分自身で作成する必要があります。
   ヘッドレスCMSは入稿したコンテンツをAPIから取得することができ、この
   APIを用いて必要なコンテンツを取得し、出力させたい所に出力させま
   す。
   

   View Slide

9. microCMSのメリデメ
   メリット
   　マルチデバイスに対応できる
   　(コンテンツをWeb、iOSアプリ、Androidアプリetc..)
   　サイトを部分的にCMS化できる
   　フロントエンドの自由度が高まる
   デメリット
   　プレビューがしづらい
   　技術的難易度が高い
   

   View Slide

10. microCMSの導入例
    https://microcms.io/
    microCMSの管理画
    面でコンテンツを追加
    して、APIの型を選択し
    てAPIスキーマーを定
    義して、入力フォーム
    を作成していきます。
    入力フォームに入力し
    て行くと。。。
    

    View Slide

11. コーディング例(javascript編)
    入力フォームに入力したデータ
    は、APIから取得でき、jsonで返
    されます。
    APIを基にjavascript・phpなど
    でコンテンツを出力させるように
    コーディングすると。。。
    

    View Slide

12. コンテンツ出力結果
    Nuxt.js
    codepen
    Nuxt.jsのフレームワークやcodepen等、
    いろんな所で反映されるようになります。
    

    View Slide

13. まとめ
    　micro CMSはAPI型のヘッドレスCMSである。
    　サイトを部分的にCMS化でき、フロントエンドの自由度　が高まる。
    　フロントエンドの自由度が高まるというメリットとの裏返　しで、ある程度の
    技術が必要
    ※そこまで深掘りしてないのでそれは後日発表したいと思います。
    

    View Slide

14. Thank You!
    

    View Slide