NAV
shell

SlidePack APIドキュメント

SlidePackへようこそ!SlidePackでは、JSONとテンプレートを元にパワーポイントファイルを生成することができます。

製品紹介ページはこちら

Getting Started

SlidePackはAPI経由でご利用頂くサービスですが、まずは画面上で一通りの機能を試して頂くこともできます。

Webコンソールのダッシュボードに画面上で試して頂く手順がございますので、そちらをご参考ください。

実際にAPIの利用を開始される際には、以下のAPIリファレンスをご参考ください。

APIリファレンス

認証

例:

curl "https://slidepack.io/sessions" \
  -H "Authorization: Bearer {api_token}"

SlidePackのすべてのエンドポイントは、Webコンソールで作成したAPIトークンをリクエストヘッダに含めることで認証します。

Authorization: Bearer {api_token}

セッションの作成

curl -X "POST" "https://slidepack.io/sessions" \
     -H 'Authorization: Bearer {api_token}'

上記のコマンドは次のようなJSONを返します:

{
  "session": {
    "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
    "is_rendered": null,
    "message": null,
    "created_at": "2020-08-13T13:14:32.000000Z",
    "updated_at": "2020-08-13T13:14:32.000000Z"
  },
  "upload": {
    "action": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "acl": "private",
      "key": "sessions/zip/f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36.zip",
      "Content-Type": "application/zip",
      "X-Amz-Security-Token": "***",
      "X-Amz-Credential": "***",
      "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
      "X-Amz-Date": "20200813T131432Z",
      "Policy": "***",
      "X-Amz-Signature": "***"
    }
  }
}

新しいセッションを作成し、zipファイルをアップロードするためのAWS S3 Pre-Signed POSTパラメータを取得します。

HTTPリクエスト

POST https://slidepack.io/sessions

クエリパラメータ

なし

レスポンス

201 Created

キー 説明
session セッションの情報。GET /sessions/{uuid}で得られるものと同じです。
upload zipファイルをS3に直接アップロードするときに利用するパラメータ。

zipファイルのアップロード

curl -X "POST" "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/" \
     -F "acl=private" \
     -F "key=sessions/zip/{uuid}.zip" \
     -F "Content-Type=application/zip" \
     -F "X-Amz-Security-Token=***" \
     -F "X-Amz-Credential=***" \
     -F "X-Amz-Algorithm=AWS4-HMAC-SHA256" \
     -F "X-Amz-Date=***" \
     -F "Policy=***" \
     -F "X-Amz-Signature=***" \
     -F "file=@/path/to/your/data.zip"

zipファイルをAmazon S3に直接アップロードします。

HTTPリクエスト

POST {endpoint}

{endpoint}には、POST /sessionsまたはGET /sessions/{uuid}のレスポンスにあるupload.actionの値を入れてください。

フォームデータパラメータ

キー 必須 備考
acl yes POST /sessionsまたはGET /sessions/{uuid} のレスポンスに含まれています。
key yes 同上
Content-Type yes 同上
X-Amz-Security-Token yes 同上
X-Amz-Credential yes 同上
X-Amz-Algorithm yes 同上
X-Amz-Date yes 同上
Policy yes 同上
X-Amz-Signature yes 同上
file yes パラメータ群の末尾にzipファイルを追加してください。

レスポンス

204 No Content

レンダリング

アップロードしたzipファイルをレンダリングしてpptxファイルを生成し、ダウンロード用のURLを取得します。

curl -X "POST" "https://slidepack.io/sessions/{uuid}/render" \
     -H 'Authorization: Bearer {api_token}'

上記のコマンドは次のようなJSONを返します:

{
  "session": {
    "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
    "is_rendered": true,
    "message": "Render succeeded.",
    "created_at": "2020-08-13T13:14:32.000000Z",
    "updated_at": "2020-08-13T13:17:43.000000Z"
  },
  "download_url": "https://slidepack-api.s3.ap-northeast-1.amazonaws.com/..."
}

HTTPリクエスト

POST https://slidepack.io/sessions/{uuid}/render

クエリパラメータ

なし

レスポンス

200 OK

キー 説明
session セッションの情報。GET /sessions/{uuid}で得られるものと同じです。
download_url ダウンロード用のURLです。

セッションの一覧

curl "https://slidepack.io/sessions" \
     -H 'Authorization: Bearer {api_token}'

上記のコマンドは次のようなJSONを返します:

{
  "sessions": [
    {
      "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
      "created_at": "2020-08-13T13:14:32.000000Z",
      "is_rendered": true
    }
  ]
}

24時間以内に作成されたセッションの一覧を取得します。

HTTPリクエスト

GET https://slidepack.io/sessions

クエリパラメータ

なし

レスポンス

200 OK

セッションの詳細

curl "https://slidepack.io/sessions/{uuid}" \
     -H 'Authorization: Bearer {api_token}'

上記のコマンドは次のようなJSONを返します:

{
  "session": {
    "uuid": "f0155f9f-d3f3-4fa9-9f8d-70f8fd2f9c36",
    "is_rendered": null,
    "message": null,
    "created_at": "2020-08-13T13:14:32.000000Z",
    "updated_at": "2020-08-13T13:17:43.000000Z"
  }
}

セッションの詳細情報を取得します。

HTTPリクエスト

GET https://slidepack.io/sessions/{uuid}

クエリパラメータ

なし

レスポンス

200 OK

JSON・テンプレート

data.json

{
  "slides": [
    {
      "template": 1,
      "some_text": "text to replace"
    },
    {
      "template": 2,
      "some_table": {
        "type": "table",
        "rows": [
          ["this", "is", "header"],
          ["this", "is", "first row"]
        ]
      }
    }
  ]
}

パワーポイントを生成するための元データは、JSONとpptx形式のテンプレートです。

JSONはテンプレートに流し込むデータで、右記のような形式になります。このファイルはdata.jsonというファイル名で保存してください。

テンプレートはHTMLのテンプレートエンジンにおけるテンプレートと同じようなものだと考えてください。形式はpptxで、以下の例のように、パワーポイント内に直接変数が書き込まれたものになります。このファイルはtemplate.pptxというファイル名で保存してください。

template slide

JSONとテンプレートを用意したら、SlidePackにアップロードする前に1つのzipファイルにまとめます。

data.json (旧形式)

[
  {
    "template": 1,
    "some_text": "text to replace"
  },
  {
    "template": 2,
    "some_table": {
      "type": "table",
      "rows": [
        ["this", "is", "header"],
        ["this", "is", "first row"]
      ]
    }
  }
]

テキストの置換

テキスト内に記述されたプレースホルダを文字列で置換します。

data.json

{
  "slides": [
    {
      "template": 1,
      "text1": "スライド上のどの位置にあるテキストボックスも置換できます。",
      "text2": "テンプレートに設定されたフォントサイズやスタイルは維持されます。",
      "text3": "テキストボックスの自動調整などの設定も維持されます。",
      "text4": "表内の",
      "text5": "テキストも",
      "text6": "置換することが",
      "text7": "できます"
    }
  ]
}

template.pptx

01-text template slide1

output.pptx

01-text output slide1

この例をzipファイルでダウンロード

テキストの置換(オプション付き)

文字列のかわりにオブジェクトを指定すると、スタイルなどのオプションを指定できます。

data.json

{
  "slides": [
    {
      "template": 1,
      "text1": {
        "type": "text",
        "value": "スタイルを後から指定することもできます。",
        "styles": {
          "font": {
            "size": 28,
            "color": "#000000",
            "underline": true,
            "italic": true
          }
        }
      },
      "text2": {
        "type": "text",
        "value": "ハイパーリンクを設定することもできます。",
        "hyperlink": "https://slidepack.io"
      }
    }
  ]
}

template.pptx

02-text-options template slide1

output.pptx

02-text-options output slide1

この例をzipファイルでダウンロード

textオブジェクトのパラメータ一覧

キー 必須 備考
type 必須 "text"
value 必須 String
styles.font.typeface String
styles.font.size Number
styles.font.color String Hexカラーコードまたは色名
styles.font.underline Boolean
styles.font.italic Boolean
styles.font.bold Boolean
styles.font.strike Boolean
styles.shape.fill String Hexカラーコードまたは色名
styles.shape.outline String Hexカラーコードまたは色名
styles.shape.align String シェイプ内の文字の左右揃え。
次のいずれか:
left: 左揃え
center: 中央揃え
right: 右揃え
justified: 両端揃え
distributed: 均等割り付け
styles.shape.vertical_align String シェイプ内の文字の上下揃え。
次のいずれか:
top: 上揃え
center: 上下中央揃え
bottom: 下揃え
hyperlink String

テーブルへのデータ流し込み

テーブルに文字列の配列を流し込みます。テーブルを特定するための変数はテーブルの代替テキストに設定します。

data.json

{
  "slides": [
    {
      "template": 1,
      "table1": {
        "type": "table",
        "rows": [
          ["配列を", "流し込む", "ことが", "できます", ""],
          ["a", "b", "c", "d", "e"],
          ["f", "g", "h", "i", "j"],
          ["k", "l", "m", "n", "o"],
          ["p", "q", "r", "s", "t"],
          ["u", "v", "w", "x", "y"]
        ]
      },
      "table2": {
        "type": "table",
        "rows": [
          ["テンプレート側でセルが結合されていると", "", "", "", ""],
          ["結合状態は", "", "維持されます", "", ""],
          ["", "", "", "", ""],
          ["", "", "", "", ""],
          ["", "", "", "", ""],
          ["p", "q", "r", "s", "t"],
          ["u", "v", "w", "x", "y"]
        ]
      }
    }
  ]
}

template.pptx

03-table template slide1

output.pptx

03-table output slide1

この例をzipファイルでダウンロード

テーブルへの流し込み(オプション付き)

文字列のかわりにオブジェクトで配列を作ると、セル単位でスタイルなどを指定することができます。

data.json

{
  "slides": [
    {
      "template": 1,
      "table1": {
        "type": "table",
        "horizontal_sizing": "anchor_left",
        "vertical_sizing": "fixed",
        "rows": [
          [
            {
              "value": "配列の",
              "styles": {
                "font": { "color": "#ffffff" },
                "shape": { "fill": "#142047" }
              }
            },
            {
              "value": "流し込みでも",
              "styles": {
                "font": { "color": "#ffffff" },
                "shape": { "fill": "#1e316b" }
              }
            },
            {
              "value": "スタイルを",
              "styles": {
                "font": { "color": "#ffffff" },
                "shape": { "fill": "#6680d4" }
              }
            }
          ],
          [
            {
              "value": "指定する",
              "styles": {
                "font": { "italic": true },
                "shape": { "fill": "#9caee4" }
              }
            },
            {
              "value": "ことが",
              "styles": {
                "font": { "underline": true },
                "shape": { "fill": "#cdd6f1" }
              }
            },
            {
              "value": "できます",
              "styles": {
                "font": { "bold": true },
                "shape": { "fill": "#d5e0f1" }
              }
            }
          ]
        ]
      }
    }
  ]
}

template.pptx

04-table-options template slide1

output.pptx

04-table-options output slide1

この例をzipファイルでダウンロード

tableオブジェクトのパラメータ一覧

キー 必須 備考
type 必須 "table"
rows 必須 [[String|Object]]
rows[n][m].value 必須 String
rows[n][m].styles Object テキストのstylesと同様
rows[n][m].databar Object 下記を参照
horizontal_sizing String 次のいずれか:

fixed (デフォルト)
テーブルの元の横幅を維持し、収まるように各セルの横幅が調整されます。

anchor_left
テーブルの左端の位置を維持し、右方向に伸縮します。

anchor_right
テーブルの右端の位置を維持し、左方向に伸縮します。
vertical_sizing String 次のいずれか:

fixed
テーブルの元の高さを維持し、収まるように各セルの高さが調整されます。

anchor_top (デフォルト)
テーブルの上端の位置を維持し、下方向に伸縮します。

anchor_bottom
テーブルの下端の位置を維持し、上方向に伸縮します。

テーブルセルにデータバーを描画

セルに databar オプションを指定することで、セル内に棒グラフを描画できます。

data.json

{
  "slides": [
    {
      "template": 1,
      "table1": {
        "type": "table",
        "rows": [
          [
            "グアバ",
            { "value": "377mg", "databar": { "ratio": 1.0, "color": "ec696d" } }
          ],
          [
            "ピーマン",
            { "value": "190mg", "databar": { "ratio": 0.50, "color": "ffb469" } }
          ],
          [
            "キウイ",
            { "value": "167mg", "databar": { "ratio": 0.44, "color": "ffb469" } }
          ],
          [
            "いちご",
            { "value": "98mg", "databar": { "ratio": 0.26, "color": "ffb469" } }
          ],
          [
            "オレンジ",
            { "value": "96mg", "databar": { "ratio": 0.25, "color": "ffb469" } }
          ]
        ]
      }
    }
  ]
}

template.pptx

05-table-databars template slide1

output.pptx

05-table-databars output slide1

この例をzipファイルでダウンロード

databarのオプション一覧

キー 必須 備考
rows[n][m].databar Object
rows[n][m].databar.ratio Number データバーの長さ。0.0 から 1.0
rows[n][m].databar.color String データバーの色。Hexカラーコードまたは色名

チャートの置換

チャートにデータを流し込みます。

棒グラフ、折れ線グラフ、面グラフ、円グラフ、散布図に対応しています。

(ただし散布図はデータ形式が違いますので、後述の散布図の節を参照して下さい。)

data.json

{
  "slides": [
    {
      "template": 1,
      "chart1": {
        "type": "chart",
        "labels": ["Q1", "Q2", "Q3", "Q4"],
        "axis1": {
          "bounds": {
            "minimum": 50,
            "maximum": 150
          },
          "series": {
            "ser1": {
              "name": "売上",
              "values": [100, 110, 120, 130]
            },
            "ser2": {
              "name": "経費",
              "values": [50, 55, 60, 65]
            }
          }
        },
        "axis2": {
          "series": {
            "ser3": {
              "name": "粗利率",
              "values": [0.5, 0.6, 0.7, 0.8]
            }
          }
        }
      }
    }
  ]
}

template.pptx

06-chart template slide1

output.pptx

06-chart output slide1

この例をzipファイルでダウンロード

chartオブジェクトのパラメータ一覧

各パラメータの詳細については後述します。

キー 必須 備考
type 必須 "chart"
labels 必須 [String]
labels_interval Number
axis1 必須 Object
axis1.series 必須 Object
axis1.series.key.name 必須 String
axis1.series.key.values 必須 [Number]
axis1.series.key.data_point_styles [Object]
axis1.bounds.minimum Number
axis1.bounds.maximum Number
axis1.format String
axis1.major_unit Number
axis2 Object axis1と同様

labelsの例

"labels": ["Q1", "Q2", "Q3", "Q4"]

labels

横軸のラベルを配列で指定します。

labels_intervalの例

"labels_interval": 1

labels_interval

横軸ラベルの表示間隔を指定します。

seriesの例

"axis1": {
  "series": {
    "ser1": {
      "name": "売上",
      "values": [100, 110, 120, 130]
    },
    "ser2": {
      "name": "経費",
      "values": [50, 55, 60, 65],
      "data_point_styles": [null, null, { "shape": { "fill": "FF0000" } }]
    }
  }
}

axis[1|2].series

第1軸または第2軸の系列をオブジェクトとして格納します。各系列のオブジェクトのキーには系列名としてパワーポイント側で指定した変数名を指定し、プロパティは少なくとも namevalues を持ちます。

axis[1|2].series.[var].name

系列の名前を指定します。この名前は、出力したパワーポイントの「凡例」などに利用されます。

axis[1|2].series.[var].values

系列の値を指定します。

axis[1|2].series.[var].data_point_styles

各データポイントのスタイルを個別に指定します。 values と同じ並び順の、スタイルオブジェクトの配列です。

デフォルトのスタイルを維持するデータポイントには null を指定します。右の例では ser2 の3つ目のデータポイントの塗りつぶしを赤に指定しています。

棒グラフの場合はshape.fillshape.outlineがそれぞれ棒の塗りつぶしと枠線に適用されます。円グラフの場合はshape.fillshape.outlineがそれぞれスライスの塗りつぶしと枠線に適用されます。折れ線グラフの場合はshape.fillshape.outlineがそれぞれマーカーの塗りつぶしと枠線に適用されます(マーカーがオフの場合は効果がありません)。

boundsの例

"axis1": {
  "bounds": {
    "minimum": 0,
    "maximum": 100
  }
}

axis[1|2].bounds.minimum

対象の軸の最小値を指定します。

axis[1|2].bounds.maximum

対象の軸の最大値を指定します。

formatの例

"axis1": {
  "format": "0.0%"
}

axis[1|2].format

第1軸または第2軸の書式を設定します。 0.0%#,##0.0 などの値が入ります。

major_unitの例

"axis1": {
  "major_unit": 1000
}

axis[1|2].major_unit

第1軸または第2軸の縦軸ラベルの表示単位を指定します。

チャートの置換(散布図)

散布図にデータを流し込みます。

data.json

{
  "slides": [
    {
      "template": 1,
      "scatter1": {
        "type": "scatter-chart",
        "axis1": {
          "x_bounds": { "minimum": 0, "maximum": 10 },
          "y_bounds": { "minimum": 0, "maximum": 10 },
          "series": {
            "ser1": {
              "name": "天然",
              "values": [
                [7.1, 5.1],
                [3.4, 6.9],
                [2.6, 2.6],
                [4.0, 8.1],
                [2.8, 4.5]
              ]
            },
            "ser2": {
              "name": "養殖",
              "values": [
                [4.6, 5.3],
                [5.2, 3.6],
                [6.0, 2.8],
                [6.3, 6.5],
                [8.2, 4.4]
              ]
            }
          }
        }
      }
    }
  ]
}

template.pptx

07-scatter-chart template slide1

output.pptx

07-scatter-chart output slide1

この例をzipファイルでダウンロード

scatter_chartオブジェクトのパラメータ一覧

各パラメータの詳細については後述します。

キー 必須 備考
type 必須 "scatter_chart"
axis1.series 必須 Object
axis1.series.var.name 必須 String
axis1.series.var.values 必須 [[Number, Number]]
axis1.series.var.data_point_styles [Object]
axis1.x_bounds.minimum Number
axis1.x_bounds.maximum Number
axis1.x_format String
axis1.x_major_unit Number
axis1.y_bounds.minimum Number
axis1.y_bounds.maximum Number
axis1.y_format String
axis1.y_major_unit Number
axis2 Object axis1と同様

seriesの例

"axis1": {
  "series": {
    "ser1": { 
      "name": "天然", 
      "values": [[7.1, 5.1], [3.4, 6.9], [2.6, 2.6], [4.0, 8.1], [2.8, 4.5]],
      "data_point_styles": [null, null, { "shape": { "outline": "ff0000" } }]
    }
  }
}

axis[1|2].series

第1軸または第2軸の系列をオブジェクトとして格納します。各系列のオブジェクトのキーには系列名としてパワーポイント側で指定した変数名を指定し、プロパティは少なくとも namevalues を持ちます。

axis[1|2].series.[var].name

系列の名前を指定します。この名前は、出力したパワーポイントの「凡例」などに利用されます。

axis[1|2].series.[var].values

系列の値を指定します。配列の各要素はデータポイントの [x値, y値] を表します。

axis[1|2].series.[var].data_point_styles

各データポイントのスタイルを個別に指定します。 values と同じ並び順の、スタイルオブジェクトの配列です。

デフォルトのスタイルを維持するデータポイントには null を指定します。右の例では ser1 の3つ目のデータポイントの枠線を赤に指定しています。

shape.fillshape.outlineがそれぞれマーカーの塗りつぶしと枠線に適用されます(マーカーがオフの場合は効果がありません)。

x_bounds/y_boundsの例

"axis1": {
  "x_bounds": { "minimum": 0, "maximum": 10 },
  "y_bounds": { "minimum": -1, "maximum": 1 },
}

axis[1|2].[x|y]_bounds.minimum

対象の軸の最小値を指定します。

axis[1|2].[x|y]_bounds.maximum

対象の軸の最大値を指定します。

x_format/y_formatの例

"axis1": {
  "x_format": "0.0%",
  "y_format": "#,##0.0"
}

axis[1|2].[x|y]_format

対象の軸の書式を設定します。 0.0%#,##0.0 などの値が入ります。

x_major_unit/y_major_unitの例

"axis1": {
  "x_major_unit": 1,
  "y_major_unit": 0.1
}

axis[1|2].[x|y]_major_unit

対象の軸のラベルの表示単位を指定します。

箇条書きへのデータ流し込み

箇条書きに配列を流し込みます。

data.json

{
  "slides": [
    {
      "template": 1,
      "my-list": {
        "type": "list",
        "values": [
          "項目は文字列か",
          { "value": "テキストオブジェクトです" },
          { "value": "インデントレベルを", "level": 1 },
          { "value": "0から8で指定できます", "level": 1 },
          { "value": "各レベルのブレット形式等を", "level": 2 },
          { "value": "テンプレートで指定できます", "level": 2 },
          { "value": "フォントスタイルも指定できます", "styles": { "font": { "bold": true, "color": "2a4598" } } }
        ]
      }
    }
  ]
}

template.pptx

08-list template slide1

output.pptx

08-list output slide1

この例をzipファイルでダウンロード

listオブジェクトのパラメータ一覧

キー 必須 備考
type 必須 "list"
values 必須 [String|Object]
values[n].value 必須 String
values[n].level Int インデントレベル。未指定または0がインデントなし、8が最大
values[n].styles Object テキストの場合と同じ。ただしfontのみ有効

画像の置換

シェイプを画像で置換します。

data.json

{
  "slides": [
    {
      "template": 1,
      "image": {
        "type": "image",
        "src": "images/home-office.jpg",
        "scaling": "contain",
        "overflow": "hidden"
      }
    }
  ]
}

template.pptx

09-image template slide1

output.pptx

09-image output slide1

この例をzipファイルでダウンロード

imageオブジェクトのパラメータ一覧

キー 必須 備考
type 必須 "image"
src 必須 String ソース画像をzip内に格納し、data.jsonからの相対パスを指定してください。
scaling String 次のいずれか:

none (デフォルト)
オリジナル画像のサイズ

contain
画像全体が置換先の図形に収まるように拡大・縮小

cover
画像の短辺が置換先の図形に収まるように拡大・縮小
overflow String 次のいずれか:

visible (デフォルト)
画像は切り取られず、置換先の図形からはみ出した部分も表示されます

hidden
置換先の図形からはみ出した部分は非表示になります

色の指定

文字色や塗りの色はHexカラーコードまたは色名で指定します。

Hexカラーコード#f6ad5cFF0000 などです。先頭の # は無くても構いません。大文字小文字の区別はありません。

色名lt1, dk1, lt2, dk2, accent1, accent2, accent3, accent4, accent5, accent6, hlink, folHlink のいずれかで、テーマで決められた12色の名前付きの色が指定できます。それぞれの色名の具体的な色は後述の方法で変更できます。

scheme-colors

また、下記のカラーコードが使用可能です。これらのコードは HTMLの色名 と似ていますが、大文字小文字の区別など細かい点が異なるので注意してください。

black dkSlateGray dimGray slateGray gray ltSlateGray dkGray
silver ltGray gainsboro mistyRose antiqueWhite linen beige
whiteSmoke lavenderBlush oldLace aliceBlue ltCyan seaShell ghostWhite
honeydew floralWhite azure mintCream snow ivory white
medVioletRed deepPink paleVioletRed hotPink ltPink pink dkRed
red firebrick crimson indianRed ltCoral salmon dkSalmon
ltSalmon orangeRed tomato dkOrange coral orange dkKhaki
gold khaki peachPuff yellow paleGoldenrod moccasin papayaWhip
ltGoldenrodYellow lemonChiffon ltYellow maroon brown saddleBrown sienna
chocolate dkGoldenrod peru rosyBrown goldenrod sandyBrown tan
burlyWood wheat navajoWhite bisque blanchedAlmond cornsilk dkGreen
green dkOliveGreen forestGreen seaGreen olive oliveDrab medSeaGreen
limeGreen lime springGreen medSpringGreen dkSeaGreen medAquamarine yellowGreen
lawnGreen chartreuse ltGreen greenYellow paleGreen teal dkCyan
ltSeaGreen cadetBlue dkTurquoise medTurquoise turquoise aqua cyan
aquamarine paleTurquoise navy dkBlue medBlue blue midnightBlue
dkSlateBlue slateBlue medSlateBlue royalBlue steelBlue dodgerBlue deepSkyBlue
cornflowerBlue skyBlue ltSkyBlue ltSteelBlue ltBlue powderBlue indigo
purple dkMagenta dkViolet blueViolet medPurple dkOrchid fuchsia
magenta medOrchid orchid violet plum thistle lavender

テーマの配色の変更

テーマカラーの配色を変更します。配色は全スライドに適用されます。

テーマには12色の名前付きの色があり、それぞれをHexカラーコードまたは色名で指定します。

scheme-colors

未指定、空文字列 "" または null を指定した場合、既定の色のままとなります。また、ここでは "dk1" などのテーマカラー名を値として使用することはできません。

data.json

{
  "theme": {
    "colors": {
      "dk1": "6c685f",
      "lt1": "F5F2E3",
      "dk2": "#5c6875",
      "lt2": "#CAD9EA",
      "accent1": "6b95a4",
      "accent2": "c9747f",
      "accent3": "7e9a62",
      "accent4": "tan",
      "accent5": "",
      "accent6": null,
      "hlink": "858499"
    }
  },
  "slides": [
    {
      "template": 1,
      "text1": "テーマカラーを変更すると、その色を指定した全ての文字やシェイプ等の色が変わります。"
    }
  ]
}

template.pptx

11-theme template slide1

output.pptx

11-theme output slide1

この例をzipファイルでダウンロード

themeオブジェクトのパラメータ一覧

キー 必須 備考
theme.colors Object
theme.colors.lt1 String Hexカラーコードまたは色名。テーマの色「テキスト/背景: 淡色 1」を変更します。
通常はこれがスライド背景色です。
theme.colors.dk1 String Hexカラーコードまたは色名。テーマの色「テキスト/背景: 濃色 1」を変更します。
通常はこれが文字色です。
theme.colors.lt2 String Hexカラーコードまたは色名。テーマの色「テキスト/背景: 淡色 2」を変更します。
theme.colors.dk2 String Hexカラーコードまたは色名。テーマの色「テキスト/背景: 濃色 2」を変更します。
theme.colors.accent1 String Hexカラーコードまたは色名。テーマの色「アクセント 1」を変更します。
theme.colors.accent2 String Hexカラーコードまたは色名。テーマの色「アクセント 2」を変更します。
theme.colors.accent3 String Hexカラーコードまたは色名。テーマの色「アクセント 3」を変更します。
theme.colors.accent4 String Hexカラーコードまたは色名。テーマの色「アクセント 4」を変更します。
theme.colors.accent5 String Hexカラーコードまたは色名。テーマの色「アクセント 5」を変更します。
theme.colors.accent6 String Hexカラーコードまたは色名。テーマの色「アクセント 6」を変更します。
theme.colors.hlink String Hexカラーコードまたは色名。テーマの色「ハイパーリンク」を変更します。
theme.colors.folHlink String Hexカラーコードまたは色名。テーマの色「表示済みのハイパーリンク」を変更します。

レンダリング例

スライドの再利用

data.json

{
  "slides": [
    {
      "template": 1,
      "section-title": "ユーザ行動"
    },

    {
      "template": 2,
      "chart-title": "ユーザ登録数(メインプロダクト)",
      "insights": "登録数の推移は好調です。",
      "main-chart": {
        "type": "chart",
        "labels": [
          "2020/1", "2020/2", "2020/3", "2020/4", "2020/5", "2020/6",
          "2020/7", "2020/8", "2020/9", "2020/10", "2020/11", "2020/12"
        ],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 200 },
          "series": {
            "Series-A": {
              "name": "パターンA",
              "values": [50, 60, 71, 75, 91, 123, 135, 138, 140, 176, 187, 184]
            },
            "Series-B": {
              "name": "パターンB",
              "values": [62, 55, 60, 91, 89, 106, 103, 125, 126, 138, 145, 139]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "chart-title": "ユーザ登録数(オプションプロダクト)",
      "insights": "特にパターンBで登録者数が伸び悩んでいます。",
      "main-chart": {
        "type": "chart",
        "labels": [
          "2020/1", "2020/2", "2020/3", "2020/4", "2020/5", "2020/6",
          "2020/7", "2020/8", "2020/9", "2020/10", "2020/11", "2020/12"
        ],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 200 },
          "series": {
            "Series-A": {
              "name": "パターンA",
              "values": [20, 20, 32, 53, 58, 71, 65, 65, 98, 99, 99, 120]
            },
            "Series-B": {
              "name": "パターンB",
              "values": [20, 20, 20, 23, 33, 27, 38, 51, 44, 36, 60, 44]
            }
          }
        }
      }
    },

    {
      "template": 1,
      "section-title": "カスタマーサービスレポート"
    },

    {
      "template": 2,
      "chart-title": "顧客満足度",
      "insights": "",
      "main-chart": {
        "type": "chart",
        "labels": [
          "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009",
          "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019",
          "2020"
        ],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 1 },
          "format": "0%",
          "series": {
            "Series-A": {
              "name": "顧客満足度",
              "values": [
                0.4, 0.41, 0.45, 0.46, 0.45, 0.45, 0.52, 0.5, 0.54, 0.54,
                0.61, 0.59, 0.57, 0.66, 0.61, 0.66, 0.67, 0.68, 0.68, 0.75,
                0.72
              ]
            }
          }
        }
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

10-reuse-slides template slide1 10-reuse-slides template slide1

output.pptx

10-reuse-slides output slide1 10-reuse-slides output slide1 10-reuse-slides output slide1 10-reuse-slides output slide1 10-reuse-slides output slide1

テキストスタイルを変更する

data.json

{
  "slides": [
    {
      "template": 1,
      "text-with-styles": {
        "value": "スタイルを決めよう",
        "styles": {
          "font": {
            "typeface": "Georgia",
            "color": "e4b054",
            "bold": true
          }
        }
      },

      "sign": {
        "value": "+",
        "styles": {
          "font": {
            "color": "00b14e",
            "size": 14
          }
        }
      },
      "number": {
        "value": "230",
        "styles": {
          "font": {
            "color": "00b14e",
            "size": 26,
            "bold": true
          }
        }
      },
      "unit": {
        "value": "%",
        "styles": {
          "font": {
            "color": "00b14e",
            "size": 14
          }
        }
      },

      "person": {
        "value": "チック・コリア",
        "styles": {
          "shape": {
            "fill": "f4e4c3",
            "outline": "b69858"
          }
        }
      },

      "remove-outline": {
        "value": "線を消去",
        "styles": {
          "shape": {
            "outline": ""
          }
        }
      },
      "remove-fill": {
        "value": "塗りを消去",
        "styles": {
          "shape": {
            "fill": ""
          }
        }
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

11-text-styles template slide1

output.pptx

11-text-styles output slide1

テーブルの行数・列数調整

data.json

{
  "slides": [
    {
      "template": 1,
      "small-table": {
        "type": "table",
        "rows": [
          ["A-1", "A-2", "A-3", "A-4", "A-5"],
          ["B-1", "B-2", "B-3", "B-4", "B-5"],
          ["C-1", "C-2", "C-3", "C-4", "C-5"],
          ["D-1", "D-2", "D-3", "D-4", "D-5"],
          ["E-1", "E-2", "E-3", "E-4", "E-5"]
        ]
      }
    },
    {
      "template": 2,
      "large-table": {
        "type": "table",
        "rows": [
          ["A-1", "A-2", "A-3"],
          ["B-1", "B-2", "B-3"],
          ["C-1", "C-2", "C-3"]
        ]
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

12-table-size template slide1 12-table-size template slide1

output.pptx

12-table-size output slide1 12-table-size output slide1

画像のサイズ調整

data.json

{
  "slides": [
    {
      "template": 1,
      "slide-title": "\"scaling\": \"contain\"",
      "hedgehog": {
        "type": "image",
        "src": "hedgehog.jpg",
        "scaling": "contain"
      }
    },
    {
      "template": 1,
      "slide-title": "\"scaling\": \"cover\"",
      "hedgehog": {
        "type": "image",
        "src": "hedgehog.jpg",
        "scaling": "cover"
      }
    },
    {
      "slide-title": "\"scaling\": null",
      "template": 1,
      "hedgehog": {
        "type": "image",
        "src": "hedgehog.jpg"
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

13-image-scaling template slide1

output.pptx

13-image-scaling output slide1 13-image-scaling output slide1 13-image-scaling output slide1

様々なチャート

data.json

{
  "slides": [
    {
      "template": 1,
      "my-line-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 250 },
          "series": {
            "series-a": { "name": "売上", "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190] },
            "series-b": { "name": "経費", "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50] }
          }
        }
      }
    },

    {
      "template": 2,
      "my-bar-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 250 },
          "series": {
            "series-a": { "name": "売上", "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190] },
            "series-b": { "name": "経費", "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50] }
          }
        }
      }
    },

    {
      "template": 3,
      "my-stacked-bar-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 300 },
          "series": {
            "series-a": { "name": "広告", "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190] },
            "series-b": { "name": "オーガニック", "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50] }
          }
        }
      }
    },

    {
      "template": 4,
      "my-stacked-area-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 300 },
          "series": {
            "series-a": { "name": "広告", "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190] },
            "series-b": { "name": "オーガニック", "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50] }
          }
        }
      }
    },

    {
      "template": 5,
      "my-bar-line-combo-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 250 },
          "series": {
            "series-a": { "name": "広告", "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190] },
            "series-b": { "name": "オーガニック", "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50] }
          }
        },
        "axis2": {
          "bounds": { "minimum": 0, "maximum": 0.15 },
          "format": "0.0%",
          "series": {
            "series-x": {
              "name": "CVレート",
              "values": [
                0.027, 0.027, 0.03137, 0.03032, 0.03429, 0.03557, 0.0366, 0.03596, 0.03577, 0.03753, 0.04116, 0.03944
              ]
            }
          }
        }
      }
    },

    {
      "template": 6,
      "my-pie-chart": {
        "type": "chart",
        "labels": ["Chrome", "Safari", "Firefox", "Samsung Internet", "Edge Legacy", "UC Browser"],
        "axis1": {
          "series": {
            "series-a": { "name": "ブラウザシェア", "values": [63.91, 18.2, 4.39, 3.28, 2.13, 2] }
          }
        }
      }
    },

    {
      "template": 7,
      "series-a-label": "商品A",
      "series-b-label": "商品B",
      "my-donut-chart": {
        "type": "chart",
        "labels": ["アフリカ", "アジア", "ヨーロッパ", "南アメリカ", "北アメリカ", "オセアニア"],
        "axis1": {
          "series": {
            "series-a": { "name": "商品A", "values": [4.4, 1.2, 0.7, 0.5, 0.3, 0.2] },
            "series-b": { "name": "商品B", "values": [3.5, 1.1, 0.4, 0.5, 0.3, 0.2] }
          }
        }
      }
    },

    {
      "template": 8,
      "x-axis-title": "長さ",
      "y-axis-title": "重さ",
      "my-scatter-chart": {
        "type": "scatter-chart",
        "axis1": {
          "x_bounds": { "minimum": 130, "maximum": 200 },
          "y_bounds": { "minimum": 30, "maximum": 130 },
          "series": {
            "series-a-y": {
              "name": "第二世代",
              "values": [
                [150, 60.7],
                [156.2, 67.3],
                [153.7, 68.8],
                [155.7, 83.1],
                [160.5, 88.8],
                [163, 90],
                [171.8, 100.2],
                [166.9, 96.5],
                [175.6, 115.1],
                [176.5, 114]
              ]
            },
            "series-b-y": {
              "name": "第一世代",
              "values": [
                [153.3, 45],
                [155.6, 58.2],
                [151.7, 48.7],
                [159.2, 65.2],
                [163.2, 71.1],
                [160.6, 65.3],
                [167.6, 70.8],
                [173.2, 84.4],
                [177.3, 87.2],
                [172.9, 99.1]
              ]
            }
          }
        }
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

20-charts template slide1 20-charts template slide1 20-charts template slide1 20-charts template slide1 20-charts template slide1 20-charts template slide1 20-charts template slide1 20-charts template slide1

output.pptx

20-charts output slide1 20-charts output slide1 20-charts output slide1 20-charts output slide1 20-charts output slide1 20-charts output slide1 20-charts output slide1 20-charts output slide1

チャートのシリーズ追加と削除

data.json

{
  "slides": [
    {
      "template": 1,
      "the-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "June"],
        "axis1": {
          "series": {
            "series-a": {
              "values": [4.4, 4.2, 4.1, 3.6, 3.3, 3.5]
            },
            "series-b": {
              "values": [3.4, 3.3, 3.3, 3, 2.9, 2.4]
            },
            "series-c": {
              "values": [3.6, 3.5, 3.3, 2.9, 2.6, 2.4]
            },
            "series-d": {
              "values": [3.2, 3.4, 3.3, 3, 3.1, 2.6]
            },
            "series-e": {
              "values": [3.2, 3.3, 3.4, 3.7, 4.2, 4.4]
            },
            "series-f": {
              "values": [3.1, 3.2, 3.3, 3.2, 3.1, 3.4]
            },
            "foo": {
              "values": [2.7, 2.3, 2.4, 2.1, 1.5, 1.2]
            },
            "bar": {
              "values": [2.1, 2.1, 2.4, 2.6, 2.4, 2.7]
            },
            "baz": {
              "values": [1, 1.2, 1.3, 1.5, 1.7, 1.8]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "the-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "June"],
        "axis1": {
          "series": {
            "bar-series-a": {
              "values": [4.4, 4.2, 4.1, 3.6, 3.3, 3.5]
            }
          }
        }
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

21-chart-dynamic-series template slide1 21-chart-dynamic-series template slide1

output.pptx

21-chart-dynamic-series output slide1 21-chart-dynamic-series output slide1

チャートの個別データポイントスタイルの指定

data.json

{
  "slides": [
    {
      "template": 1,
      "my-line-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Revenue",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190],
              "data_point_styles": [
                null, null, null, null,
                null, null, null, null,
                null, null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            },
            "series-b": {
              "name": "Expenses",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50],
              "data_point_styles": [
                null, null, null, null,
                null, null, { "shape": { "fill": "#99cc00", "outline": "#66cc00" } }
              ]
            }
          }
        }
      }
    },

    {
      "template": 2,
      "my-bar-chart": {
        "type": "chart",
        "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Revenue",
              "values": [100, 110, 130, 150, 170, 200, 180, 130, 140, 130, 130, 190],
              "data_point_styles": [
                null, null, null, null,
                null, null, null, null,
                null, null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            },
            "series-b": {
              "name": "Expenses",
              "values": [50, 55, 60, 65, 70, 65, 55, 80, 80, 70, 60, 50]
            }
          }
        }
      }
    },

    {
      "template": 3,
      "my-pie-chart": {
        "type": "chart",
        "labels": ["Chrome", "Safari", "Firefox", "Samsung Internet", "Edge Legacy", "UC Browser"],
        "axis1": {
          "series": {
            "series-a": {
              "name": "Browser share",
              "values": [63.91, 18.2, 4.39, 3.28, 2.13, 2],
              "data_point_styles": [
                null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            }
          }
        }
      }
    },

    {
      "template": 4,
      "x-axis-title": "Length",
      "y-axis-title": "Mass",
      "my-scatter-chart": {
        "type": "scatter-chart",
        "axis1": {
          "series": {
            "series-a-y": {
              "name": "Current Generation",
              "values": [
                [150, 60.7],
                [156.2, 67.3],
                [153.7, 68.8],
                [155.7, 83.1],
                [160.5, 88.8],
                [163, 90],
                [171.8, 100.2],
                [166.9, 96.5],
                [175.6, 115.1],
                [176.5, 114]
              ],
              "data_point_styles": [
                null, null, null, null, { "shape": { "fill": "#ff9900", "outline": "#ff6600" } }
              ]
            },
            "series-b-y": {
              "name": "Previous Generation",
              "values": [
                [153.3, 45],
                [155.6, 58.2],
                [151.7, 48.7],
                [159.2, 65.2],
                [163.2, 71.1],
                [160.6, 65.3],
                [167.6, 70.8],
                [173.2, 84.4],
                [177.3, 87.2],
                [172.9, 99.1]
              ],
              "data_point_styles": [
                null, null, null, null, { "shape": { "fill": "#99cc00", "outline": "#66cc00" } }
              ]
            }
          }
        }
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

22-chart-data-point-styles template slide1 22-chart-data-point-styles template slide1 22-chart-data-point-styles template slide1 22-chart-data-point-styles template slide1

output.pptx

22-chart-data-point-styles output slide1 22-chart-data-point-styles output slide1 22-chart-data-point-styles output slide1 22-chart-data-point-styles output slide1

チャートの軸ラベル表示間隔

data.json

{
  "slides": [
    {
      "template": 1,
      "the-chart": {
        "type": "chart",
        "labels": [
          "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990",
          "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000",
          "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010",
          "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020",
          "2021"
        ],
        "labels_interval": 5,
        "axis1": {
          "major_unit": 250,
          "series": {
            "series-a": {
              "values": [
                93, 157, 949, 785, 1036, 1640, 1700, 1964, 2234, 2502,
                2344, 3185, 3360, 3283, 3991, 4000, 4000, 3891, 3159, 3130,
                3134, 2961, 2622, 2531, 2193, 1942, 1994, 1661, 1217, 1000,
                1055, 1000, 1124, 1199, 1400, 1497, 1549, 1660, 1768, 1853,
                1890
              ]
            }
          }
        }
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

23-chart-label-interval template slide1

output.pptx

23-chart-label-interval output slide1

アクセス解析レポートの例

SlidePackの様々な機能を使ってアクセス解析レポートをレンダリングした例です。

data.json

{
  "slides": [
    {
      "template": 1,
      "client": "Blues Dream, Inc.",
      "report-title": "アクセス解析レポート",
      "date": "2021年6月1日"
    },

    {
      "template": 2,
      "period": "2021年5月度",

      "m1icon": { "type": "image", "src": "icons/users.png", "scaling": "contain" },
      "m1name": "セッション数",
      "m1": "68,338",
      "m1unit": "",
      "m1growth": { "value": "-16.1%", "styles": { "font": { "color": "#EA8673" } } },

      "m2icon": { "type": "image", "src": "icons/conversion.png", "scaling": "contain" },
      "m2name": "コンバージョンレート",
      "m2": "2.47",
      "m2unit": "%",
      "m2growth": { "value": "+0.48", "styles": { "font": { "color": "#3FC862" } } },

      "m3icon": { "type": "image", "src": "icons/bounce.png", "scaling": "contain" },
      "m3name": "直帰率",
      "m3": "48.23",
      "m3unit": "%",
      "m3growth": { "value": "-11.5", "styles": { "font": { "color": "#3FC862" } } }
    },

    {
      "template": 3,

      "chart-title": "ユーザ数/CVレート推移",
      "line-chart": {
        "type": "chart",
        "labels": ["2020/6", "7", "8", "9", "10", "11", "12", "2021/1", "2", "3", "4", "5"],
        "axis1": {
          "bounds": { "minimum": 0, "maximum": 70000 },
          "series": {
            "Series 1": {
              "name": "ユーザ数",
              "values": [50619, 51369, 43932, 41395, 53330, 54263, 60800, 52627, 51957, 63027, 62708, 53121]
            }
          }
        },
        "axis2": {
          "bounds": { "minimum": 0, "maximum": 0.04 },
          "format": "0.00%",
          "series": {
            "Series 2": {
              "name": "CVレート",
              "values": [0.0015, 0.0016, 0.0018, 0.0014, 0.001, 0.0017, 0.0122, 0.019, 0.02, 0.0201, 0.0197, 0.0247]
            }
          }
        }
      },

      "comparisons": {
        "type": "table",
        "rows": [
          ["", "先月", "今月"],
          ["ユーザ数", "62,708", "53,121"],
          ["新規ユーザ数", "58,691", "49,206"],
          ["平均滞在時間", "2:49", "3:15"],
          ["直帰率", "54.66%", "48.23%"],
          ["CV数", "1,547", "1,689"],
          ["CVレート", "1.97%", "2.47%"]
        ]
      }
    },

    {
      "template": 4,

      "donut1-title": "デバイス",
      "donut1": {
        "type": "chart",
        "labels": ["PC", "モバイル"],
        "axis1": {
          "series": {
            "Series": {
              "values": [36146, 15980]
            }
          }
        }
      },

      "donut2-title": "言語",
      "donut2": {
        "type": "chart",
        "labels": ["en-us", "en-gb", "es-es", "etc"],
        "axis1": {
          "series": {
            "Series": {
              "values": [29633, 4740, 2022, 10037]
            }
          }
        }
      }
    },

    {
      "template": 5,

      "message": "クリック数は安定してきているが、広告からのCVR改善が課題",

      "chart1": {
        "type": "chart",
        "labels": ["2020/6", "7", "8", "9", "10", "11", "12", "2021/1", "2", "3", "4", "5"],
        "axis1": {
          "bounds": { "maximum": 35000, "minimum": 0 },
          "series": {
            "Series 1": {
              "name": "広告クリック数",
              "values": [964, 560, 1079, 0, 0, 6891, 29593, 31534, 9692, 9815, 9170, 9093]
            }
          }
        },
        "axis2": {
          "bounds": { "maximum": 250, "minimum": 0 },
          "series": {
            "Series 3": {
              "name": "CPC",
              "values": [0.38, 0.34, 0.18, 0.0, 0.0, 1.99, 1.48, 1.8, 1.28, 1.2, 1.33, 1.53]
            }
          }
        }
      },

      "chart2": {
        "type": "chart",
        "labels": ["2020/6", "7", "8", "9", "10", "11", "12", "2021/1", "2", "3", "4", "5"],
        "axis1": {
          "bounds": { "maximum": 100, "minimum": 0 },
          "series": {
            "Series 1": {
              "name": "広告からのCV数",
              "values": [2, 3, 2, 0, 1, 1, 66, 65, 79, 26, 12, 4]
            }
          }
        },
        "axis2": {
          "bounds": { "maximum": 14000, "minimum": 0 },
          "series": {
            "Series 3": {
              "name": "CPA",
              "values": [183.55, 62.55, 98.35, 0, 0, 13681.99, 665.09, 875.16, 156.95, 452.15, 1019.14, 3469.54]
            }
          }
        }
      },

      "comparisons": {
        "type": "table",
        "rows": [
          ["", "表示回数", "コスト", "クリック数", "CTR", "CPC", "CV数", "CVR"],
          ["合計", "57191", "$13878.17", "9093", "15.9%", "153", "4", "0.53%"],
          ["前月比", "-3.9%", "+13.5%", "-0.9%", "+3.1%", "+14.4%", "-66.7%", "-61.8%"],
          ["前年同月比", "+4385%", "+115%", "+2768%", "-36.5%", "+320%", "+300%", "+168%"]
        ]
      }
    },

    {
      "template": 6,
      "slide-title": "キャンペーン別広告パフォーマンス",

      "table1": {
        "type": "table",
        "rows": [
          ["", "表示回数", "コスト", "クリック数", "CTR", "CPC", "CV数", "CVR"],
          ["Hoodies", "19,618", "910.08", "1,622", "8.27%", "0.56", "0", "0.00%"],
          ["YouTube", "6,280", "4,567.17", "1,932", "30.76%", "2.36", "0", "0.00%"],
          ["Tumbler", "4,974", "602.98", "746", "15.00%", "0.81", "0", "0.00%"],
          ["T-shirts", "2,688", "303.88", "357", "13.28%", "0.85", "0", "0.00%"],
          ["Apparel", "2,040", "2,289.38", "759", "37.21%", "3.02", "1", "7.14%"],
          ["Tumbler", "1,838", "604.03", "309", "16.81%", "1.95", "0", "0.00%"],
          ["Drinkware", "1,592", "684.81", "312", "19.60%", "2.19", "0", "0.00%"],
          ["Bags", "737", "885.68", "182", "24.69%", "4.87", "0", "0.00%"],
          ["Android Brand", "168", "43.81", "37", "22.02%", "1.18", "0", "0.00%"],
          ["Office", "106", "55.61", "18", "16.98%", "3.09", "0", "0.00%"],
          ["Accessories", "33", "207.35", "11", "33.33%", "18.85", "0", "0.00%"]
        ]
      }
    },

    {
      "template": 6,
      "slide-title": "広告グループ別広告パフォーマンス",

      "table1": {
        "type": "table",
        "rows": [
          ["", "表示回数", "コスト", "クリック数", "CTR", "CPC", "CV数", "CVR"],
          ["AW - YouTube Brand", "5,242", "$3,041.63", "1,645", "31.38%", "$1.85", "0", "0.00%"],
          ["AW - Hoodies", "4,417", "$119.39", "266", "6.02%", "$0.45", "0", "0.00%"],
          ["AW - Hoody", "3,810", "$109.47", "241", "6.33%", "$0.45", "0", "0.00%"],
          ["AW - Sweatshirt", "3,514", "$72.30", "160", "4.55%", "$0.45", "0", "0.00%"],
          ["AW - Hoodies", "3,293", "$264.59", "417", "12.66%", "$0.63", "0", "0.00%"],
          ["AW - Shirts", "3,055", "$303.81", "319", "10.44%", "$0.95", "0", "0.00%"],
          ["AW - Hoody", "2,989", "$238.93", "370", "12.38%", "$0.65", "0", "0.00%"],
          ["AW - Tumbler", "2,200", "$198.46", "327", "14.86%", "$0.61", "0", "0.00%"],
          ["AW - Apparel All", "1,663", "$1,805.35", "640", "38.48%", "$2.82", "1", "8.33%"]
        ]
      }
    },

    {
      "template": 6,
      "slide-title": "デバイス別広告パフォーマンス",

      "table1": {
        "type": "table",
        "rows": [
          ["", "表示回数", "コスト", "クリック数", "CTR", "CPC", "CV数", "CVR"],
          ["mobile", "43,021", "$8,959.98", "6,659", "15.48%", "$1.35", "0", "0.00%"],
          ["desktop", "10,507", "$4,009.69", "1,976", "18.81%", "$2.03", "4", "4.30%"]
        ]
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

91-analytics-report template slide1 91-analytics-report template slide1 91-analytics-report template slide1 91-analytics-report template slide1 91-analytics-report template slide1 91-analytics-report template slide1

output.pptx

91-analytics-report output slide1 91-analytics-report output slide1 91-analytics-report output slide1 91-analytics-report output slide1 91-analytics-report output slide1 91-analytics-report output slide1 91-analytics-report output slide1 91-analytics-report output slide1

商品カタログの例

一枚のテンプレートを何回も再利用して商品カタログを生成した例です。

data.json

{
  "slides": [
    {
      "template": 1,
      "name": "クラシックパターンシャツ",
      "description": "クラシックながらモダンな柄のボタンダウンシャツです。",
      "pic": {
        "type": "image",
        "src": "pictures/blue pattern shirt.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["素材", "綿"],
          ["サイズ", "S, M, L"],
          ["販売", "店頭/オンライン"]
        ]
      }
    },
    {
      "template": 1,
      "name": "ウォッシュシャツ",
      "description": "カジュアルに着回せるシャツにウォッシュド加工を施しました。柔らかい麻で着心地も抜群。",
      "pic": {
        "type": "image",
        "src": "pictures/linen washed shirt.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["素材", "麻"],
          ["サイズ", "S, M, L"],
          ["販売", "店頭/オンライン"],
          ["輸入元", "イタリア"]
        ]
      }
    },
    {
      "template": 1,
      "name": "レースブラウス",
      "description": "どこかエスニックな雰囲気のパターンの、透け感がすずしげなブラウスです。",
      "pic": {
        "type": "image",
        "src": "pictures/lace blouse.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["素材", "綿"],
          ["サイズ", "M"],
          ["販売", "オンライン"],
          ["輸入元", "スペイン"],
          ["サステナビリティ", "OEKO-TEX Standard 100 認証"]
        ]
      }
    },
    {
      "template": 1,
      "name": "バラの刺繍のブラウス",
      "description": "シルキーな質感の長袖ブラウスです。\nパフスリーブがアクセント。",
      "pic": {
        "type": "image",
        "src": "pictures/rose stitched blouse.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["素材", "ポリエステル、麻"],
          ["サイズ", "S, M, L"],
          ["販売", "店頭"]
        ]
      }
    },
    {
      "template": 1,
      "name": "ダークジーンズ",
      "description": "ベーシックなダークジーンズです。スリムシルエット。",
      "pic": {
        "type": "image",
        "src": "pictures/dark jeans.jpg",
        "scaling": "cover",
        "overflow": "hidden"
      },
      "stats": {
        "type": "table",
        "vertical_sizing": "anchor_bottom",
        "rows": [
          ["素材", "綿"],
          ["サイズ", "S, M, L"],
          ["販売", "店頭/オンライン"]
        ]
      }
    }
  ]
}

この例をzipファイルでダウンロード

template.pptx

92-catalog template slide1

output.pptx

92-catalog output slide1 92-catalog output slide1 92-catalog output slide1 92-catalog output slide1 92-catalog output slide1

API制限

タイトル 制限 備考
レート制限 600/分
セッションの有効期限 24時間 レンダリングが完了していないセッションについては、この期限に関わらず常に最新のもののみを保持します。
zipファイルのサイズ 50MBまで
アップロードURL 60分 セッションの有効期限内であれば何回でも再生成できます。
ダウンロードURL 5分 同上。