一度ログインすれば使いやすく、ログアウト後は他人に見られないマイページにしよう
今日手元に残るもの
再読み込みしても入り直さずに済み、右上にログイン中の表示名と残り時間とログアウトが出て、ログアウト後は戻るボタンでも中身が見えないマイページのトップ画面
時間の目安
最初の完成まで 20〜30分
終わりの合図
開けた・使えた・保存できた
この課題の10ステップを見る
01
今日はこれを作る
最初に、今日手元に何が残れば終わりかだけ見ます。全部を覚える必要はありません。
今日できあがるもの
再読み込みしても入り直さずに済み、右上にログイン中の表示名と残り時間とログアウトが出て、ログアウト後は戻るボタンでも中身が見えないマイページのトップ画面
02
材料をAIに渡す
下の材料を用意して、ChatGPTに入れます。
今回使う材料
Lv.111で保存した「マイページ」のログイン画面と教材用アカウントを、同じWorkで開いて続けます。
材料の入れ方前の完成物を使う
- 1上に書かれた方法で、前の完成物を用意する
- 2材料がそろったら、下のプロンプトを送る
Workが表示されるならそこで続けます。なければChatへ同じ内容を送って進めます。
ChatGPTの設定と詳しい使い方ファイル変更を何度も行うため、有料版がおすすめです。使える量はプラン画面で確認してください。
実際のファイルやコードを扱うなら、Codexがおすすめです。
03
ChatGPTに送るプロンプト
プロンプトは、ChatGPTにそのまま貼る指示文です。上に書かれた前の完成物を用意してから、下の文を送ります。
入ったあと、ページを読み込み直すたびに入り直すのつらい。入った状態を保つようにして。右上に今誰で入ってるかとログアウトのボタンを出して。ログアウトしたあとブラウザの戻るボタンで前の画面へ戻ろうとしても、中身は見えないようにして。しばらく触ってなかったら自動で切れる形にして、切れる前に一言出して。
04
AIの答えを確認して試す
最初から完璧でなくて大丈夫。まず一度、自分で動かしてみます。
1AIから出てくるもの
再読み込みしても入り直さずに済み、右上にログイン中の表示名と残り時間とログアウトが出て、ログアウト後は戻るボタンでも中身が見えないマイページのトップ画面
まず自分で試す
ログインしたあとブラウザを再読み込みし、入り直さずに同じ画面が出るか見る
ログアウトを押してから、ブラウザの戻るボタンを2回押して中身が見えないか目で追う
同じ画面を別のタブでも開き、片方でログアウトしてからもう片方を読み込み直す
右上の残り時間の表示を読み、切れる前の一言が出るところまで待つ
追加のプロンプト
当てはまるものだけ、上から順に送ります。
ログアウトしたのに戻るボタンで中身が見えたら
戻るボタンで中身が一瞬見えた。ログアウトしたら画面に何も残さず、ログイン画面へ戻す形にして。開きっぱなしの別のタブも、読み込み直したら同じように切れるようにして。
05
仕上がりをよくするコツ
気になるものを一つ選んで、ChatGPTに伝えます。
今誰で入っているか分からない
「右上に、ログイン中の表示名と、あと何分で切れるかを並べて出して」
勝手に切れて困る
「切れる2分前に「まだ使いますか」を出して、押したら延ばせるようにして」
ログアウトの場所が分からない
「ログアウトは右上に文字で置いて、押す前に一度だけ確認を出して」
06
やりがちなミス
見つけた数：0 / 5
当てはまる所を見つけたら、上のコツを使って直します。
これは合格・不合格を決めるものではありません。保存状態を確認しています。
07
ここまでできたら完成
AIの「できました」で終わらせません。実物を開いて使い、この課題の完成条件を確かめます。
再読み込みしても入り直さずに、同じ画面がそのまま出た
ログアウトのあと戻るボタンを押しても中身が見えず、ログイン画面に戻った
右上のログアウトを自分で押せて、表示名と残り時間も読めた
Workで作った物を保存するプロンプト
このログイン状態を保つ仕組みとログアウト付きのトップ画面を、完成フォルダの「マイページ」へ上書きで保存して。何分で自動で切れるかと、戻るボタンで中身が見えないことを確かめた記録も書き足して。
共通の保存メモChatでできた物は、自分で保存
Chatの返答欄にファイルができたらダウンロードして「完成」フォルダへ移します。文章だけなら、全文をコピーしてテキストやWordへ貼って保存します。保存した物をもう一度開けた時に「残せた」とします。
できたことを手元に残す
作ったものや気づいたことを、自分のメモに残しておきましょう。
08
自分の仕事なら
今作ったものを、明日の仕事で使える形に変えます。
まず社内で開きっぱなしになりがちな共用パソコンの画面を一つ選び、そこに自動で切れる時間とログアウトの置き場所だけを当てはめて考えます。
本物の顧客名、個人情報、社外秘の資料へ置き換える前に、会社のルールと閲覧権限を確かめます。
09
つまずいたところを整理する
どこまでできて、どこで止まったか。短い言葉で大丈夫です。
うまくいかなかった点をメモする
「やりたかったこと」「試したこと」「実際の結果」を並べると、次に試すことが見つけやすくなります。
メモは自分の端末へ。サイトへの質問の受付は終了しています。
10 / 任意
次に進みたい方へ
ここで完成です。続ける方だけ、下の文を送ります。
次にすること
同じ画面でも、入った人によって中身が変わるようにしよう
続けるための追加プロンプト
追加のプロンプト
誰で入ってるかは分かるようになったから、次はその人の依頼だけ出したい。まず台帳から、この人の依頼だけ拾ってトップに並べてみて。
進め方は3つだけ
- 1今使っているChatまたはWorkを、そのまま続ける
- 2下の追加プロンプトをコピーして送る
- 3出てきた物を見て、必要な所だけ一つ直す
今作った物の、ここを使います
今できた保護されたトップ画面とログアウトの仕組みを、2人目のお客様にもそのまま使います。
できるようになること
入った人ごとに、並ぶ依頼が変わります。
この内容を詳しく学ぶ教材
Lv.113「お客様ごとに、自分の情報だけが見えるようにしよう」