microCMSはAPIベースの日本製ヘッドレスCMSです。コンテンツをAPIベースで利用できるので、好きな言語・フレームワークと組み合わせて利用できます。
いろいろな言語・フレームワークでmicroCMSを始めるチュートリアル記事はインターネットに多くありますが、それを終えたあとに読む記事はあまり見かけません。このZennではチュートリアルを終えた方向けに、実際の運用で役立つ機能を紹介していきます。
microCMSの便利な機能
柔軟なクエリパラメータ
microCMSはAPIを柔軟に構成できますが、クエリパラメータも充実しています。
例えば以下のURLはクエリパラメータを使って 「titleフィールドに"おすすめ"を含むもの」 をフィルタし、その結果を 「公開日時の新しい順」に並び替えて 取得しています。
https://your-domain.microcms.io/api/v1/blog
?filters=title[contains]おすすめ&orders=-publishedAt
このようにクエリパラメータを使って望んだ形でコンテンツを取得できます。パラメータはいくつか種類がありますが、ここではよく使うものをピックアップして紹介します。
q
全文検索のためのパラメータです。
例えばq=Reactとすると、"React"のキーワードでコンテンツを検索し、ヒットしたコンテンツを取得できます。
filters
フィルタする条件を指定できます。
条件は様々なものを指定できますが、基本的なものだと以下があります。
- equals
- 指定に一致したコンテンツを取得
- 例)
filters=gender[equals]women
- contains
- 指定した値を含むコンテンツを取得
- 例)
filters=title[contains]おすすめ
- exists
- 指定した値が存在するコンテンツを取得
- 例)
filters=category[exists]
ここではシンプルな例を挙げましたが、コンテンツ参照やカスタムフィールド、繰り返しフィールドを含んだ複雑な構造でもクエリできます。また、[and]や[or]を使って条件を組み合わせることも可能です。
fields
レスポンスに含むフィールドを指定できます。
例えば fields=title,main_image,author.name と記述すれば、指定したフィールド値だけがレスポンスに含まれます。
必要最低限のフィールドに絞ることで、通信量を制限やレスポンス速度の向上が期待できます。
その他のパラメータ
他にも便利なパラメータがあります。より詳しい情報はmicroCMSドキュメントをご覧ください。
画像API
microCMSにアップロードした画像は、「画像API」と呼ばれる機能を利用できます。これは画像URLの末尾にクエリパラメータをつけることで、リサイズや形式を変換して取得できるものです。
例えば width パラメータをつけることで、指定したサイズで取得できます。
ブログなどのメディアを作る際、「詳細ページではフルサイズの画像が、一覧ページではサムネ用の小さめサイズの画像が欲しい」という要件はよくあると思います。
画像APIを使えば管理する画像は1つでよく、利用シーンに応じてその都度適切なサイズで取得できます。
適切なサイズでの取得は画像の表示速度が上がり、ユーザー体験が良くなります。さらに、費用面でもメリットがあります。microCMSの料金設定は、データ転送量が増えるとよりお金がかかる仕組みになっています（月に20GBまで無料）。画像はテキストに比べてデータ量が大きく、転送量を左右する要素です。画像APIをうまく活用すれば無料プランの範囲でかなり使えると思います（microCMSの料金プラン）。
ちなみに、microCMSの画像APIは Imgix で実現されています。microCMSがパートナーとして提携しているので、サインアップや料金の負担なしにImgixの豊富な機能にアクセスできます。サイズの他に品質やフォーマット、テキストの追加などもできるので、詳しくは画像APIのドキュメントをご覧ください。
リッチエディタの装飾のカスタマイズ
リッチエディタはmicroCMSが提供するフィールドの1つで、装飾付きのテキストを入稿できます。WYSIWYGエディタと呼ばれるもので、他のCMSなどでもよく使われているので馴染みがある方も多いかと思います。
microCMSのリッチエディタでも様々な装飾が提供されています。
簡単に装飾をつけられて便利ですが、Webサイトによっては不要な装飾があるケースがあります（サイトの見た目的に「下線」は使って欲しくない場合など）。
そんなときにオススメなのが 「リッチエディタの装飾のカスタマイズ」 です。
カスタマイズすると入稿画面には指定した装飾だけが表示されるため、運用時の混乱を防げます。特に実装者とコンテンツ入稿者が分かれる場合には便利な機能です。
装飾の設定方法についてはリッチエディタのドキュメントをご覧ください。
カスタムフィールドと繰り返しフィールド
「テキストフィールド」や「数値フィールド」など、microCMSで提供されているフィールドのほとんどは名前を聞けばなんとなく意味が分かります。
そんなフィールドの中で少し特殊なのが「カスタムフィールド」と「繰り返しフィールド」です。他と比べると理解が必要ですが、とても便利な機能です。
カスタムフィールドとは
カスタムフィールドとは、任意のフィールドを組み合わせて作れるフィールドです。
例えば商品情報を表現するデータを定義したい場合、「商品」フィールドを自作できます。
カスタムフィールドで商品を表現
商品名、価格、商品画像をカスタムフィールドを使って1つにまとめています。
データを構造化できるだけでも少し便利ですが、次に述べる繰り返しフィールドと組み合わせるとさらに便利です。
繰り返しフィールドとは
繰り返しフィールドとは、フィールドの候補の中から、任意の回数項目を繰り返し選んで作れるフィールドです。前述のカスタムフィールドをあらかじめ候補として登録しておき、その中から選んで追加します。繰り返しフィールドを使うことで、遥かに柔軟にコンテンツを表現できます。
例えば「新生活特集」であれば10つの商品があるけど「梅雨特集」では3つだけ、のような場合。特集ページの内容によってコンテンツの長さが変わるため、事前に固定の入稿画面を用意するのは難しいでしょう。
そんな時に繰り返しフィールドです。以下の画面のように、追加したいフィールドを選択して入稿画面を動的に作れます。
追加するフィールドを選択する
必要なフィールドをポチポチ選んでいきます。
候補には好きなフィールドを登録できるので、自由度も非常に高いです。
繰り返しフィールドで作成したコンテンツ
実際の例でいうと、ZOZOさんが紹介されている以下の記事が大変わかりやすいです。
キャンペーンページをエンジニアの手を介さず作れるような仕組みを構築されています。
繰り返しフィールドの詳細についてはmicroCMSドキュメントをご覧ください。繰り返しできる回数を制限したりなど細かいオプションも用意されています。
表示項目の編集
データのフィールドが多かったり構造が複雑な場合、コンテンツ一覧画面がごちゃついて見えてしまいます。
項目が多くなるとパッと見で理解しにくくなる
そんな時は「表示項目の制御」を設定しましょう。
一覧画面に表示するフィールドを選択できます。
一覧画面に表示する項目を設定すると、
必要な情報だけを表示できる
注意点として、表示項目の制御はブラウザに保存される仕組みのため他メンバーとは共有されません。チームで使っている方は各メンバーが設定する必要があります。
まとめ
チュートリアルを終えた方向けに、実際の運用に役立つmicroCMSの機能を紹介しました。
どれも便利ですが、特に画像APIはUX向上 & 転送量の抑制に役立つので幅広いユースケースで活用できるかと思います。
みなさんの推し機能があればぜひ教えてください。お読みいただきありがとうございました。
Discussion