microcms-js-sdkが画像アップロードAPIに対応しました

2024/03/27

千葉大輔

こんにちは、プロダクトエンジニアのでぃーすけです。

先日リリースされた画像アップロードのマネジメントAPIについて、microcms-js-sdkで対応されましたので本日はそのお知らせとなります！
https://github.com/microcmsio/microcms-js-sdk

使い方

Node.jsから利用する方法とブラウザから利用する方法を紹介します。

Node.js

まずmicrocms-js-sdkをインストールします。

npm install microcms-js-sdk

index.jsファイルを作成し、まず、次のように記述します。

import { createManagementClient } from 'microcms-js-sdk';
// or CommonJS
// const { createManagementClient } = require('microcms-js-sdk');

const main = async () => {
  const managementClient = createManagementClient({
    serviceDomain: 'serviceDomain',
    apiKey: 'managementAPIKey',
  });
};

main();

コンテンツAPIの時に使用していた createClient ではなく、新たに追加されたcreateManagementClient というものを使用します。

アップロードする画像ファイルの指定方法がいくつかありますので、それぞれ紹介します。

ローカル

ローカルにある画像をmicroCMSにアップロードしたい場合は次のように記述します。

// ここから---
import { readFile } from 'fs/promises';
// or CommonJS
// const { readFile } = require('fs/promises')
// ---ここまで追加
import { createManagementClient } from 'microcms-js-sdk';

const main = async () => {
  const managementClient = createManagementClient({
    serviceDomain: 'serviceDomain',
    apiKey: 'managementAPIKey',
  });

   // ここから---
  const file = await readFile('./image.png');
  const data = new Blob([file], { type: 'image/png' });
  const { url } = await managementClient.uploadMedia({
    data,
    name: 'image.png',
  });
  console.log(url);
   // ---ここまで追加
};

main();

外部

外部にある画像をURLで指定したい場合は次のように記述します。

import { createManagementClient } from 'microcms-js-sdk';

const main = async () => {
  const managementClient = createManagementClient({
    serviceDomain: 'serviceDomain',
    apiKey: 'managementAPIKey',
  });

   // ここから---
  const data = 'https://example.com/image.png';
  const { url } = await managementClient.uploadMedia({
    data,
    // name: 'example.png', ← オプショナル。指定しない場合はパスの最後の部分が指定されます。（この場合はimage.pngになります）
  });
  console.log(url);
   // ---ここまで追加
};

main();

ブラウザ

ここではunpkgのCDNからスクリプトを利用する方法を紹介します。バンドルツールなどを使用している場合は、上記のNode.jsのセクションのインストール、インポートまではそのままに、scriptタグ内の記述を参考にしてください。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/microcms-js-sdk@^3/dist/umd/microcms-js-sdk.js"></script>
    <script>
      const { createManagementClient } = microcms;

      const managementClient = createManagementClient({
        serviceDomain: 'serviceDomain',
        apiKey: 'managementAPIKey',
      });

      const handleSubmit = async (e) => {
        e.preventDefault();
        const file = e.target[0].files[0];
        console.log(file);
        const { url } = await client.uploadMedia({
          data: file,
        });
        console.log(url);
      };
    </script>
    <form onsubmit="handleSubmit(event)">
      <input type="file" name="" id="" />
      <input type="submit" value="送信" />
    </form>
  </body>
</html>

※ブラウザからもNode.jsと同様にURLでの指定は可能となります。

コンテンツAPIと組み合わせる

コンテンツAPIと組み合わせて、アップロードした画像をコンテンツに指定して入稿したり更新することができます。
ここではNode.jsを使ったローカルにあるファイルでの方法を見ていきます。（先ほどのファイルの内容を使用します。）

import { readFile } from 'fs/promises';
import { createClient, createManagementClient } from 'microcms-js-sdk'; // 更新

const main = async () => {
   // ここから---
  const contentClient = createClient({
    serviceDomain: 'serviceDomain',
    apiKey: 'contentAPIKey',
  });
   // ---ここまで追加
  const managementClient = createManagementClient({
    serviceDomain: 'serviceDomain',
    apiKey: 'managementAPIKey',
  });

  const file = await readFile('./image.png');
  const data = new Blob([file], { type: 'image/png' });
  const { url } = await managementClient.uploadMedia({
    data,
    name: 'image.png',
  });

   // ここから---
  const { id } = await contentClient.create({
    endpoint: 'endpoint',
    content: {
　　　　　　　　　　thumbnail: url,　// ← 画像フィールド
　　　　　　　　　　banners: [url],　// ← 複数画像フィールド
    },
  });
  console.log(id);
   // ---ここまで追加
};

main();