当社のホームページでは、これまでTwitterのタイムラインを埋め込んでお知らせを表示していたのですが、Twitterのタイムラインが表示できないという問題が発生したため、STUDIOとAPI連携しているmicroCMSに切り替えました。 microCMSを使うと、簡単にお知らせを管理できます。
STUDIOとは？
ノーコードでWebサイトを構築・運用できるサービスです。
microCMSとは？
ノーコードで記事を管理できるサービスです。 表示する機能は持っていないので、STUDIOなどのサービスと合わせて使います。
microCMSでのお知らせの作り方
microCMSにログインすると、まずはサービスを作成することになります。 サービス＝記事一覧の単位と考えてよいでしょう。 サービスの種類はいくつかありますが、お知らせの場合は「お知らせ」でよいでしょう。
サービスを作成すると、すぐに記事が作成できます。 サンプル記事も作成されているので、参考にするとよいでしょう。 公開ボタンを押せば、すぐに他サービスで利用可能になります。
カスタマイズ
標準のお知らせでは、タイトルと内容が記載できますが、お知らせとしては、公開日付や外部リンクもほしいところです。 そこで、API設定を開き、APIスキーマでカスタムフィールドを作成します。 今回は、日付("date")とURL("url")を作成しました。
これで記事の方に日付とURLが記載できるようになりました。
STUDIOとmicroCMSを連携する
STUDIOのAPI連携の機能を使って、microCMSと連携します。 まずは、microCMSでAPIキーともいえるcURLのコマンドラインをコピーします。 記事一覧でAPIプレビューボタンを押すと表示される以下の画面でcURLを選択するとコピーできます。
次に、STUDIOで、お知らせを埋め込みたいページを開き、API連携を埋め込みます。
API→新規追加でAPIタイプをmicroCMSとし、先ほどコピーしたcURLのコマンドラインをペーストします。 埋め込み自体はこれで終了です。 あとは、表示する項目や大きさを調整しましょう。
カスタマイズ
STUDIOで先ほど追加した日付とURLを表示できるようにしてみます。
日付を追加する
API連携したボックス内にテキストを追加します。 追加したテキストのボックスを開き、テキスト欄をクリックすると、プロパティからmicroCMSで追加したカスタムフィールドを選択できます。 ここでは"date"を選択します。 すると、追加テキストにmicroCMSの"date"フィールドの値が入るようになります。
URLを追加する
基本的には、日付を追加する場合と同じですが、クリックしたときに設定したURLに遷移するようにしたいので、 テキスト欄ではなく、リンク欄にプロパティを設定します。 リンク欄をクリックすると、右側に＋ボタンが現れます。 ＋ボタンをクリックするとプロパティ一覧が表示されるので、一覧からmicroCMSで追加したカスタムフィールドを選択します。 ここでは"url"を選択します。 すると、お知らせテキストのリンクとしてmicroCMSの"url"フィールドのURLが設定されるようになります。
結果
これでmicroCMSで作成したお知らせをSTUDIOで表示できるようになりました。 とても便利ですね。
カスタムフィールドを使えば基本的なことはだいたい実現できそうなので、簡単なブログサイトもSTUDIO+microCMSでつくれそうです。
