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}

{api_token}はご自身のAPIトークンで置き換えてください。

セッションの作成

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

{
  "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ファイルを追加してください。

フォームデータパラメータの有効期限は1時間です。有効期限が切れた場合、GET /sessions/{uuid}で新しいパラメータを発行できます。

レスポンス

204 No Content

レンダリング

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

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

{
  "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です。

ダウンロードURLの有効期限は5分です。有効期限が切れた場合、POST /sessions/{uuid}/download_urlで新しいURLを発行できます。

セッションの一覧

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

{
  "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}'

{
  "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・テンプレート

{
  "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ファイルにまとめます。

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

テキスト

スライド内のプレースホルダを文字列で置換します。

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

template.pptx

01-text template slide1

output.pptx

01-text output slide1

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

テキスト（オプション付き）

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

{
  "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

テーブル

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

{
  "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ファイルでダウンロード

テーブル（オプション付き）

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

{
  "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 オプションを指定することで、セル内に棒グラフを描画できます。

{
  "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カラーコードまたは色名

チャート

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

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

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

{
  "slides": [
    {
      "template": 1,
      "chart1": {
        "type": "chart",
        "labels": ["Q1", "Q2", "Q3", "Q4"],
        "axis1": {
          "bounds": {
            "minimum": 50,
            "maximum": 150
          },
          "series": {
            "ser1": {
              "name": "売上",
              "values": [100, 130, 120, 130]
            },
            "ser2": {
              "name": "経費",
              "values": [85, 90, 80, 75]
            }
          }
        },
        "axis2": {
          "series": {
            "ser3": {
              "name": "粗利率",
              "values": [0.15, 0.3, 0.33, 0.42],
              "styles": {
                "shape": { "fill": "ffdd99", "outline": "ffaa55" }
              }
            }
          }
        }
      }
    }
  ]
}

template.pptx

06-chart template slide1

output.pptx

06-chart output slide1

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

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

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

キー	必須	値	備考
type	必須	"chart"
labels	必須	[String]	横軸（項目軸）のラベルの配列
labels_interval		Number	横軸（項目軸）のラベルの表示間隔
axis1	必須	Object	第1軸のデータ
axis1.series	必須	Object
axis1.series.key.name	必須	String	系列の名前
axis1.series.key.values	必須	[Number]	系列の数値の配列
axis1.series.key.styles		Object	系列の色
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と同様に第2軸のデータを指定

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

labels

横軸（項目軸）のラベルを文字列の配列で指定します。

"labels_interval": 1

labels_interval

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

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

axis1.series

第1縦軸に属する系列を {"系列名キー": { 系列データ }} 形式のオブジェクトとして格納します。

系列名キーには、テンプレートに存在する系列の名前を指定すれば、そこにデータが流し込まれます。存在しない系列名キーの場合、系列が新たに追加されます。

axis1.series.key.name

系列の名前を指定します。凡例などに反映されます。

axis1.series.key.values

系列の数値を配列で指定します。

axis1.series.key.styles

系列の色を {"shape": {"fill": "CCCCFF", "outline": "6666CC"}} のようなスタイルオブジェクトで指定します。

指定した色は棒グラフの棒や折れ線グラフの線の色などに適用され、凡例にも反映されます。

グラフ種別ごとの効果対象は下記のとおりです。

	`shape.fill`の対象	`shape.outline`の対象
棒グラフ	棒の塗り	棒の枠線
折れ線グラフ	マーカーの塗り	グラフ線、マーカーの枠線
面グラフ	面の塗り	面の枠線

axis1.series.key.data_point_styles

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

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

グラフ種別ごとの効果対象は下記のとおりです。

	`shape.fill`の対象	`shape.outline`の対象
棒グラフ	棒の塗り	棒の枠線
折れ線グラフ	マーカーの塗り	マーカーの枠線
円グラフ	スライスの塗り	スライスの枠線

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

axis1.bounds.minimum

第1縦軸（値軸）の最小値を指定します。

axis1.bounds.maximum

第1縦軸（値軸）の最大値を指定します。

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

axis1.format

第1縦軸（値軸）の書式を設定します。 0.0% や #,##0.0 などの値が入ります。

"axis1": {
  "major_unit": 1000
}

axis1.major_unit

第1縦軸（値軸）のラベルの表示単位を指定します。

axis2

上記 axis1 と同様に、第2縦軸のデータを指定できます。

チャート（散布図）

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

{
  "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]
              ],
              "styles": {
                "shape": { "fill": "ffdd99", "outline": "ffaa55" }
              }
            }
          }
        }
      }
    }
  ]
}

template.pptx

07-scatter-chart template slide1

output.pptx

07-scatter-chart output slide1

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

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

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

キー	必須	値	備考
type	必須	"scatter_chart"
axis1	必須	Object
axis1.series	必須	Object
axis1.series.key.name	必須	String	系列の名前
axis1.series.key.values	必須	[[Number, Number]]	系列のx値/y値の配列
axis1.series.key.styles		Object	系列の色
axis1.series.key.data_point_styles		[Object]	個別データポイントの色
axis1.x_bounds.minimum		Number	x軸の最小値
axis1.x_bounds.maximum		Number	x軸の最大値
axis1.x_format		String	x軸のラベルの書式コード
axis1.x_major_unit		Number	x軸のラベルの表示単位
axis1.y_bounds.minimum		Number	y軸の最小値
axis1.y_bounds.maximum		Number	y軸の最大値
axis1.y_format		String	y軸のラベルの書式コード
axis1.y_major_unit		Number	y軸のラベルの表示単位
axis2		Object	axis1と同様に第2軸のデータを指定

"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]],
      "styles": { "shape": { "fill": "CCCCFF", "outline": "6666CC" } },
      "data_point_styles": [null, null, { "shape": { "outline": "ff0000" } }]
    }
  }
}

axis1.series

第1軸に属する系列を {"系列名キー": { 系列データ }} 形式のオブジェクトとして格納します。

axis1.series.key.name

系列の名前を指定します。凡例などに反映されます。

axis1.series.key.values

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

axis1.series.key.styles

系列の色を {"shape": {"fill": "CCCCFF", "outline": "6666CC"}} のようなスタイルオブジェクトで指定します。

指定した色はマーカーの塗りと枠線に適用され、凡例にも反映されます。

axis1.series.key.data_point_styles

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

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

指定した色はマーカーの塗りと枠線に適用されます。

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

axis1.x_bounds.minimum / axis1.y_bounds.minimum

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

axis1.x_bounds.maximum / axis1.y_bounds.maximum

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

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

axis1.x_format / axis1.y_format

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

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

axis1.x_major_unit / axis1.y_major_unit

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

axis2

上記 axis1 と同様に、第2軸のデータを指定できます。

箇条書き

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

{
  "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`のみ有効

画像

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

{
  "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` 置換先の図形からはみ出した部分は非表示になります

動画

シェイプの位置に動画を配置します。

{
  "slides": [
    {
      "template": 1,
      "video1": {
        "type": "video",
        "src": "my-video.mp4",
        "thumbnail": "thumb.png",
        "scaling": "contain"
      }
    }
  ]
}

template.pptx

10-video template slide1

output.pptx

10-video output slide1

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

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

キー	必須	値	備考
type	必須	"video"
src	必須	String	動画ファイルをzip内に格納し、data.jsonからの相対パスを指定してください。対応形式は `mp4`, `m4v`, `mov` です。
thumbnail	必須	String	未再生時に表示される画像。動画と同じ縦横比のものを指定してください。画像ファイルをzip内に格納し、data.jsonからの相対パスを指定してください。対応形式は `jpg`, `jpeg`, `png`, `gif` です。
scaling		String	次のいずれか: `contain` （デフォルト）動画全体が置換先の図形に収まるように拡大・縮小 `cover` 動画の短辺が置換先の図形に収まるように拡大・縮小

色の指定

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

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

色名は 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" などのテーマカラー名を値として使用することはできません。

{
  "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

12-theme template slide1

output.pptx

12-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カラーコードまたは色名。テーマの色「表示済みのハイパーリンク」を変更します。

レンダリング例

スライドの再利用

{
  "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

output.pptx

10-reuse-slides output slide1

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

{
  "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

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

{
  "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

output.pptx

12-table-size output slide1

画像のサイズ調整

{
  "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

様々なチャート

{
  "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

output.pptx

20-charts output slide1

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

{
  "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

output.pptx

21-chart-dynamic-series output slide1

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

{
  "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

output.pptx

22-chart-data-point-styles output slide1

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

{
  "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の様々な機能を使ってアクセス解析レポートをレンダリングした例です。

{
  "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

output.pptx

91-analytics-report output slide1

商品カタログの例

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

{
  "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

API制限

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