🤖

【GPTs x PPTX】誰でも使える、業務フロー作成GPTsつくったった

に公開
業務効率化
ChatGPT
生成 AI
tech

1. 何を作ったのか

ChatGPTに「こんなフローチャート作って！」ってお願いしたら、PowerPointでフロー図を作ってくれるGPTsを作りました。百聞は一見にしかずということで是非。

https://youtu.be/XaIacamJEoA

以下にGPTsへのリンクも張ったので使ってみてください。
https://chatgpt.com/g/g-67e2c6bfe2148191962aa3a2f091aa00-pptx-ye-wu-hurotu-zuo-cheng-esiento

2. なんで作ったのか？

普段、業務分析とかワークフロー整理とか、そういうのをクライアントさんに見せるためにPowerPointでフローチャート作ることが多いんですよ。スイムレーンとか使ってね。

まぁ、そこそこ大変。
そしてMermaidは意外と業務フロー図という概念がない。
パワポ作成AIとか世にあるけど、フロー図をちゃんと作れるものとか全然ないじゃないですか？

お前、画像横に貼っただけで「おしゃれですがなにか？？」みたいな顔すんなよと？
もっとこう、図形とか配置とかちゃんとしてほしいんだよ？
(うそです、普通にイルシルとか使ってます。ありがとうございます。)

じゃあ作ろう！ということで作りました。(笑)

3. 目指したのは「ChatGPTで誰でも使える」こと！

とはいえ、やるならみんなが簡単に使ってほしい。ということで、「ChatGPTで簡単に使える！」を目標に作りました。
もちろんCode Interpreterでpyhton-pptx使えるんですが、愛しのo3ちゃんに「業務フロー図作って♥️」って言った結果はこちら。

10分くらい考えまくった結果、、、

あげく、使えないものを出してきやがって、、、

ということで作ったりましたよ、ええ。

4. 工夫したポイント

そもそもの設計

フローチャート作りって、まず「何を描くか」っていうA : 構造を考えるフェーズと、それを実際にB : PowerPointの図形に落とし込むフェーズがあるわけですね？

ChatGPTには、この「構造を考える」部分、つまりフローチャートの**「中間表現」**をJSON形式で吐き出してもらうところをAI化しました。
この中間表現っていうのは、どの部署がどんな作業をして、それが次にどう繋がって...みたいな、フローチャートの骨組み情報のことね。

具体的には、こんな感じのJSON（これが「中間表現」ね！）を吐き出してくれます。

{
  "LANE_NAMES": ["申請者", "上司", "人事部"],
  "FLOW_ELEMENTS_DATA": [
    {"id": "s1", "lane": 0, "type": "MSO_SHAPE.RECTANGLE", "text": "申請書作成\n必要事項記入\n添付資料準備", "position": 0},
    {"id": "s2", "lane": 1, "type": "MSO_SHAPE.DIAMOND", "text": "承認?\n(内容確認)\n(予算確認)", "position": 1},
    {"id": "s3", "lane": 2, "type": "MSO_SHAPE.RECTANGLE", "text": "処理実行", "position": 2},
    {"id": "s4", "lane": 0, "type": "MSO_SHAPE.RECTANGLE", "text": "修正対応\n再提出準備", "position": 2}
  ],
  "CONNECTIONS_DATA": [
    {"from": "s1", "to": "s2", "from_point": "right", "to_point": "left"},
    {"from": "s2", "to": "s3", "from_point": "bottom", "to_point": "top"},
    {"from": "s2", "to": "s4", "from_point": "right", "to_point": "left"},
    {"from": "s4", "to": "s1", "from_point": "left", "to_point": "bottom"}
  ]
}

で、このJSONを、pptxを作成してくれるPythonスクリプト flowGenerator.py のクラスに食わせるわけ。
そうすると、このスクリプトが中間表現からPowerPointスライドへの変換を全部やってくれるという仕組みなわけです。

これの良いところは、やはりpython環境の用意をしなくていいので、文系の人でも誰でも使えるってことですね。

レイアウトの調整

  • フロー要素の数がおおかったら箱の数を小さくする
  • 文字の長さとはこの大きさに応じて、文字サイズを調整する
    など、レイアウトも調整できるようにしています。

ただ、めちゃくちゃ複雑なフロー図の場合は知らんので、自己責任で。

# こんな感じで、テキストの長さによってフォントサイズを変えるロジックを入れたりしてます。
def calculate_font_size(self, text):
    # (前回の回答の calculate_font_size の内容をここに貼る想定)
    # ...
    # 最終的に候補から選ぶ！
    final_font_size = self._get_closest_font_size(ideal_font_size_clipped)
    return int(final_font_size)

矢印のカスタマイズ

ただ線を引くだけじゃなくて、ちゃんと「矢印」にしたかった！
実は、python-pptx の標準機能だけだと、なんと矢印をかく機能が有りません。

...なぜだ、めちゃくちゃつかうだろ、まじで。いるやろ。
ということで色々低レベルAPIを弄り倒して魔改造しております。これに4時間くらいかかった...。
でも、これでグッと見栄えが良くなったと思う！

## ============ 終端の矢印を設定 ==============
        ln = connector.get_or_add_ln()
        # 既存のheadEndを削除（もしあれば）
        for head_end in ln.findall(".//a:tailEnd", {"a": "http://schemas.openxmlformats.org/drawingml/2006/main"}):
            ln.remove(head_end)
        
        # 新しいheadEndを追加
        head_end_xml = f'<a:tailEnd xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" type="{MSO_LINE_END_TYPE.ARROW.value}" w="{MSO_LINE_END_WIDTH.MEDIUM.value}" len="{MSO_LINE_END_STYLE.MEDIUM.value}"/>'
        head_end = parse_xml(head_end_xml)
        ln.append(head_end)

5. ぜひ使ってみてください！

まだまだ改善の余地はあると思うけど、フローチャート作成がちょっとでも楽になったら嬉しいなーと思って作ってみました。
「こんな機能あったらいいな」とか「ここ、こうしたらもっと良くなるんじゃね？」みたいなのがあったら、気軽にコメントとかで教えてくれると、中の人がめっちゃ喜びます！笑

特に、ニッチですが業務フロー図をパワポで書かない時計ない人の助けになれば。笑

Discussion