表示部分がないヘッドレス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

コーディングの書式に今更迷う


2012年は、私たちコーダーの制作環境に大きな変化があった年でした。

春先にGoogleがコーディングガイドラインを公開し、

Sass・Compassといった、CSSを支援する拡張が本格的に普及し、

レスポンシブレイアウト対応のサイトが増え、

エディタをSublime Text 2に乗り換える人が増えました。 私も乗り換えました^v^

それに伴ってコーディングやスニペットの見直しをしているわけなのですが、かえって迷って効率が下がったり、手数が増えてしまっているところです。

とりあえず、悩み中なことをまとめます。


投稿者名 うぇびん 投稿日時 2012年12月28日 | Permalink

7月23日に「jQuery逆引きマニュアル」の著者が札幌に来ます

ドキッ!○○だらけの○○って以前も使った希ガス


私が参加してる、「SaCSS(サックス) コーディング勉強会」のスペシャル版が、来月23日に開催されますのでお知らせ。

先日発売になった「jQuery逆引きマニュアル 」の著者、

を招いての、jQueryに集中したセミナーです。


投稿者名 うぇびん 投稿日時 2011年06月16日 | Permalink

yuga.jsに入ってるthickbox.jsを使いやすくしてみる

画像やHTMLをポップアップ表示する、「thickbox」というjQueryライブラリがあります。

ThickBox 3.1

ウェブサイトでよく使われる演出をまとめた「yuga.js」に組み込まれているため、目にする機会が多くなりました。
今年の「ライジングサンロックフェスティバル」のサイトでも、アーティスト紹介に利用されています。

ですが先日、WEB屋ではない友人に
「ライジングサンのアーティスト写真の閉じ方がわからなかった」
と言われました。「右上に閉じるボタンがない」ため、戸惑ってしまったらしいです。

http: //blog.webbingstudio.com/2009/07/rising_sun.html(後半)

thickbox_2

私もこのブログの画像ポップアップに、thickboxを使っています。
確かにこれはわかりにくいです。

thickbox

そこでこのように、閉じるボタンが右上に出るように改造してみました。
手順は追記以下で。

1. CSSの読み込み順を変える

もしhead内で「thickbox.css」を最後に読み込むようにしていたら、linkの順番を変えて自分のサイトのCSSが最後になるように直します。
これをしないと、thickboxの基本CSSを上書きできません。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />

2. thickbox.jsを直す

できれば元ライブラリはいじりたくないのですが、HTML出力部分の修正が必要です。

thickbox.js内、三か所に以下のような記述があるので

<a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key

こう書き換えます。

<a href='#' id='TB_closeWindowButton' title='Close'>X</a> close to Esc Key

閉じるのリンクを大文字の「X」にすることに抵抗がある方は、別途閉じるボタンを用意して、3.でCSSを追加するときに画像置換などで対応してください。

3. CSSを上書きする

自分のサイトのCSSに、以下の記述を追加します。

大文字のXにグロテスク系(文字の線全体に太さの差がない)のフォントを指定し、右上に絶対配置することで疑似的に「閉じるボタン」を作っています。

角丸のスタイルは、Firefox・Safari・Cromeのみ有効で、「幅÷2+10%」くらいの値を指定すると、ほぼ丸になります。
Safari・Crome用の-webkit-border-radiusはショートハンドが有効にならないようです。上下左右個別に指定しなければならない点に注意してください。

IE6以降の主要ブラウザで確認済。
yuga.js・thickboxを使っている方はお試しください。

----- EXTENDED BODY:

投稿者名 うぇびん 投稿日時 2009年08月09日 | Permalink

北海道開発オフ:jQueryでスマートなブログを考えてみる

北海道開発オフへ行ってきました。

ノートパソコンを持参して参加したはじめての勉強会。なのに、肝心のOSが真っ青な画面になってしまって動きません…
買って一ヶ月しか経ってないんですけど@@;

PHPを勉強するつもりだったのですが、仕方なく予定変更。
会場(@smokeymonkeyさんの会社)のパソコンからMovableTypeにアクセスして、やや仕事がらみの開発をすることになりました。


ときどき、ウェブサイト的なワンカラムレイアウトのブログ構築をすることがあります。
ワンカラムは目に入る文章量が少なく、ブログ的なデザインを打ち破れるのですが、各記事を移動するときにいちいちページの読み込みが発生してしまいます。

最近勉強している、jQueryを利用して、デザインもインターフェースもスマートなブログが作りたいなーと考えてみました。
(もう既出だろうけど、開発オフなのでそこは無問題 :P)

結局今日は、MovableTypeとjQueryでこんなものができました。
(ソースをコピーして、静的HTMLに直しています)

https://webbingstudio.com/souvenir/jquery_test/

メインカラム下に、JavaScriptが有効にならなかった場合のページへのリンクも貼ってあります。お暇な方は比較してみてください。

今回は右下にすぽーんと投げ捨てるようなページ切り替えになっていますが、jQueryはアニメーションの追加ライブラリが豊富なので、柔らかいフェードイン・フェードアウトや、MacOSX風ぐるりん切り替えなんかも良さげ。

現段階ではほんとうにさわりだけで、しかもFirefoxでしかチェックしてませんwww
Ajaxでの過去ログ読み込みもつけることも考えると、シンプルな見た目の割になかなか難儀そうです。また時間があるときに考えてみます。

余談ですが、ノートパソコンは帰宅後再起動したら何事もなかったように直ってました。
お昼の、9月下旬とは思えない残暑で熱にやられてしまったのか、中古なだけに実は内部がぶっ壊れる寸前なのか…
まめにバックアップ取って、仕事の重要なファイルは入れないように気をつけなくちゃです。


投稿者名 うぇびん 投稿日時 2008年09月21日 | Permalink