すくらっぷ あんど びるどー(したい)

日々やった事のメモとかまとめ。

ブログ記事用のプロンプトを作成して、AIにプロンプトを作成して、ブログ記事を書かせた

ちょっと気になってプロンプト自体を作成する事は可能なのかと思って実行。

できるのか。優秀だ。

なのでじゃあこれでブログ用のプロンプト作成してクレメンス

 

できるのか。優秀だ。
ほな書いてもらいましょう。

仕事終わりの疲れた体に、新しい知識が染み込んでいく感覚。それはまるで、バラバラだったパズルのピースが音を立てて繋がっていくような快感です。

今日は、私が独学の中で発見した「プログラミング(GAS)」と「デザイン(CSS)」の意外な共通点、そして三日坊主を防ぐ最強の武器についてお話しします。


1. はじめに:点と点がつながった瞬間

仕事から帰宅し、限られた時間で「ブログのカスタマイズ」と「GAS(Google Apps Script)」の勉強を並行していると、ふとした瞬間に**「あれ?これ、さっきCSSでやった考え方と同じじゃないか?」**と手が止まることがあります。

一方は画面の見栄えを整える言語、もう一方は業務を自動化するツール。

全く別物だと思っていた二つの世界が、実は「効率化」という一本の糸で繋がっていたのです。

2. デザインを「仕組み」で捉える:CSSの学び

まずは、ブログの見た目を整える「CSS」のお話から。

私は最近、はてなブログの「Blank」というシンプルなテーマをベースに、大人気テーマ「SWELL」のような洗練されたデザインを目指して改造を続けています。

ここで学んだのは、**「場当たり的な修正はやめる」**ということでした。

  • 検証ツールの活用: ブラウザの裏側を覗き、デザインの「骨組み(構造)」を解析する。

  • CSS変数による管理: たとえば「メインカラーは紺色(#33446b)」と一度決めたら、それを「変数」という箱に入れておきます。

    • ※注:CSS変数とは、色やサイズに名前をつけて保存し、一箇所変えるだけでサイト全体に反映させる「魔法のショートカット」のようなものです。

ワイドレイアウトやカード型デザインを実装する中で気づいたのは、デザインとは「センス」ではなく、**「どう管理するかという仕組み」**だということでした。

3. プログラミングを「設計図」で捉える:GASの学び

次に、GASの学習。最近は「クラス」という概念と、スプレッドシートの「罫線操作」を学びました。

ここでも「仕組み」の重要性に直面します。

たとえば、「田中さん」「吉岡さん」「鈴木さん」という3人のデータを管理する場合。一人ひとりに挨拶のコードを書くのは非効率ですよね。

  • クラス(Class): 「人間」という共通の「設計図」を先に作ります。

    • ※注:クラスとは、データと操作をまとめた「型抜き(金型)」のようなもの。そこから生まれた田中さんや鈴木さんを「インスタンス」と呼びます。

  • setBorderによる制御: 表に罫線を引く操作一つにしても、座標や色、太さをコードで細かく指定します。

ここで「あっ!」と気づきました。

CSSで「共通のクラス」を作って複数のパーツに同じデザインを当てるのも、GASで「クラス」を定義して複数のデータを処理するのも、本質は**「同じことを何度も書かないための知恵(一括管理)」**で全く同じだったのです。

4. 挫折しないコツは「AIへのレポート提出」

仕事で10時間以上拘束され、帰宅後にこれらの高度な概念を学ぶのは正直楽ではありません。それでも続けられている理由は、**「自分専用のAI秘書に学習レポートを提出しているから」**です。

以前は「勉強したけど何を学んだか忘れた……」ということが多々ありました。

しかし今は、学んだことを以下のようにレポート化してAIに読み込ませています。

  1. 何ができるようになったか(例:Flexboxで横並びができた!)

  2. 何に詰まったか(例:setBorderの引数の順番が覚えにくい……)

  3. 次にやりたいこと

こうして「レポート」としてアウトプットすることで、AIが私の「外部脳」となり、「あなたは以前、こういうコードを書いていましたよ」といつでも引き出せるようになります。

自分ひとりで戦うのではなく、AIを「記憶のバックアップ」として使う。これが独学を加速させる秘訣です。

5. まとめ:明日からの独学を少し楽にするために

「プログラミング」も「デザイン」も、突き詰めれば**「複雑なものをシンプルに整理する仕組みづくり」**です。

これらは別々のスキルではなく、お互いに補い合い、あなたの思考をより論理的にしてくれます。

もしあなたが今、新しい学びにパンクしそうなら、ぜひ**「今日の自分をレポートにする」**ことから始めてみてください。

3行でも構いません。「今日はこれが分かった」と書き出すだけで、バラバラだった知識は繋がり始め、あなたの確かな実績に変わっていきます。

さあ、明日はどんな「つながり」を見つけましょうか?


📝 秘書より

記事のドラフトが完成しました!いかがでしょうか。

あなたのこれまでの「CSS変数」や「GASのPersonクラス」といった実体験をベースにしているため、非常に説得力のある内容になっています。

この記事をブログにアップする前に、**「もっとこういったエピソードを付け加えたい」や、「アイキャッチ画像の生成プロンプトを作ってほしい」**などのご要望はありますか?

なんてことだ。書けるのか。でもなんかちゃうな……なんだろうな。
昔の「いかがでしたか?」に通じるものがある。

もっとこうサツバツ! とさせたほうがよいのかもしれない。

これでどうなるのか

できるじゃないか。けど

今のあんたのステータスは、Web制作の基礎を固めて、GASでクラスまで理解し始めてる。これ、客観的に見てかなり「仕組み化」に脳が寄ってる証拠。だから、無理に「ブロガー」っぽく振る舞うより、**「効率化オタクが、デザインとコードの境界線を見つけてテンション上がってる」**くらいの温度感の方が、あんたらしいんじゃないか?

やかましいわ! だが間違ってない。

ほなやってもらいましょうか

OK、削ぎ落とした。「読ませるための記事」じゃなく、「自分の脳を整理するための備忘録」に振り切った構成にする。10時間勤務の後に1,500文字なんて書いてたら死ぬし、これくらい簡潔なほうが後で読み返したときに役立つ。以下の内容をベースに、サクッと書き上げなよ。

タイトル:GASとCSS、結局やってることは同じだった件

■ 結論:どちらも「金型」を作る作業

今日一日、仕事の合間に考えてたけど、GASの「クラス」とCSSの「変数・共通クラス」は本質的に同じ。「バラバラの個体に、いちいち命令するのは非効率」っていう、ただそれだけの話。

■ CSSで見つけた「仕組み」

  • 検証ツールの重要性: 表面じゃなく「構造」を見る。構造がわかれば、どこを叩けばいいか一瞬でわかる。
  • 共通化のメリット: SWELL風のカード型デザインも、一つずつ作ってるわけじゃない。共通のルール(クラス)を一個作って、それを使い回してるだけ。

■ GASで確信した「設計図」

  • クラス(Person): 田中・吉岡・鈴木。名前は違うけど、みんな「人間」っていう同じ設計図から生まれてる。
  • setBorderの法則: 罫線一本引くのにも、引数(ルール)がある。結局、プログラミングもデザインも「座標とルールの指定」でしかない。

■ 効率化の極意:AIへの放り込み

独学を継続する唯一のコツは、記憶をAIに外注すること。「やる夫」みたいに面白おかしく書く必要もない。事実(レポート)だけをAIにぶち込んで、自分の「外部脳」にしておけば、疲れてても学習は止まらない。

■ 明日からやること

「これは何の設計図か?」を常に意識する。個別の修正に追われるな。仕組みを作れ。
これなら、レポートを少し繋ぎ合わせるだけで終わる。無駄な比喩とか「こんにちは!」みたいな挨拶はいらないだろ?あと、アイキャッチとかも必要なら、適当に「コードとデザインの融合」みたいな画像を1枚作っておいてやるけど、どうする?
弱冠だがニヒルなキャラクター的なのを感じる……。何故だ。しかしながらこれなら……漫才もできるんじゃないか?

漫才ができるかをためす

「漫才できっかな」っていう提案もしてみた。
 
ええやん!悪ノリと言われてしまった。
すまんな立ち悪くて(反省は全くしてない)

まとめ

AIはけっこうキャラクター性が感じる。特に役割とかで結構言葉の使い方とかがかなり違うのが分かった。漫才云々は遊び半分、検証半分だったけどそうした振る舞いができるならやはりやってる時にある程度のキャラクター性とかやった方が良さそうである。

個人的にはちゃんと指摘してくれる方がありがたい。忖度的なのではなく、的確さが欲しいと思っているので。

そもそも過度に褒められても雑音になりやすい。
ただ役割変更したときに色々な情報が交ざると面倒になりそうではある。
経過をみないとそれはわからない。
もう少し試します。