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
というファイル名で保存してください。
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
output.pptx
テキスト(オプション付き)
文字列のかわりにオブジェクトを指定すると、スタイルなどのオプションを指定できます。
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
output.pptx
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
output.pptx
テーブル(オプション付き)
文字列のかわりにオブジェクトで配列を作ると、セル単位でスタイルなどを指定することができます。
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
output.pptx
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
output.pptx
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, 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
output.pptx
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の例
"labels": ["Q1", "Q2", "Q3", "Q4"]
labels
横軸(項目軸)のラベルを文字列の配列で指定します。
labels_intervalの例
"labels_interval": 1
labels_interval
横軸(項目軸)のラベルの表示間隔を指定します。
seriesの例
"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 の対象 |
|
---|---|---|
棒グラフ | 棒の塗り | 棒の枠線 |
折れ線グラフ | マーカーの塗り | マーカーの枠線 |
円グラフ | スライスの塗り | スライスの枠線 |
boundsの例
"axis1": {
"bounds": {
"minimum": 0,
"maximum": 100
}
}
axis1.bounds.minimum
第1縦軸(値軸)の最小値を指定します。
axis1.bounds.maximum
第1縦軸(値軸)の最大値を指定します。
formatの例
"axis1": {
"format": "0.0%"
}
axis1.format
第1縦軸(値軸)の書式を設定します。 0.0%
や #,##0.0
などの値が入ります。
major_unitの例
"axis1": {
"major_unit": 1000
}
axis1.major_unit
第1縦軸(値軸)のラベルの表示単位を指定します。
axis2
上記 axis1
と同様に、第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]
],
"styles": {
"shape": { "fill": "ffdd99", "outline": "ffaa55" }
}
}
}
}
}
}
]
}
template.pptx
output.pptx
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軸のデータを指定 |
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]],
"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つ目のデータポイントの枠線を赤に指定しています。
指定した色はマーカーの塗りと枠線に適用されます。
x_bounds / y_boundsの例
"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
対象の軸の最大値を指定します。
x_format / y_formatの例
"axis1": {
"x_format": "0.0%",
"y_format": "#,##0.0"
}
axis1.x_format / axis1.y_format
対象の軸の書式を設定します。 0.0%
や #,##0.0
などの値が入ります。
x_major_unit / y_major_unitの例
"axis1": {
"x_major_unit": 1,
"y_major_unit": 0.1
}
axis1.x_major_unit / axis1.y_major_unit
対象の軸のラベルの表示単位を指定します。
axis2
上記 axis1
と同様に、第2軸のデータを指定できます。
箇条書き
箇条書きに配列を流し込みます。
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
output.pptx
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
output.pptx
imageオブジェクトのパラメータ一覧
キー | 必須 | 値 | 備考 |
---|---|---|---|
type | 必須 | "image" | |
src | 必須 | String | ソース画像をzip内に格納し、data.jsonからの相対パスを指定してください。 |
scaling | String | 次のいずれか:none (デフォルト)オリジナル画像のサイズ contain 画像全体が置換先の図形に収まるように拡大・縮小 cover 画像の短辺が置換先の図形に収まるように拡大・縮小 |
|
overflow | String | 次のいずれか:visible (デフォルト)画像は切り取られず、置換先の図形からはみ出した部分も表示されます hidden 置換先の図形からはみ出した部分は非表示になります |
動画
シェイプの位置に動画を配置します。
data.json
{
"slides": [
{
"template": 1,
"video1": {
"type": "video",
"src": "my-video.mp4",
"thumbnail": "thumb.png",
"scaling": "contain"
}
}
]
}
template.pptx
output.pptx
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色の名前付きの色が指定できます。それぞれの色名の具体的な色は後述の方法で変更できます。
また、下記のカラーコードが使用可能です。これらのコードは 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カラーコードまたは色名で指定します。
未指定、空文字列 ""
または 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
output.pptx
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
]
}
}
}
}
}
]
}
template.pptx
output.pptx
テキストスタイルを変更する
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": ""
}
}
}
}
]
}
template.pptx
output.pptx
テーブルの行数・列数調整
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"]
]
}
}
]
}
template.pptx
output.pptx
画像のサイズ調整
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"
}
}
]
}
template.pptx
output.pptx
様々なチャート
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]
]
}
}
}
}
}
]
}
template.pptx
output.pptx
チャートのシリーズ追加と削除
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]
}
}
}
}
}
]
}
template.pptx
output.pptx
チャートの個別データポイントスタイルの指定
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" } }
]
}
}
}
}
}
]
}
template.pptx
output.pptx
チャートの軸ラベル表示間隔
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
]
}
}
}
}
}
]
}
template.pptx
output.pptx
アクセス解析レポートの例
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%"]
]
}
}
]
}
template.pptx
output.pptx
商品カタログの例
一枚のテンプレートを何回も再利用して商品カタログを生成した例です。
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"],
["販売", "店頭/オンライン"]
]
}
}
]
}
template.pptx
output.pptx
API制限
タイトル | 制限 | 備考 |
---|---|---|
レート制限 | 600/分 | |
セッションの有効期限 | 24時間 | レンダリングが完了していないセッションについては、この期限に関わらず常に最新のもののみを保持します。 |
zipファイルのサイズ | 50MBまで | |
アップロードURL | 60分 | セッションの有効期限内であれば何回でも再生成できます。 |
ダウンロードURL | 5分 | 同上。 |