MDToPPTX

はじめに この記事はC#でMarkdownをパースしてオリジナルの出力を行う(markdigを使用)の続編です。 上記記事の中で書いたMarkdownを PPTXにするツールはOpenXML SDKを使用してPPTXファイルを作成しています。 このOpenXML SDKの使い方が最初すごい苦労したのでその部分について今回の記事は書くことにしました。 なお作成したMarkdownをPPTXに変換するツールはGithubにあげてあります。 OpenXMLとは Office2007から使われだしたファイルフォーマットでXMLファイルをzipで固めたものです。 そのためファイルの拡張子を.zipに変更してから解凍すると、中に入っているXMLファイルを見ることができます。 以前のバイナリ形式とは違いOfficeがインストールされていない環境でも作成することができます。 作成する環境 以下の感じです Windows10 Visual Studio 2017 C# .Net Standard 2.0 Class library OpenXML SDKについて OpenXMLの記載方法は以下の公式サイトを参考にしました https://docs.microsoft.com/en-us/office/open-xml/open-xml-sdk ただ上記サイトの説明のみでは理解するのにかなり時間がかかると思われるので、もしこれからOpenXML SDKを使うかたには以下の方法をお勧めします。 Open XML SDK Productivity Tool https://www.microsoft.com/en-us/download/details.aspx?id=30425 このツールを使用すると、指定したOpenXML形式のファイル(xlsxとかpptx)の中身の構造を確認することができます。 またツールを作るのに役立つのが、画面右側の領域に読み込んだファイルを作成するのに必要なC#のコードが出る機能です。 なので、自分の実装したい内容のファイルを作成し読み込んでC#のコードを確認していくと、100%理解しなくても動くものができる可能性がグッと近くなります。 私はこれを使ってちょっとずつ差分を見ながら欲しいコードを見つけてました。 例)フォントの太字をどうすればよいかを知りたいとき 新規作成したpptxのファイルにテキストを１つのみ配置して、C#コードを確認 上記pptxファイルをコピーして、テキスト部分をBoldにしてC#コードを確認 1.と2.を見比べる PowerPointのOpenXMLクラス構成　解説 基本的に上記に説明したOpen XML SDK Productivity Toolを使った方法を使えば、自分の欲しい機能は作れてしまうので話は終わるのですが、自分の備忘録を兼ねて調べたクラス構成を以下に書きます。 OpenXMLファイルのクラス構成はかなり数が多いため、重要な部分に絞って記載してます。 全体 まずは全体構成です。 PPTXを作成するには、図の下端にあるSlidePart, SlieMasterPartを一番触ることになります。 スライド全体の設定(スライドサイズなど)はSlideMasterPart, 各スライドについてはSlidePartといった分担です。 ThemePartは見た目のデザインを変更するに際にいじることがあり、また図には載せていませんが、スライドレイアウトを使う場合はSlideLayoutも触ることになります。 (今回私の作成した機能は1枚目のタイトルシート以外は全てBlankスタイルのシートを使っているので、スライドレイアウトについては触れていません) Slie 次はスライドです。PowerPointの１枚のスライドに相当するためSlidePartクラスのインスタンスはページ数とイコールになります。 上記図は以下の機能を実装する際に重要になってくるクラスのみを抜き出しています。 テキストボックスの配置 イメージの挿入 表の挿入 基本的にスライド内に張り付けるオブジェクトは全てShapeTree配下にぶら下がるようです。 一番多用するテキストボックスは、この図の中ではShapeTree以下のShapeに該当します。 Pictureがイメージになり、GraphicFrameが表です。 ...

はじめに 今回MarkdownをPowerPoint形式のファイル(*.pptx)に変換するツールを作成しました。 その中での技術的なメモをまとめておきます。　今回記述するのはMarkdownのパースについてです。 作成したツールはGithubにあげてあります。 https://github.com/ayumax/MDToPPTX また上記pptxを作成するツールの記事はこちらの記事を参照ください。 作成する環境 将来的にXamarinを使ったツールに組み込むことを考えていたため、.Net Standard 2.0のC#ライブラリとしてプロジェクトを作成しました。 全体としては以下の環境で作ってます Windows10 Visual Studio 2017 C# .Net Standard 2.0 Class library どうやってMarkdownをパースするか 最初は自前で正規表現か何かを使ってパースする事を考えていましたが、Markdownの書式は意外に数が多いので何か便利なライブラリがないか探したところ以下のものを見つけました。 markdig こちらのライブラリはGithubでBSD-Clause 2 licenseで公開されており、Nugetから取得できます。 Markdownをhtmlに変換するだけなら、そのままの利用でできますしhtml以外へも出力部分を自分で作成すれば可能な作りになってます。 markdigの通常の使用方法 Markdownをhtmlに変換するには以下の記述のみで可能です(githubのREADME.mdから抜粋) var result = Markdown.ToHtml("This is a text with some *emphasis*"); Console.WriteLine(result); // prints: <p>This is a text with some <em>emphasis</em></p> parserとしてのmarkdigの利用 今回私のやりたかった事はMarkdownをパースして、PowerPointファイルを出力することですのでmarkdigのパーサーとしての機能のみ利用し、オリジナルの出力ができないか調査しました。 markdigの処理の仕組み markdigを利用して独自の出力を行う場合にどのようにしれば良いかを調べるためプリセットされているHtmlRendererがどのように実装されているかを簡単に表したのが以下の図。 HtmlRendererの継承元をたどるとRendererBaseに行き着き、そこには変換時に使用するRender()メソッドと、Markdownのブロックとインラインを処理するためのObjectRenderersプロパティが定義してある。 Renderer 出力したいファイル別にRendererクラスを定義するようになっていて、デフォルト実装内ではHTMLファイルを出力するHtmlRendererと、正規化されたMarkdownテキストを出力するNormalizeRendererが実装してある。 上記クラス図の中間にあるTextRendererBaseはテキストファイルに出力するRendererの機能をまとめてあるクラス。 ObjectRenderers パースされたMarkdownオブジェクトをどのような形式で出力するか定義する部分。 HtmlRendererのコンストラクタでは以下のように実装されている。 // Default block renderers ObjectRenderers.Add(new CodeBlockRenderer()); ObjectRenderers.Add(new ListRenderer()); ObjectRenderers.Add(new HeadingRenderer()); ObjectRenderers.Add(new HtmlBlockRenderer()); ObjectRenderers.Add(new ParagraphRenderer()); ObjectRenderers.Add(new QuoteBlockRenderer()); ObjectRenderers.Add(new ThematicBreakRenderer()); // Default inline renderers ObjectRenderers.Add(new AutolinkInlineRenderer()); ObjectRenderers.Add(new CodeInlineRenderer()); ObjectRenderers.Add(new DelimiterInlineRenderer()); ObjectRenderers.Add(new EmphasisInlineRenderer()); ObjectRenderers.Add(new LineBreakInlineRenderer()); ObjectRenderers.Add(new HtmlInlineRenderer()); ObjectRenderers.Add(new HtmlEntityInlineRenderer()); ObjectRenderers.Add(new LinkInlineRenderer()); ObjectRenderers.Add(new LiteralInlineRenderer()); 前半の定義ではブロック単位の出力を定義するオブジェクトが追加されており、後半の定義ではブロック内のインライン部分の出力定義がされたオブジェクトが追加されている。 パースされたMarkdownBlockオブジェクトには内部にさらにInlineオブジェクトが配置されているためRendererをBlockとInlineに分けることで処理の実装が書きやすくなっている。 ...

久日の更新 前回MDToPPTXの記事書いたときから、結構立ってました。 今度生まれて初めてのLTのこのツールを作成した話をする予定もあり、またコードも見直している中の話です。 Imageの実装 前回記事に書いた時点では、暫定で1pxを1mmとしてイメージを実装してましたが、、、なんか実装変になってて違ってて。 これだと横幅1000pxの画像の幅は1cmに変換されてました。 (ピクセル数を1/1000した数値を物理幅(cm)にしてた） 対策 本当はMarkdown側で幅と高さを指定したいのですが、それはまだいい案が見つかってないので、フォントの大きさと同じくDPIを用いた計算をしてイメージサイズも決定することにしました。 パワポのデフォルト設定では96dpiになっているらしいので、 96dpi => 96px/inch => 96px/25.4mmなので imageSize(cm) = imageSize(px) / 3.779528 / 10 としました。 これで自分の狙った大きさにはまだできませんが、 違和感ない大きさでパワポ上に貼り付けられると思います。

MDToPPTX 先日から作成していたMarkdownファイルをPowerPointファイル(*.pptx)に変換するツールMDToPPTXのベータ版ができました。 使用言語はC#で、ライブラリ部分は.net standard2.0で作ってます。 なので試してないけど、.net coreやXamarinでも動くはず。 これを使用するとMarkdownでパワポのファイルを作成できます。 markdig Markdownの解析にはmarkdigを利用しました。 これのおかげでとっても楽に書けてます。 openxml パワポファイルの作成はopenxmlを利用してます。 これを使う事でパワポがインストールされてないマシンでもpptxファイルの作成が可能です。 ただsdkを使っても利用難易度は高かったです。 実行exe github内のプロジェクト内のMarkPP.exeは以下のようなコマンドで使用可能です。 MarkPP.exe "markdownfle path" "title" "subtitle" マークダウンファイルパスの(.md)を(.pptx)に変換してファイルが出力されます。 以下はgithubのREADMEにも記述してありますが、 対応構文 以下の構文に対応してます。 Markdown内でのHTML表記には対応してません。 HEADERS(Level1 or Level2に対応、パワポにLevel3以降はいらんだろ) BLOCKQUOTES LISTS CODE BLOCKS(インラインコードもOK) LINKS EMPHASIS(Bold, Italic, Strike) Images(1pixel -> 1mmで配置) Table シートの境目は—を記述します。 記述例 input Markdown例 コードブロックの中にバッククオート3つが書けないので、‘‘‘で置き換えてます # テストシート1 テストシートです。 **太字**です *イタリック*も対応 ~~打消しも可能~~ [ハイパーリンク例](http://ayumax.hatenablog.com/) ↓コードブロック ‘‘‘　class ClassA { public ClassA() { } public void Func() { } } ‘‘‘　--- # テストシート2 テストシート2枚目です 箇条書きにも対応 + 箇条書きです + インラインコードも`対応`してます イメージの挿入もできます  引用文はこちら > 引用サンプル > です --- # テストシート3 ## サブタイトル テストシート3枚目です 1. 数値の箇条書き 1. 数値の箇条書き2行目 1. 数値の箇条書き3行目 表も書けます | Left align | Right align | Center align | |:-----------|------------:|:------------:| | 1行目左 | 1行目 | 1行目右 | | 2行目左 | 2行目 | 2行目右 | | 3行目左 | 3行目 | 3行目右 | output PPTX こんな感じで出力されます。 ...

前回版の課題 前回の記事(http://ayumax.hatenablog.com/entry/2018/05/06/231645)の段階では以下の課題がありました。 テキストの位置を自由に変更できない イメージ挿入機能がない テキストが全て箇条書きになる そこで今回はそれらの対策を行いました。 テキストの位置設定 PPTXTextAreaクラスを新規作成し、Position(x,y)とSize(width, height)を設定できるようにした。 パワポの世界ではcmで設定するようなのでcmで値は入れれるように行った。（内部で変換している） イメージの挿入 これまたPPTXImageクラスを新規作成して対応。 PPTXTextAreaと同様に位置も指定できるようにした。 ただ課題があって、もと画像のアスペクト比を保ったまま拡縮ができない。。やろうと思うとSizeの値をアスペクト比を保った値に自分でいれてあげる必要があり、ちょっと不便。 テキストの箇条書き設定 PPTXBulletを新規作成。enumでテキストの箇条書き設定を設定可能。 結果 入力ソース using (PPTXDocument document = new PPTXDocument(PPTXFilePath, settings)) { document.Slides = new List<PPTXSlide>() { new PPTXSlide() { SlideLayout = settings.SlideLayouts[EPPTXSlideLayoutType.TitleAndContents], Title = new PPTXTextArea("コンテンツ１ページ目"), TextAreas = new List<PPTXTextArea>() { new PPTXTextArea("本文です。\n\\nをいれると改行もされます") } }, new PPTXSlide() { SlideLayout = settings.SlideLayouts[EPPTXSlideLayoutType.TitleOnly], Title = new PPTXTextArea("コンテンツ２ページ目"), TextAreas = new List<PPTXTextArea>() { new PPTXTextArea("パワーポイント2枚目のテキスト１", 1, 5, 20, 2), new PPTXTextArea(1, 7, 20, 7) { Texts = new List<PPTXText>() { new PPTXText("2枚目1行目", PPTXBullet.Circle), new PPTXText("2枚目2行目", PPTXBullet.Circle), new PPTXText("2枚目3行目", PPTXBullet.Rectangle), new PPTXText("2枚目4行目 箇条書き解除") } } }, Images = new List<PPTXImage>() { new PPTXImage(@"C:\temp\sample.jpg", 1, 15, 5, 3), new PPTXImage(@"C:\temp\sample.jpg", 7, 15, 5, 3) } } }; } 結果 次 これでpptx作成機能はひと段落。 フォントの設定機能もあった方が良いかなあとも思うけど、あまり凝りすぎると先に進まないので必要最低限で。 またいるなって思ったら検討する予定。 ...

進捗 Markdownを読み込んでパワポを作るC#ライブラリの開発だが、 とりあえず最低限の機能はできた。 現時点での機能はこんな感じ スライドサイズは4x3固定（16:9も対応したい） 1枚目は必ずタイトルページ 2枚目以降は自由に追加可能 追加するスライドはスライドレイアウトの指定が可能 スライドに入れれるのはテキストのみでイメージや図形は不可 以下のようなコードを書くと *.pptxファイルが作成される。 public void Run(string PPTXFilePath) { var settings = new PPTXSetting() { SlideSize = EPPTXSlideSizeValues.Screen4x3, Title = "サンプルファイルタイトル", SubTitle = "2018/5/3 ayumax" }; using (PPTXDocument document = new PPTXDocument(PPTXFilePath, settings)) { document.Slides = new List<PPTXSlide>() { new PPTXSlide() { SlideLayout = settings.SlideLayouts[EPPTXSlideLayoutType.TitleAndContents], Title = new PPTXText("コンテンツ１ページ目"), Bodys = new List<PPTXText>() { new PPTXText("本文です。\nここに書いていく") } }, new PPTXSlide() { SlideLayout = settings.SlideLayouts[EPPTXSlideLayoutType.TwoContents], Title = new PPTXText("コンテンツ２ページ目"), Bodys = new List<PPTXText>() { new PPTXText("パワーポイント2枚目のテキスト１") new PPTXText("テキスト２\r\n２行目") } } }; } } 今の課題 まだまだ完成には程遠いけど、今見えている範囲だと以下の３つ ...

PPTXがつくりたい 最近やりたいこが多すぎて色々並列に進めてますが、 その中でも何故かこのMarkdownでパワポの資料を作りたい欲求が高くて、 一番頑張ってます。 まずはそんなツールはないのか知らべてみた そこまでニッチなツールまでは知れべてないけど、 あんまりすぐ使いたいものがない感じ。 PDFにできるツールは多いけどパワポは少ないよね。 そんな中このページを見つけた。 https://qiita.com/sky_y/items/f38db5dd69720e5ca0cfqiita.com Pandocっていうの使えばすでに自分のやりたい事ができるらしい。 ただ今ーパワポの痒い所に手が届かないような感じ。 じゃあ自分で作るか とりあえず自分の得な環境で作りたいのでVisualStudio + C#で作ります。 後々使いまわせるように.NET Standardでライブラリは書こうと思ってます。 多分つくらなきゃいけない機能は大きくは以下の２つ。 Markdownのパース これもいくつかツール検索したんやけど、HTMLにしちゃうものが多いんですよね。 使われ方見るとわかるんやけども。 なので、こっちはまだ手付かずだけど正規表現で頑張るか、 以前業務の中でしった「Sprache」ってテキストパーサのライブラリでも可能か 試してみるつもり。 pptxファイルの作成 これは普段業務ではエクセルのxlsxをOpenXMLをラップしたClosedXMLってライブラリ を使っていてかなり使用している。 なのでパワポもこの兄弟みたいなライブラリないかなと探したけどないので、 OpenXMLライブラリのみ使ってあとは自分で作ります。 こっちはまあまあいい感じに進んでて、現状でもサンプルファイルの書き出しには成功してる！ あとはまだ実装が全然コナレてないので、リファクタリングしながら進めているところ。 ただあくまでもMarkdownの出力に使うのみなので、フル機能のラップとかは考えてません。 これは自分の中では非常にHOTな開発なので、 なんとか形にすることろまでは進めたい。 そんでうまくいったらそのままXamarin使ってiOS, Androidアプリにしたい。