ChatGPTを使って
ノーコード開発してみた
富士通クラウドテクノロジーズ
佐々木 大樹
目次
自己紹介
ニフクラ mobile backend
Monaca
構成
ChatGPTによるコード生成
実行(パート1)
修正
実行(パート2)
所感
自己紹介
佐々木 大樹
岡山県生まれ、28歳。
富士通クラウドテクノロジーズで
企画/デザイン制作を担当。
最近たまごっちを買った。
会員認証
データベース
プッシュ通知
ニフクラ
mobile backend
スマートフォンアプリ向け
クラウドサービス
弊社サービス
mobile backendと
簡単連携!
iOS / Android向けのアプリを
同時に開発可能
Web技術(HTML等)を用いた開発
Monaca
クロスプラットフォーム
開発環境
パートナーサービス
構成
ChatGPT上でMonacaとニフクラ mobile backendを連携させるコードを生成します。
これで、プログラミング作業なしでアプリが作れる!
→実質ノーコードでは????
ChatGPT
コード生成 クラウド連携
Monaca
ニフクラ
mobile backend
ChatGPTによるコード生成
以下ルールに従い、プログラミングを行ってください。
==成果物==
・Monaca上で動作するタスク管理アプリ
・ファイル構成は以下です。
・index.html
・app.js
・style.css
==使用言語==
・HTML
・JavaScript
・CSS
==前提==
・ニフクラ mobile backend JavaScript SDKは導入済みとする
・単一のファイルで動作し、JavaScriptでdisplayプロパティを制御し、画面遷移を擬
似的に再現するものとする
生成されたコード(HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>タスク管理アプリ</title>
<link rel="stylesheet" href="style.css">
<script src="https://js-sdk.appknobs.io/v3/ncmb.min.js"></script>
</head>
~以下略~
生成されたコード(CSS)
body {
font-family: 'Arial', sans-serif;
}
button {
margin: 10px;
}
ul {
list-style-type: none;
}
~以下略~
生成されたコード(JavaScript)
// タスク一覧とタスク追加画面の要素を取得
const taskListView = document.getElementById('taskListView');
const addTaskView = document.getElementById('addTaskView');
// ニフクラ mobile backendの設定
const applicationKey = "YOUR_APPLICATION_KEY";
const clientKey = "YOUR_CLIENT_KEY";
const ncmb = new NCMB(applicationKey, clientKey);
const Task = ncmb.DataStore('Task');
// タスク一覧を表示する関数
async function loadTasks() {
~以下略~
実行(パート1)
エラー:Uncaught ReferenceError: NCMB is not defined
修正
index.htmlの9行目
<script src="https://js-sdk.appknobs.io/v3/ncmb.min.js"></script>
↑↑がnot foundになっている。
プロジェクト内のncmb.min.jsにつなぎこむ。
<script src="./components/ncmb/ncmb.min.js"></script>
に修正。
実行(パート2)
できた!!!!
所感
・1行修正するだけで動くアプリが作れた!!!
・タスクを完了させる機能はなかった
・CSSで最低限の装飾もされていた
・ノーコードだ……。
→ChatGPTはやっぱりすごい
ありがとうございました!
よき開発ライフを!

弊社サービスを使って ノーコード開発してみた.pdf