初心者でもできる！Difyを使ったアプリ開発

この記事は[NTTコムウェア AdventCalendar 2024](https://qiita.com/advent-calendar/2024/nttcomware "NTTコムウェア AdventCalendar 2024") 15日目の記事です。

# 目次
- [自己紹介](#自己紹介)
- [目的](#目的)
- [想定読者](#想定読者)
- [Difyとは](#difyとは)
- [Difyの特徴](#difyの特徴)
- [Difyの下準備](#difyの下準備)
- [Difyの使い方](#difyの使い方)
- [Difyの活用方法](#difyの活用方法)
- [Difyの応用例](#difyの応用例)
- [終わりに](#終わりに)


# 自己紹介

ネットワーククラウド事業本部IOWN推進部の樋口と申します。
普段は[SmartCloudオーケストレータ](https://sc.nttcom.co.jp/orchestrator/ "SmartCloudオーケストレータ")の販売促進に向けた企画と[CPS(サイバーフィジカルシステム)](https://journal.ntt.co.jp/article/28862 "CPS")の顧客への導入に向けた仕様検討を行っています。
現在は非エンジニアという立ち位置です。(少し前までAWSの設計構築してました)
今回は趣味で触っている生成AIに関する記事を書きます。

# 目的
- 生成AI利用に対するハードル低減
- Difyの特徴基本的な使い方の理解

# 想定読者
- 非エンジニア職の人
- プログラミング未経験者・初心者
- 生成AIでアプリ開発してみたい人

# はじめに
皆さん生成AI使っているでしょうか？ChatGPT、Claude、Gemini、Perplexity、Notion AI、Felo、Microsoft Copilot、GitHub Copilot、、、いくつ挙げられるでしょうか。
日々情報がアップデートされる分野なので追いつけません。
このなか多くの人はChatGPTくらいは使ったことある！って人が多いのではないでしょうか。
ChatGPTをうまく使えて、生成AIできる！って人もいると思います。
生成AIはもっといろんなことに使えます。
今回は初心者でも手軽に使えるAIアプリ開発プラットフォームであるDify(クラウド版)の使い方をご紹介します。
(ローカル版もありますが、少し難しいので本記事では割愛します）

# Difyとは
- ノーコードAIアプリ開発プラットフォームである。
- ブロックを線で繋げて簡単にアプリ作成ができる。
- オープンソースソフトウェアとして提供されている。

# Difyの特徴
1.LLMの選択と比較が容易
- 多様なLLMに対応し、APIキーを入れるだけで利用可能。
- LLMの切り替えが容易にできる。

2.外部ツールとの豊富な連携
- APIを通じたシステムとの連携も可能。

3.修正が容易かつ直感的にわかりやすい。
- ミスがあったときやフィードバックを受けてから修正・反映が素早くできる。
- エンジニアでなくても修正可能。

ほかにもいくつかありますがこのくらいにしておきます。
（RAGの構築が容易にできたりします）

# Difyの下準備
まずはAPIキーを取得します。
APIキーの取得方法は今回の本題ではないため割愛します。
調べたらいっぱい記事があります。
参考にChatGPT(OpenAI)のAPIキー取得手順が書いてる記事を共有します。
https://qiita.com/kurata04/items/a10bdc44cc0d1e62dad3
APIが取得できるサイトをいくつか挙げます。
本記事では以下の3種類を使っています。1種類で問題ないです。

- ChatGPT
https://platform.openai.com/chat-completions

- Claude
https://console.anthropic.com/dashboard

- Gemini
https://aistudio.google.com/app/apikey

# Difyの使い方
:::note info
今回は簡単なチャットボットの作成の例をもとにDifyの使い方をご説明します。
:::

１.Difyのページにアクセスし、ログインします。
GoogleやGitHubのアカウントが使えます。
https://cloud.dify.ai/apps

２.画面右上の「Dify」をクリックし、「設定」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/79900601-f247-fdfe-869b-96eb031961be.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)



３.「モデルプロバイダー」タブの「セットアップ」をクリックし、取得したAPIキーを入れます。
今回はOpenAI(ChatGPT)、ANTHROPIC(Claude)、Geminiのセットアップをしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/0e26139c-0ddb-0cb3-b0b3-b2226fa2a88c.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)


４.「最初から作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/70eb54da-4213-0c70-49d3-92ff0b19877d.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)


５.今回は「チャットボット」と「ワークフロー」を選択、「名前」を入れて、「作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/4bbca7e9-0c05-4d14-da19-73df8e0304a7.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)

６.画面が出てきます。
ベースができてるのでこのままチャットボットとして利用できます。
いくつかのブロックに分かれており、このブロックを組み合わせることでいろいろ作ることができます。
「開始」ブロックはワークフローの開始点や入力定義をするところです。
「LLM」ブロックは大規模言語モデルを入れるところです。ChatGPTだと文章作成になります。
「回答」ブロックはフロー終了で結果を出力するところです。
今回の場合、LLMモデルがgpt-4o-miniでできたものを回答ブロックで受け取って出力するといった感じです。

７.次にLLMブロックをクリックします。
画面右側に詳細が出ます。
ここでモデルやプロンプトなどを設定できます。
USERが指定したことに対して、SYSTEMをもとに出力します。
何言っているかわからないと思うので具体例を挙げます。
今回はUSERに「今日の献立を決めます」
SYSTEMに「80年くらい大阪に住んでいるおじいちゃんのような関西弁で話して下さい」といった感じでやってみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/d710d4db-0cd4-6e9e-acdd-3b10f7e308f2.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)


８.回答ブロックも少し変えてみます。
{x}textがLLMの出力結果となります。
{x}textの後ろに（笑）とつけるとLLMの出力結果の最後に（笑）がつくような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/50f99e50-50dc-c68f-a9f5-3fdd0c6c1966.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)



９.「プレビュー」をクリックし、チャットボットにテキストを送信してください。
設定したLLMで出力されます。今回はgpt-4o-miniです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/23c0af38-6de1-0dfe-5df3-053f3663539f.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)

１０.関西弁のおじいちゃん(おっちゃん?)が一緒に献立を考えてくれるチャットボットが完成しました（笑）
無事にAIを開発できました！素晴らしい！
~~以上で終わりにしましょう。~~

せっかくなのでもう少し書きます。

未だに生成AIを利用したことがない友人や身近な人もいると思います。
理由は様々だと思いますが、ChatGPTのアカウント登録めんどくさいから、とかいう人もいると思います。
その時は以下の手順を実施して世間に自分の作ったチャットボットを公開しましょう！

１１.「公開する」→「更新」(初めての場合は「公開する」)→「アプリを実行」をクリックし、アプリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/d793b437-7b12-ef8e-e78b-a7cfab17ddbf.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)


１２.「チャットを開始」をクリックするとチャットボットが起動します。
このチャットボットのURLを渡せば周りの人でも簡単に自分の作ったチャットボットを利用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/a93c98d8-8619-741e-4347-f8c45ae42815.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)

１３.大阪のおじいちゃんに1週間の献立を考えてもらいました。
問題なく出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/8cecd60a-0715-f096-3166-596e52ea0429.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)


このURLを送ればチャットボットが利用できるので誰でも簡単に使うことができます。
私が作ったAIです！って自慢することもできますね！
※API利用料がかかります。
間違ってもLLMモデルをo1-previewなど高性能なものにしていっぱい利用されないように注意してください。
プリペイド式なのですぐに使えなくなるだけだと思いますが。
(私はやったことないです)

# Difyの活用方法
ここから少し難しくなるので読み飛ばしても問題ないです。
各LLMの出力結果の違いを1つの出力で表示させるようなチャットボットを作ります。

１.右クリックやブロックにある＋をクリックすることでブロックやツールの追加を行うことができます。ツールにはAWSなどもあります。
今回はClaude用とGemini用のLLMブロックを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/3ddf762b-eba7-2e51-0f26-613279942bb5.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)

２.モデルを設定します。
忘れがちですが、「メッセージを追加」をクリックしてUSERに変数を入れてください。sys.queryでいいです。忘れるとエラーが出ます。
今回は以下の3種類で試します。
・gpt-4o-mini
・claude 3.5 sonnet
・gemini 1.5 flash latest


３.Claude用とGemini用のLLMブロックの右側からドラッグ&ドロップして回答ブロックに繋げます。

４.ClaudeとGeminiの出力をするために回答ブロックを修正します。
こんな感じにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/dcf7e281-48cb-a7da-2164-16e49d6d3fa6.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)

プレビューで出力してもらいました。
それぞれのモデルで違いがあることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3944351/d3a07307-5933-789a-0b44-7f2e1660c9fb.png)
出典：Dify, Dify・クラウド版, https://cloud.dify.ai/apps (参照：2024/12/07)


# Difyの応用例
・Slackで利用できるAIチャットボット作成
・記事作成支援(情報収集からページ作成まで可能）
・社内ボットの作成(RAG利用)
等様々ありますのでDify 活用例等で調べていただければと思います。

# 終わりに
毎日のように新しい情報が出てくる分野なのでDifyについてもすぐにより良い類似製品が出てくると個人的に思っています。
ただ生成AIを利用したモノづくりを実際に触ってみてこれからの生成AIで何ができるようになるのか推測したり、生成AIを利用した開発に対するハードルを下げることは今後に役立つと思っています。
最近はバックエンドまで自動的に作れる生成AIも出ています。
簡単なコミュニケーションツール、疑似Notion、ログインシステム、タイピングゲーム、自担当の製品の類似機能なども作ったりできました。
（Replit Agentといい、こちらを記事にしたかったですが、月額25ドルかつ、ちょっとコツがいるので断念しました）
様々な生成AIがありますが、Beta版は無料で使えたりとかいうケースもありますので新しく出たものはとりあえず触ってみるというのも時代に取り残されないために必要なのかもしれません。


記載されている会社名、製品名、サービス名は、各社の商標または登録商標です。