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
380
microCMSについて (概要編)
microCMS(ヘッドレスCMS)についての概要を発表します。
実務は後ほど投稿する予定です。
Nobuyoshi
February 15, 2020
Tweet
Share
More Decks by Nobuyoshi
See All by Nobuyoshi
仕事では採用されなかったホスティングサービス、 せっかくなのでLTで話します
uemura
0
83
Babylon.js × microCMS でフォトギャラリーサイト作った
uemura
0
220
2年ぶりにCSSアニメーションを作ったよ!
uemura
0
830
今年初めてのBabylonJsを触ってみた
uemura
0
260
ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話
uemura
1
1.5k
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
uemura
0
310
Pug / SASS でピクロス(カービィ)を作成
uemura
0
160
僕の好きなcssプロパティ・値5選
uemura
0
470
複雑なHTML_CSS アニメーション 作品一覧 + 苦労したこと
uemura
0
140
Other Decks in Programming
See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
520
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
970
チームの境界をブチ抜いていけ
tokai235
0
140
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
CSC305 Lecture 06
javiergs
PRO
0
210
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.4k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
210
CSC509 Lecture 06
javiergs
PRO
0
260
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
460
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
480
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
A Modern Web Designer's Workflow
chriscoyier
697
190k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Visualization
eitanlees
148
16k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Balancing Empowerment & Direction
lara
4
680
How to Think Like a Performance Engineer
csswizardry
27
2k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
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!