iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
1

昨天已經初步剖析出版面配置的資料,但是畫出來看還是有些問題。所以在剖析投影片資料前,先來修正一下...

修正版面配置的剖析方式

檢查了一下剖析出來的資料,看起來是把母片跟版面配置中的圖形資料彙整起來的邏輯不太正確,所以修正一下。

使用修正後的資料,更新了:example008.html

現在看起來正常的多:

24-001.png

剖析投影片

搞定版面配置後,接下來用類似的方式剖析投影片。雖然說類似,但是也不完全一樣...只是可以參考版面配置部分的作法。

剖析出來的資料大概像這樣:

{
  ...
  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"
          }
        ]
      }
    },
  ...
  ]
}

接著用剖析出來的資料,把投影片畫出來看看:

24-002.png

OK,這一張看起來沒有太大問題。(連結:example009.html

畫出投影片

不過只看這張投影片,也不保證其他投影片是正確的XD,所以把完整資料輸出到檔案,然後把例子簡單改成可以看每張投影片的操作方式...(連結:example010.html

首先打開投影片看第一張:

24-003.png

......樣式不對阿,好,再看第二張(這張就是前面那張,應該沒問題)

24-004.png

因為跟母片長得最像,所以問題最少...再看第三張投影片:

24-005.png

標題跑掉了XD...好,要接受事實,再看下一張:

24-006.png

這張看起來又是對的...下一張:

24-007.png

...為什麼母片還是版面配置的標題文字也進來了阿Orz...看起來還有不少問題阿。看最後一張:

24-008.png

這張看起來又是對的...

檢討

之前觀察pptx中的xml資料,並根據觀察的結果做了一些假設,但是這些假設可能不一定全對。另外,也不是很確定資料從母片聚合到版面配置,再從版面配置聚合到投影片,這個過程中資料處理的方式是否全部正確。

另外,有一些實作方式的進路需要考量...為了讓html部分的繪製速度快,資料是匯集到投影片中,這樣就不用回頭去參考版面配置及母片。但是這樣做在資料處理的部份會有點複雜,所以寫程式的時候已經花了一些時間處理。另一種方式是各自獨立剖析,到要繪製的時候,如果投影片的資料有缺,就到版面配置找;如果版面配置也沒有,就到母片找。

另外一個問題是,版片配置有許多類型,p:ph(place holder)也是,目前只是簡單地把body跟title這兩種套用預設的樣式,其他就歸為其他,可能需要更細緻的分類才行。

總歸一句話,還要繼續努力幾天XD


上一篇
23 - 剖析佈景主題及版面配置
下一篇
25 - 目前碰到的資料剖析問題
系列文
30天實作線上簡報播放機制31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言