【ChatGPT】ノーコードClickでAI診断アプリを作ってみた。

今回は、ノーコードClick（クリック）からChatGPTのAPIを使ってシンプルなAI診断アプリを作ってみたいと思います。Click（クリック）からは外部APIを簡単に呼び出せますので、AIとの相性はすごくいいです。ChatGPTのAPIを使うことで、自分専用の工夫次第で面白いAIアプリが作れてしまいます。今回はAIxノーコードの一つの例として、クリックで簡単なAI診断アプリを作ってみたいと思います。前にAdaloでも同じようなことはやってるのでAdalo x ChatGPTの診断アプリはこちらをご覧ください。【ノーコードxAI】ChatGPTとAdaloで診断アプリを作ってみた。ノーコードClick（クリック）とは？Click（クリック）は、ざっくり言うと簡単にアプリを作れるノーコードツールです。プログラミングをせずともiOS/Androidのネイティブアプリを自分の好きなようにサクッと作れるのは非常に魅力的ですよね。Clickは国産のツールだけあって日本語対応も完璧なところもありがたいですね。もちろんノーコードゆえにできない機能もあり、制限もありますが、その分素早く簡単にできるところが良い点なので、スタートアップ・MVP、小規模企業にとってはありがたい存在ではないでしょうか。【ノーコード】Adalo（アダロ）とClick（クリック）を徹底比較！料金から機能面まで細かく解説参考）ノーコード Click（クリック）：機能・メリット・他ツールとの徹底比較参考）ノーコードアプリ開発: 無料で始められるおすすめツール６選ノーコードとAIの可能性ノーコードはあっという間にアプリを作れるところが強みです。それ自体はノーコードゆえに機能的にできないことがあるのが難点ですが、APIを使って外部と連携できる点は強みです。そうすると、どうなるでしょう？AIの部分はChatGPTなどの外部サービスで作ってもらい、APIを使えばAIアプリが作れるのです。ノーコードであっという間にアプリ側やWebなどの「枠」を作ってしまい、コアな機能であるAI部分をAPIで呼び出せばいいのです。今後、一層AIが進化していくと思いますが、それを簡単にアプリやWebから使えるようにするためのツールとして、ノーコードの需要は今後より一層求められていくのではないでしょうか？【AI x ノーコード】なぜノーコードとAIはこれほど相性がいいのか？今回Clickで作った診断アプリまずは今回作ったノーコードClick x ChatGPTのとてもシンプルなAI診断アプリを紹介します。以下のように、診断するボタンをクリックすると、↓質問が現れます。回答すると、次の質問が現れます。最後のページにまでいき診断すると、ChatGPTが健康状態に関するアドバイスをしてくれる・・・というアプリを作ってみました。とてもシンプルですが、色んなアプリに応用できる機能ですよね。ノーコードClick x ChatGPTの診断アプリの作り方ではAI診断アプリの作り方を説明していきましょう。まずはChatGPTとの連携まずはChatGPTのAPIととClickを連携させます。以下のように設定します。今回はChatGPT-APIという名前で作ってみました。詳しくは以下から動画でも解説してるのでみてみてください。【ChatGPT x ノーコードClick】ClickでChatGPTのAPIを呼ぶ方法データベースの設定次に、まずはデータベースの設定を行います。以下のようにUsersにプロンプト（AIに送る命令）を保存する領域である「プロンプト一時保存用」とGPTからのレスポンスを保存しておく領域である「GPT診断結果」を追加しました。診断開始ページの作成、プロンプトの設定次は、UIを作っていきましょう。まずはホーム画面にボタンを配置します。「診断する」ボタンですね。このボタンに以下のようにプロンプトを仕込んでおきましょう。こんな感じで、logged in userのプロンプト一時保存用の領域にプロンプトを書いています。（わかりやすくあえてベタ書きで書いてますが、DBかどこかに保存しておいても大丈夫です）診断画面を作成では次に診断（質問）画面に移りたいと思います。ここではテキストで「質問1」「毎晩お酒は飲みますか？」という質問をさせてみます。これらの質問をいくつかして、ユーザーの回答をプロンプトにくっつけてGPTに渡し、診断してもらいたいと思います。以下のように「はい」「いいえ」ボタンを設置し、「はい」ボタンが押された時には「Logged in userのプロンプト一時保存用の領域の値 + "毎日お酒を飲みます。"」という文字列を設定します。↓逆に「いいえ」の時は、以下のように「Logged in userのプロンプト一時保存用の領域の値 + "お酒を飲みません。"」という文字列を設定します。いかがでしょう？とても簡単ですよね。あとは、最後の質問の「はい」「いいえ」をクリックした後は診断結果画面に飛ぶようにClickFlowを設定しましょう。診断結果画面の作成：ChatGPTのAPIとの連携まずは診断結果画面に診断するボタンを設けます。そこに最初に作ったChatGPT-APIをClickFlowのカスタムClickFlowから呼んでみましょう。そこにLogged in userの「プロンプト一時保存用」をそのまま渡しましょう。これがGPTへのプロンプトになります。次に、GPTの実行結果を保存したいので、以下のようにLogged in userを更新し、GPT診断結果のところにChatGPT-API > choices.message.contentを選択し設定します。これでGPTの結果がデータベースに保存されました。最後はテキストに、今保存したデータを表示させれば完成です！簡単ですね！ Youtube動画での解説：Click x ChatGPT診断アプリClick x ChatGPT診断アプリの作り方は、動画でも解説しています。動画の方ではもう少し複雑な実装の仕方についても説明しているので、興味のある方はどうぞ。&amp;lt;div class="height-adjuster" style="-webkit-font-smoothing: antialiased; backface-visibility: hidden; border: 0px; box-sizing: border-box; color: rgb(51, 51, 51); font-family: sans-serif; line-height: 1; list-style: none; margin: 0px; padding: 0px; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1) 0s; word-spacing: 1px; display: block; max-width: 560px;"&amp;gt;&amp;lt;div class="wrapper" style="-webkit-font-smoothing: antialiased; backface-visibility: hidden; border: 0px; box-sizing: border-box; color: rgb(51, 51, 51); font-family: sans-serif; line-height: 1; list-style: none; margin: 0px; padding: 315px 0px 0px; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1) 0s; word-spacing: 1px; position: relative;"&amp;gt;&amp;lt;iframe width="560" height="315" src="https://www.youtube.com/embed/0JSyWOi-y6o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" loading="lazy" style="-webkit-font-smoothing: antialiased; backface-visibility: hidden; border: 0px; box-sizing: border-box; color: rgb(51, 51, 51); font-family: sans-serif; line-height: 1; list-style: none; margin: 0px; padding: 0px; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0.4, 0, 1) 0s; word-spacing: 1px; height: 315px; left: 0px; position: absolute; top: 0px; width: 560px;"&amp;gt;&amp;lt;/iframe&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;アプリ・Webサービスの開発の無料相談はこちらAdalo、bubble、STUDIO、FlutterFlowなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。