以下の内容はhttps://chamekichi.hatenadiary.jp/entry/2025/02/17/080000より取得しました。


ノーコード開発ツールDifyを使ったら本当に15分でWebアプリが作れるのか?やってみた。

なんかXを見ると、AI使って15分でアプリ作りました!とか5分でUI作りました!とかめっちゃ出てくるんですよ。しかもコード書かなくていいんだって。いやいや嘘だろ、まーたAI驚き屋がなんか言ってるよ、そんなんで開発できたらエンジニアいらんわ!と冷めた目で見ていたんですよ。その一方で「え?本当にそんなことできるん?」「ちょっとおもしろそう」と思っちゃう自分もいたんですよ。

ということで、まじで15分で開発できるのか?を確かめるべく今回は話題のAIノーコード開発ツールDifyを使ってWebアプリを作ってみました。

 

Difyとは

Dify(ディファイ)は、ノーコードで生成AIアプリケーションを開発できるオープンソースのプラットフォームです。これにより、プログラミングの専門知識がなくても、AIチャットボットやデータ分析ツールなどを簡単に作成できます。直感的なインターフェースと豊富なAIモデルとの連携により、誰でも高度なAIアプリケーションを構築できる環境を提供します。

上記ChatGPTより。ザッと触ってみた感じ、ChatGPTとかGeminiとかの生成AIを組み合わせて、用途に合わせたチャットボットとか、文章出力がノーコードでできるっぽい。

開発画面

開発画面はこんな感じで、ユーザーの入力を下に、とにかく色んな生成AIのAPIを順番に叩いていって、ある知識に特化したドキュメントやチャットボットを作るという感じである。また、面白いのが特定のWebサイトやローカルのドキュメントを「ナレッジ」として読み込むことで読み込ませたデータに特化したアプリを作れること。だから社内のあらゆるドキュメントを全部読み込んで、社内規則に超詳しくなった最強チャットボットとかが作れる(多分)。しかも公式HP見る感じオンプレミスで動くらしい。なるほど、これは確かに革命的かもしれない・・・。

 

何を作るか

まあとにかく何か作ってみんとわからんなということで、今回は、知りたいことを入力すると、昔2chで流行っていたSS(ショートストーリー)風にそれを教えてくれるというアプリを作ってみた。あと本当に15分で作れるのか時間も一応測ってみた(使い方を調べたりするのも込みで)。

 

SSを知らない人のために一応掲載。こんな感じで2ch上で顔文字のキャラクターたちが色んなトピックについての会話劇をするのをSS(ショートストーリー)という。昔は色んなSSが作られ私も高校生の頃とか読み漁っていたが最近あんまり見ない。Youtubeでずんだもん動画とか見るのより楽なので私は結構好きなのである。今回は、何かお題をいれると、それについてなんJ民彡(゚)(゚)と原住民(´・ω・`)が会話形式で教えてくれるというコンテンツを自動生成することを試みた。

 

作るべ、まずはプロジェクト設定

まずはDifyの公式HPの右上の「はじめる」ボタンからアカウントを登録する。特に詰まる所はなく、Googleアカウント連携で登録すれば5秒。

dify.ai

以下のような感じの画面が出てくるので「アプリを作成する」→「最初から作成」

そうすると、どういうアプリを開発するか設定する画面に入る。今回はテキストを出力してほしいので「テキストジェネレーター」を選ぶ。アプリの名前と説明を適当に書き、「作成する」をクリック。

 

開発していく

そうするとオーケストレーション画面になる。オーケストレーションとは、複数の IT 自動化タスクまたはプロセスを調整して実行することらしい。とにかくこれが開発画面である。

大きく分けて右側がWebアプリの挙動を確認できる画面、左側がAIの振る舞いを設定する画面となっている。

使うAIはデフォルトでgpt-4oがセットされていた。多分私のChatGPTのアカウントと勝手に連携していると思われる。私はChatGPT Plusに課金しているのでgpt-4oが使えてるが、無課金だと使えるモデルが限られるのかもしれない。ちょっとわからん。

「接頭辞プロンプト」という欄があるが、これがAI(今回はgpt-4o)に入力されるプロンプトとなる。初期状態では{{query}}と書かれているが、ここにユーザが右側の「ユーザ入力フィールド」で入力した値が入ってくる。

すなわち「ユーザーが情報を入力→入力された情報を基にカスタマイズしたプロンプトでAIを動かす→ユーザーに見せる」というWebアプリをなんかいい感じに作ってくれるのがDifyである。

 

今回はまずユーザーに何を学びたいか入力してほしいので、「変数」にcontentsという名前の変数を追加する。

変数を追加すると勝手にユーザー入力フィールドが書き換わり、「何について学びたいですか」という質問と値を入力するボックス表示される。

さて、肝心のプロンプトの設定をしていく。今回は以下のようなプロンプトを書いた。この冒頭の{{contents}}にユーザーが入力した「学びたいこと」が入ってくる。登場人物、キャラクターの設定、ストーリーの形式、最終的な出力の形式などをざっと書いた。基本的に彡(゚)(゚)が(´・ω・`)に知識を教えるという展開にしたいため、キャラクター設定をちょっと作り込んでおく。

 

{{contents}} についての2chのショートストーリーを作成してください。

登場人物:彡(゚)(゚) と (´・ω・`)

キャラクターの設定:

 彡(゚)(゚):典型的なんJ民の口調で性格が悪いが博識。ネット弁慶

 (´・ω・`):彡(゚)(゚)の友達で彡(゚)(゚)と比べてると頭が良くない。中二病。口調は普通。

ストーリーの形式:

以下のように彡(゚)(゚) と (´・ω・`)で問答を繰り返す。

(´・ω・`)「」

彡(゚)(゚)「」

出力の形式:

冒頭に「彡(゚)(゚)と学ぶ◯◯」というタイトルを入れたあと、彡(゚)(゚) と (´・ω・`)が会話を繰り広げる。会話の割合は彡(゚)(゚)と(´・ω・`)で6:4くらいで彡(゚)(゚)が1~3回喋ったあと(´・ω・`)が一回喋る感じ。長さは1000文字程度。最後は「おわり」と文末につける。

 

結構面白いのがキャラクターの設定をちょっと変えるだけで出力される文章がガラッと変わる。属性をあまり指定しないと、めちゃくちゃな展開になるし、設定を詰め込みすぎると、展開される話の幅が狭まったりするのでここらへんが難しいところである。確かにDifyを使えば爆速でWebアプリとしての体裁は整えられるが結局プロンプト設定が難しいんじゃねえか!という身も蓋もない感じはちょっとある。

 

さて、早速実行してみよう。今回はフランス革命について知りたいので、学びたいことにフランス革命と入力して、「実行」をクリック。

実行を押すと下側の「出力テキスト」に結果が吐き出される。今回吐き出されたのは以下の文章

 

彡(゚)(゚)と学ぶパリの映画館


(´・ω・`)「ねえ、最近パリの映画館で上映されている映画って知ってる?すごくオシャレな感じだよね!」

彡(゚)(゚)「おいおい、映画館がオシャレなのは当たり前やろ。パリなんて文化の中心地なんだから。アートといえば、映画もそれに含まれるんやで。でもやっぱフランス映画はちょっと難しいところがあるから、そんなに感動せんかもしれないな。」

(´・ω・`)「確かに、フランス映画ってセリフが長かったりするよね。でも、雰囲気が良いのはわかる!特になんか、モンマルトルとかの映画館は、絵画みたいに美しいって聞いたことある!」

彡(゚)(゚)「モンマルトル?ああ、あのボヘミアンな地域な。懐かしいな。確かにそこにある映画館はインテリな感じで、カフェも併設されているから、映画を観つつおしゃれな時間を過ごせるわな。ただ、パリの映画館は予約が必要なことが多いから、あんまり行きやすくないんやけどな。」

(´・ω・`)「予約って、何か特別な映画でもやってるの?」

彡(゚)(゚)「特に話題の映画とか、文句なしの名作とか、そういうので早々に席が埋まるんよ。まあ、黙って見てるだけなら行ってもいいかもしれんが、俺みたいに色々と突っ込み入れたくなる人間には向かんわ。そんなのおしゃれだと思ってるんか?」

(´・ω・`)「あ、確かに。みんな静かに映画を楽しむのに、自分だけツッコミ入れてたら恥ずかしいな。彡(゚)(゚)は映画観るときはどうしてるの?」

彡(゚)(゚)「俺?俺は基本的に家で観る。おやつ持ち込みながら、好きな映画を何回も観直すタイプやから。それに、ツッコミながら見ると、ネットでその感想つぶやいたりもするから、現地に行く必要がないわけ。」

(´・ω・`)「うわー、やっぱりネット弁慶だね。ところで、パリの映画館の食べ物って何か美味しいらしいよ?クロワッサンとか。」

彡(゚)(゚)「まあ、それは正直食べたことないけど、サンドイッチや飲み物はあんまり安くないのが普通やで。でも、映画を観る代わりに「フードコートで食べる方がお得やん!」なんて発想はないん?そんなのもったいないわ。」

(´・ω・`)「うーん、確かにそうかもしれない。でもおしゃれな雰囲気で食べたいなーって思っちゃうんだ。映画館で食べることに意義があると思うし!」

彡(゚)(゚)「まあ、そういう人もおるやろうな。でも俺はやっぱり「映画は映画館で!」って感じやから、食べ物に関しては強気で言えるわ。お洒落に浸ってる場合か、ってな。」

(´・ω・`)「なるほど、結局は映画なんだね。自分も何か映画を観たくなってきたよ!」

彡(゚)(゚)「そうやな、映画観る時間は大事やけど、ええ映画は自分の目で確かめる価値があるから、行ってみな!」

(´・ω・`)「よし、パリに行くか、もしくはネットで配信されてるやつでも!それじゃあ、映画を楽しみにしてるね!」

彡(゚)(゚)「そんなこと言ってたら、お金が続かへんで。計画を立てるのも大切やろ。真剣に考えなあかんで、同じやつを見続けると飽きるしな。」

(´・ω・`)「そうだね…ちゃんと考えてみるよ。ありがとう、彡(゚)(゚)!」

おわり

 

星野源について聞いてみた。

彡(゚)(゚)と学ぶ星野源
(´・ω・`)「ねえ、星野源って知ってる?すごいミュージシャンみたいだよ。」

彡(゚)(゚)「ああ、知っとるわ。星野源はシンガーソングライターだけじゃなくて、俳優やら作家やらマルチな才能の持ち主や。あいつの曲、特に『恋』なんて超有名やで。」

(´・ω・`)「『恋』って、あのドラマのやつだよね?なんか、みんな踊ってた気がする。」

彡(゚)(゚)「そゆこと。ダンスも印象的やし、MVの中での可愛らしさがみんなの心をつかむんや。そういう意味では、あいつはただのミュージシャンじゃなくて、物語を作る人やな。」

(´・ω・`)「すごい…。でもさ、星野源ってどんな人なの?私、あんまり詳しくないから。」

彡(゚)(゚)「お前、ほんまにアホか。星野源は心の内面を描写するのが得意やから、自分の感情を歌に落とし込むのがうまいんや。だから共感する人が多いんやで。」

(´・ω・`)「感情を歌に?それって、私もできるかな?なんか、詩を書いてみたい気分。」

彡(゚)(゚)「そんな簡単にできるもんちゃうで。あいつはアーティストとしての経験が違うから。お前の中二病的な感情を文字にしたとしても、ただの自己満足や。」

(´・ω・`)「うーん、それ言われるとちょっと響くけど…星野源の楽曲って、どんなテーマが多いの?」

彡(゚)(゚)「恋愛や日常的なこと、それに対しての葛藤とかやな。特に『不思議』や『アイデア』なんかは、独特な視点から見た世界を描いてる。お前も夢の中に入り込んでるような感覚になるで。」

(´・ω・`)「なるほど…私もそんなふうに書けたらいいな。夢の中の話とか、かっこよさそうだし。」

彡(゚)(゚)「でも、夢の中に入りすぎると現実逃避になるから気をつけるんやで。星野源も現実と向き合ってるからこそ、ああいう素敵な作品が生まれとるんや。」

(´・ω・`)「うん、分かった!現実も大事だね。じゃあ、星野源のライブ行ってみたいな!」

彡(゚)(゚)「ああ、ライブは最高やで。特にあいつのパフォーマンスは息を飲むほどや。こんな音楽が生きてるんやと思う瞬間があるわ。」

(´・ω・`)「楽しみだね!今度チケット取ろうよ!」

彡(゚)(゚)「いや、チケット取るのはお前の役目や。俺は行くだけやから、頼んだで。」

(´・ω・`)「わかった!頑張って取るね!楽しみにしとくよ!」

彡(゚)(゚)「期待するなよ。お前みたいなのが行くと、ちょっと恥ずかしいからな…まあ、頑張れ!」

おわり

割といい感じである。ちょっとした雑学も文章中に入っていて多少の暇つぶしにはなりそうである。

さて、最後にアプリとして動かしてみよう。

「公開する」→「アプリを実行」をクリック

別画面でアプリケーションが立ち上がる。このURLを配布すれば誰でもアプリを使えるようになる。すげー。

アプリの画面。仮面ライダーについて聞いてみた。クウガとかゼロワンの話をしている。ええやん。

一応動画でも。

 

結論:何も知らない状態から1時間半で開発、アプリを配布するところまでできた

ここまでで一時間半。アカウント登録から、使い方を調べながら開発し、動かしてみるところまでで1時間半である。慣れたら10分くらいでできそう。確かに爆速である。触ってみた所感としては確かに簡単で誰でもできそうだしおもしれーツールだなとは思ったものの、Difyだけでは細かなUIを作ったりはできなさそうなので、Dify単体でなく、別のツールと併用するのがいいだろうなと思った。フロントエンドからDifyのAPI叩いてAIであれやこれや加工した情報を受け取ってフロントで表示するとか。とにかくAIを組み合わせてなにか情報を作り上げる、というところが得意なツールだという印象である。またなんか作ってみたい。




以上の内容はhttps://chamekichi.hatenadiary.jp/entry/2025/02/17/080000より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14