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の記法でスライドを書く体験をしてみてください。

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数（4つ）の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.