インフルエンサー記事
はじめまして！大学生エンジニアの木村太陽と申します！
突然ですが、エンジニアではなくてもアプリ開発ができてしまうAIツールをご存知でしょうか？特におすすめなのが「create.xyz」と「Zoltraak」です。
これらのツールを使えば、プログラミングの知識がなくても自分だけのオリジナルアプリを簡単に作成することができます。
本記事では、「Create」と「Zoltraak」の使い方やその魅力を詳しく紹介していきます。誰でも簡単にアプリ開発の世界に飛び込めるよう、一緒に学んでいきましょう！
尚、今回Zoltraakは、環境構築の手軽さから、Webアプリバージョンの解説をしてきます。
興味のある方は、Pythonをインストールして実際に使ってみましょう！環境構築の詳細はこちらから見ることができます。
【生成AI、ノーコード開発の面白さと可能性を一緒に探求し、アイデアを形にするお手伝いいたします！】
Zoltraakとは？
Zoltraakは、自然言語を用いたプログラミングシステムであり、呪文のように簡単な言葉から複雑なプログラムを生成し、実行することができます。
Zoltraakの特徴
・自然言語フレームワーク
Zoltraakは自然言語を用いてプログラムを記述し、それを実行可能な形式に変換します。
・広範囲な術式展開
数語の呪文から起動術式を用いて複雑な術式を展開し、即時実行可能なシステムです。
・多言語対応
数学、日本語、英語、プログラム全てを扱うことができる統一言語としての機能を持っています。
・ビジネス応用
ビジネスサイドの働き方を大きく変える可能性があり、ゴールを指示するだけでアイデアや戦略を形にすることができます。
上記から例えば、エンジニアでなくても自然言語だけで、アプリの要件を明確化でき、ユーザーの思いを忠実に反映した要件定義書を作成できるのです。
非エンジニアでも簡単に操作できるZoltraakのインターフェース
Zoltraakのインターフェースは、直感的で使いやすいデザインになっています。
アプリの概要や機能を自然言語で入力するだけで、あとは要件定義書の自動生成を待つだけです。操作が単純なため、プログラミングの知識がなくても簡単に要件定義書を作成できます。
また、Zoltraakには要件を追加・修正するための機能も備わっています。
自動生成された要件定義書に不備があれば、言葉を追記・修正するだけで要件を更新できます。こうした対話的な操作により、ユーザーの思いを反映した理想の要件定義書に仕上げられるでしょう。
createとは？
createは、自然言語のプロンプトを入力するだけでWebアプリを生成できるローコードツールです。
Zoltraakで作成した要件定義書をcreateに入力すると、その内容に基づいたWebアプリのプロトタイプを自動生成してくれます。
createの特徴
createの特徴は、プログラミングの知識がなくてもWebアプリを開発できる点にあります。
従来のWebアプリ開発では、コーディングが必須でした。しかし、createならプロンプトを入力するだけで、そのプロンプトに沿ったWebアプリが自動生成されます。
createの生成物は、実際に動作するWebアプリのプロトタイプです。
HTMLやCSSなどのコードは自動生成されているため、ブラウザ上で実際に動作を確認できます。プロトタイプの動作を確かめながら、さらに改良を重ねられるのが大きな利点です。
createを含むローコード開発の利便性と効率性
createを使えば、プログラミングの知識がなくてもWebアプリを開発できます。
コーディングの手間が省けるため、開発の効率が大幅に向上します。また、エンジニアリソースを削減できるので開発コストも抑えられます。
従来のWebアプリ開発では、要件定義、設計、コーディング、テストと複数の工程を経る必要がありました。
しかし、createを使えばZoltraakで作成した要件定義書をプロンプトとして入力するだけで、その要件に基づくWebアプリのプロトタイプが自動生成されます。工程が大幅に簡素化され、開発期間の短縮が期待できます。
さらに、createで生成したWebアプリは、そのままブラウザ上で動作確認できます。
テスト工程も効率化され、アプリの完成度を段階的に高められます。このように、createはローコード開発の利便性と効率性を実現するツールなのです。
Webアプリ開発にZoltraakとcreateを使うメリット
非エンジニアでもWebアプリ開発に挑戦できる
近年、AIやローコードツールの進化により、プログラミングの知識がなくてもWebアプリを開発できるようになってきました。最近話題のツールがZoltraakとcreateです。
Zoltraakは自然言語を用いたプログラミングシステム、createはプロンプトを入力するだけでWebアプリを生成できるローコードツールです。これらのツールを組み合わせることで、エンジニアでない人でもWebアプリの開発に挑戦できるようになりました。
従来のWebアプリ開発では、要件定義からコーディングまでエンジニアが担当する必要がありました。しかし、Zoltraakを使えば非エンジニアでも自然言語で要件定義を作成でき、createを使えばその要件に基づいたWebアプリのプロトタイプを自動生成できます。
つまり、プログラミングの知識がなくてもWebアプリの開発プロセス全体に携われるようになったのです。
短時間でプロトタイプを開発できる
Zoltraakとcreateの最大の魅力は、アイデアをすばやくプロトタイプ化できる点にあります。
従来のWebアプリ開発では、要件定義、設計、コーディングと複数の工程を経る必要がありました。しかし、Zoltraakで要件定義書を作成し、createにプロンプトを入力するだけで、その内容に基づいたWebアプリのプロトタイプを短時間で生成できます。
プロトタイプが作れれば、実際に動作を確認しながらブラッシュアップできます。アイデアを形にしてから改良を重ねられるため、よりよいアプリを効率的に開発できます。また、プロトタイプを活用してユーザーテストを行えば、本格的な開発に着手する前に課題を発見し、改善することができます。
開発の効率化とコスト削減を実現
Zoltraakとcreateを使えば、開発の効率化とコスト削減も期待できます。
つまり、エンジニアリソースを最小限に抑えられるのです。エンジニアリソースを削減できれば、人件費を大幅に抑えられます。また、エンジニアに依存しないため、スケジュール調整の手間も省けます。開発期間の短縮と開発コストの削減を同時に実現できるでしょう。
ただ、現時点では、createはユーザー認証や決済機能、DBの外部化ができない点、バックエンド機能が乏しい点から大型のプロダクト開発には向いていなさそうです。
Zoltraakとcreateでwebアプリを開発！記憶力ゲームを作ってみた
1.zoltraakで記憶力ゲームの要件定義書を作成
例えば、「記憶力ゲームのWebアプリを作りたい」と入力すると、Zoltraakは以下のような要件定義書を出力します。
## 記憶力ゲームWebアプリ – MVP 要件定義書### 概要
このドキュメントは、記憶力ゲームのWebアプリの最小限の実行可能な製品（MVP）の要件を定義するものです。ユーザーは、ランダムに配置されたカードを記憶し、同じ絵柄のカードを2枚見つけるゲームをプレイできます。
### ファイル・フォルダ構成
“`
├── public
│ ├── index.html
│ ├── styles.css
│ └── images
│ └── card-images
│ ├── card1.png
│ ├── card2.png
│ └── …
├── src
│ ├── components
│ │ ├── Card.jsx
│ │ ├── GameBoard.jsx
│ │ ├── Timer.jsx
│ │ ├── Score.jsx
│ │ └── Modal.jsx
│ ├── App.jsx
│ ├── utils
│ │ ├── shuffle.js
│ │ └── gameLogic.js
│ ├── services
│ │ ├── localStorage.js
│ │ └── api.js
│ ├── styles
│ │ ├── global.css
│ │ └── game.css
│ └── index.js
├── .gitignore
├── webpack.config.js
└── package.json
“`
### 機能要件
1. **ゲーム開始:**
– ユーザーはゲームを開始できます。
– ゲーム開始時に、難易度を選択できます（簡単、普通、難しい）。
– 難易度によってカードの枚数が変わります。
2. **カードめくり:**
– ユーザーはカードをクリックしてめくることができます。
– めくったカードは一時的に裏返されます。
3. **ペアマッチング:**
– ユーザーが同じ絵柄の2枚のカードをめくると、カードは表向きになります。
– ペアが成功すると、スコアが加算されます。
4. **タイマー:**
– ゲーム中に経過時間が表示されます。
5. **スコア:**
– ゲーム中のスコアが表示されます。
6. **ゲーム終了:**
– すべてのペアが揃うと、ゲーム終了となります。
– 最終スコアと経過時間が表示されます。
7. **リプレイ:**
– ユーザーはゲームを再プレイできます。
### 非機能要件
#### 詳細アーキテクチャ
– フロントエンド: React
– バックエンド: (MVPでは不要)
– データベース: LocalStorage (MVPではゲーム中のデータを保存するために使用)
#### 開発環境
– Node.js
– npm (または yarn)
– Webpack (モジュールバンドラー)
#### インフラ
– 静的Webホスティング (例: Netlify, Vercel)
#### 言語
– JavaScript (ES6)
### 必要な画面
1. **ゲーム画面:**
– カードの表示
– スコアの表示
– タイマーの表示
– ゲーム開始/リプレイボタン
2. **ゲーム終了画面:**
– 最終スコアと経過時間の表示
– ゲームをリプレイするオプション
### 必要なAPIの処理内容
– (MVPではAPIは使用しない)
### 必要なDB構成
– (MVPではデータベースを使用しない)
### 設計詳細
– **Card コンポーネント:**
– カードの表示を担当します。
– 画像、裏面の表示を切り替えます。
– クリックイベントハンドラーを実装します。
– **GameBoard コンポーネント:**
– カードの配列を保持します。
– カードをランダムに配置します。
– カードのめくり、ペアマッチングのロジックを実装します。
– GameLogic.js から必要な情報を取得して、適切なカードを表示します。
– **Timer コンポーネント:**
– 時間を計測し、表示します。
– GameLogic.js から経過時間を受け取り、表示します。
– **Score コンポーネント:**
– スコアを保持し、表示します。
– GameLogic.js からスコアを受け取り、表示します。
– **Modal コンポーネント:**
– ゲーム終了時に、最終スコアと経過時間を表示します。
– ゲームリプレイのオプションを提供します。
– **GameLogic.js:**
– ゲームのロジックを定義します。
– カードの配列をシャッフルします。
– カードのめくり、ペアマッチングの処理を行います。
– スコアと経過時間の管理を行います。
– **LocalStorage.js:**
– ユーザーのゲームデータ（スコア、経過時間など）をローカルストレージに保存します。
### まとめ
この要件定義書は、記憶力ゲームのWebアプリのMVPの開発のためのガイドラインを提供します。この要件を満たすことで、ユーザーはシンプルな記憶力ゲームをプレイし、基本的な機能を楽しむことができます。今後、機能拡張を検討する際に、このドキュメントは基盤として役立つでしょう。
このように、Zoltraakはユーザーの入力内容から、概要、機能要件、非機能要件、その他要件を自動で生成します。アプリの全体像と詳細な要件事項がまとめられた、開発に必要な要件定義書が出来上がります。
2.Zoltraakで作成した要件定義書をもとにcreateでWebアプリを開発
Zoltraak.appでの要件定義作成
- Zoltraak.appにアクセスします。
- 「プロンプト」に作りたいアプリの名前を入れます。今回は「神経衰弱ゲーム」です。
- 「標準コンパイラ」にdev_akirappを選択します。こちらのコンパイラはアプリケーションの要件定義書を生成するものになります。
- 最後に生成を押すと要件定義書が生成されます。createで使うのでコピーして保管しておきましょう。
create.xyzでのアプリ作成
- create.xyz にアクセスしアカウントを作成します。
- 右上のNew projectからNew pageを開きます。
- その後に先ほど生成した要件定義書の文章を貼り付けてGenerateボタンを押すと、なんと3分ほどでアプリが出てきます。
- 右上のpublishボタンから好きなドメインを設定しましょう。
- publish pageを押して、再度publishボタンを押したらView liveボタンを押すと、動くWebアプリの完成です！
動作確認をして、もし不具合があれば要件定義書の内容を書き換えてみましょう！ 文章を変えるだけで、機能を追加することもできます！
3.作成したWebアプリをcreateで公開
createで生成したWebアプリは、createで簡単に公開できます。公開すれば、誰でもブラウザ上でそのWebアプリを利用できるようになります。
公開の手順は非常に簡単です。
createで生成したWebアプリpublishするだけで、すぐにWebサイトとして公開されます。URLを知れば誰でもアクセスでき、実際にWebアプリを体験できます。公開したWebアプリは、そのまま継続して開発を進められます。
createで生成したプロトタイプに機能を追加したり、デザインを改良したりできます。アプリの完成度を少しずつ高めていけば、
本格的なWebサービスに育てられる可能性があります。
Createで公開したWebアプリの紹介
先ほどご紹介した記憶力ゲームのWebアプリを こちらのリンク から公開します。
遊び方
このWebアプリは、カードを裏返して同じ絵柄のカードを見つける記憶力ゲームです。ゲームを開始するとカードがシャッフルされて配置され、カードをクリックすると裏返ります。同じ絵柄のカードが2枚裏返った状態になると、そのカードは除去されます。すべての絵柄のカードを見つけるとゲームクリアです。
ゲームクリア時には獲得スコアが表示されます。レスポンシブデザインに対応しているため、スマートフォンでも快適にプレイできます。ゲームオーバーになる制限時間も設けられており、ゲーム性が高められています。また、ニックネームを設定できるので、スコアを記録して自分の記録に挑戦できます。
直感的でシンプルな操作性と、ゲームルールを説明するヘルプ画面があるため、誰でも簡単に遊べます。楽しみながら記憶力を鍛えられる、面白いWebアプリです。
このように、createで生成したWebアプリは、実際に公開してユーザーに提供できる完成度を持っています。Zoltraakで作成した要件を忠実に反映しながら、ゲーム性や利便性、デザインなどの点でもブラッシュアップされています。
createで公開したwebアプリには、機能を後付けできる！
createで公開したWebアプリは、そのままさらに機能を追加したり改良を加えることができます。 例えば記憶力ゲームのWebアプリであれば、以下のような機能を追加できるでしょう。
- ランキング機能を追加し、ユーザー同士で記録を競えるようにする
- 難易度を設定できるようにし、よりゲーム性を高める
- 効果音や演出を追加し、ゲームの面白さを向上させる
- SNSでの共有機能を実装し、拡散力を高める
このように、createで生成したプロトタイプに機能を付け加えていけば、アプリの完成度が段階的に高まっていきます。アプリの改良を重ねながら、ユーザーの声も取り入れつつ、本格的なWebサービスに育てられる可能性があります。
まとめ：Zoltraakとcreateを使ったwebアプリ開発の魅力
Zoltraakとcreateを組み合わせることで、非エンジニアでもWebアプリの開発が可能になります。
Zoltraakで要件定義書を作成し、createにプロンプトを入力するだけでWebアプリのプロトタイプを短時間で生成できます。開発の効率化とコスト削減を実現でき、アイデアを素早くプロトタイプ化できるメリットがあります。
生成したWebアプリは create.xyz で簡単に公開でき、今後も継続して開発を進められます。
プロトタイプに機能を追加したり改良を重ねれば、本格的なWebサービスに育てられる可能性があります。Zoltraakとcreateによるローコード開発は、これまでエンジニアが独占してきたWebアプリ開発の領域に、プログラミング初心者が参入していくことになるのです。
