【Nuxt.js+microCMS】
プレビューに苦戦

  • 【Nuxt.js+microCMS】
    プレビューに苦戦

    Nuxt

    目次

    どうも！こんにちは！
    じぃでごわす！

    タイトル通り苦戦をしいられました。。

    本ブログはNuxt.js+microCMSで構築されており、
    microCMSに記事を入稿し「公開ボタン」を押すと、自動的にページに反映される。
    という仕組みです。

    microCMSで「公開ボタン」を押すと問題なく、公開されるのですが、
    入稿方法の仕様的に公開前にページの確認というのが現状できていませんでした。

    そこで、microCMSさんのブログを参考にやってみたので、その苦戦の様子をお伝えいたします。

    前提

    前提として、microCMSで記事を入稿するには大きく2パターンあります。

    1. ・リッチエディタ
    2. ・HTMLエディタ

    リッチエディタ

    リッチエディタはmicroCMSさんが用意をしてくれているエディタで、いわゆるWYSIWYGです。

    このリッチエディタで入稿した場合は、
    WYSIWYGで設定した見出しや、段落、リンク、などのタグを自動的に付与してフロント側に返してくれます。

    フロントはそれを受け取って、そのままHTMLを表示をさせていると言った感じです。

    この場合、入稿は楽ではあるのですが、
    「オリジナルのクラスを、つけたいタグにつけられない」という問題があります。

    そこで、私の場合はリッチエディタとは別で、
    オリジナルのクラスをつけれるように「HTMLエディタ」というものを配置しています。

    ここに関しては以下のmicroCMSさんの記事がすごく分かりやすいです。

    リッチエディタを使いつつ一部はHTMLで入稿する

    HTMLエディタ

    これは、いわゆるテキストエリアです。

    テキストエリアなので、自分でHTMLタグを囲む必要がありますが、
    オリジナルのクラスをつけることができます。

    私はこの2つを使い分けて、ブログの記事を入稿しています。

    問題

    ここで問題なのですが、リッチエディタ・HTMLタグどちらも入稿は簡単ですが、
    実際に公開されないとページにどう反映されるのかが分からないという問題がありました。

    なので今まで公開後、行間などおかしい箇所があれば再度編集して公開をする、
    ということをしていました。

    今後も入稿する上で、この公開後修正をやるのはしんどいなと思い、
    microCMSが記事にしてくれている「プレビュー機能」を実装することにしました。

    microCMSとNuxtでプレビュー画面を作成する

    実装

    さて、microCMSさんが詳細に記事を書いてくれているので、いけるかなと思っていたのですが、、
    全然できないです。笑

    記事で書かれているdraftページを先にデプロイすることで
    、microCMSからプレビューが見れるかと思うのですが、、

    私は、ひとまず記述が問題ないか、ローカルで確認したいのです！！！笑

    記事通りにdraftページをデプロイしてもよかったのですが、
    ひとまずローカルで見れるようにしたかったのと、
    理解ができないまま進めると沼にハマりそうだったので、やめました。

    どうしたか？

    考えたのは、どこでもいいから一旦プレビューが見れるようにする、にゴールを変更しました。笑

    記事をみると、ライフサイクルのcreatedを使っていますが、
    しかし、そもそもプレビューが見れるか？を確認したかったので、
    今まで使っていたasync asyncDataで対応しました。

    実装コードは以下です。

    // pages/draft/draft.vue  
async asyncData({ $config, route, params, error }) {
    const query = route.query
      const getData = await axios.get(`${$config.apiUrl}/blog/${query.id}?draftKey=${query.draftKey}`, {
        headers: { 'X-API-KEY': $config.apiKey },
      })
      const allArticelsData = getData.data

    URLのパラメータを取得し、それをmicroCMSのAPIに組み合わせて、プレビュー表示のデータを取得しています。

    そして、プレビューページにアクセスする際は、以下のような形でURLを叩きます。

    http://localhost:3000/draft/draft?id=xxxxxxxxx&draftKey=xxxxxxxxx


    これをすることで、コンテンツのIDとプレビュー表示用のドラフトキーが、以下の形で変数queryに格納されます。

    {
  draftKey: "xxxxxxxxx"
  id: "xxxxxxxxx"
}


    あとは、これを用いて記事成形をしプレビュー表示を作成することができました。

    課題点

    現状苦肉の策として、ローカル環境にてプレビューを見ているので、
    microCMSの管理画面からプレビューを見れるように改修していきたいと思います。

    これは続編も出てくる形になるかと思いますので、乞うご期待！
    （いつになるかはわからないけど。。）

    それでは、次回もゆたしく〜〜

    記事一覧に戻る

記事をシェアする