NoodlとmicroCMSとはなんぞや？

UI/UXを爆速でプロトタイピングできるNoodlと、国産HeadlessCMSのmicroCMSの組合せは、
プロトタイプ作成とコンテンツ管理が、簡単にできて汎用性ありそうと言うお話。

図：こんな感じ

Noodl,microCMSについて簡単に言えば
- UI/UXをプロトタイピングするツール：Noodl
- コンテンツをAPI経由で取出せる国産の管理システム：microCMS

詳しくは下記で紹介されています
- Noodl2.0β版が公開されたので使ってみた!
- 国産Headless CMS 「Micro CMS」を試してみた

きっかけ

昨年末より使い始めたNoodl。ついこの間、コミュニティの人達が麺書¹というものを作ってくださいました。今回はこの技術書典応援祭で手に入れた「麺書」を読んでひらめいた内容です。
ここで紹介されていた受付嬢(清水さん)デモで、参加者リストとしてCSVの静的データを使っていたのですが。この静的データ部分にHeadlessCMSを使ったら管理画面もノンプログラミングで爆速になるのではと考えました。

早速やってみた

もととなるプロジェクトは『麺書』サンプルとしてGithubで公開されています。
このなかのuketuke受付嬢(システム)をベースとして改造していきます。
サンプルの取込み方法、解説は麺書を読んでいただくのが一番わかりやすいので、ここでは概要と変更に関連する部分だけ紹介します。

図：完成後はこんな感じになります

主な機能は右側の管理画面でmicroCMSから読込んだ参加者リストを表示し、
左側の受付嬢(清水さん)が入力されたお名前がリストに登録されているか確認してくれます。

完成後のデータはGithub上こちらにあります。

microCMSでデータを準備

microCMSはこちらからアクセスできます。

こんな感じでGUIを使ってコンテンツとなるデータを用意

図：APIスキーマ

図：データを準備

コンテンツを受け渡すWebAPIのURLと、APIKeyをメモしておきます。

Noodlプロジェクトの変更

StaticDataノードをRESTノードに変更

次に、サンプルプロジェクトを開きkanriコンポーネントにRESTノードと、ボタンとなるGroup、Textノードを追加します。

図：RESTノードの設定

上記のようにRequest:Resoureceを「/news」(microCMS側で自分が設定したエンドポイント)とし、Request:ScriptのEditボタンを押して下記のFetchスクリプトをコピペします。

REST_Script

define({
  inputs:{
      apikey:'string'
  },
  outputs:{
      items:'collection'
  },
  request:function(inputs,request) {
      request.headers = {"X-API-KEY":inputs.apikey};
  },
  response:function(outputs,response) {
      outputs.items = response.content.contents;
  }
})

内容としては
1. RESTリクエスト前にAPIキーをヘッダーとして設定し
2. 受取ったデータをitemとしてOutputしているだけです

最後にRESTノードの設定として、先ほどメモしたURLをBackend:Endpointに追加。APIキーをInputs:apikeyに追加します。

Javascriptノードの修正

受付された名前とリストを比較しているJavascriptノードの一部を修正します。
NoodlのStaticDataではフィールドIDに日本語を使えましたが、microCMSではフィールドIDに日本語を使えなかったため、表示名⇒nameと変えたためです。

-if(key === "表示名")
+if(key === "name")

ノードの接続

StaticDataノードの接続を切り、用意したRESTノード(1)をCollectionノードに接続します。

REST:Items->Collection:Items

また、RESTのトリガーとして「リスト更新」ボタン(2)を用意しています。

Group:Click->Rest:Fetch

リストに表示する内容が増えたため、表示用のpartsコンポーネント(3)を修正します。ModelノードのPortに受け取ったname、nickname、contentsを追加し。Textノードに流し込んで表示させます。

以上・・・やってみたら。すごく簡単につながりました。

参考

ちなみに、webAPI経由で受け取ったrequestの中身を
Noodlのバックモードで見ると下記のようになっています。

追加：画像もmicroCMSから取得する方法

microCMSでは画像も登録することができるのですが、
画像URLはフィールドID(ここではicon)の下位階層になっているので、
RESTノードScriptを修正して階層を合わせます。

REST_Script修正

define({
  inputs:{
      apikey:'string'
  },
  outputs:{
      items:'collection'
  },
  request:function(inputs,request) {
      request.headers = {"X-API-KEY":inputs.apikey};
  },
  response:function(outputs,response) {
      for (i = 0; i < response.content.contents.length; i++) {
        response.content.contents[i].url=response.content.contents[i].icon.url
      }
      outputs.items = response.content.contents;
  }
})

表示項目が増えたので、表示用partsコンポーネントを修正します。

これで、リスト内に画像も取り込むことができました。

まとめ

UI/UXを爆速でプロトタイピングできるNoodlと、国産HeadlessCMSのmicroCMSの組合せは、とても簡単で汎用性ありそうと言うお話でした。

麺書は技術書典応援祭で4月5日までオンライン販売されています。 ↩

Noodlのプロトタイプ作成とmicroCMSのコンテンツ管理の組合せは爆速でした