【エンジニアブログ】AIでアプリを簡単に作成！Create.xyzで実現する未来型開発

こんにちは！GMOメイクショップ コアグループエンジニアの大森です。

みなさん、AI触っていますか。

今日は、とても強力なAIサービスを紹介したいと思います!

その名も Create.xyz

Create.xyzは、テキストや画像からアプリケーションを開発することができる革新的なAIツールです。

このツールを用いることで、モックやプロトタイピングとしての活用。reactアプリケーションのコードの部分生成。社内ツールや開発補助ツールの作成など、様々な事ができるようになります!

• Create.xyzの凄さって？
• さっそくCreate.xyzを使ってみる
• • アカウント作成
  • ページ作成
• 商品検索機能のプロトタイプを作成してみる
• 他サービスとのコラボレーション
• 失敗しても大丈夫、バージョン復元機能
• 終わりに

Create.xyzの凄さって？

• テキストベースのコーディング: 自然言語処理を活用し、ユーザーが書いた説明からコードを自動生成します。この機能は、具体的な機能やアプリの要件をテキストで説明するだけで、それに応じたコードを提供します。
• 画像からのアプリ作成: この革機能を使えば、画像ファイルをアップロードするだけで、その画像に基づいたウェブサイトやアプリのプロトタイプを生成できます。デザインのスケッチからデジタルプロダクトへの変換がこれまでになく簡単になります。
• AI統合: Create.xyzは、ChatGPTやGPT VisionなどのAI技術と統合されており、これによりユーザーはより複雑で高度なアプリケーションの開発が可能になります。この統合機能は、ユーザーが直面するかもしれない様々な開発上の課題を解決するのに役立ちます。
• 料金: 無料で利用できるサービスですが、プレミアム機能や追加のリソースを利用するには、有料プランの選択が必要になります。利用者のニーズに合わせて、様々なプランが用意されています。具体的な価格やプランの詳細については、Create.xyzの公式ウェブサイトを参照してください。

さっそくCreate.xyzを使ってみる

アカウント作成

まずは無料アカウントを作成します。

　　　　　　　　　　　　　　　　　　　　アカウント登録

アカウント登録に必要なものはメールアドレスだけです。

ページ作成

任意のプロジェクトを選択します。新規でプロジェクトを作成することも出来ます。

　　　　　　　　　　　　　　　　　　　プロジェクト選択

次に、ページ作成を選択します。

　　　　　　　　　　　　　　　　　　　　ページ作成

商品検索機能のプロトタイプを作成してみる

今回は、商品検索機能のプロトタイプを作成してみたいと思います。

画面右のテキストエリアの領域に、作成したいページのプロンプトを入れます。

プロンプトは日本語でも大丈夫🥰

　　　　　　　　　　　　　　　　　　　　　プロンプト入力

画面右下の「Generate」ボタンをクリックします。

プロンプトの内容によってまちまちですが、およそ30秒 ~ 2分程度待つとページが作成されます。

　　　　　　　　　　　　　　　　　　　　　初期ページ　　　

初回プロンプトとしては中々いい出来ではないでしょうか。ソースコードを表示することも出来るので、このコードを元に react のページを作成することも出来ます。

　　　　　　　　　　　　　　　　　　　　　コード

今の状態だとまだ検索の動きが無いので、実際に絞り込めるようにしたいです。 プロンプトに、「サンプルデータを25件用意して、商品名やメーカー名で実際に絞り込めるようにしたい」という指示を追加します。

実際に画面を動かしてみます。

　　　　　　　　　　　　　　　　　　　　検索1

　　　　　　　　　　　　　　　　　　　　検索2

動画ではなく、画面のキャプチャーのため分かりづらいですが、商品一覧に表示する内容を絞り込むことが出来ています。

プロトタイプとしては十分な出来ではないでしょうか🎉

全くコーディングの知識が無くても、動くアプリケーションを作成することが出来るようになるとは、嬉しいような恐ろしいような、時の流れの速さを感じます🙀

他サービスとのコラボレーション

テキスト、画像ベースでページを作れるだけでも十分なのですが、 Create.xyz の真骨頂は他サービスとのコラボレーションにあります!

　　　　　　　　　　　　　　　　　　　　　　AIサービス

Xで Create.xyz 画像をアップロードして GPT-4 Vision に解析させるアプリを紹介していました。

今回はこれを作成してみようと思います。

さらに、 Google Translate とも連携させて、解析結果を日本語で表示できるようにします🎉

プロンプトは Xの通りに入力します。

アプリを作成して、DALL-Eで作成した画像をアップロードします。

　　　　　　　　　　　　　　　　　　　　　画像アップロード

暫く待つと、画面の下に解説文が、ダーッと表示されます!

　　　　　　　　　　　　　　　　　　　　　アップロード結果

とてもオシャレな文章。完璧な解説ではないでしょうか。

色々と画像解析を試していると、途端に画像解析ができなくなりました。

　　　　　　　　　　　　　　　　　　　GPT-4 Vision APIの失敗

エラーメッセージを確認したところ、APIの limit 超過とのことです。

翌日にリトライしたところ、画像解析出来る様になっていましたので、アカウントごとに APIの limit は設定されている模様です。

無料枠で利用しているので外部APIが利用できるだけでありがたいです🥰

また、 Google Image Search と連携するサービスを作成してみましたが、こちらも特に問題なく動きました。

　　　　　　　　　　　　　　　　　　　おすすめランチ検索ツール

失敗しても大丈夫、バージョン復元機能

プロンプトを変更して、「generate」を繰り返していると、意図せず急激にデザインがガッツリ変わることがあります。

　　　　　　　　　　　　　　　　　　　　　デザインが変わった

そんな時は、画面上部の See history の機能から過去のバージョンに戻すことが出来ます。

　　　　　　　　　　　　　　　　　　　　　　バージョン管理

この機能があるおかげで、大胆にプロンプトを変更して動作確認することが出来ます。

終わりに

これだけのサービスが無料枠でもある程度利用できてしまうのは改めてすごいことだなと感じました。

生成AIの進歩は凄まじく、追いかけるだけでも大変なことですが、それを追いかけることで、私たちはより良いサービスを提供できるようになると思います。

「常に変化し続ける」をモットーに、これからも新しいものを追い続けていきたいです。

Enjoy your AI life.

◆　他のBlogはこちらから⇒　https://tech.makeshop.co.jp/　◆

ご応募お待ちしています！