ハッカソンでDifyを使おう！〜3位を取ったアプリの作り方〜

こんにちは！ひさふるです。

みなさん、ハッカソン参加してますか？

限られた時間の中で自分の思い描くアプリケーションを実装するのは非常に楽しい半面、アイデアを盛り込みすぎると時間内に完成しない...なんてこともありますよね。

そんなとき、**Dify**を使えば生成AIを使ったワークフローを簡単に実装出来るので、ハッカソンのような時間の限られた開発にはもってこいです。

今回は、私が先日参加してきたTokyo Flutter Hackathon 2024での活用事例を添えて、Difyをハッカソンで使用する方法やメリットについてご紹介いたします！

## ハッカソン出場の経緯
先日、私の務めるKDDIアジャイル開発センター(KAG)の24新卒同期である@8mitsuboyに誘われ、私と@8mitsuboy、@oudon0216の3人でTokyo Flutter Hackathon 2024というハッカソンに参加してきました。

https://tokyo-flutter-hackathon.connpass.com/event/326665/

このイベントはFlutterを用いてアプリケーションを実装するハッカソンで、11/2(土)~3(日)の2日間で行われました。

結果としては3位に入賞することができ、非常に良い経験となりました！(一応、KAGの名前で出場したので、社名を背負ったまま入賞出来て本当に良かったです笑)

https://x.com/TYOFlutterHack/status/1853023267004817489

詳しい出場の経緯や内容は@8mitsuboyから以下の記事で詳しく紹介されています！
ご興味があればぜひこちらも覧ください！

https://qiita.com/8mitsuboy/items/b7fbc9be34a79f5a6864

## LLMアプリ開発プラットフォーム「Dify」
今回、ハッカソンのアプリ開発で使用したのが「Dify(ディファイ)」というサービスです。

https://dify.ai/jp

DifyはチャットボットやエージェントなどLLMを活用したアプリをUIから簡単に作成できます。
作成したアプリはそのままAPIとして公開出来るため、自作アプリのバックエンドとしても活用できます。

特に、**ワークフロー**という機能を使うとLLMを中心とした様々なプロセスを組み合わせて複雑なワークフローを構成でき、それらの実行を管理(オーケストレート)することが出来ます。(2024年11月5日現在Beta版)

例えば、以下のWikipediaからの情報取得とLLMを組み合わせたワークフローを構築すれば、LLM単体では不可能な、様々な情報に基づいた高度な判断が出来るようになります。

また、以下のワークフローは慣れればほんの5分程度で構成出来ます。

![スクリーンショット 2024-11-06 0.57.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/34ae802e-24ea-39ec-8f2e-89637a0368ca.png)

さらに、**公開する**ボタンから瞬時にAPIとして公開することもできます。APIキーをアプリに埋め込むことでそのまま生成AIバックエンドとして活用することが可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/3ba85d83-c6a4-1a9b-2196-545e454de90e.png" width="300">

このように、慣れれば簡単に生成AIアプリケーションを作れてしまうDifyは、アイデアをすぐ形にしたいハッカソンや検証段階のPoC、個人開発等にうってつけと言えるでしょう。

:::note info
簡単かつ即座に生成AIアプリを作れるDifyはハッカソンに最適‼️
:::

## Tokyo Flutter Hackathon 2024での活用事例

### ハッカソンで作成したアプリの概要
今回私が出場したTokyo Flutter Hackathonでは、Difyを用いて**エンジニアに向けた英語学習アプリ**を作成しました。

これは、英語で書かれたIT技術記事などのURLを入力することで、生成AIが自動で英語の問題を作成してくれる、というものです。

例えば、以下のようにURLを入力するとLLMが記事を自動で解析し...
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/b1f12ff2-3068-7f25-1a1b-da1826b74bfb.png" width="400">

以下のように、記事に関連する英語問題を自動で作成してくれます。

問題文は記事の重要な内容をもとにして作成されるため、英文を読んでいるだけで記事の内容も把握することができる構成になっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/31e051cb-3e39-b25d-7207-e70be95a5e72.png" width="400">

英語の学習と技術の勉強を同時にすることができ、自分自身を日々新しい状態に更新して欲しいという思いから、**Engineer Hot Reloader**と名付けました。

本ハッカソンのテーマが"ホット"だったため、高速で新しい状態に反映できる**ホットリロード**機能から名前を付けています。

### ハッカソンでのDify活用方法
今回のアプリケーションでは、Difyを活用して以下のようなワークフローを構築しました。

このワークフローでは、英語記事のURLを入力すると、それに関する英語と技術の問題を生成させることを目的としています。
![スクリーンショット 2024-11-06 1.08.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/655545/5e9690b3-00c7-aeba-296d-db6599a04eeb.png)

それぞれの構成要素の役割は以下の通りです。それぞれのブロックが、前段の出力を受け取れるようになっています。

- 開始：URLの入力を受け付ける
- WEB SCRAPER：入力されたURLをもとに、そのページの文章をスクレイピングする
- LLM(1つ目)：スクレイピング結果をもとに、単語問題、日本語訳問題、技術の確認問題を生成させ、json形式で出力させる
- LLM(2つ目)：1つ目のLLMで出力されたjsonフォーマットの修正と検証を行う
- コード：2つ目のLLMで出力されたjsonを更に整形し、アプリケーションで使いやすい形式にする
- 終了：コードで出力された最終的なjsonをoutputとして、実行を終了

このワークフローだけで、webのスクレイピングからjsonフォーマットへの変形・検証までを行っています。

(LLMに対しての指示が上手ければ、LLMが1つかつ"コード"部分も不要かもしれません。今回は出力を安定させるためこのような処理にしています。)

通常のプログラミングで作成したらそこそこ時間がかかりそうな処理ですが、アイデアが実装出来るかの確認までにかかった時間は**ほんの20分程度**でした。

最後はこのワークフローをFlutterからAPIで呼び出し、自然な形で生成AIをFlutterアプリケーションに取り込むことが出来ました。



## おわりに
今回はDifyをハッカソンで活用した事例をご紹介しました。

Difyは高速に生成AIアプリを実装出来るため、時間が限られた中でのハッカソンやPoC開発にはとても向いています。

みなさんも、ぜひDifyを活用してハッカソンで思い思いのアプリケーションを開発してみてください！！