microCMSについて (概要編)

Transcript

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

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

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

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

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

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

   •自由に作成可能なもの（WordPress）

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

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

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

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

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

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

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

14. Thank You!