mottox2 blog

jsx-presentationを使ってJSXでpptxファイルを生成する

dev

週末にpptxファイルが生成できるスライド作成ツールのプロトタイプを作りました。

ご覧の通り画面に対応したpptxファイルがダウンロードされていることがわかると思います。
このpptxファイル生成にはVercelのServerless Functionsを利用しており、jsx-presentationというライブラリを利用しています。

実際には次のようなコードで動作しています。(少々泥臭い感じなのは見逃してください。)

実際のコード
tsx
import React from "react";
import { NextApiRequest, NextApiResponse } from 'next'
import { generate, Presentation, Slide, Text, Shape } from "jsx-presentation";

import { Block } from '../../types/blocks'

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const blocks = req.body as Block[]
  const content = await generatePptx(blocks)

  res.statusCode = 200
  res.setHeader('Content-Type', 'application/vnd.openxmlformats-officedocument.presentationm')
  res.send(content)
}

const scale = 0.3;
const generatePptx = (blocks: Block[]) => {
  return generate(
    <Presentation>
      <Slide>
        {blocks.map((block) => {
          if (block.type === "text")
            return (
              <Text
                fontSize={Math.round(block.fontSize * scale * 2)}
                color="333333"
                textAlign="left"
                position="absolute"
                width={100}
                top={Math.round(block.top * scale)}
                left={Math.round(block.left * scale)}
                key={block.id}
              >
                {block.text}
              </Text>
            );
          else if (block.type === "rect")
            return (
              <Shape
                fill={block.backgroundColor.replace("#", "")}
                position="absolute"
                top={Math.round(block.top * scale)}
                left={Math.round(block.left * scale)}
                width={Math.round(block.width * scale)}
                height={Math.round(block.height * scale)}
                key={block.id}
              />
            );
          else throw "Invalid Block Exception";
        })}
      </Slide>
    </Presentation>,
    { skipGenerate: true }
  );
};

JSXで記述した結果がpptxに反映されています。jsx-presentationからインポートしたコンポーネントで記述しています。

つまりjsx-presentationを使えば、コード上からパワーポイントのプレゼンテーションファイルを生成することができます。そこで簡単に使い方を紹介します。

使い方

一番簡単な構成は次のようなコードです。yarn add jsx-presentationでインストールして次のようなindex.tsxを作成しましょう。

tsx
import React from "react";
import { generate, Presentation, Slide, Text } from "jsx-presentation";

generate(
  <Presentation>
    <Slide>
      <Text fontSize={16} color='333333' textAlign='center' />
    </Slide>
  </Presentation>
);

覚えることとしては次の3つです。

  1. generateの引数にはPresentationを親とするJSXを渡す
  2. Presentationの子にはSlideを渡す
  3. TextやShapeなどのpropsには(TSの型を参考に)CSS風の値を渡す

これらのルールを守りながら上記のファイルを実行しましょう。babelやtscなど実行方法は問いません。個人的にはts-nodeでやるのが楽だと思っています。

スターターを利用する

ただ、ドキュメントもほとんどない状況なのでちゃんとやっていくのは難しいでしょう。そこで利用するのがjsx-presentation-starterです。
このリポジトリには、ある程度コンポーネントが網羅された状況のファイル郡が用意されているのでそこから必要な部分だけを編集していく形になります。

ディレクトリ構造も次のようになっており、ある程度の肥大化を想定した形になっています。

* index.tsx
* components/
  * PageHeader.tsx
* slides/
  * Slide1.tsx
  * Slide2.tsx

ぜひ、Reactの記法でスライドを書く体験をしてみてください。

B!
dev

Reactで寿司を回すタイピングゲームを作った

@dala00さんが企画している、1週間でテーマに沿ったWebサービスを作る #web1weekという企画に参加しました。今回は第二回の開催で「Like」というお題でした。 esaをより便利に使う

dev

esaをより便利に使うための拡張機能「Refined esa」をつくった

@dala00さんが企画している、1週間でテーマに沿ったWebサービスを作る #web1weekという企画に参加しました。今回は第二回の開催で「Like」というお題でした。 自分は「自分の好きなWe

dev

Next.jsのStatic Generationを追う際に参考にしたページ

Next.jsのStatic Generationを追っておく際に見たページをまとめた。簡単に要点をまとめてはいるが、詳しくはリンク先のオリジナルを見てほしい。 > 2019 in Review2

Copyright © 2019 @mottox2 All Rights Reserved.