【無料公開】自作の画像生成AIアプリを作ろう！（1/2）-AppGyverでアプリ開発-
「自作の画像生成AIアプリを作りたい！（可能な限り無料で）」
そう思って始めた今回のアプリ開発ですが、紹介できそうなレベルになったかなと思いましたので、手順を公開したいと思います。
本当であれば、1回で紹介したかったのですが、説明が非常に長くなるので、#1（今回）と#2（次回）の全2回に分けて説明したいと思います。
まず、今回紹介する開発したアプリの概要はこちら！
1.アプリの画面はこんな感じ（超絶素っ気ないシンプルなデザイン）⬇︎
2.機能としては、①テキストを入力し英訳する（DeepLのAPIを使用）、②英訳した文章から画像を生成する（stability.aiのAPIを使用）。
で、生成された画像がこちら⬇︎
自分のやっていることをChatGPTにまとめてもらったら、こうなりました。
ユーザー (日本語入力)
↓
AppGyverアプリ
↓ APIリクエスト
翻訳API (DeepL)
↓ 翻訳された英語のテキスト
AppGyverアプリ
↓ APIリクエスト
画像生成API (stability.ai)
↓ 生成された画像
AppGyverアプリ
↓
ユーザー (画像表示)【用語説明】API連携とは、アプリケーション・プログラミング・インターフェース（API）を使用して、異なるソフトウェアやサービス間でデータや機能をやり取りすることを指します。APIは、プログラムが他のプログラムと通信し、機能やデータを利用できるようにするための一連の定義やプロトコルを提供します。
たとえば、あなたが開発しているアプリが他のサービス（例えば天気情報や翻訳サービスなど）からデータを取得したり、そのサービスの機能を利用したりする場合、API連携を通じてそれを実現します。この連携により、アプリが独自の機能を持ちながらも、他のサービスの強力な機能を活用できるようになります。
それでは、紹介していきたいと思います。
・初めにAppGyverの説明
今回、私の記事を読まれるのが初めての方がいるかも知れませんので、簡単にAppGyverの説明をします。
AppGyverとは、私が使っているノーコード・ローコードで作成できるアプリ開発ツールです。（同じようなツールにGlide、Bubble、Adaloなどがあります）
詳しくは下の記事をお読みいただければと思います。
プログラミング経験がない私でもそれなりに使いこなせているため、直感的で分かりやすいかと思います。
一番の利点は「15億稼ぐまで無料で使えるところ」
一方で、日本語の教材が少ないのが難点で、私自身かなり苦労をしました（今もしていますが）ので、少しでも皆さんの助けになればと思っております。
・なぜ英訳が必要なのか
そもそも、「なぜ、今回のアプリに英訳が必要なのか」と疑問に思った方もいるかと思います。
その回答としては、
「Stable Diffusionの画像生成は日本語が得意じゃない」から。
今回、画像生成をStable DiffusionのAPIを使って実行しようとしておりますが、日本語をあまり受け付けてくれず（たまーに、うまくいく時もある）。
やはり、英語の方が精度が良かったため、一旦英訳するように設計しました。
なので今回は、「英訳する機能」と「画像生成する機能」が一緒になったアプリとなっております。
・実際の開発の流れ
AppGyverの登録方法は下記リンクの動画を参照
ここからは、AppGyverの登録が完了したことを前提に説明を進めていきます。
1. DeepLのAPI キーの取得
アプリ設計の前にDeepLのAPI キーを取得する必要がありますので、まず以下のリンクを開いてください。
プロダクトから「DeepL API」を選択します。
無料プランであるDeepL API Freeを選択します。
ちなみに、無料プランでは1ヶ月に500,000文字まで翻訳可能です。
DeepL API Freeを選択すると、アカウント登録画面に移動しますので、必要事項を記入します。
（画像はありません）
以下のような、登録内容がまとまったページに移動できれば成功です。
ここで、「APIキー」のタブを選択し、「キーを作成」ボタンを押します。
ステータスが有効なAPIキーが作成できたら完了です。
作成したAPIキーは後から必要になりますので、忘れないようにコピーしておきます。
【注意】
APIキーは他人に知られると悪用される可能性がありますので、知られないように管理には注意が必要です。
2. AppGyver上でアプリの設計
次にAppGyverのアプリ上でアプリ画面の設計を行なっていきます。
大まかな流れとしては、
2-1. 画面（View）の設計
2-2. 変数（Variables）の設計
2-3. データ（API連携）の設計
2-4. フロー（Logic）の設計
の4つです。
2-1. 画面（View）の設計
まず、新しいアプリを立ち上げます。
続いて、画面の設計を行なっていきます。
追加のコンポーネントとして、Input fieldを設置します。
左側のLabelを変えるとコンポーネント内の文字も変わります。
続いて、その下にButtonコンポーネントを設置します。
同じようにLabelを変えるとボタンの文字も変わります。
次にINSTALLEDにあるCardコンポーネントを設置します。
タイトルを変えることでコンポーネントの見出しを変更できます。
以上で画面の設計はひとまず終わりです。
2-2. 変数（Variables）の設計
続いて、変数（VARIABLES）の設定を行なっていきます。
右上のVARIABLESをクリックします。
下のような画面に移るので、PAGE VARIABLESを選択し、ADD PAGE VARIABLESをクリックしてページ変数（Page variable）を追加します。
ページ変数は「inputtext」と「englishtext」の2つの変数を設定しておきます。（2回、ADD PAGE VARIABLESを行う）
この際、Variable value typeは両方とも「text」のままで問題ありません。
変数の設定は以上で終わりです。
2-3. データ（API連携）の設計
続いてAPI連携の設定を行なっていきます。
画面上部のDATAタブをクリックし、下の画面になったら、CREATE DATA ENTITYをクリックします。
「REST API direct integration」をクリックします。
設計画面で以下のように入力を行なっていきます。
【BASE】タブ
Resource ID：DeepLTranslate
Resource URL：https://api-free.deepl.com/v2/translate
【GET RECORD（GET）】タブ
ここは少し編集が必要です。
初めから設定されている、「/{id}」と「URL placeholder」は削除しておきます。
そして、Query parameterを以下のように設定します。
わかりにくい方は以下の表も参考にしてください。
Key | Label | Value
text | text | 空白（Is staticをoffにしておく）
source_lang | source_lang | JA
target_lang | target_lang | EN
auth_key | auth_key | （先ほど取得したAPI key）
（Value typeは全てTextでOK）
※先ほど取得したAPI keyとは、DeepLのAPI キーのことです。
設定が完了したら、TESTタブに移ります。
textに英訳したい文章を入力し、RUN TESTをクリックします。
RUN TESTの結果に英訳が出ていたら成功です！（StatusはOKになっているはず）
【注意】この時点でDeepLの文字数にカウントされているので、無闇に長文は入力しないほうが良いです。
呼び出しが成功したら、「SET SCHEMA FROM RESPONSE」をクリックします。
SCHEMAタブでProperties of this schemaが自動で入力されていたらOKですので、保存しておきます。
データ（API連携）の設計は以上で終わりです。
2-4. フロー（Logic）の設計
最後にフロー（Logic）の設計を行なっていきます。
UI CANVASをクリックし、アプリ画面に戻ります。
Input fieldコンポーネントを選択し、左側にあるValueをクリックします。
Data and Variablesを選択します。
Page variablesを選択します。
inputtextを選択します。
続いて、Cardコンポーネントを選択し、左側にあるContentをクリックします。
先ほどと同じようにData and Variablesを選択します。
先ほどと同じようにPage variablesを選択します。
ここでは、englishtextを選択します。
次に、ボタンをクリックした際に英訳が実行されるように、ロジックを作成していきます。
まず、Buttonコンポーネントを選択し、右下にある上下の矢印ボタンを押し、LOGIC CANVASを広げます。
続いて、Component tapのイベントの隣に、Get recordのフローを設置します、
Component tapとGet recordのフローを繋げ、左側にあるtextをクリックします。
Data and Variablesを選択します。
Page variablesを選択します。
inputtextを選択します。
次に、Set page variablesのフローをGet recordの隣に設置します。
Get recordとSet page variablesのフローを繋げ、左側にあるAssigned valueをクリックします。
Formulaを選択します。
Output of another nodeの中から、
outputs["Get record"].record.translations[0].text
を探し、選択します。
設定を保存したら、フロー（Logic）の設計は以上です。
ここまでで、アプリの大枠が完成しましたので、テストを行います。
3. テストしてみる
ここまで完成したら一度アプリを動かしてみます。
画面上部にある、LAUNCHをクリックします。
Open preview portalを選択します。
今回はひとまず、Web上で確認するため、Preview on webをクリックします。
先ほど作成したアプリを開きます。
テキスト入力欄に英訳したい文章を入力後、翻訳ボタンを押した後に、下記のように翻訳結果が表示されれば完成です。
以上で終わりです。おつかれさまでした！
・最後に次回内容の紹介
今回はいかがだったでしょうか。
DeepLのAPIを使うことで自作の英訳アプリができることがわかったかと思います。
次回は実際に翻訳された英訳をインプットとしてStable Diffusionで画像生成ができるようになるための流れを紹介したいと思います。
ご意見・ご要望もお待ちしております。
それでは次回もよろしくお願いします！
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？