Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
microCMSについて (概要編)
Search
Nobuyoshi
February 15, 2020
Programming
1
370
microCMSについて (概要編)
microCMS(ヘッドレスCMS)についての概要を発表します。
実務は後ほど投稿する予定です。
Nobuyoshi
February 15, 2020
Tweet
Share
More Decks by Nobuyoshi
See All by Nobuyoshi
仕事では採用されなかったホスティングサービス、 せっかくなのでLTで話します
uemura
0
66
Babylon.js × microCMS でフォトギャラリーサイト作った
uemura
0
210
2年ぶりにCSSアニメーションを作ったよ!
uemura
0
740
今年初めてのBabylonJsを触ってみた
uemura
0
250
ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話
uemura
1
1.4k
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
uemura
0
300
Pug / SASS でピクロス(カービィ)を作成
uemura
0
150
僕の好きなcssプロパティ・値5選
uemura
0
460
複雑なHTML_CSS アニメーション 作品一覧 + 苦労したこと
uemura
0
140
Other Decks in Programming
See All in Programming
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
990
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
150
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
440
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
16k
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
5
2.4k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
A designer walks into a library…
pauljervisheath
207
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Language of Interfaces
destraynor
158
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Designing for Performance
lara
610
69k
For a Future-Friendly Web
brad_frost
179
9.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
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!