AIツール開発ワークショップ（Dify）

Transcript

1. AIツール開発ワーク ショップ（Dify） サイボウズ 開運研修 2025 開発本部 AIやっていきチーム 加瀬健太（@Kesin11） 1
2. 講義のコンセプト • 誰に • 開運に配属される新卒の皆さんに • 何と言ってもらいたいか • 生成AIに興味が湧いた！ • AIアプリをDifyで簡単に作れることが分かった！
3. 講義の構成 • 前半 25分 • AIアプリの基礎の紹介 • Difyの紹介 • 休憩 5分 • 後半 55分 • 講師の紹介 + ブレイクアウトルームに移動 • グループに分かれてDifyワークショップ • レベル1、２、３の課題 • まとめ 5分
4. 自己紹介 • 加瀬健太（@Kesin11） • 開発本部 AIやっていきチーム • 普段の業務 • ChatGAI（社内のChatGPTクローン）運用 • CursorやDifyなどのAI関連ツールのアカウント管理・運用 • Kintone AIのR&D協力 • 趣味 • github.blog/changelogを毎朝見ること • Difyのリリースノートも毎回見てます 4 @Kesin11 @Kesin11 @kesin11.bsky.soci al
5. はじめに • 「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.
6. 今日もしくは昨日使ったAIサービスと機能 を教えて下さい！ 実況スレに書き込んでね！（1分）
7. ©️ Cybozu, Inc. AIアプリ（サービス）とは何だろう？
8. ChatGPTで要約や翻訳を やらせたことはみんなあるはず もしもSlack botにできたら → アプリっぽいかもしれない
9. PDFなどをアップロードして AIに質問してみる もしPDFを開いているアプリの中から質問できたら → アプリっぽいかもしれない
10. Kintone AI検索はどうやって作られていそうか？ • 検索 → Kintoneの検索機能 • 引用 → 検索してヒットしたものを並べてそう • AIの回答 → ヒットした文章から回答を組み立ててそう • UI → 要約とか翻訳よりも質問できそう、という雰囲気にしてそう
11. 何か意外と作れそうな気がするぞ？ • 検索 → APIさえあればできそう • 引用 → ヒットした上位を並べてるだけ • AIの回答 → ヒットしたレコードの中身を渡せばできそう • UI → これは頑張るか、Slack botなどに置き換える
12. 何か意外と作れそうな気がするぞ？ • 検索 → APIさえあればできそう • 引用 → ヒットした上位を並べてるだけ • AIの回答 →ヒットしたレコードの中身を渡せばできそう • UI → これは頑張るか、Slack botなどに置き換える • 実際にAIが必要なのは、 • AIの回答 • ここだけっぽい気がする • あとはAPIの結果をAIに渡して、出てきた回答をUIにいい感じに表示する だけ
13. 何か意外と作れそうな気がするぞ？ • 今までのアプリ • UIから入力 → API → JSONの整形 → UIに出力 • AIアプリ • UIから入力 → API → AIによる処理 → Markdownなどの整形 → UIに出力 • 実はによる処理が中間に追加されたぐらいの違い・・・？ 13
14. 意外とAIアプリ作れそう！ そんな気がしてきませんか？
15. ©️ Cybozu, Inc. 生成AIの基礎
16. ©️ Cybozu, Inc. システムプロンプト・ユーザープロンプト
17. 生成AIの処理 = プロンプト • システムプロンプト • システムやアプリの開発者が設定し固定された一番最初のプロンプト • ほとんどのアプリ（サービス）ではユーザーに対して非公開 • 例：AIの人格、振る舞い、タスクについての説明など AIの人格や振る舞いを設定するパターン 特定タスクを処理させるためのパターン
18. 生成AIの処理 = プロンプト • ユーザープロンプト • エンドユーザーが入力するプロンプト • 例：AIへの問いかけ、処理してほしいデータなど これも ユーザープロンプト チャット型アプリでのユーザーの入力
19. 生成AIの処理 = プロンプト • システムプロンプトとユーザープロンプトの違い • 生成AIのAPIの仕組み上、システムプロンプトは必ず一番最初に来る • 指示をシステムプロンプトに書いた方が効きやすいとかそういうのは あまり関係ない • アプリ内のプログラム内の実装で挙動が変わるケースはある • APIの戻り値のデータ構造でシステムプロンプト、ユーザープロンプ ト、AIが返したテキストは区別が可能 • 内部でどう使われているかはアプリ（サービス）の実装依存 19 あなたは優しいAIです。優しく 回答してください AIについて教えてください 具体的にどのような点に興味が ありますか？ AIの将来性について AIは現在も急速に進化しており その将来性は非常に大きく… システムプロンプト ユーザープロンプト1 ユーザープロンプト2 AIの回答1 AIの回答2
20. 生成AIの処理 = プロンプト • システムプロンプトとユーザープロンプトの違い • 生成AIのAPIの仕組み上、システムプロンプトは必ず一番最初に来る • 指示をシステムプロンプトに書いた方が効きやすいとかそういうのは あまり関係ない • （厳密にはLLMの仕組み上、最初と最後のプロンプトが効きやすいと されるのでシステムプロンプトの方が効きやすいのは事実） • 後半のDifyでは仕様上、システムプロンプトとユーザープロンプト を使い分けられない場合もあるがあまり気にしなくても大丈夫 20 あなたは優しいAIです。優しく 回答してください AIについて教えてください 具体的にどのような点に興味が ありますか？ AIの将来性について AIは現在も急速に進化しており その将来性は非常に大きく… システムプロンプト ユーザープロンプト1 ユーザープロンプト2 AIの回答1 AIの回答2
21. ©️ Cybozu, Inc. 生成AIの出力を制御する
22. 生成AIの出力を制御する（いわゆるプロンプトテクニック） • ただ1行のタスク指示よりは細かく指示を与 えたほうがAIから良い回答を引き出せると知 られている • 代表的なテクニック • タスク説明 • タスク処理手順 • 出力フォーマットの指定 • 入力、出力の例を与える 引用：Anthropicのユーザーガイド （例：マーケティングメールキャンペーンの作成） https://docs.anthropic.com/ja/docs/build-with-claude/prompt-engineering/be-clear-and-direct
23. 生成AIの出力を制御する（いわゆるプロンプトテクニック） • タスク説明 • 例：翻訳して、要約して • タスク処理手順 • 例： • 文章をいくつかのトピックに分解してください • トピックごとに重要な文章を抽出してください • 全体で400文字程度に要約してください • 出力フォーマットの指定 • 例：箇条書き、構造化されたMarkdown、JSON、など • 入力、出力の例を与える • example
24. 生成AIの出力を制御する（いわゆるプロンプトテクニック） • タスク説明 • 例：翻訳して、要約して • タスク処理手順 • 例： • 文章をいくつかのトピックに分解してください • トピックごとに重要な文章を抽出してください • 全体で400文字程度に要約してください • 出力フォーマットの指定 • 例：箇条書き、構造化されたMarkdown、JSON、など • 入力、出力の例を与える • example
25. 生成AIの出力を制御する（いわゆるプロンプトテクニック） • 全部覚える必要があるのか問題 • 最近はどのプラットフォームにもプロンプトの自動改良の仕組みが 存在する • 大抵の場合はこれで十分だと思います（加瀬主観） • OpenAI, Anthropic, AWS, Azure, Google Cloud全部にある • スタイルの流派はあるが、生成されるシステムプロンプトの観点は似 てる • OpenAIはMarkdown、AnthropicはXMLで構造化する傾向がある • でも会社の秘密情報をそのまま入力するのは基本NG • 一般情報を入力してプロンプトの構造だけ頂きましょう • Difyにも存在するので後半で紹介します platform.openai.com/playground console.anthropic.com
26. ©️ Cybozu, Inc. Difyの紹介
27. Difyとは • 「AIアプリ」を簡単に作れるプラットフォーム • 開発元のLangGenius社がホスティングしている dify.ai とOSSが存在する • AIやっていきチームが運用しているDifyはOSS版をAWSにデプロイしたもの • OSSのリポジトリ https://github.com/langgenius/dify
28. ©️ Cybozu, Inc. Difyの使い方
29. アプリ作成画面 • アプリの種類の選択 29
30. アプリ作成画面 • 大別すると初心者向けと上級者向けの2つのアプリの種類が存在 • チャット型（初心者向け） • ワークフロー型（上級者向け）
31. チャット型（初心者向け） • システムプロンプト + 入力パラメータだけでAIアプリを作成可能 • 完全にノーコードであまり複雑なことはできない • （「エージェント」タイプでは少し複雑なことも可能だが今回はスコープ外）
32. ワークフロー型（上級者向け） • AIによる回答の前後で様々な処理を組み立てることが可能 • 外部のサービスやDBとも連携可能 • 3rdパーティの様々なプラグインと組み合わせられる • （繰り返しやIF分岐などローコードっぽい機能も存在するが今回はスコープ外） 例：Zoomの書き起こしテキストからMTGの要約生成
33. ©️ Cybozu, Inc. ワークショップの課題を ちょっとだけ先取り 33
34. 一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • Difyによるプロンプトの自動生成 34
35. 一番簡単なチャットアプリを例に • システムプロンプト • 変数 • チャットとは別に入力が必要なパラメータ • プロンプトに{{var}}で埋め込める • モデル選択 • Difyによるプロンプトの自動生成 35
36. 一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • 生成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など軽量モデルでどう変わるか試してみよう
37. 一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • Difyによるプロンプトの自動生成 • 「自動」ボタンでプロンプト生成のモーダ ルが開く • タスクだけ与えるといい感じのプロンプト を生成してくれる • 結構時間はかかる（約1分ぐらい） • 変数も一緒に生成してくれるので、一番最 初にこれを実行するべき • （スライドの例では順番ミスったので不採 用で・・・） 37
38. 一番簡単なチャットアプリを例に • デバッグ実行 • 作成画面でそのまま実行可能 • （今回の構成だと） • textに要約して欲しい議事録を丸ご とコピペ • titleも入力 • Difyの仕様上、何かしらチャットを しないとトリガーされないので「要 約して」などの当たり障りのない内 容をチャットする 38
39. 一番簡単なチャットアプリを例に • 完成したら公開 • 公開する -> 更新を公開 • 公開 = 保存なので編集したら公開を忘れずに • 「アプリを実行」 • 利用者向けの画面が表示される • アプリっぽい！！ 39 公開作業 利用者向けの画面
40. アプリの整理にご協力を • ちょっと試してみるためにアプリを作るのは全然OK • 誰が作ったものか名前を説明欄に入れてもらえると嬉しい • 継続して使うつもりがなければ忘れないうちに削除をお願いします 40
41. ©️ Cybozu, Inc. 休憩
42. ©️ Cybozu, Inc. 後半ワークショップ
43. ワークショップ • 3-4人のブレイクアウトルームに分かれてグループワーク • グループ分けは事前に共有済み • Difyは共同編集機能がないので、誰かのPCを画面共有してモブプロ形式でお願いします • とはいえ触れてみないと分からないことも多いので、以下の2つをのアプリは開いたり実行してOK • 開運研修チャットアプリ 課題1参考用 • 開運研修ワークフロー 課題2コピー用 • この2つは公開（=保存）はしないでね • 上書きされてしまうと後で使う人が困ってしまうので 43
44. ワークショップ • 課題1 チャット型アプリの作成 • 翻訳 or 要約に特化したアプリを１から作成 • 課題2 ワークフロー型アプリの改良 • 入力したURLのコンテンツの要約 & 構造化（JSON） • 用意したワークフローをコピーして各自で改良してもらいます • 課題3 実践編（自由課題） • アイデアソンで出たアイデアの実現を目指す • 時間内に終わらせるのは難しいと思っているので、終わらなくても大丈夫です • アイデアを実装するというプロセスを体験してもらいたい 44
45. ワークショップ • それぞれの課題についての詳細とヒントはこの後のスライドにあります • UIや機能の解説も含むので、最初に全体に目を通すことをおすすめします • ブレイクアウトルームに分かれてから読んでください • 講師がブレイクアウトルームを巡回するので、分からないことがあれば言ってください！ • それではブレイクアウトルームを用意するので、自分のグループ番号のルームに入ってください！ 45
46. ©️ Cybozu, Inc. ここから課題説明のスライド 46
47. ©️ Cybozu, Inc. 課題1 チャット型アプリの作成 47
48. 課題1 チャット型アプリの作成 • お題：翻訳 or 要約に特化したアプリを１から作成してください • 明確な要件はありません。詳細は各グループで相談しながら自由に作ってみてください • 次のページに発想のヒントを載せてあります • ただし以下の機能を使用してください • アプリの種類はチャットボットで作成 • 最初にプロンプト生成器でシステムプロンプトと変数を作成する • モデルはデフォルトのClaude 3.5 Sonnet V2から何か別のモデルに変更する • 完成したらアプリを公開し、「アプリを実行」から利用者側の画面でも実行してみること • 必要な要素は前半のスライドで解説したと思うので、各自で色々試してみてください 48
49. 課題1 チャット型アプリの作成 • 要件ではないけど、チャット型アプリの面白い発想のヒント • 翻訳 • 翻訳対象言語を変数にして選択可能にしてみる • 日/英併記など、単純な翻訳ではない出力フォーマットにしてみる • 翻訳後の文章を読むターゲット層を指定してみる • 例：エンジニア向けに英訳してください • 要約 • 要約の長さを変数にして選択可能にしてみる • 出力フォーマットを指定してみる • Markdownで構造化や、全て箇条書きなど • 極端な無茶振りをさせてみる • 例：今北産業（死語ですかね・・・ｗ） 49
50. ©️ Cybozu, Inc. 課題2 ワークフロー型アプリの作成 50
51. 課題2 ワークフロー型アプリの作成 • お題：Webページの情報を要約して構造化する • ベースとなるワークフローからコピーして始めてください • 1. アプリ一覧画面で複製を選択 • 2. 「開運研修ワークフロー 課題2 グループ{番号}」という名前で複製する • 3. コピー後にまずは動作するか確認する 51
52. 課題2 ワークフロー型アプリの作成 • お題：Webページの情報を要約して構造化する • 初期状態は未完成の状態です • https://docs.dify.ai/ （固定）からテキストを抽出 • LLMノードでMarkdown形式で要約 • JSON化ノードはtitleだけのJSONを生成 • 最終結果にはMarkdown形式しか表示できていない 52 コピーした時点のワークフローの初期状態 初期状態の実行結果
53. 課題2 ワークフロー型アプリの作成 • お題：Webページの情報を要約して構造化する • 要件 • https://docs.dify.ai/ 以外のサイトからも情報を抽出可能にする • AIにタイトル、作成日、要約の3点を生成してもらう • AIにMarkdownとJSONの2つの形式でそれぞれ生成してもらう • 最終結果にはMarkdownとJSONの両方を合体して表示させる • （課題の意図） • 実はウェブサイトから本文だけを抽出したり、それを自動的に要約するのは従来のプログラミングでは難しい • そのためのアルゴリズムだけで研究になっていたり、商用サービスが存在していたぐらいです • そのような難しいタスクも生成AIを利用すると簡単に行えることを体験してもらうのが狙いです • さらにその結果をJSONとして出力できると別のプログラムと連携が容易になるためエンジニア的には嬉しい 53
54. 課題2 ワークフロー型アプリの作成 • 要件のヒント（さらにヒントは次以降のスライドにあり） • ヒント1: ユーザーが実行時に任意のURLをパラメータとして入力可能にする • ヒント2: LLMノードとJSON化ノードのそれぞれでMarkdownとJSONのそれぞれで構造化する • ヒント3: MarkdownとJSONの出力の2つを合体して表示させる 54 初期状態の実行結果 完成形として期待する実行結果
55. 課題2 ワークフロー型アプリの作成 ヒント1 • ユーザーが実行時に任意のURLをパラメータとして入力可能にする • 開始ノードの「入力フィールド」を追加するとチャット型アプリと同様に実行時パラメータを必須にできる • ノードのフィールドの中には変数を入力できるものがある 55
56. 課題2 ワークフロー型アプリの作成 ヒント2.1 Markdown • MarkdownとJSONのそれぞれで構造化する • Markdownはシステムプロンプトで出力の制御が可能 • チャット型アプリと同様にプロンプト生成器も利用可能 • AIによる出力がMarkdownとなるようにシステムプロンプトの出力フォーマットに関係する部分を変更する 56 プロンプト生成器 出力フォーマットに関係してそうな部分
57. 課題2 ワークフロー型アプリの作成 ヒント2.2 JSON • MarkdownとJSONのそれぞれで構造化する • JSONはLLMノードの「出力変数 STRUCTURED」トグルをONにすると構造化の出力を強制できる • 出力させたいJSONの出力を定義できる（型、Optional、説明） • ちなみにVisual EditorはIMEの対応が微妙なのでEnterを押すときには慎重に・・・ • 初期はtitleだけ設定済みなので他の項目を追加してみよう • 例：summary, created 57 用意済みのJSON化ノード
58. 課題2 ワークフロー型アプリの作成 ヒント3 • MarkdownとJSONの出力の2つを合体して表示させる • テンプレートノードは入力変数の内容をテキストに埋め込める • 全体をMarkdown形式として扱い、先のMarkdownとJSONを出力するそれぞれのLLMノードの結果を埋め込むと1 つのMarkdownに合体可能 58 期待する出力 この3箇所にJSONを出力するノードからの変数を入れる
59. 課題2 ワークフロー型アプリの作成 おまけ • 課題2のおまけ話し（課題と関係無し） • JSONで構造化できるということはプログラムから扱いやすくなるということ • LLMの力を借りると今まで構造化が難しかったデータの構造化が可能（ただし100%従うとは限らない） • しかもAIの指示も難しくない。夢が広がりますね！ • Dify内でも「コード実行」ノードで任意Python/javascriptを呼び出せる • 「テンプレート」ノードはJinja2（Pythonのテンプレートエンジン）なので実は色々できる • テキスト整形用の便利関数もあるし、ループ処理とかIF-ELSEすらやりたい放題です 59
60. ©️ Cybozu, Inc. 課題3 実践編（自由課題） 60
61. 課題3 実践編（自由課題） • 課題1、課題2が早めに終わってしまったグループ用の自由課題 • 課題3は時間内に完了すると想定していないので作りきれなくても問題なし • お題：社内の実際のアイデアソン＆ハッカソンのアイデアをDifyで実装してみる • チャット型でもワークフロー型でもどちらでもOK • 要件に合いそうなタイプの選択も重要です • 課題1、2からコピーして始めるもよし、新規作成で１から始めるもよし • ヒント • まず要件を入力、出力、AIへのプロンプトなどに分解してみて、実現可能そうか考えてみる 61
62. ©️ Cybozu, Inc. ワークショップお疲れ様でした！
63. 研修のまとめ • 前半 • AIアプリの構成要素の例を紹介 • 生成AIの基礎を紹介 • システムプロンプト、ユーザープロンプト • プロンプトテクニックの基礎 • Difyの使い方を紹介 • 後半（ワークショップ） • 課題1：チャット型アプリ • システムプロンプトによるAIのタスク制御 • 課題2：ワークフロー型アプリ • チャット型よりもはるかに自由度の高い全体構成 • AIによるJSON構造化 • 課題3：実践編（自由課題） • 実際のアイディアから実現可能性を検討する 63
64. 研修のまとめ • 今回の研修でDifyや生成AI自体に興味を持ってもらえたら嬉しいです！ • 今後社内のハッカソンなどでぜひDifyを活用してみてください • 最後に、今回の研修で作成したアプリのお片付けもお願いします :bow: 64
65. ©️ Cybozu, Inc. ここから研修後の フィードバック対応のスライド
66. 変数（入力パラメータ）について • 最大長は基本的に空にしておく • 特に複数行用の「段落」タイプの場合、最大長を設定したいケースはほぼ無いはず • 最大長を空にすると文字数は無制限にできる • プロンプト生成器で生成された変数は「必須」がONになっている • デバッグ実行などでパラメータはとりあえず空のまま実行したい場合は「必須」をOFFにする 66 空でもOK 変数も追加 される
67. ワークフローとノード • ワークフロー型では様々な機能が「ノード」というパーツに分解されている • ノードには入力/出力が存在し、前のノードの出力は後ろのノードの入力として利用可能 • 開始 -> 様々なノード -> 終了までを線で接続することで、実行のフローを設定します 67 出力 出力 出力 出力 入力 入力 入力 入力 入力 スクレイピングのノード AI処理ノード x 2 テンプレートノード 終了ノード（結果の表示） 開始ノード
68. ノードの種類（基本） • チャット型アプリの機能は以下の3種類のノードに分 解されている • 開始 • 入力フィールド（=変数）の設定 • 終了 • 結果として表示する内容 • LLM • モデル選択、システムプロンプト、ユーザープロンプト 68
69. ノードの種類（応用） • 左下のプラスボタンから新たにノードを追加可能 • 「ブロック」タブはDify公式のノード • 「ツール」は3rd パーティ製を含むより高度な機能や 外部サービスとの連携機能 • 各ノードの詳細はDify公式ドキュメントを参照 （日本語もあります） • https://docs.dify.ai/ja-jp/introduction 69 Dify公式ノード 3rdパーティ製を含む
70. ワークフローの実行 • 右上の「公開」ボタンからワークフローを実行できる • 結果タブは終了ノードの内容 • Markdownで出力すると見た目を整えてくれる • 実行追跡タブは各ノードの入力/出力を確認できる • デバッグに使える • ノードの出力が期待するものではなかったとき、どの時点ま では問題なかったかを確認可能 70 出力 -> 入力が一致しているので正常 終了ノードは自動でmd表示 ワークフローの実行
71. ワークフローの公開と実行 • 更新を公開 = 保存なのはチャット型アプリと同様 • 「アプリを実行 」 • 実行者用のシンプルなUIが提供される • URLも別物 • 全員が複雑なワークフローを組めなくても良い • つくる人と使う人は別でも良い • 実はAPIからの実行も可能なので応用できそう 71 利用者用のUIで実行した画面