プログラミング作業音とひとりごと
よし、お願い中です。
いや、ただね、これ、マイクを向けられた人間の差がなのか、隠れてしゃばりなのか、分からないんですが、
余談を急に始めたり、プログラミングの作業スピードが上がってはないですよね。
楽しいから、ちょっとしばらくは続けてみようかなっていう。
プログラミング作業音とひとりごと。
ってことで、さあ、今日もプログラミングやっていきますか。
ということで、毎度なんだけれども、
何をやってたか、ちょっとね、思い出しつつ始めていくっていうのがね、あるあるなんじゃないですかね。
でも、なんか区切りだったんだよね。
区切りだったから、
まあそのあとどうするかは、ちょっといじってたページを見て思い出しますか。
招待する。
CSVファイルで招待する。
通常モード、上書きモード、ファイルを選択。
CSVファイルをチェックする。
とりあえずやってみますか。
そうだ。
ステップの、なんていうの。
ステップ1・2・3みたいな。
丸に数字を書いたパーツみたいなのを作ろうとしてたかな
で、恒例のチャットGPTさんへの依頼ですね
チャットGPTって書いちゃった
これがね、コツがいるんですよね
ステップ、ディスプレイステップ、ショーステップ
ステップでいこう
ステップってステップ図?
ステップスの通販、名詞、一続きのステップ
ステップスにしておきますか
これもプログラミングあるあるだったり
ちょっとあんま知らないですけど思想なのか
URLとか複数形?なんだろうな
記事一覧みたいなやつを
ポストとするかポストとするかとか
アーティクルズなのかアーティクルなのかとかね
命名規則は曖昧というか
どっちが正しいとかもないと思うんだけど
いろいろ作る技術、使う技術とか
チームとかによって変えてるんだと思うんだけど
僕はね、割と複数形のURLを使うんだけどね
たまに訪れるのが
不可算名詞みたいなね
え、これSつけられないじゃんみたいな
でね、結局統一できるんだけどね
でね、結局統一できるんだけどね
でね、結局統一できるんだけどね
でね、結局統一できるんだけどね
できないんですよね
っていう愚痴を言ってたら
チャットGPTに依頼ができてないので
ちょっと黙ります
手順を書く
手順を書くような作業で
進捗を表す目的です
デザイン性はね
色合いとか余白とかは言うんですけど
なんだ、細かいところを言わないで
チャットGPTのセンスにちょっと
任せてみますね
Nステップ対応
色はプライマリーから
現在のステップは
塗り系
伝わるのかな
塗り系
プライマリー
その他のステップは
アウトライン
その他のステップは
でも
チャットGPTの気持ちになりながら
ステップ1から3に収まりますっていう
前提のUIデザインと
ステップ100になるかもしれないっていう
デザイン
結構変わっちゃいますよね
ってとこで
ステップ4ぐらいまでが
9割
なので
ステップUIのデザイン検討
これちょっと明確な指示になっちゃったけど
なので
多いステップは
画面複数で
大きな切れで
横スクロールなど
で
がOK
一度に
画面内で
で
見えるステップ数は
画面幅の小さい
スマホでも
1から4ぐらいは見たい
それ以上が
横スクロールなど
これいけるかな
であとは絶対フィードバックなんだけど
えっと
あー
一旦ここまでしますか
何をしようとしたかっていうと
これ確か
宿泊サイトのリラックスとかだったかな
あのタブがたくさんあって画面外までタブがあるみたいな
ような見た目の時に
画面外右の方にこうスクロールして何かのタブを選択する
みたいな時に
選択中のタブがいい感じの場所にこう
保持されるというか
あの選択中のタブなのに画面の外にあって見えなかったら
ちょっと不具合っぽくないっていう
そのこまで一度に依頼しようとちょっと考えたけど
まずはそこまでは言わずに
お願いしてみます
以下補足要件を踏まえてください
よしお願い中です
いやただねこれやっぱなんだろう
マイクを向けられた人間の差がなのか
隠れてしゃばりなのかわからないんですが
余談を急に始めたり
余談じゃないけどやってることの解説みたいなことを
どうしても言っちゃって
プログラミングのなんだ
作業スピードが上がってはないんですよね
楽しいからちょっとしばらくは続けてみようかなっていう
とこなんですが
今はチャットGPTが
ゴリゴリゴリゴリ書いてくれて
あ終わった
早いね書き終わったところなんですが
基本的にはこういう時に待ち時間で喋ればいいかなと思って録音開始してるやつなんですよね
なのでちょっと喋りすぎです
反省中
実装例が
あなるほどね
ステップ1とか
表示する文言まで全て書いてくれてるんですよ
全部オリジナルで現在のステップを渡す
これをね
ちゃんと読み込めば
ちゃんと読み込むんだったら自分で書けよ
プログラミングのコード書けよっていう感じになるので
ざっくり見て
なんとなく
まあとりあえず
適用してみるかって思ったら
とりあえずコフペでね
入れて
どんな感じかで
見るんですが
見てみますね
ちょっと違う
えーっと
なんだっけ
CSV
ずっとCSV周りの対応をしていて
CSVでどうのっていうのの手順のね
今どこにいるんだろうっていうのが分かりやすくしたいってことをしてるんですけど
そのステップをね
とりあえず
文字で入れてたんですけど
デザイン的に
どっかに入れようという話でございまして
どうなるかなー
これがね結構
面白いんですよ
自分
作業的には自分で
チャットGPっていうのはこのチャット欄から
コード
エディタ
メモ帳みたいな
プログラミング用のメモ帳みたいなのに
貼り付けて
実際に画面見てみるんですよね
そうすると
うわーって感動する時と
ちょっと違いますみたいな
時が
あるんですよね
それがまた面白いという
ニッチなニッチな
楽しみ方でございます
さあどうなる
おーなるほどね
どんな感じになったかっていうと
めっちゃシンプルな
ボタンが並ぶみたいな
表示になりましたね
これはちょっとボタンなので
どう直そうかな
まあでもやっぱ
丸にするか
タブにして
タブにしたらタブの機能っぽいんだよな
表示だけ
ぽくしたいので
やっぱ無難な
こんな感じ
まるで数字入れて
右矢印
なんか不統合みたいな
やつを出して並べてあげるっていうのが
王道ですよね
PepUI
結局Googleっていうね
インジケーター
線で繋げるのも多いか
まるでチェック
これね確かに
入力確認完了
ぐらいだったら
ほんとわかりやすいというか
証言しやすいですよね
入力確認完了で
終わったのにチェックとか
ちょっとステップが多いやつだと
4分の何みたいな
なるほどね
結局どれにしようかとか
どれがいいかっていうのは
考えてしまうっていうね
これ何のアプリだろう
ペンタゴンブログ
わかんないけど
終わったやつの数字とかもはや消して
1234みたいなのが
基本ピンク系
サーモンピンクみたいな色なんだけど
終わったステップは緑のチェック
よくある完了みたいな
のにも変えちゃうっていう
あ、でも文字はあるのか
基本情報1
ステップ2
基本情報2
3
10色
4
入力確認
あ、で完了のステップはないんだ
しかも
じゃあ
これを
元のもらったコードを
もう一回貼り付けて
ステップは数字だけで
ブラッシュアップ以来です
ブラッシュアップ
ちょっと急に録音できてるか
心配になったので
チェック
録音的にはもう16分ですね
大体1時間ぐらい取って
どんぐらい無言のところとかを
カットするかっていう
配信になってますね
ブラッシュアップ以来です
OK
ステップは
えーと
ステップのUIは
円形に
アウトラインの
円形
正円
正円っていうのは
正しい円
正円に
数字が書いて
あるもの
に変更
2
円形に数字が書いてある
UI
UIの下に
左右中央で
で
ステップの説明
テキスト
を入れる
これは2にします
2
で
各
ステップが
連なるUIは
UIとして
円形に数字が書いてあるUI動詞を
上下中央に動詞の線を線で繋げる
上下中央に横線で繋げる
だんだん何言ってるか
自分でも分かんなくなってくるんだけど
意外と頑張ってくれる
こうやってさっき言ってた
終わったやつですよね
終わったやつっているかな
こんな
おめでとうみたいな
難しい
あとはアウトライン
この枠で
加工やつと塗るやつを
今と
終わったやつをどう表現するかっていうね
なるほどね
グレー系で入れて
今のやつでだけ
色が塗られてるっていうのとか
塗りかアウトラインかの差だったりとか
いくつかはありますね
まあいいか
現在のステップを
ああそういうことか
ステップUIのデザイン詳細
さっき見たやつは
未来のやつは
グレー
終わったやつは塗り
今のやつはアウトラインっていう
ちょっと複雑ですよね
シンプルに
シンプルでいいよな
確かにこれ悪い例として出てんじゃん
塗りアウトライン
グレー
3パターンあるみたいな
現在のステップを
塗りプライマル
ステップ説明テキスト
グレーの塗り
そういうことか
現在
と
完了した
ステップを塗り
未来のステップを
グレーの塗りする
これでいいか
どうだろうな
チェックマークとかつけてもね
ちょっと
ちょっと難しいというか
いや今
サイトでね
こういう
丸に数字でステップを書いてるのと
5分の4でメーター
円形でこう塗られていくみたいな
のがこう溜まっていくみたいな
円形のゲージ
で何やるかを
ちょっと大きめに表示してるUIと比べてて
こっちのがいいよねっていう
話を書いてるんだけど
いやこれ人間がどっちが
分かりやすいかっていうのは
難しい問題だなと思って
なんだ
例には
ふさわしくない気がしちゃうんだよね
その
ステップ1234とかを
横に並べるやつは
全体像が分かりやすい
と今どこにいるかがやっぱ分かりやすい
だけど
左側は
左側
間違えた
円形のゲージで何分の何ってやって
やることをちょっと大きく書くやつは
今やるべきことは分かるんだけど
3分の1ですって言われて
まあまあ
進めっかと思って3分の2で
えっこれ今書けないというか
こんなに書くのみたいな
みたいなのが
進まないと分かんなかったりするから
これどっちも最適解ではない気がするんだよね
良い悪いというか
メリデメあるし
聞くことがどんなことなのか
入力すべき内容が想像しやすいものなのかとか
それによるなーっていう
で円形のゲージ側で行くんだったら
全体像がパッと確認できるボタンというか
仕掛けはやっぱちょっと欲しいです
個人的には
だからこれこそ
一般的に感じることなのか
僕の感覚なのかが分からないんですが
仕事もそうだけど
全体像をこう捉えに行けないものが
めちゃめちゃ苦手なんですよね
なんだろう
全体の中の一部の仕事を振られる
っていう時に
そこのポイントだけ
上手く把握して
引き取って
できる
っていう人もいると思うんですけど
そこの先とか
この言い方すると
仕事ができる風になっちゃう
嫌なんですけど
単純に性格上
全体を把握したりとか
その目的みたいなところまで見えないと
やる気が皆無になる
買い物的なものもそうですね
このUIに出てきた時も
このサイトやめようみたいな
なっちゃうんで
どうしようかな
ちょっとチャットGPTと相談します
すみません
がっつり方針を変えずに
ちょっと分数の方にしてみますか
2
円形のゲージ
プライマリーで塗られる
ステップを表現
現在のステップを表現
N分の
NとZ分の
円周が塗られる
どっちも言わなくてもさすがに
分かると信じて
塗られる
円形の
円形のゲージの
中
重ねて
上下中央
何分の何
数字分のN
を表示
現在のステップを
大きめな文字で
プライマリーで変わる
円形のゲージの右側
すべてに
このように
ステップの
説明テキスト
具体的には
ステップタイトル
タイトルと
説明文
タイトルは
通常の大きさで
説明文は
小さめグレー文字
テキスト
グレー500
ここまで読んだったら
自分でやれっていうのが
多いんですが
ちょっとまた
チャットGPTに依頼してから
一瞬雑談挟みますね
適切なアイコンを
設定ください
一番右端に
アイコンを選び
押したら
ステップ
全ステップの
概要
タイトルが並べ
タイトルが
ステップ
単語と
単位の
モーダル
ツールチップ
的に並べる
UIの表示
×ボタンを用意する
×か
本番は
コンフォメント
ガイドの
閉じる
コンパーメントする
これがね
意外と
ちゃんとやるのが
割と最初から
汎用パーツを
想定して
作るっていうのは
結構やってますね
これは
CSVがどうのっていう
手順で使う
パーツなんだけど
違う機能でもこれは
確実に使うし
使えた方が
結果自分が楽だよねっていう
とこなんだけど
今みたいにね
さすがに
結構
細かめ
細かめというか
オーソドックスすぎない
UIをお願いしちゃうと
さすがに
おかしな
返信が来るんじゃないかな
どんぐらい修正が必要なんだろうな
ていうのも
楽しみにしながら
貼り付けですね
今もうコードが書かれました
元のやつはステップにするときに
ステップ1、ステップ2とかを全部ボタン的に並べるだけだったやつなんですけど、
どのくらいやったかな、それが25行くらいさっくりしたコードで、
次が来たのが、その元のやつはほぼ使わず、
57行が今この待ち時間、ちょっとカットしちゃってるかもしれないけど、
ただ待ったら出てくるっていうね。
言ったことがちょっと違うけど、
ちょっと違うし、もうだらが閉じれないっていうトラップはあるけど、
なんかそれっぽいのが出てきましたね。
これ話しながら本当は見せたいな。
見せたいけど、まあまあ。
これですよ。
タイプステップ、ステップス、
カレントステップ2、これを2分の2説明に、
いいねー。
これで適当な文章を入れないと。
長い文章を入れないとね、崩れがちですからね。
どうなの?ちゃんと開業されている。
ちゃんとなのかわかんないけど。
でもパソコン推奨なんだよな。
まあいっか。
アイコンと余白、余白は自分でつけろって話か。
すっぽいて。
すっぽいて。
余白つけない。
余白とってないからね。
なんて言うんだろう。
パーツ自体にその外側の余白を指定するのはなんか、
アンチパターンなんだろうなと理解してるんだけど、
そのパーツを配置する親って言ったりするんだけど、
の方で余白を指定するのか、
まあ外側の余白を指定するのはいいだろうなーって、
思う。
思うんですけど、余白つけないで表示するときとかないからね、実際。
あ、これは手動でやってます。
MY4、MY4つけるだけなんですけどね。
MY6ぐらい。
まあそれは。
トラックパッドの充電が切れます。
えーどうしよう。
今すぐ充電してください。
充電器を持ってこよう。
で、
マイクを外しちゃ駄目だから、
パソコンの充電を。
パソコンの充電を。
あ、間違えた。
もう。
あるあるなんですけど、
モニターの外部ディスプレイ的なパソコンにつなげて2画面にしたりするじゃないですか、
これの接続って、
結構悪くないですか。
という、ただのグッチなんですが。
えーと。
これが。
出ました。充電ができていない。
これもあるあるなんですけど、特にappleのやつかな純正、
MACとか、
あ!
何でもいいや。
なんかこれと相性が悪くていい。
なんかこれと相性が悪くていい。
投稿者が求めるフィードバック
充電が始まらないみたいなのありません?
今マックに直じゃなくて
そこにつなげてる変換ケーブルみたいなやつに
つなげたんですけど
これじゃ充電がされないので
どうすればいいんだ
マイクを一回外すのは嫌だから
ほぼ諦め?
違うか
ほぼ諦めというか
普通に
電源アダプター持ってこいって話ですよね
電源アダプター
無理だな
いやありました
めっちゃ長い充電器があるんで
ちょっとギリギリですが
しょうがないということで
これでいきます
やばいな
ステップしかやってないし
ステップ
終わってないし
ステップそんなこだわるところじゃないのに
いや職人気質
というか良くないんですが
職人みたいに
こだわっちゃうんですよね
ここからはちょっと手動でやるか
手動でやるとめっちゃ黙る率が高いんですけどね
ステップリングス
ステップリングス
めっちゃすげえかな?
いやちっちゃくないけど
くせる
やっぱね
全角
半角でいいか
まあいいんじゃないでしょうか
そうそうアイコンだねあと
アイコンはさらなるブラッシュアップ
ライフじゃなくて
ブラッシュアップじゃなくて
依頼です
まあアイコンは
ブラッシュアップライフ
リフト表示
オイル
アイコンで
プレイ
でOKです
しかもブラッシュアップライフ
1個目なのに2って書いてある
1
2
ここの雑な依頼ですよ
ここも
ここも
自己肯定感の獲得
えーと
今月ゆうてると
本気のモーザルじゃなくていいんだよな
本気のモーザル
小さく
便のコンポーネント
上に
他の
領域
覆わなくて
です
さらに
ネットコミュニティの盛り上がり
雑な
雑な依頼を
これでね
どこまで行けるかっていうのと
あとは
そうだ
このメニューというか
を表示したら
一生
閉じれない
っていう状態
になっちゃってるんだけど
まあいっか
次の
依頼で
リードバックします
よし来ました
帰ってきましたよ
全コピペ
ちょっと短くなった
どうなるかな
えっ
えっ
いろいろ変になっちゃった
いろいろ変になっちゃったんだけど
そういう時は
戻ればいい
怖すぎ
言ったとこだけ
コピペしてもやるか
全コピペしたら
戻ればいい
特に変更お願いしてない
お願い
変更お願いしてないところが
変わっちゃって
結構ちゃんと言うんですけどね
指摘箇所
こういう一部修正の時
特になんだけど
修正と
言及した箇所以外は
変更しないでください
みたいな
だから
でも変わっちゃってるんで
言及したところを
どうなってるか
見るっていう
やっぱメニューのやつ
いいね
どこに出してるんだ
そうですよね
そうですよね
relative
これで
どこに出る
いいね
結局消えないんだけどね
これ
開いたが最後みたいな
普通じゃない
できてないんだ
動かなくなってった
なるほどね
表示位置の修正
この部分も
クラッシュアップ
以外です
1
表示位置の
以外です
今は
ボトム0ライト0
に表示して
今は
下に
下に下げたい
つまり
親の要素
のパターン
が
メダル
の
状態に
したいです
つまりとか
言い換えるととか
2回同じこと言ってると
より伝わりやすかったりしますね
だったら自分で書いた方が
早いっていう
可能性は置いておいて
でもう一個が
トグルモード
パターンの以外に
どこでも
この
親
トーレントなど
ウェイクしたら
もう
セット
ショーモーダル
で
技術ブログを書く
ブジるようにしたいです
回答は
コードの差分とわかりやすい解説を
お願いします
失礼
今久々にというか
めっちゃ
チャットGPTの回答を
凝視しちゃってましたね
結構変わってるっぽくて
上の方から
テンプレートまでを
こうやって
とりあえずね
ボタンカーを
ボタンカーを
ボタンカーを
あともう一個あるあるなのが
省略とかを
既存コードが変更なし
とかコメントアウトで入れてくれるんだけど
気づかず全コピーして
消えちゃうっていうね
まっすぐ気づくんだけど
これで
さあどうなる
メニューはどこに出るんだ
おー
でも
やっぱ消えない
うーん
なるほどね
もうめんどくさいんで
どこが職人だってとこなんだけど
いやこれはね
100パー
趣味だったら
いいんだけど
デブ
relative
デブにするのをあえて
ちゃんと×ボタンを
おとなしく配置するように
します
ほんとは
ちゃんとやりたいんだけど
時間的にね
ここめっちゃ今
普通に自分で
やっちゃってますね
自分で
書けるんですけど
プログラミング
プログラムのコーディング
HTML、CSSとか
チャットGPTがすごいんすよね
感動的な
あーそういうことね
やっぱりパーシティが
100パーセント
表示器問題がOKで
閉じればね
結局ボジル
バグボタンになっちゃう
これ聞いてないだけなのかな
まあちょっと
次の修正
次は依頼
さらに修正依頼です
ちょっとバズっぽいので
ブラッシュアップじゃなくて
この間の配信
聞いてる方
聞いててもこれ聞いてないもんな
こういう話でも
何回でもしても多分
何回やっても届かないっていう
とこだと思うんですけど
また型問題ですね
2
なんだっけ
小ノーグルが
ブルーの
オープンを
押すボタンに
切り替えてください
バッシュ
OK
回答押しもらうと
たぶんそろそろ
録音が1時間
すごい1時間10秒だった
へー
面白い
ぼちぼち終わりにしようかなと思うんですが
だから今日はひたすら
ステップがどうのっていう
のを
やってましたね
イン書きよっていう
ふふふふ
まあまあまあ
こんな暇ありますよ
これこれいい
これがやはりね
マウスダウン
さあ回答が来たので
いきますよ
コッペ
コッペの範囲を確認してコッペする
これのプロになってきた
えーでも間違えてる
なんで
GPT-4の圧倒的な実力
ボタンボタンショーモータル
ボタンクリック
ボタンクリック
ボタンクリック
ボタンクリック
えーなんでだ
dvdv
確かになんか
1階層、辺
あーここ
M
ボタンのところだけ
とりあえず、これじゃエラーにならないね。
変わってんのかな?
変わってんのかな?
Mission Modeは&&の中だけ。
これでいけんのかな?
よいしょ。
×ボタンに変えてるやつなので、
×ボタン閉じたらそりゃ閉まるよねっていう話にして、
お!×ボタンも入れたけど、
どこでもちゃんと閉じるようになった。
なんで?
ああ、そういうことか。
位置が変わっちゃうんだ。
Mission Mode位置。
16?
なんかね、同じサイトのというか、
アイコンのシリーズでも、
アイコンによってサイズが違うから、
アイコンを押したら切り替えるってやるとね、
ずれたりするんですよね。
っていうのを置いといて、
ここまでで、
どうしようかな。
ステップがちゃんと切り替わるように、
するか、
しないか。
お!×ボタン。
とりあえずね、
これも、
Invite Info。
やばいやばい。
やばいやばい。
何がやばいんだっていう話なんですが、
こう、こうで、
慎重にこう。
いや、
どこを表示?
どこを表示?
まあいいか。
戻す、戻し、戻し、戻して。
戻して、戻して、戻して、戻して、戻して。
これでよくて。
まあ、いったんはね、
これでいいよね。
カレンダーステップ。
いい気はするんだけど。
これなんかバグってる。
バグっているのか。
インデントが変だなと思って。
難しい。
そうだよね。
まあ、こんなことです。
こんなこと。
まあ、こんなとこですかね。
1時間、今日、録音もしてるので、
ここらで切り上げたいと思います。
ここまでね、
再生しといた、じゃなくて、
今、聞いてくれてる人、
もし、一人でもいたら、
めっちゃ嬉しいです。
一緒に作業してる感じですね。
はい。ということで、
今回は以上なんですが、
僕はね、一回といろいろなポッドキャストを他で配信していたりとか、
あとは、今、これサービス作ってる。
まあ、その話はいっか。
Xとかもやってますので、
ぜひ、フォローいただけると嬉しいです。
とにかく、概要欄にいろいろ貼っとくので、
まあ、寝る前の方は明日でも、
作業中の方は休憩中にでも、
ちょっとね、覗いてみていただけると嬉しいです。
はい。ということで、今回は以上とさせていただきます。
最後までお聞きくださり、ありがとうございました。
ではでは、おやすみなさーい。
