Movable Type, JavaScript) Data API で記事のカスタムフィールドにアセットを紐付ける

fujihara

2020.08.31

どうもfujiharaです。リモート勤務になりめっきり平日に歩かなくなりました。（1日外出しないことも多々あり）

本日はMovable TypeのData APIを使って記事を操作する時に、カスタムフィールドに画像アセットがある場合の登録方法をご紹介いたします。

はじめに

Data APIを使うと管理画面にログインせずに各種データの操作を行えます。
詳細

説明

本来だと以下の流れになります、今回は記事の登録箇所のみ説明いたします。(3)

ユーザー認証(2,3の際のリクエスト時に取得したアクセストークンを使用)
画像を登録
登録した画像のデータを付与して記事登録

コード


//記事基本データ
const postEntry = {
  title: 'title',
  body: 'body',
  excerpt: '',
  status: 'Publish',
  allowComments: true,
  keywords: '',
  allowTrackbacks: false,
  basename: 'basename',
  customFields: []
 };

//カスタムフィールド設定
postEntry.customFields.push({
   'basename': 'cf_image',
   'value': sanitizeHtml(`<form mt:asset-id='{アセットID}' class='mt-enclosure mt-enclosure-{アセットクラス}' style='display: inline-block;'><a href='{アセットURL}'>{アセットファイル名}</a></form>`, {
     allowedTags: [ 'form', 'a' ],
     allowedAttributes: {
       a: [ 'href' ],
       form: ['mt:asset-id', 'class', 'style']
     }
   })
});

//記事作成処理
const body = new FormData();
body.append('entry', JSON.stringify(postEntry);
fetch({DATA API 記事作成エントリーポイント}, {
  method: 'post',
  ////修正しました。(20200918)
  //body: 'entry=' + JSON.stringify(postEntry),
  body: body,
  headers: {
    //修正しました。(20200918)
    //'Content-Type': 'application/x-www-form-urlencoded',
    'X-MT-Authorization': `MTAuth accessToken={1で取得したアクセストークン}`
  }
})
  .then(res => res.json())
  .then(json => !json.error);

説明

ポイントはカスタムフィールド設定です。(投稿基本データ, 投稿作成処理は説明省きます)。カスタムフィールドの登録は配列でbasename、value のオブジェクトをカスタムフィールド分追加して登録します。
開発者サイト
 github

問題は設定する値です。MovableTypeの管理画面の記事のカスタムフィールドhiddenフィールドを見るとカスタムフィールドに紐付いた画像は記事自体に登録されているのでなく、アセットと紐付いているだけなので紐付ける用の値を指定してあげます。実際には以下のようなものになります。


<form mt:asset-id="{asset_id}" class="mt-enclosure mt-enclosure-{asset_class}" style="display:inline-block"><a href="{asset_url}">{asset_filename}</a></form>

ここで各 asset_id, asset_class, asset_url, asset_filename は画像の登録時もしくは画像データ取得すると返される値を使用します。
参考

data.id, data.class, data.url, data.filename

これでカスタムフィールドと画像紐付け用の値ができました。
しかしこれだけだとData API側からエラーが返され登録ができません(status code 500)。さらに作成した値をサニタイズしてあげる必要があります。
今回はsanitize-htmlを使用しました。使用しているタグとプロパティーを許可するため以下のように設定しています。


sanitizeHtml({変換前の文字}, {
  allowedTags: [ 'form', 'a' ],
    allowedAttributes: {
      a: [ 'href' ],
      form: ['mt:asset-id', 'class', 'style']
    }
});