自分の名前・色・アイコンで、アプリの最初の画面を動かそう
今日手元に残るもの
自分のアプリ名・色・アイコン・見出し・サンプルを反映した起動画面、変更前後、利用環境・SDK互換性、現在状態バッジ
時間の目安
最初の起動まで 20〜35分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
自分のアプリ名・色・アイコン・見出し・サンプルを反映した起動画面、変更前後、利用環境・SDK互換性、現在状態バッジ
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
APP-02の三画面設計と、選んだPWA・プレビュー・ネイティブの開始パックを使います。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
教材のスターターを実際に起動して、自分のアプリ名、見出し、色、アイコン、サンプルの項目へ変えて。色は「落ち着いた青」くらいでいい。どこで動いてるか、PWA、プレビュー、シミュレーターを画面にちゃんと出して、まだスマホへ入ったことにはしないで。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
自分のアプリ名・色・アイコン・見出し・サンプルを反映した起動画面、変更前後、利用環境・SDK互換性、現在状態バッジ
自分で試すのは、これだけ
開始コマンドまたは開く手順で自分で起動する
アプリ名・見出し・色・サンプルを一つずつ変える
変更前後を並べ、再起動後も変更が残るか見る
現在状態バッジが実際の環境と一致するか確認する
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
起動しない
「表示されたエラーを省略せず読み、環境・SDK・依存のどこかを一つずつ確認して」
色が読みにくい
「背景と文字を実画面で見て、薄すぎる色を濃くして」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
自分の環境で起動画面を開けた
五項目の変更前後と再起動後を確認した
現在の実績がPWA・プレビュー・シミュレーター等の正しい名称で表示された
Workで作った物を保存するプロンプト
起動するソース、変更前後、環境とSDK確認、現在状態バッジを「03_起動する自分版」に保存して。まだできていない導入状態も残して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
会社用に見せる時も、社名やロゴを入れる前に利用許可を確認し、教材名で起動まで通します。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
追加・チェック・編集・削除・保存を一つずつ動かそう
続けるための追加プロンプト
追加のプロンプト
このアプリに、まず追加とチェックを動かして。次に編集、削除、閉じて開いても残る、を一つずつ足して試そう。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
動いた起動画面と三画面設計を壊さず使います。
できるようになること
見た目の試作が、毎日使える基本操作と端末内保存へ進みます。
この内容を詳しく学ぶ教材
APP-04「追加・チェック・編集・削除が動く、自分用アプリにしよう」