microCMSについて (概要編)

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

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

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

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

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

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

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

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

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

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

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

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

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

Thank You!

microCMSについて (概要編)

microCMSについて (概要編)

Nobuyoshi

More Decks by Nobuyoshi

Other Decks in Programming

Featured

Transcript