初心者が始めるmicroCMS。②

みなさんこんにちは。
エンジニアの「わたなべ」と申します。

前回のおふざけから一転、今回は真面目に取り組んでいきたいと思います。

今回は真面目に学習する

兎にも角にも、触らないと始まらないということで、
前回とは違うリンク
https://microcms.io/

「無料で始める」
から今回はスタートしていきます！

では、わたなべの「初心者が始めるmicroCMS」、第２回目はぁじまぁるよー!

microCMSへ登録

さて、無料アカウントを登録していきましょう。
https://app.microcms.io/signup

入力したメールアドレスに誤字がなければ、認証リンクが届いているはず。

登録完了！
コンテンツを構築するには3つのステップが必要・・か。

サービス登録

microCMS登録画面の×をクリックしてそのままサービスの登録へ。
https://app.microcms.io/welcome

後からでも変えられるみたいなので、とりあえずデフォルトで・・

登録完了！（2回目）

API作成

作成されたURLからAPIを作成していきます。

・自分で決める　：自分で定義してAPIを作成します。
・ブログ：ブログを作る方向け。記事とカテゴリのAPIを作成します。
・お知らせ：更新情報やニュースの用途に。お知らせとタグのAPIを作成します。
・バナー：キャンペーンなど、バナーの運用に。バナー要素のAPIを作成します。

ふむ・・迷いますね。
どれでもいいと言えばどれでもいいのですが、ここは敢えて初手で選択しなそうな、
「バナー」
をチョイスしてみます。エンジニアは閃きが大事。

エンジニアは閃きが大事

「バナー」画像をクリックすると・・

作成完了！

コンテンツ入稿

次のステップはコンテンツ入稿。ですが、入稿リンクが見つかりません。
１．サービス登録　→　２．API作成　まではサクサクっとクリックするだけで進んだのですが、
→　３．コンテンツ入稿　の手法が見えなくなってしまいました・・。
どこをクリックすればいいんだ？

“あなたにできることをしなさい。今いる場所で、今あるもので”　～テディ・ルーズベルト～

サンキューテディ。
とりあえず画面上で目に留まった、「画面プレビュー」をクリックするよ！

画面プレビュー設定が行われていません。開発者に問い合わせるか、設定画面でプレビュー画面のURLを入力してください。

うんうん、設定が必要ってことですね。右上の「API設定」をクリックします。

「画面プレビュー」の設定を発見したのでクリックします。

URLの中には{DRAFT_KEY}という文字列を含めてください。
画面プレビューボタンの押下時に{DRAFT_KEY}は下書きキーであるdraftKeyに置換されて遷移します。

・・分かりました。
これ以上は今の知識ではにっちもさっちもいかなそうなことが分かりました。
ちょうど画面上に「APIの詳しい利用方法はこちら」と操作マニュアルへの遷移があるので、
そちらで情報を収集します！

エンジニアは切り替えも大事

再度API作成

チュートリアル的には、APIは「自分で決める」で進めていますね。乗るしかない。

＋をクリックして、再度APIを作成。

今度こそ「自分で決める」で作成。

API名：お知らせ
エンドポイント：news
で次へ。

・リスト形式：JSON配列を返却するAPIを作成します。
ブログやお知らせの一覧、カルーセル等に適しています。
・オブジェクト形式　：JSONオブジェクトを返却するAPIを作成します。
設定ファイルや単体ページ情報などの取得に適しています。

お知らせはリスト形式が適しているとのことで、リスト形式を選択し次へ。

なるほど。ここでお知らせのコンテンツを定義していく形になるのですね。
では、「タイトル」と「本文」を定義して完了。

お知らせAPIが作成され、コンテンツの追加を促される画面に。
何か、入稿（追加？）できそうな気がしてきました！

今度こそコンテンツ入稿

＋追加をクリックして、コンテンツ作成画面に遷移。

前項で定義した、「タイトル」と「お知らせ」があります。
内容を入力して、右上の公開をクリック。

コンテンツが「公開中」となり、入稿が完了しました！

今思うと、最初の「バナー」APIを作成した時点で、「画像」や「バナーの説明」が定義されていて、かつ、内容も入力済みだったので、コンテンツ入稿は完了していたのですね。

ブログ、お知らせ、バナーを選択してAPIを作成すると同時にコンテンツ入稿も完了する

つまり、テンプレートが用意されていてそれをベースにお好みにカスタマイズすることもできるし、1から自分で作成もできるってことです！便利！
（当たり前なことに気付くのっていつも遠回りですよね）

最後に

今回は1からAPIを作成してみました。
次回は作成したAPIを呼び出して、ブラウザで表示していきたいと思います。
バイバイ！