Programming / Travel / Liquor

Headless CMS「prismic」の使い方紹介【contentfulとの違いなど】

Prismic Headless CMS

本ブログでも使用している、Headless CMS「prismic」の始め方・コンテンツ管理方法を紹介します。

prismicとは?

prismicとはHeadless CMSと呼ばれるサービスのひとつです。コンテンツ(記事)の管理画面はありますが、それを表示するビュー画面(Head)は付いていないためHeadlessと呼ばれています。

記事を閲覧するビューの部分がないため、通常はVueやNuxtなどフロントエンドの技術を使って、ビューの部分をイチから構築します。そして、prismicで管理しているコンテンツをAPIで取得して画面に表示させるといったことが必要です。

逆に、HeadlessでないCMSで有名どころだとWordPressがあげられます。WordPressなどのCMSは管理画面から記事閲覧のビューの部分まですべてセットになっていますね。

contentful

他のHeadless CMSとして有名なサービスではcontentfulが有名でしょうか。

prismicよりもcontentfulのが知名度が高い感じで、検索してもcontentfulを使用したサイト構築等の情報は結構出てくるのですが、prismicは日本語ページでは全く出てきません。。

私は使用したことはないですが、このブログを作るときに調べていて、情報も多いし機能的にも十分でマークダウンも使えるし良いなーと思ったのですが料金があまり優しくない感じで選びませんでした。

無料枠はもちろんあるのですが、記事+アセット(画像等)で合計5000までという制限があって、これが記事だけなら良かったのですがアセット含めてだと微妙だなーと(制限いっぱいまでブログを続けられるかは別として。。)

かつ、いざ有料プランに移行した時に月の料金がかなり高いんですねー

そこらへんはcontentfulのページを参照いただければ↓↓

>> contentful 料金

prismicの始め方・コンテンツ管理方法

アカウント登録

さっそくですが、prismicの始め方についてです。

まず、アカウント登録する必要があるためprismicのサイトにアクセスしてサインアップ画面を開いてアカウント登録します。

無料枠であれば必要なのはメールアドレスぐらいでクレジットカード情報等は登録する必要はないです。

サインアップ画面

prismicコンテンツ構造

アカウント登録後ログインしてダッシュボード画面を開きます。

ここでリポジトリを作成します。リポジトリの下で記事コンテンツや画像コンテンツを作成・管理します。リポジトリは複数作成できますが、基本的にはひとつのサイト/ブログに対してひとつのリポジトリという関係になります。

prismicは以下のようなコンテンツ構造になっています。

リポジトリ配下にさらにコンテンツ、カスタムタイプ、メディアライブラリと呼ばれるコンテンツを管理するグループが存在します。

2019年11月現在、無料枠でもリポジトリの作成数に制限はないです。リポジトリには複数のユーザーを割り当てられるのですが、無料枠ではひとつのリポジトリに対して1ユーザーしか割り当てられません。

が、ブログ等の用途であれば当然自分1人しか触らないため何も問題なしです。

そして、無料枠と有料プランで大きく違うのはこのリポジトリのユーザー数ぐらいです!

無料枠でも何も問題ないですね!

カスタムタイプ

カスタムタイプはコンテンツのフィールドを定義する、コンテンツの雛型のようなものです。例えば記事コンテンツであればフィールドとして「id」「投稿日」「更新日」「タイトル」「本文」「画像」など記事に必要となるフィールドを定義しておきます。

カスタムタイプは必要に応じて、複数定義可能です。

本ブログでは現在、記事・カテゴリー・タグ用の3個のカスタムタイプを定義しています。

カスタムタイプ一覧

↓カスタムタイプの定義は画面上でドラッグ&ドロップで直感的に操作できます。

画面右側に使用可能な定義一覧があり、それを左側の任意の位置にドロップするだけでOKです。

使える定義には、uid(リポジトリユニーク)やリッチテキスト、日付や画像、埋め込みコンテンツなど必要そうなものは一通りそろっています。

記事用カスタムタイプ

コンテンツ

実際のコンテンツデータです。定義したカスタムタイプを使ってコンテンツ(ブログならブログ記事)を作成します。

基本的にはカスタムタイプで定義したフィールドに必要な情報(日付やタイトル等)を入れていくだけですが、ここで使用できる機能でスライスと呼ばれるコンテンツを作成するのにかなり強力なものがあります。

非常に便利な機能なのですが、ここで書くと長くなるので別記事にしてまた紹介したいと思います。

メディアライブラリ

メディアライブラリは読んで字のごとく、画像等を管理するためのものです。画像等と書きましたが、音声や動画など様々な形式に対応しています。

>> サポートしているメディア

ただのライブラリではなく、トリミング可能、ブラウザが対応していればWebPフォーマットで配信してくれるなどしてくれます。

メディアライブラリ(直感的な操作!)

prismicの不満点

まだあまり使いこんでいるわけではないですが、現状の不満点も一応書きます。

マークダウンが使えない

マークダウンはさくさく書けて素晴らしいですよね。でも残念ながらprismicでは使えません。。。

リッチテキスト形式オンリーです。慣れればOKかな?

インポート・エクスポート問題

インポート・エクスポートは有料プランでないと使用できません。インポートは良いとして、エクスポートはねぇ。。。

ただし、エクスポートしたとしてもprismic独自のリッチコンテンツ形式のものになるので微妙かも。まぁそこについてあまり自由に出来てしまうと商売にならないからしょうがないですね。

データ自体はAPIで取得できるので、「HTMLにパース→マークダウン書き出し」みたいなライブラリをいつか作りたい。。

おわりに

いかがでしょうか?Headless CMSとしてのprismicという選択肢。

紹介できていないところも多くあるのですが(スライスとかプレビュー機能)、有名どころのcontentfullよりも良いところありますよ!

今後、このブログで色々試しつつ使用感など継続的にまた紹介できればと思います。

About
K

旅行とお酒、そしてプログラミングが大好きなエンジニアです。

バックエンド、言語としてはJava(Spring FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。

旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)

お酒はビール・ウイスキー・日本酒があればOK。

Portfolio

QT Visualizer

Portfolio Site

プライバシーポリシー

Frontend by Nuxt & Vuetify / Contents by Prismic.io

© 2019 K note.life