AIツール開発ワークショップ（Dify）【サイボウズ新人研修2025】

by Cybozu

Slide 1

Slide 1 text

AIツール開発ワークショップ（Dify）サイボウズ開運研修 2025 開発本部 AIやっていきチーム加瀬健太（@Kesin11） 1

Slide 2

Slide 2 text

講義のコンセプト • 誰に • 開運に配属される新卒の皆さんに • 何と言ってもらいたいか • 生成AIに興味が湧いた！ • AIアプリをDifyで簡単に作れることが分かった！

Slide 3

Slide 3 text

講義の構成 • 前半 25分 • AIアプリの基礎の紹介 • Difyの紹介 • 休憩 5分 • 後半 55分 • 講師の紹介 + ブレイクアウトルームに移動 • グループに分かれてDifyワークショップ • レベル1、２、３の課題 • まとめ 5分

Slide 4

Slide 4 text

自己紹介 • 加瀬健太（@Kesin11） • 開発本部 AIやっていきチーム • 普段の業務 • ChatGAI（社内のChatGPTクローン）運用 • CursorやDifyなどのAI関連ツールのアカウント管理・運用 • Kintone AIのR&D協力 • 趣味 • github.blog/changelogを毎朝見ること • Difyのリリースノートも毎回見てます 4 @Kesin11 @Kesin11 @kesin11.bsky.soci al

Slide 5

Slide 5 text

はじめに • 「AIアプリ」という言葉を多用しますが外で通用する単語かというと怪しい • DifyはLLMを組み込んだチャットbotやワークフローを簡単に作れる • これを「AIアプリ」と呼んで良いのかどうか • でもKintoneも「アプリ」という言葉を使っているので許してほしい・・・ • ちなみにDify公式ではLLM appという解釈らしいです • https://dify.ai/ • > Dify is an open-source LLM app development platform. Orchestrate LLM apps from agents to complex AI workflows, with an RAG engine.

Slide 6

Slide 6 text

今日もしくは昨日使ったAIサービスと機能を教えて下さい！実況スレに書き込んでね！（1分）

Slide 7

Slide 7 text

©️ Cybozu, Inc. AIアプリ（サービス）とは何だろう？

Slide 8

Slide 8 text

ChatGPTで要約や翻訳をやらせたことはみんなあるはずもしもSlack botにできたら → アプリっぽいかもしれない

Slide 9

Slide 9 text

PDFなどをアップロードして AIに質問してみるもしPDFを開いているアプリの中から質問できたら → アプリっぽいかもしれない

Slide 10

Slide 10 text

Kintone AI検索はどうやって作られていそうか？ • 検索 → Kintoneの検索機能 • 引用 → 検索してヒットしたものを並べてそう • AIの回答 → ヒットした文章から回答を組み立ててそう • UI → 要約とか翻訳よりも質問できそう、という雰囲気にしてそう

Slide 11

Slide 11 text

何か意外と作れそうな気がするぞ？ • 検索 → APIさえあればできそう • 引用 → ヒットした上位を並べてるだけ • AIの回答 → ヒットしたレコードの中身を渡せばできそう • UI → これは頑張るか、Slack botなどに置き換える

Slide 12

Slide 12 text

何か意外と作れそうな気がするぞ？ • 検索 → APIさえあればできそう • 引用 → ヒットした上位を並べてるだけ • AIの回答 →ヒットしたレコードの中身を渡せばできそう • UI → これは頑張るか、Slack botなどに置き換える • 実際にAIが必要なのは、 • AIの回答 • ここだけっぽい気がする • あとはAPIの結果をAIに渡して、出てきた回答をUIにいい感じに表示するだけ

Slide 13

Slide 13 text

何か意外と作れそうな気がするぞ？ • 今までのアプリ • UIから入力 → API → JSONの整形 → UIに出力 • AIアプリ • UIから入力 → API → AIによる処理 → Markdownなどの整形 → UIに出力 • 実はによる処理が中間に追加されたぐらいの違い・・・？ 13

Slide 14

Slide 14 text

意外とAIアプリ作れそう！そんな気がしてきませんか？

Slide 15

Slide 15 text

©️ Cybozu, Inc. 生成AIの基礎

Slide 16

Slide 16 text

©️ Cybozu, Inc. システムプロンプト・ユーザープロンプト

Slide 17

Slide 17 text

生成AIの処理 = プロンプト • システムプロンプト • システムやアプリの開発者が設定し固定された一番最初のプロンプト • ほとんどのアプリ（サービス）ではユーザーに対して非公開 • 例：AIの人格、振る舞い、タスクについての説明など AIの人格や振る舞いを設定するパターン特定タスクを処理させるためのパターン

Slide 18

Slide 18 text

生成AIの処理 = プロンプト • ユーザープロンプト • エンドユーザーが入力するプロンプト • 例：AIへの問いかけ、処理してほしいデータなどこれもユーザープロンプトチャット型アプリでのユーザーの入力

Slide 19

Slide 19 text

生成AIの処理 = プロンプト • システムプロンプトとユーザープロンプトの違い • 生成AIのAPIの仕組み上、システムプロンプトは必ず一番最初に来る • 指示をシステムプロンプトに書いた方が効きやすいとかそういうのはあまり関係ない • アプリ内のプログラム内の実装で挙動が変わるケースはある • APIの戻り値のデータ構造でシステムプロンプト、ユーザープロンプト、AIが返したテキストは区別が可能 • 内部でどう使われているかはアプリ（サービス）の実装依存 19 あなたは優しいAIです。優しく回答してください AIについて教えてください具体的にどのような点に興味がありますか？ AIの将来性について AIは現在も急速に進化しておりその将来性は非常に大きく… システムプロンプトユーザープロンプト1 ユーザープロンプト2 AIの回答1 AIの回答2

Slide 20

Slide 20 text

生成AIの処理 = プロンプト • システムプロンプトとユーザープロンプトの違い • 生成AIのAPIの仕組み上、システムプロンプトは必ず一番最初に来る • 指示をシステムプロンプトに書いた方が効きやすいとかそういうのはあまり関係ない • （厳密にはLLMの仕組み上、最初と最後のプロンプトが効きやすいとされるのでシステムプロンプトの方が効きやすいのは事実） • 後半のDifyでは仕様上、システムプロンプトとユーザープロンプトを使い分けられない場合もあるがあまり気にしなくても大丈夫 20 あなたは優しいAIです。優しく回答してください AIについて教えてください具体的にどのような点に興味がありますか？ AIの将来性について AIは現在も急速に進化しておりその将来性は非常に大きく… システムプロンプトユーザープロンプト1 ユーザープロンプト2 AIの回答1 AIの回答2

Slide 21

Slide 21 text

©️ Cybozu, Inc. 生成AIの出力を制御する

Slide 22

Slide 22 text

生成AIの出力を制御する（いわゆるプロンプトテクニック） • ただ1行のタスク指示よりは細かく指示を与えたほうがAIから良い回答を引き出せると知られている • 代表的なテクニック • タスク説明 • タスク処理手順 • 出力フォーマットの指定 • 入力、出力の例を与える引用：Anthropicのユーザーガイド（例：マーケティングメールキャンペーンの作成） https://docs.anthropic.com/ja/docs/build-with-claude/prompt-engineering/be-clear-and-direct

Slide 23

Slide 23 text

生成AIの出力を制御する（いわゆるプロンプトテクニック） • タスク説明 • 例：翻訳して、要約して • タスク処理手順 • 例： • 文章をいくつかのトピックに分解してください • トピックごとに重要な文章を抽出してください • 全体で400文字程度に要約してください • 出力フォーマットの指定 • 例：箇条書き、構造化されたMarkdown、JSON、など • 入力、出力の例を与える • example

Slide 24

Slide 24 text

Slide 25

Slide 25 text

生成AIの出力を制御する（いわゆるプロンプトテクニック） • 全部覚える必要があるのか問題 • 最近はどのプラットフォームにもプロンプトの自動改良の仕組みが存在する • 大抵の場合はこれで十分だと思います（加瀬主観） • OpenAI, Anthropic, AWS, Azure, Google Cloud全部にある • スタイルの流派はあるが、生成されるシステムプロンプトの観点は似てる • OpenAIはMarkdown、AnthropicはXMLで構造化する傾向がある • でも会社の秘密情報をそのまま入力するのは基本NG • 一般情報を入力してプロンプトの構造だけ頂きましょう • Difyにも存在するので後半で紹介します platform.openai.com/playground console.anthropic.com

Slide 26

Slide 26 text

©️ Cybozu, Inc. Difyの紹介

Slide 27

Slide 27 text

Difyとは • 「AIアプリ」を簡単に作れるプラットフォーム • 開発元のLangGenius社がホスティングしている dify.ai とOSSが存在する • AIやっていきチームが運用しているDifyはOSS版をAWSにデプロイしたもの • OSSのリポジトリ https://github.com/langgenius/dify

Slide 28

Slide 28 text

©️ Cybozu, Inc. Difyの使い方

Slide 29

Slide 29 text

アプリ作成画面 • アプリの種類の選択 29

Slide 30

Slide 30 text

アプリ作成画面 • 大別すると初心者向けと上級者向けの2つのアプリの種類が存在 • チャット型（初心者向け） • ワークフロー型（上級者向け）

Slide 31

Slide 31 text

チャット型（初心者向け） • システムプロンプト + 入力パラメータだけでAIアプリを作成可能 • 完全にノーコードであまり複雑なことはできない • （「エージェント」タイプでは少し複雑なことも可能だが今回はスコープ外）

Slide 32

Slide 32 text

ワークフロー型（上級者向け） • AIによる回答の前後で様々な処理を組み立てることが可能 • 外部のサービスやDBとも連携可能 • 3rdパーティの様々なプラグインと組み合わせられる • （繰り返しやIF分岐などローコードっぽい機能も存在するが今回はスコープ外）例：Zoomの書き起こしテキストからMTGの要約生成

Slide 33

Slide 33 text

©️ Cybozu, Inc. ワークショップの課題をちょっとだけ先取り 33

Slide 34

Slide 34 text

一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • Difyによるプロンプトの自動生成 34

Slide 35

Slide 35 text

一番簡単なチャットアプリを例に • システムプロンプト • 変数 • チャットとは別に入力が必要なパラメータ • プロンプトに{{var}}で埋め込める • モデル選択 • Difyによるプロンプトの自動生成 35

Slide 36

Slide 36 text

一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • 生成AIのモデルも変更可能 • Claude, Gemini, GPT-4.1など • パラメータはデフォルトでOK • Difyによるプロンプトの自動生成 36 モデルの選択パラメータ設定研修ではClaude 3.7 Sonnet, gpt-4.1-dify-testのどちらかでOK 遊びたかったらClaude 3.5 Haikuやgpt-4.1-mini-dify-testなど軽量モデルでどう変わるか試してみよう

Slide 37

Slide 37 text

一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • Difyによるプロンプトの自動生成 • 「自動」ボタンでプロンプト生成のモーダルが開く • タスクだけ与えるといい感じのプロンプトを生成してくれる • 結構時間はかかる（約1分ぐらい） • 変数も一緒に生成してくれるので、一番最初にこれを実行するべき • （スライドの例では順番ミスったので不採用で・・・） 37

Slide 38

Slide 38 text

一番簡単なチャットアプリを例に • デバッグ実行 • 作成画面でそのまま実行可能 • （今回の構成だと） • textに要約して欲しい議事録を丸ごとコピペ • titleも入力 • Difyの仕様上、何かしらチャットをしないとトリガーされないので「要約して」などの当たり障りのない内容をチャットする 38

Slide 39

Slide 39 text

一番簡単なチャットアプリを例に • 完成したら公開 • 公開する -> 更新を公開 • 公開 = 保存なので編集したら公開を忘れずに • 「アプリを実行」 • 利用者向けの画面が表示される • アプリっぽい！！ 39 公開作業利用者向けの画面

Slide 40

Slide 40 text

アプリの整理にご協力を • ちょっと試してみるためにアプリを作るのは全然OK • 誰が作ったものか名前を説明欄に入れてもらえると嬉しい • 継続して使うつもりがなければ忘れないうちに削除をお願いします 40

Slide 41

Slide 41 text

©️ Cybozu, Inc. 休憩

Slide 42

Slide 42 text

©️ Cybozu, Inc. 後半ワークショップ

Slide 43

Slide 43 text

ワークショップ • 3-4人のブレイクアウトルームに分かれてグループワーク • グループ分けは事前に共有済み • Difyは共同編集機能がないので、誰かのPCを画面共有してモブプロ形式でお願いします • とはいえ触れてみないと分からないことも多いので、以下の2つをのアプリは開いたり実行してOK • 開運研修チャットアプリ課題1参考用 • 開運研修ワークフロー課題2コピー用 • この2つは公開（=保存）はしないでね • 上書きされてしまうと後で使う人が困ってしまうので 43

Slide 44

Slide 44 text

ワークショップ • 課題1 チャット型アプリの作成 • 翻訳 or 要約に特化したアプリを１から作成 • 課題2 ワークフロー型アプリの改良 • 入力したURLのコンテンツの要約 & 構造化（JSON） • 用意したワークフローをコピーして各自で改良してもらいます • 課題3 実践編（自由課題） • アイデアソンで出たアイデアの実現を目指す • 時間内に終わらせるのは難しいと思っているので、終わらなくても大丈夫です • アイデアを実装するというプロセスを体験してもらいたい 44

Slide 45

Slide 45 text

ワークショップ • それぞれの課題についての詳細とヒントはこの後のスライドにあります • UIや機能の解説も含むので、最初に全体に目を通すことをおすすめします • ブレイクアウトルームに分かれてから読んでください • 講師がブレイクアウトルームを巡回するので、分からないことがあれば言ってください！ • それではブレイクアウトルームを用意するので、自分のグループ番号のルームに入ってください！ 45

Slide 46

Slide 46 text

©️ Cybozu, Inc. ここから課題説明のスライド 46

Slide 47

Slide 47 text

©️ Cybozu, Inc. 課題1 チャット型アプリの作成 47

Slide 48

Slide 48 text

課題1 チャット型アプリの作成 • お題：翻訳 or 要約に特化したアプリを１から作成してください • 明確な要件はありません。詳細は各グループで相談しながら自由に作ってみてください • 次のページに発想のヒントを載せてあります • ただし以下の機能を使用してください • アプリの種類はチャットボットで作成 • 最初にプロンプト生成器でシステムプロンプトと変数を作成する • モデルはデフォルトのClaude 3.5 Sonnet V2から何か別のモデルに変更する • 完成したらアプリを公開し、「アプリを実行」から利用者側の画面でも実行してみること • 必要な要素は前半のスライドで解説したと思うので、各自で色々試してみてください 48

Slide 49

Slide 49 text

課題1 チャット型アプリの作成 • 要件ではないけど、チャット型アプリの面白い発想のヒント • 翻訳 • 翻訳対象言語を変数にして選択可能にしてみる • 日/英併記など、単純な翻訳ではない出力フォーマットにしてみる • 翻訳後の文章を読むターゲット層を指定してみる • 例：エンジニア向けに英訳してください • 要約 • 要約の長さを変数にして選択可能にしてみる • 出力フォーマットを指定してみる • Markdownで構造化や、全て箇条書きなど • 極端な無茶振りをさせてみる • 例：今北産業（死語ですかね・・・ｗ） 49

Slide 50

Slide 50 text

Slide 51

Slide 51 text

課題2 ワークフロー型アプリの作成 • お題：Webページの情報を要約して構造化する • ベースとなるワークフローからコピーして始めてください • 1. アプリ一覧画面で複製を選択 • 2. 「開運研修ワークフロー課題2 グループ{番号}」という名前で複製する • 3. コピー後にまずは動作するか確認する 51

Slide 52

Slide 52 text

課題2 ワークフロー型アプリの作成 • お題：Webページの情報を要約して構造化する • 初期状態は未完成の状態です • https://docs.dify.ai/ （固定）からテキストを抽出 • LLMノードでMarkdown形式で要約 • JSON化ノードはtitleだけのJSONを生成 • 最終結果にはMarkdown形式しか表示できていない 52 コピーした時点のワークフローの初期状態初期状態の実行結果

Slide 53

Slide 53 text

課題2 ワークフロー型アプリの作成 • お題：Webページの情報を要約して構造化する • 要件 • https://docs.dify.ai/ 以外のサイトからも情報を抽出可能にする • AIにタイトル、作成日、要約の3点を生成してもらう • AIにMarkdownとJSONの2つの形式でそれぞれ生成してもらう • 最終結果にはMarkdownとJSONの両方を合体して表示させる • （課題の意図） • 実はウェブサイトから本文だけを抽出したり、それを自動的に要約するのは従来のプログラミングでは難しい • そのためのアルゴリズムだけで研究になっていたり、商用サービスが存在していたぐらいです • そのような難しいタスクも生成AIを利用すると簡単に行えることを体験してもらうのが狙いです • さらにその結果をJSONとして出力できると別のプログラムと連携が容易になるためエンジニア的には嬉しい 53

Slide 54

Slide 54 text

課題2 ワークフロー型アプリの作成 • 要件のヒント（さらにヒントは次以降のスライドにあり） • ヒント1: ユーザーが実行時に任意のURLをパラメータとして入力可能にする • ヒント2: LLMノードとJSON化ノードのそれぞれでMarkdownとJSONのそれぞれで構造化する • ヒント3: MarkdownとJSONの出力の2つを合体して表示させる 54 初期状態の実行結果完成形として期待する実行結果

Slide 55

Slide 55 text

課題2 ワークフロー型アプリの作成ヒント1 • ユーザーが実行時に任意のURLをパラメータとして入力可能にする • 開始ノードの「入力フィールド」を追加するとチャット型アプリと同様に実行時パラメータを必須にできる • ノードのフィールドの中には変数を入力できるものがある 55

Slide 56

Slide 56 text

課題2 ワークフロー型アプリの作成ヒント2.1 Markdown • MarkdownとJSONのそれぞれで構造化する • Markdownはシステムプロンプトで出力の制御が可能 • チャット型アプリと同様にプロンプト生成器も利用可能 • AIによる出力がMarkdownとなるようにシステムプロンプトの出力フォーマットに関係する部分を変更する 56 プロンプト生成器出力フォーマットに関係してそうな部分

Slide 57

Slide 57 text

課題2 ワークフロー型アプリの作成ヒント2.2 JSON • MarkdownとJSONのそれぞれで構造化する • JSONはLLMノードの「出力変数 STRUCTURED」トグルをONにすると構造化の出力を強制できる • 出力させたいJSONの出力を定義できる（型、Optional、説明） • ちなみにVisual EditorはIMEの対応が微妙なのでEnterを押すときには慎重に・・・ • 初期はtitleだけ設定済みなので他の項目を追加してみよう • 例：summary, created 57 用意済みのJSON化ノード

Slide 58

Slide 58 text

課題2 ワークフロー型アプリの作成ヒント3 • MarkdownとJSONの出力の2つを合体して表示させる • テンプレートノードは入力変数の内容をテキストに埋め込める • 全体をMarkdown形式として扱い、先のMarkdownとJSONを出力するそれぞれのLLMノードの結果を埋め込むと1 つのMarkdownに合体可能 58 期待する出力この3箇所にJSONを出力するノードからの変数を入れる

Slide 59

Slide 59 text

課題2 ワークフロー型アプリの作成おまけ • 課題2のおまけ話し（課題と関係無し） • JSONで構造化できるということはプログラムから扱いやすくなるということ • LLMの力を借りると今まで構造化が難しかったデータの構造化が可能（ただし100%従うとは限らない） • しかもAIの指示も難しくない。夢が広がりますね！ • Dify内でも「コード実行」ノードで任意Python/javascriptを呼び出せる • 「テンプレート」ノードはJinja2（Pythonのテンプレートエンジン）なので実は色々できる • テキスト整形用の便利関数もあるし、ループ処理とかIF-ELSEすらやりたい放題です 59

Slide 60

Slide 60 text

Slide 61

Slide 61 text

課題3 実践編（自由課題） • 課題1、課題2が早めに終わってしまったグループ用の自由課題 • 課題3は時間内に完了すると想定していないので作りきれなくても問題なし • お題：社内の実際のアイデアソン＆ハッカソンのアイデアをDifyで実装してみる • チャット型でもワークフロー型でもどちらでもOK • 要件に合いそうなタイプの選択も重要です • 課題1、2からコピーして始めるもよし、新規作成で１から始めるもよし • ヒント • まず要件を入力、出力、AIへのプロンプトなどに分解してみて、実現可能そうか考えてみる 61

Slide 62

Slide 62 text

Slide 63

Slide 63 text

研修のまとめ • 前半 • AIアプリの構成要素の例を紹介 • 生成AIの基礎を紹介 • システムプロンプト、ユーザープロンプト • プロンプトテクニックの基礎 • Difyの使い方を紹介 • 後半（ワークショップ） • 課題1：チャット型アプリ • システムプロンプトによるAIのタスク制御 • 課題2：ワークフロー型アプリ • チャット型よりもはるかに自由度の高い全体構成 • AIによるJSON構造化 • 課題3：実践編（自由課題） • 実際のアイディアから実現可能性を検討する 63

Slide 64

Slide 64 text

研修のまとめ • 今回の研修でDifyや生成AI自体に興味を持ってもらえたら嬉しいです！ • 今後社内のハッカソンなどでぜひDifyを活用してみてください • 最後に、今回の研修で作成したアプリのお片付けもお願いします :bow: 64

Slide 65

Slide 65 text

Slide 66

Slide 66 text

変数（入力パラメータ）について • 最大長は基本的に空にしておく • 特に複数行用の「段落」タイプの場合、最大長を設定したいケースはほぼ無いはず • 最大長を空にすると文字数は無制限にできる • プロンプト生成器で生成された変数は「必須」がONになっている • デバッグ実行などでパラメータはとりあえず空のまま実行したい場合は「必須」をOFFにする 66 空でもOK 変数も追加される

Slide 67

Slide 67 text

ワークフローとノード • ワークフロー型では様々な機能が「ノード」というパーツに分解されている • ノードには入力/出力が存在し、前のノードの出力は後ろのノードの入力として利用可能 • 開始 -> 様々なノード -> 終了までを線で接続することで、実行のフローを設定します 67 出力出力出力出力入力入力入力入力入力スクレイピングのノード AI処理ノード x 2 テンプレートノード終了ノード（結果の表示）開始ノード

Slide 68

Slide 68 text

ノードの種類（基本） • チャット型アプリの機能は以下の3種類のノードに分解されている • 開始 • 入力フィールド（=変数）の設定 • 終了 • 結果として表示する内容 • LLM • モデル選択、システムプロンプト、ユーザープロンプト 68

Slide 69

Slide 69 text

ノードの種類（応用） • 左下のプラスボタンから新たにノードを追加可能 • 「ブロック」タブはDify公式のノード • 「ツール」は3rd パーティ製を含むより高度な機能や外部サービスとの連携機能 • 各ノードの詳細はDify公式ドキュメントを参照（日本語もあります） • https://docs.dify.ai/ja-jp/introduction 69 Dify公式ノード 3rdパーティ製を含む

Slide 70

Slide 70 text

ワークフローの実行 • 右上の「公開」ボタンからワークフローを実行できる • 結果タブは終了ノードの内容 • Markdownで出力すると見た目を整えてくれる • 実行追跡タブは各ノードの入力/出力を確認できる • デバッグに使える • ノードの出力が期待するものではなかったとき、どの時点までは問題なかったかを確認可能 70 出力 -> 入力が一致しているので正常終了ノードは自動でmd表示ワークフローの実行

Slide 71

Slide 71 text

ワークフローの公開と実行 • 更新を公開 = 保存なのはチャット型アプリと同様 • 「アプリを実行」 • 実行者用のシンプルなUIが提供される • URLも別物 • 全員が複雑なワークフローを組めなくても良い • つくる人と使う人は別でも良い • 実はAPIからの実行も可能なので応用できそう 71 利用者用のUIで実行した画面