Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AIツール開発ワークショップ(Dify)

Avatar for Cybozu Cybozu
July 06, 2025
59

 AIツール開発ワークショップ(Dify)

Avatar for Cybozu

Cybozu

July 06, 2025
Tweet

Transcript

  1. 講義の構成 • 前半 25分 • AIアプリの基礎の紹介 • Difyの紹介 • 休憩

    5分 • 後半 55分 • 講師の紹介 + ブレイクアウトルームに移動 • グループに分かれてDifyワークショップ • レベル1、2、3の課題 • まとめ 5分
  2. 自己紹介 • 加瀬健太(@Kesin11) • 開発本部 AIやっていきチーム • 普段の業務 • ChatGAI(社内のChatGPTクローン)運用

    • CursorやDifyなどのAI関連ツールのアカウント管理・運用 • Kintone AIのR&D協力 • 趣味 • github.blog/changelogを毎朝見ること • Difyのリリースノートも毎回見てます 4 @Kesin11 @Kesin11 @kesin11.bsky.soci al
  3. Kintone AI検索はどうやって作られていそうか? • 検索 → Kintoneの検索機能 • 引用 → 検索してヒットしたものを並べてそう

    • AIの回答 → ヒットした文章から回答を組み立ててそう • UI → 要約とか翻訳よりも質問できそう、という雰囲気にしてそう
  4. 何か意外と作れそうな気がするぞ? • 検索 → APIさえあればできそう • 引用 → ヒットした上位を並べてるだけ •

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

    AIの回答 →ヒットしたレコードの中身を渡せばできそう • UI → これは頑張るか、Slack botなどに置き換える • 実際にAIが必要なのは、 • AIの回答 • ここだけっぽい気がする • あとはAPIの結果をAIに渡して、出てきた回答をUIにいい感じに表示する だけ
  6. 何か意外と作れそうな気がするぞ? • 今までのアプリ • UIから入力 → API → JSONの整形 →

    UIに出力 • AIアプリ • UIから入力 → API → AIによる処理 → Markdownなどの整形 → UIに出力 • 実はによる処理が中間に追加されたぐらいの違い・・・? 13
  7. 生成AIの処理 = プロンプト • システムプロンプト • システムやアプリの開発者が設定し固定された一番最初のプロンプト • ほとんどのアプリ(サービス)ではユーザーに対して非公開 •

    例:AIの人格、振る舞い、タスクについての説明など AIの人格や振る舞いを設定するパターン 特定タスクを処理させるためのパターン
  8. 生成AIの処理 = プロンプト • システムプロンプトとユーザープロンプトの違い • 生成AIのAPIの仕組み上、システムプロンプトは必ず一番最初に来る • 指示をシステムプロンプトに書いた方が効きやすいとかそういうのは あまり関係ない

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

    • (厳密にはLLMの仕組み上、最初と最後のプロンプトが効きやすいと されるのでシステムプロンプトの方が効きやすいのは事実) • 後半のDifyでは仕様上、システムプロンプトとユーザープロンプト を使い分けられない場合もあるがあまり気にしなくても大丈夫 20 あなたは優しいAIです。優しく 回答してください AIについて教えてください 具体的にどのような点に興味が ありますか? AIの将来性について AIは現在も急速に進化しており その将来性は非常に大きく… システムプロンプト ユーザープロンプト1 ユーザープロンプト2 AIの回答1 AIの回答2
  10. 生成AIの出力を制御する(いわゆるプロンプトテクニック) • ただ1行のタスク指示よりは細かく指示を与 えたほうがAIから良い回答を引き出せると知 られている • 代表的なテクニック • タスク説明 •

    タスク処理手順 • 出力フォーマットの指定 • 入力、出力の例を与える 引用:Anthropicのユーザーガイド (例:マーケティングメールキャンペーンの作成) https://docs.anthropic.com/ja/docs/build-with-claude/prompt-engineering/be-clear-and-direct
  11. 生成AIの出力を制御する(いわゆるプロンプトテクニック) • タスク説明 • 例:翻訳して、要約して • タスク処理手順 • 例: •

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

    文章をいくつかのトピックに分解してください • トピックごとに重要な文章を抽出してください • 全体で400文字程度に要約してください • 出力フォーマットの指定 • 例:箇条書き、構造化されたMarkdown、JSON、など • 入力、出力の例を与える • example
  13. 生成AIの出力を制御する(いわゆるプロンプトテクニック) • 全部覚える必要があるのか問題 • 最近はどのプラットフォームにもプロンプトの自動改良の仕組みが 存在する • 大抵の場合はこれで十分だと思います(加瀬主観) • OpenAI,

    Anthropic, AWS, Azure, Google Cloud全部にある • スタイルの流派はあるが、生成されるシステムプロンプトの観点は似 てる • OpenAIはMarkdown、AnthropicはXMLで構造化する傾向がある • でも会社の秘密情報をそのまま入力するのは基本NG • 一般情報を入力してプロンプトの構造だけ頂きましょう • Difyにも存在するので後半で紹介します platform.openai.com/playground console.anthropic.com
  14. 一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • 生成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など軽量モデルでどう変わるか試してみよう
  15. 一番簡単なチャットアプリを例に • システムプロンプト • 変数 • モデル選択 • Difyによるプロンプトの自動生成 •

    「自動」ボタンでプロンプト生成のモーダ ルが開く • タスクだけ与えるといい感じのプロンプト を生成してくれる • 結構時間はかかる(約1分ぐらい) • 変数も一緒に生成してくれるので、一番最 初にこれを実行するべき • (スライドの例では順番ミスったので不採 用で・・・) 37
  16. 一番簡単なチャットアプリを例に • デバッグ実行 • 作成画面でそのまま実行可能 • (今回の構成だと) • textに要約して欲しい議事録を丸ご とコピペ

    • titleも入力 • Difyの仕様上、何かしらチャットを しないとトリガーされないので「要 約して」などの当たり障りのない内 容をチャットする 38
  17. 一番簡単なチャットアプリを例に • 完成したら公開 • 公開する -> 更新を公開 • 公開 =

    保存なので編集したら公開を忘れずに • 「アプリを実行」 • 利用者向けの画面が表示される • アプリっぽい!! 39 公開作業 利用者向けの画面
  18. ワークショップ • 課題1 チャット型アプリの作成 • 翻訳 or 要約に特化したアプリを1から作成 • 課題2

    ワークフロー型アプリの改良 • 入力したURLのコンテンツの要約 & 構造化(JSON) • 用意したワークフローをコピーして各自で改良してもらいます • 課題3 実践編(自由課題) • アイデアソンで出たアイデアの実現を目指す • 時間内に終わらせるのは難しいと思っているので、終わらなくても大丈夫です • アイデアを実装するというプロセスを体験してもらいたい 44
  19. 課題1 チャット型アプリの作成 • お題:翻訳 or 要約に特化したアプリを1から作成してください • 明確な要件はありません。詳細は各グループで相談しながら自由に作ってみてください • 次のページに発想のヒントを載せてあります

    • ただし以下の機能を使用してください • アプリの種類はチャットボットで作成 • 最初にプロンプト生成器でシステムプロンプトと変数を作成する • モデルはデフォルトのClaude 3.5 Sonnet V2から何か別のモデルに変更する • 完成したらアプリを公開し、「アプリを実行」から利用者側の画面でも実行してみること • 必要な要素は前半のスライドで解説したと思うので、各自で色々試してみてください 48
  20. 課題1 チャット型アプリの作成 • 要件ではないけど、チャット型アプリの面白い発想のヒント • 翻訳 • 翻訳対象言語を変数にして選択可能にしてみる • 日/英併記など、単純な翻訳ではない出力フォーマットにしてみる

    • 翻訳後の文章を読むターゲット層を指定してみる • 例:エンジニア向けに英訳してください • 要約 • 要約の長さを変数にして選択可能にしてみる • 出力フォーマットを指定してみる • Markdownで構造化や、全て箇条書きなど • 極端な無茶振りをさせてみる • 例:今北産業(死語ですかね・・・w) 49
  21. 課題2 ワークフロー型アプリの作成 • お題:Webページの情報を要約して構造化する • 初期状態は未完成の状態です • https://docs.dify.ai/ (固定)からテキストを抽出 •

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

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

    • AIによる出力がMarkdownとなるようにシステムプロンプトの出力フォーマットに関係する部分を変更する 56 プロンプト生成器 出力フォーマットに関係してそうな部分
  24. 課題2 ワークフロー型アプリの作成 ヒント2.2 JSON • MarkdownとJSONのそれぞれで構造化する • JSONはLLMノードの「出力変数 STRUCTURED」トグルをONにすると構造化の出力を強制できる •

    出力させたいJSONの出力を定義できる(型、Optional、説明) • ちなみにVisual EditorはIMEの対応が微妙なのでEnterを押すときには慎重に・・・ • 初期はtitleだけ設定済みなので他の項目を追加してみよう • 例:summary, created 57 用意済みのJSON化ノード
  25. 課題2 ワークフロー型アプリの作成 おまけ • 課題2のおまけ話し(課題と関係無し) • JSONで構造化できるということはプログラムから扱いやすくなるということ • LLMの力を借りると今まで構造化が難しかったデータの構造化が可能(ただし100%従うとは限らない) •

    しかもAIの指示も難しくない。夢が広がりますね! • Dify内でも「コード実行」ノードで任意Python/javascriptを呼び出せる • 「テンプレート」ノードはJinja2(Pythonのテンプレートエンジン)なので実は色々できる • テキスト整形用の便利関数もあるし、ループ処理とかIF-ELSEすらやりたい放題です 59
  26. 課題3 実践編(自由課題) • 課題1、課題2が早めに終わってしまったグループ用の自由課題 • 課題3は時間内に完了すると想定していないので作りきれなくても問題なし • お題:社内の実際のアイデアソン&ハッカソンのアイデアをDifyで実装してみる • チャット型でもワークフロー型でもどちらでもOK

    • 要件に合いそうなタイプの選択も重要です • 課題1、2からコピーして始めるもよし、新規作成で1から始めるもよし • ヒント • まず要件を入力、出力、AIへのプロンプトなどに分解してみて、実現可能そうか考えてみる 61
  27. 研修のまとめ • 前半 • AIアプリの構成要素の例を紹介 • 生成AIの基礎を紹介 • システムプロンプト、ユーザープロンプト •

    プロンプトテクニックの基礎 • Difyの使い方を紹介 • 後半(ワークショップ) • 課題1:チャット型アプリ • システムプロンプトによるAIのタスク制御 • 課題2:ワークフロー型アプリ • チャット型よりもはるかに自由度の高い全体構成 • AIによるJSON構造化 • 課題3:実践編(自由課題) • 実際のアイディアから実現可能性を検討する 63
  28. ワークフローとノード • ワークフロー型では様々な機能が「ノード」というパーツに分解されている • ノードには入力/出力が存在し、前のノードの出力は後ろのノードの入力として利用可能 • 開始 -> 様々なノード ->

    終了までを線で接続することで、実行のフローを設定します 67 出力 出力 出力 出力 入力 入力 入力 入力 入力 スクレイピングのノード AI処理ノード x 2 テンプレートノード 終了ノード(結果の表示) 開始ノード
  29. ノードの種類(基本) • チャット型アプリの機能は以下の3種類のノードに分 解されている • 開始 • 入力フィールド(=変数)の設定 • 終了

    • 結果として表示する内容 • LLM • モデル選択、システムプロンプト、ユーザープロンプト 68
  30. ノードの種類(応用) • 左下のプラスボタンから新たにノードを追加可能 • 「ブロック」タブはDify公式のノード • 「ツール」は3rd パーティ製を含むより高度な機能や 外部サービスとの連携機能 •

    各ノードの詳細はDify公式ドキュメントを参照 (日本語もあります) • https://docs.dify.ai/ja-jp/introduction 69 Dify公式ノード 3rdパーティ製を含む
  31. ワークフローの実行 • 右上の「公開」ボタンからワークフローを実行できる • 結果タブは終了ノードの内容 • Markdownで出力すると見た目を整えてくれる • 実行追跡タブは各ノードの入力/出力を確認できる •

    デバッグに使える • ノードの出力が期待するものではなかったとき、どの時点ま では問題なかったかを確認可能 70 出力 -> 入力が一致しているので正常 終了ノードは自動でmd表示 ワークフローの実行
  32. ワークフローの公開と実行 • 更新を公開 = 保存なのはチャット型アプリと同様 • 「アプリを実行 」 • 実行者用のシンプルなUIが提供される

    • URLも別物 • 全員が複雑なワークフローを組めなくても良い • つくる人と使う人は別でも良い • 実はAPIからの実行も可能なので応用できそう 71 利用者用のUIで実行した画面