昨天已經初步剖析出版面配置的資料，但是畫出來看還是有些問題。所以在剖析投影片資料前，先來修正一下...
檢查了一下剖析出來的資料，看起來是把母片跟版面配置中的圖形資料彙整起來的邏輯不太正確，所以修正一下。
使用修正後的資料，更新了：example008.html
現在看起來正常的多：
搞定版面配置後，接下來用類似的方式剖析投影片。雖然說類似，但是也不完全一樣...只是可以參考版面配置部分的作法。
剖析出來的資料大概像這樣：
{
...
slides: [
...
"rId3": {
"colorScheme": {
"name": "相鄰",
"dk1": "#2F2B20",
"lt1": "#FFFFFF",
"dk2": "#675E47",
"lt2": "#DFDCB7",
"accent1": "#A9A57C",
"accent2": "#9CBEBD",
"accent3": "#D2CB6C",
"accent4": "#95A39D",
"accent5": "#C89F5D",
"accent6": "#B1A089",
"hlink": "#D25814",
"folHlink": "#849A0A"
},
"colorMap": {
"bg1": "lt1",
"tx1": "dk1",
"bg2": "lt2",
"tx2": "dk2",
"accent1": "accent1",
"accent2": "accent2",
"accent3": "accent3",
"accent4": "accent4",
"accent5": "accent5",
"accent6": "accent6",
"hlink": "hlink",
"folHlink": "folHlink"
},
"commonSlideData": {
"background": "#DFDCB7",
"shapes": [
{
"type": "shape",
"id": 2,
"name": "標題 1",
"spType": "title",
"x": 457200,
"y": 274638,
"cx": 7620000,
"cy": 1143000,
"presetGeom": "rect",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "zh-TW",
"sz": 4600,
"kern": 1200,
"cap": "none",
"spc": -100,
"baseline": 0,
"solidFill": "#675E47",
"latin": "+mj-lt",
"ea": "+mj-ea",
"cs": "+mj-cs"
},
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"spcBef": 0,
"buNone": true,
"runs": [
{
"type": "r",
"lang": "zh-TW",
"sz": 4600,
"kern": 1200,
"cap": "none",
"spc": -100,
"baseline": 0,
"solidFill": "#675E47",
"latin": "+mj-lt",
"ea": "+mj-ea",
"cs": "+mj-cs",
"kumimoji": 1,
"altLang": "en-US",
"dirty": 0,
"smtClean": 0,
"text": "簡報一"
},
{
"type": "end"
}
]
}
],
"vert": "horz",
"lIns": 91440,
"tIns": 45720,
"rIns": 91440,
"bIns": 45720,
"rtlCol": 0,
"anchor": "ctr"
}
},
{
"type": "shape",
"id": 3,
"name": "內容版面配置區 2",
"spType": "body",
"x": 457200,
"y": 1600200,
"cx": 7620000,
"cy": 4800600,
"presetGeom": "rect",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "zh-TW",
"sz": 2200,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 342900,
"indent": -228600,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"spcBef": 20000,
"buClr": "#A9A57C",
"buFont": "Arial",
"buChar": "•",
"runs": [
{
"type": "r",
"lang": "zh-TW",
"sz": 2200,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs",
"kumimoji": 1,
"altLang": "en-US",
"dirty": 0,
"smtClean": 0,
"text": "第一條"
},
{
"type": "r",
"lang": "en-US",
"sz": 2200,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs",
"kumimoji": 1,
"altLang": "zh-TW",
"dirty": 0,
"smtClean": 0
},
{
"type": "br"
},
{
"type": "r",
"lang": "zh-TW",
"sz": 2200,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs",
"kumimoji": 1,
"altLang": "en-US",
"dirty": 0,
"smtClean": 0,
"text": "測試測試"
},
{
"type": "end"
}
]
},
{
"lvl": 0,
"defRPr": {
"lang": "zh-TW",
"sz": 2200,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 342900,
"indent": -228600,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"spcBef": 20000,
"buClr": "#A9A57C",
"buFont": "Arial",
"buChar": "•",
"runs": [
{
"type": "r",
"lang": "zh-TW",
"sz": 2200,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs",
"kumimoji": 1,
"altLang": "en-US",
"dirty": 0,
"smtClean": 0,
"text": "第二條"
},
{
"type": "end"
}
]
},
{
"lvl": 2,
"defRPr": {
"lang": "zh-TW",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 1005840,
"indent": -228600,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"spcBef": 20000,
"buClr": "#D2CB6C",
"buFont": "Arial",
"buChar": "•",
"runs": [
{
"type": "r",
"lang": "zh-TW",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs",
"kumimoji": 1,
"altLang": "en-US",
"dirty": 0,
"smtClean": 0,
"text": "第三條"
},
{
"type": "end"
}
]
},
{
"lvl": 3,
"defRPr": {
"lang": "zh-TW",
"sz": 1600,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 1280160,
"indent": -228600,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"spcBef": 20000,
"buClr": "#95A39D",
"buFont": "Arial",
"buChar": "•",
"runs": [
{
"type": "r",
"lang": "zh-TW",
"sz": 1600,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs",
"kumimoji": 1,
"altLang": "en-US",
"dirty": 0,
"smtClean": 0,
"text": "第四條"
},
{
"type": "end"
}
]
}
],
"vert": "horz",
"lIns": 91440,
"tIns": 45720,
"rIns": 91440,
"bIns": 45720,
"rtlCol": 0
}
},
{
"type": "shape",
"id": 7,
"name": "Rectangle 6",
"x": 8458200,
"y": 0,
"cx": 685800,
"cy": 6858000,
"presetGeom": "rect",
"solidFill": "#675E47",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "en-US",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 0,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"runs": [
{
"type": "end"
}
]
}
],
"rtlCol": 0,
"anchor": "ctr"
}
},
{
"type": "shape",
"id": 8,
"name": "Rectangle 7",
"x": 8458200,
"y": 5486400,
"cx": 685800,
"cy": 685800,
"presetGeom": "rect",
"solidFill": "#A9A57C",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "en-US",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 0,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"runs": [
{
"type": "end"
}
]
}
],
"rtlCol": 0,
"anchor": "ctr"
}
},
{
"type": "shape",
"id": 6,
"name": "Slide Number Placeholder 5",
"spType": "sldNum",
"x": 8531788,
"y": 5648960,
"cx": 548640,
"cy": 396240,
"presetGeom": "bracketPair",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "en-US",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 0,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"runs": [
{
"type": "fld"
},
{
"type": "end"
}
]
}
],
"vert": "horz",
"lIns": 0,
"tIns": 0,
"rIns": 0,
"bIns": 0,
"rtlCol": 0,
"anchor": "ctr"
}
},
{
"type": "shape",
"id": 5,
"name": "Footer Placeholder 4",
"spType": "ftr",
"rot": 16200000,
"x": 7586910,
"y": 4048760,
"cx": 2367281,
"cy": 365760,
"presetGeom": "rect",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "en-US",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 0,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"runs": [
{
"type": "end"
}
]
}
],
"vert": "horz",
"lIns": 91440,
"tIns": 45720,
"rIns": 91440,
"bIns": 45720,
"rtlCol": 0,
"anchor": "ctr"
}
},
{
"type": "shape",
"id": 4,
"name": "Date Placeholder 3",
"spType": "dt",
"rot": 16200000,
"x": 7551351,
"y": 1645920,
"cx": 2438399,
"cy": 365760,
"presetGeom": "rect",
"textBody": {
"paragraphs": [
{
"lvl": 0,
"defRPr": {
"lang": "en-US",
"sz": 1800,
"kern": 1200,
"solidFill": "#2F2B20",
"latin": "+mn-lt",
"ea": "+mn-ea",
"cs": "+mn-cs"
},
"marL": 0,
"algn": "l",
"defTabSz": 914400,
"rtl": false,
"eaLnBrk": true,
"latinLnBrk": false,
"hangingPunct": 1,
"runs": [
{
"type": "fld"
},
{
"type": "end"
}
]
}
],
"vert": "horz",
"lIns": 91440,
"tIns": 45720,
"rIns": 91440,
"bIns": 45720,
"rtlCol": 0,
"anchor": "ctr"
}
},
{
"type": "pic",
"id": 9,
"name": "圖片 8",
"descr": "image6.png",
"rotWithShape": true,
"blip": {
"embed": "ppt/media/image2.png",
"srcRect": {
"l": 5681,
"t": 34663,
"r": 6586,
"b": 32076
}
},
"x": 6145327,
"y": 6200380,
"cx": 2312871,
"cy": 657618,
"presetGeom": "rect"
}
]
}
},
...
]
}
接著用剖析出來的資料，把投影片畫出來看看：
OK，這一張看起來沒有太大問題。（連結：example009.html）
不過只看這張投影片，也不保證其他投影片是正確的XD，所以把完整資料輸出到檔案，然後把例子簡單改成可以看每張投影片的操作方式...（連結：example010.html）
首先打開投影片看第一張：
......樣式不對阿，好，再看第二張（這張就是前面那張，應該沒問題）
因為跟母片長得最像，所以問題最少...再看第三張投影片：
標題跑掉了XD...好，要接受事實，再看下一張：
這張看起來又是對的...下一張：
...為什麼母片還是版面配置的標題文字也進來了阿Orz...看起來還有不少問題阿。看最後一張：
這張看起來又是對的...
之前觀察pptx中的xml資料，並根據觀察的結果做了一些假設，但是這些假設可能不一定全對。另外，也不是很確定資料從母片聚合到版面配置，再從版面配置聚合到投影片，這個過程中資料處理的方式是否全部正確。
另外，有一些實作方式的進路需要考量...為了讓html部分的繪製速度快，資料是匯集到投影片中，這樣就不用回頭去參考版面配置及母片。但是這樣做在資料處理的部份會有點複雜，所以寫程式的時候已經花了一些時間處理。另一種方式是各自獨立剖析，到要繪製的時候，如果投影片的資料有缺，就到版面配置找；如果版面配置也沒有，就到母片找。
另外一個問題是，版片配置有許多類型，p:ph(place holder)也是，目前只是簡單地把body跟title這兩種套用預設的樣式，其他就歸為其他，可能需要更細緻的分類才行。
總歸一句話，還要繼續努力幾天XD
iThome鐵人賽
看影片追技術