表示部分がないヘッドレスCMS「microCMS」でサイトを作ってみた

2019-09-30追記
デモサイトの公開を終了しました。
microCMSで「画像のリサイズ」が可能になりました。また、boolean(チェックボック)フィールドが追加されました。



ASP型のヘッドレスCMS「microCMS」のベータテストが始まっています。
通常は月額8,500円が必要ですが、試用期間は無償で使い放題ということで、事前予約をしていました。

https://microcms.io/

ヘッドレスCMS」については後述しますが、これまでのCMSと概念が異なるため、使いどころが難しいです。実際にサイトを構築してみるしかないだろうと、コンセプトから考えてきっちり作ったので、体験レポートをします。

サンプルサイト


「動画投稿サイトから人気が出たブレイク直前の男性アーティスト」という、どこかで聞いたような人物のオフィシャルサイトです。
試用期間が終了する、2019年9月30日まで限定公開します。

(公開は終了しました)

Tsuyoshi.さん、かっこいい写真をありがとうございます。またジンギスカン食べましょう :D


基本的に静的サイトですが、以下の3箇所で、JavaScriptでmicroCMSに投稿したデータを表示しています。

  • Home>What's New
  • Home>Discography最新
  • Discography

ヘッドレスCMSとは



話を戻して、ヘッドレスCMSについてざっと説明します。

これまでの主要なCMSは、管理画面=投稿部分と、テンプレートエンジン=表示部分で構成されていますが、ヘッドレスCMSは表示部分を持っていません。そのかわりAPIが提供されていて、各ユーザーがAPIから取得したデータを加工して利用します。

利点は、ユーザー側が好きなスクリプト言語を使用でき、かつウェブサイトに限らず、スマートフォンアプリ・デジタルサイネージと、様々なプラットフォームに使えるというところです。

一方で欠点は、ノンプログラマには利用できないところです。また、アーカイブを考えなければならないブログやコーポレートサイトでの利用では、便利さを感じにくいでしょう。

管理画面の印象



APIのセット=サイトやプロジェクト名を新規作成すると「スキーマ」を作るように言われます。「フィールド」のことらしいです。入力例がないので何のことなのかしばらく悩みました。
上の画像はDiscographyのスキーマの一部です。



フィールドタイプは、現状、5種類しかありません。「ラジオボタン」「セレクトボックス」「チェックボックス」がないのは、かなりきついです。正式版までに実装されると願いたいものです。NewsやDiscographyのカテゴリーラベルは文字列の直打ちにしました。

booleanフィールドが追加され、チェックボックスでの選択が可能になりました。

日時は、タイムスタンプ=公開日時のことはありません。タイムスタンプはデフォルトで提供されます。公開日時を変更可能にしたい場合は、フィールドを作る必要があると思います。



スキーマを作ったらすぐ入力を始められます。画像フィールドに編集アイコンがありますが、画像のサイズを変えることはできません。また、現時点ではアップロード時のリサイズ生成ルールもありません。ここでは公開サイズに編集してからアップロードしています。

APIリクエスト時にクエリを送ることで、画像をリサイズできるようになりました。

開発の方からTwitterで教えていただいたのですが、画像サイズについては早めに対応を考えているとのことです。開発ロードマップは、管理画面で見ることができます。

コンテンツの表示

入力はすぐできたので、静的サイトを作って、いよいよAPIの取得・表示部分に取り掛かりました。

サンプルサイトのスキーマは複雑なので、「タイトル・日付・画像・テキスト」を持ったスキーマ「post」を表示するサンプルをGistで公開しておきます。
かなり雑なスクリプトですが…

APIを見て気付いたのが、API側でできることが、指定したフィールドの取得・表示件数・非公開記事を表示するかの選択くらいしかないことでした。

つまり、以下のようなことは自分でスクリプトを書いて実装しなければならないということです。

  • 並べ替え
  • フィールドの内容による絞り込み
  • ページネーションの生成

私はJavaScriptを専門にできるほどのスキルはまだありません。なので、Gistの内容を実装するまででも2時間くらいかかりました。テンプレートエンジンを知っていればもっとスムーズだったかもしれませんが。

microCMSのトップページの導入ケースに「デザイナー」がいるので誤解しがちですが、少なくともデザイナー向けのCMSではないです(そう書いてもいません)。

使えそうな状況

私はコーポレートサイトの制作が多いので推測レベルですが、以下のようなコンテンツに向いていそうです。

  • 静的サイトのごく一部にしか使用しない
  • データを表示したい対象が、サイト、アプリ、デジタルサイネージなど多数ある
  • データ構造がシンプル
  • ページネーション、検索、アーカイブなどの必要性が薄い

パッと浮かんだのが、スマホゲームアプリの開発会社です。公式とアプリの両方にお知らせを出しつつ、多数のゲーム用のアカウントを作る感じです。APIは30本まで作れるので、単純に30タイトルまでいけるということになります。
ゲームアプリを作るくらいの人たちであれば、ゲーム内にお知らせを組み込んだ方が楽なのかもしれないですが。

今回、アーティストのサイトを作ったのは、アーティストのサイトは、最初はSNS中心で小さく始めて、売れるに従って規模が大きくなっていくケースが見られるからです。

microCMSのライバル

身も蓋もない話になってしまいそうですが、ASP型CMS「MovableType.net」でもData APIが使えます。
使用したいサイトが1個だけであれば、こちらの方がコスパが良かったりします。

https://movabletype.net/support/setting/data-api.html

ただし、MovableType.netはあくまで、ウェブコンテンツの管理が主であり、API利用に特化するなら必要ない機能も多いです。microCMSのようにサクッと立ち上げることは難しいでしょう。そのあたりで差別化ができそうです。

私の業務内容からすると、microCMSはまだまだ縁が薄そうなのが残念です。でも、スキーマや表示部分を自分を組み立てていくのはとても楽しかったです。APIや管理画面の機能が改良されていけば、これまでになかったCMSとなるだろうと期待しています。


投稿者名 うぇびん 投稿日時 2019年09月05日 | Permalink

a-blog cms公式テーマの軽量版「site2015mini」を公開しました


a-blog cmsの企業向け公式テーマ「site2015」を軽量化し、個人サイトや学習目的に利用しやすくした「site2015mini」を、GitHubに公開しました。

https://github.com/webbingstudio/ablogcms-site2015mini

表示確認用エントリーを含む、インポートデータ一式も同梱しています。テーマ自体はMITライセンスにて無償配布しますので、a-blog cms本体のライセンスに基づき、学習用、プロトタイプ用にご自由にご利用ください。


投稿者名 うぇびん 投稿日時 2015年07月23日 | Permalink

a-blog cmsの「投稿画面用CSS」の改良版を配布します

WebbingStudioの管理画面

WebbingStudio@メインサイト改修中です。

a-blog cmsの最大の魅力は、投稿画面を公開ページに併せて変更できることです。
その投稿画面のカスタマイズをやりやすくした、改良版CSSを配布します。
「これまでデフォルトのまま使っていた」「投稿画面が既存サイトのCSSと相性が悪かった…」という方はぜひぜひ。

※バージョン1.4時点のacms.cssをベースにしています。今後のバージョンアップで、追加スタイルが必要になるかもしれません。
※Internet Explorer 6での表示確認はしていません。


投稿者名 うぇびん 投稿日時 2011年05月17日 | Permalink

a-blog cmsでFacebookページの「いいね!」表示を分ける方法

私のFacebookページでも使っています


iFrame版のFacebookページは、読み込み元で自由にプログラムを仕込めるので、「いいね!」されているかどうかでコンテンツの表示を分けることができます。 PHPでのやり方については、藤本さんが記事を書かれています。

読み込み元のページをCMSで管理している場合も可能ですが、a-blog cmsはテーマ内に直接PHPを書くことができません。
a-blog cmsの山本さんにアドバイスをいただいて、いいね!されていないときだけ囲まれている内容を出力する「Touch_NotFbLike」モジュールを作成したので公開します。


投稿者名 うぇびん 投稿日時 2011年02月26日 | Permalink

第20回北海道開発オフ:ゲームの共同開発をしてみる

北海道開発オフが丸三年、20回目を迎えました。

DevDo::北海道開発オフ

メンバーの皆さんおめでとうございます。
これまで参加した皆さんありがとうございます。

20回記念ということで、今回は少し趣向を変えて、同じアプリケーションを違うプログラミング言語で作成する「共同開発」を行いました。

参加者同士でやってみたいことを相談した結果

  1. 一定ターンまで選択肢でを能力上昇させる「育てゲー」の設計
  2. Ruby on RailsチームとPython+Google App Engineチームでそれぞれ作る

となりました。

私はフレームワークを扱えないので、どうしようか…と思っていたところ、
参加者のわたなべさんから

「じゃあ、うぇびんさんは仕様に添ってゲーム画面作ってください。
 HTML5とCANVASで。

という素晴らしい無茶振りをいただきました。

こ、ここは期待されててなくても応えるべきよね!
うぇびんたん頑張ったよ!

成果発表(ゲーム画面)

ドラクエやWIZ風のUIにしてみましたが、CSS3のプロパティを駆使すればファイナルファンタジー風に変更することも可能です。
HTML5なので閲覧にはChromeかSafariを推薦します。

HTML5、CANVAS、プログラミングの勉強の素材にしてみたい方は自由にソースコードをご利用ください。
私もこれを使って、PHPでゲームを作ったらいい勉強になるかなと考えています。パラメーターなどの要素をTwitterのAPIと連携させても面白いかもしれませんね。

※「おむこ」というのはRuby on Railsチームのプロジェクト名です。

成果発表(開発側)

Python+GAEチームは、基本動作まで形になりました。

Ruby on Railsチームは、コマンドラインでのキャラ生成まで。
詳しくはsmokeymonkeyさんの記事をご覧ください。

[-*煙猴*-]: 第20回北海道開発オフに参加した


次回からは、また普通のユルユル独習会になります。

開発オフという勉強の場があったおかげか、独習かCMSのカスタマイズでしかプログラミングを扱う機会がない私が、お仕事でPHP+MySQLの簡単なアプリケーションを作れるまでになりました。

これからも初心者が勉強会に参加できる気軽な窓口として、各種言語の技術者が交流できるハブとして、活動のお手伝いができればいいなと思います。


投稿者名 うぇびん 投稿日時 2011年01月17日 | Permalink