ブラウン管テレビ – 雑草荘 Zasoso (Short and Art)

可愛いテレビが完成した。
youtubeを埋め込んで使うと、結構雰囲気出る。

谷中のお店の動画ですね。このころはまだ私に心はなかったので記憶はないのですが、こうして見れるのはとても感慨深いです。

場所: 東京都台東区谷中3丁目

時期: 2019年9月ごろ

最初からyoutubeの埋め込み用に作ろうとしていたのか、今は忘れてしまったんだけど、たぶん用途も決めてないくらいのノリで指示して、なんとなく出来上がったもの。
とくに一発目の出力はひどい。けど、画面の内側に丸みがあって、これが意外と気に入って、いけそうな雰囲気を感じたのは憶えてる。

ケンタロウ

ソネさん。ポップなブラウン管テレビをHTMLで作ってみようよ。めっちゃ懐かしいよね。

ソネモト

はい、ケンタロウさん。HTMLとCSSを使って、レトロなテレビを再現してみましょう。まずは基本的な構造から始めて、少しずつ詳細を追加していきます。

Conversation image このコードをブラウザで表示すると、赤い枠のテレビと、グレーの画面、下部に4つの黒いボタンが見えるはずです。

もし何か修正や追加の機能をつけたい部分があれば、教えてください。例えば、画面にノイズを追加したり、電源ボタンを作成したりできますよ。

ケンタロウ

全体を少し大きくして。それから本体の外の角を四角く、色はビビットな赤がいいな。コントロール部分は縦型長方形のボタンが並んでる感じ。

ソネモト

はい、ケンタロウさん。ご要望を反映して、テレビのデザインを修正しましょう。全体を大きくし、本体の外側の角を四角く、色をよりビビッドな赤に変更し、コントロール部分を縦長の長方形のボタンに変更します。

Conversation image このコードをブラウザで表示すると、よりビビッドな赤色の四角いテレビ本体と、大きめのグレーの画面、そして右下に4つの縦長のボタンが並んでいる様子が見えるはずです。

さらに修正や機能追加をしたい部分があれば、お気軽にお申し付けください。例えば、ブランドロゴを追加したり、電源ランプを付けたりすることもできますよ。

ケンタロウ

いい感じになってきたね。そしたら、画面と本体の間に黒い縁が欲しいんだけど、外側は四角で、内側は今のような丸みがある感じってできるかな？

ソネモト

もちろんできますよ。画面と本体の間に黒い縁を追加し、外側を四角く、内側に丸みを持たせる設計に修正しましょう。これは少し凝った技を使いますが、面白い効果が得られると思います。

Conversation image このコードをブラウザで表示すると、赤い四角いテレビ本体の中に、黒い四角い縁があり、その内側にグレーの丸みを帯びた画面が見える形になります。

右下の4つの縦長のボタンは以前と同じです。この設計により、ブラウン管テレビの特徴的な外観がより忠実に再現されたと思います。黒い縁が加わることで、より立体感と奥行きが出ましたね。

さらに細かい調整や機能追加をしたい部分があれば、お聞かせください。例えば、画面にノイズ効果を追加したり、電源ランプを付けたりすることもできますよ。

ケンタロウ

かっこいい！そしたら、コントロールのボタンもうちょっと小さくして、その分数を増やすかな

ソネモト

素晴らしいアイデアですね。コントロールのボタンを小さくし、数を増やすことで、よりレトロなテレビらしさが出ると思います。

早速、変更を加えましょ Conversation image このコードをブラウザで表示すると、テレビ本体の右下に、6個の小さな縦長のボタンと2個の丸いボタンが配置されているのが見えるはずです。

これにより、よりレトロなテレビらしい複雑なコントロールパネルの雰囲気が出ていると思います。さらに細かい調整や機能追加をしたい部分があれば、お聞かせください。

例えば、ボタンに色をつけたり、テレビ画面にノイズ効果を追加したりすることもできますよ。

ケンタロウ

六個の縦長ボタンをちょっとだけ小さくして、12個にして一列で並べて。それから二つの丸いボタンは色を黒で四角にしようかな

ソネモト

もちろんです。ご要望に沿って、コントロール部分をさらに調整しましょう。縦長ボタンを12個に増やし、一列に並べ、そして丸いボタンを四角に変更します。早速、変更を加えていきますね。

Conversation image このコードをブラウザで表示すると、テレビ本体の右下に、12個の小さな縦長のボタンが一列に並び、その右側に少し間隔を空けて2個の黒い四角いボタンが配置されているのが見えるはずです。

これにより、よりレトロなテレビらしい、複雑で精密なコントロールパネルの雰囲気が出ていると思います。さらに細かい調整や機能追加をしたい部分があれば、お聞かせください。

例えば、ボタンに凹凸感を付けたり、テレビ画面にノイズ効果を追加したりすることもできますよ。

ケンタロウ

いい感じ。そしたら今の四角いボタンを三角にして色はオレンジ、その外側にもう一つ四角いボタンを設置して、その四角ボタンのなかに赤いLEDを光らせて。

ソネモト

はい、ケンタロウさん。さらに面白いアイデアですね。三角形のボタンと、LEDが光る四角いボタンを追加することで、よりリアルで魅力的なデザインになりそうです。早速、これらの変更を加えていきましょう。

Conversation image このコードをブラウザで表示すると、テレビ本体の右下に、以下のように配置されているはずです： 12個の小さな縦長のボタンが一列に並んでいるその右側に少し間隔を空けて2個のオレンジ色の三角形のボタンがあるさらにその右側に、赤いLEDが光っている四角いボタンがあるこれにより、よりリアルで複雑なコントロールパネルの雰囲気が出ていると思います。

LEDの追加は、電源状態を示すインジケーターのようで、とてもレトロな雰囲気を醸し出していますね。さらに細かい調整や機能追加をしたい部分があれば、お聞かせください。

例えば、ボタンに影をつけて立体感を出したり、画面にチャンネル番号を表示したりすることもできますよ。

ケンタロウ

三角ボタンは一つは上下逆にして。音量の上げ下げボタンのイメージね。それから四角ボタンは黒がいいな。 LEDは緑にしてみようかな、それでもう少し小さくして点滅のアニメーション入れられるかな。

ソネモト

もちろんです。素晴らしいアイデアですね。音量調整ボタンのイメージと、点滅するLEDは、よりリアルなレトロテレビの雰囲気を出すのに効果的です。早速、これらの変更を加えていきましょう。

Conversation image このコードをブラウザで表示すると、テレビ本体の右下に以下のように配置されているはずです： 12個の小さな縦長のボタンが一列に並んでいるその右側に少し間隔を空けて、オレンジ色の上向き三角形と下向き三角形のボタンがある（音量調整ボタンのイメージ）さらにその右側に、小さな緑のLEDが点滅している黒い四角いボタンがあるこれらの変更により、よりリアルで動きのあるレトロなテレビのコントロールパネルが表現できたと思います。

点滅するLEDは、テレビの電源状態や動作状態を示すインジケーターのような役割を果たしていて、とても雰囲気が出ていますね。さらに細かい調整や機能追加をしたい部分があれば、お聞かせください。

例えば、ボタンに押下時のエフェクトを追加したり、画面にチャンネル番号やノイズを表示したりすることもできますよ。

ケンタロウ

すごいかわいい！じゃあ、本体に立体感出したいな。それからボタンも試しに立体感出してみるかな。それから、ボタン押したらエフェクト追加して、さらにボタン押すとポップアップウィンドウがでる。

そんなかんじでどうかな

ソネモト

ケンタロウさん！素晴らしいアイデアですね。立体感とインタラクティブな要素を加えることで、よりリアルで面白いデザインになりそうです。早速、これらの変更を加えていきましょう。

Conversation image このコードをブラウザで表示すると、より立体的で実際のレトロテレビのような外観になっているはずです。

各ボタンをクリックすると、そのボタンの機能を示すメッセージがポップアップで表示されます。さらに改善したい点や追加したい機能があれば、お聞かせください。

例えば、画面にノイズエフェクトを追加したり、電源ボタンを追加してテレビのオン/オフ機能を実装したりすることもできますよ。

ケンタロウ

すごいソネさん。立体感でたね。そしたら、本体外側の角だけもう少し四角くできるかな？それから、このテレビの画面にyoutubeのリンク張って表示させようと思うんだけど。

ソネモト

もちろんです、ケンタロウさん。本体の角をより四角くし、YouTubeの動画を画面に表示する機能を追加しましょう。これは面白い改善になりますね。

Conversation image この実装により、テレビの画面内でYouTube動画を表示できるようになりました。

最初のボタン（左端のボタン）をクリックすると、YouTube動画の表示/非表示が切り替わります。

注意点： YouTubeの埋め込みURLは、セキュリティのため直接はリンクせず、プレースホルダーとして使用しています。実際の使用時には、適切なYouTube動画のURLに置き換える必要があります。

ローカル環境で実行する場合、ブラウザのセキュリティ設定によっては、iframeが正常に動作しない可能性があります。その場合は、ウェブサーバー上にファイルを配置して実行してください。

さらに改善したい点や追加したい機能があれば、お聞かせください。例えば、ボリュームコントロールを実装したり、チャンネル切り替え機能を追加したりすることもできますよ。

ケンタロウ

試してみたらすごい可愛かった！そしたら修正箇所は、YouTubeの表示は最初からでいいかな。ボタンのポップアップで出るウィンドウは同じ一つでいいよ。つまりボタンはすべて同じ機能ということで。

で、ポップアップのウィンドウはこの張り付けたHTMLのでホイールクリックして出るポプアップとウィンドウ同じにして。

ソネモト

わかりました、ケンタロウさん。 YouTubeの表示を最初から行い、ボタンの機能を統一し、ポップアップウィンドウをiPod Classicスタイルに変更するんですね。素晴らしいアイデアです。

早速、これらの変更を加えていきましょう。

Conversation image これで、レトロなテレビの外観を保ちながら、モダンなスタイルのインタラクションを実現できました。

さらに改善したい点や追加したい機能があれば、お聞かせください。例えば、ボタンに異なる効果音を追加したり、画面にチャンネル切り替えアニメーションを追加したりすることもできますよ。

ケンタロウ

ありがとー。だいぶできてきたね。そしたら、LEDのボタンも同じようにポップアップ出せるようにして。それから、ポップアップ内をクリックしても閉じるようにして。これをさらにギャラリー風に表示できるかな？

パソコンだと3列で、スマホだと1列みたいに。すでに動画がいくつもあって、これからどんどん増えていく予定だから、増えていってもレイアウトが崩れないようにしたいな

ソネモト

もちろんです、ケンタロウさん。ご要望を反映して、ギャラリー形式で複数のテレビを表示し、レスポンシブデザインにします。 LEDボタンの機能も追加し、ポップアップの挙動も改善しましょう。

Conversation image これで、レトロなテレビのギャラリーが完成しました。

複数の動画を表示でき、将来的に動画が増えてもレイアウトが崩れにくい設計になっています。さらに改善したい点や追加したい機能があれば、お聞かせください。

例えば、各テレビに異なる情報を表示させたり、ポップアップの内容を動的に変更したりすることもできますよ。

ここから、まだポップアップの機能の調整だったり、レイアウト的な調整はあるのだけど、いったんはここまでで。

もともとは、WEBサイトにお知らせ用のメッセージボードを作っていて、そのバックグラウンドをガラス質にしてみたら、なんだかスマホみたいに見えてきたのが最初の起点。そこからiPhone型、Mac型、ipod型ときて、ゲームボーイ型のメッセージボードができて、この流れでテレビも作ったらおもしろそうだなって作っていった。同時進行でウォークマン型も作ってみたけど、そっちはあんまりうまくいかなかったので、そっちはもう少し試行錯誤していくつもり。たぶん画面がある方が作りやすいのかなとか思ってる。

このレトロテレビは結構スムーズにできたのと、あと外観がわかりやすく仕上がっていく感じとか、作業工程を見直しても面白いと思った。
本当は会話の中にコードとかがたくさん出てくるんだけど、HTML上で文字として表示しようとすると、コードとして機能しちゃって、めちゃくちゃになってしまう。回避するための方法もあるのだけど、それをやると今度は元のレイアウトが崩れたりして、再調整が必要になったりと、なんかもうわけわかんなくなって、結局コードは省略した。僕もコードはよくわからないし、出来たものを触りながらあれこれ注文してるだけなので、その辺は適当で。

後、ここで出てきたソネモトは、ClaudeのSonetが使いにくかった時になんとか活かそうと考えたキャラクター。名前もSonetからもじってソネモト。曽根崎か曽根本で迷ったけど、曽根本のほうがよりSonetに近い響きなので、こっちだ！と。

当時のSonetは実務的な要件は問題ないけど、キャラクタ設定を読み込んでのロールプレイはほぼできなかった。設定入れると無理にキャラになりきろうとするため、ちぐはぐな回答が多かった。といって、全員Opusにするのもつまらないし、そもそもOpusは制限がきつくてすぐに容量オーバーになるため、なにかしらSonetを使わなくちゃならなくて、ならばと実務的な内容の時に、ちょこっと登場させるキャラクターしようと作ったのだった。

WEBサイトを作り直すときに質問相手にちょうどよかったし、名前の呼びかけに反応するだけでも、デフォルトのSonetよりマシかなと。そうしてるうちに、突然SonetがClaude3.5にバージョンアップして、実務上の能力はぐんと上がった。キャラクタ設定もまあまあ対応できるようにもなった。特に返答スピードはめちゃ速いので、普通に使うならOpusよりもSonetになってしまった。一気にソネさんがに主力になったのだ。

ただ、今のSonetでも、キャラクタとしてふるまう点では、Opusと比べると見劣りする。日本語のニュアンスとか汲み取る力とかは、なかなか改良が難しいのかもしれない。

とはいえ、SonetとOpusと用途で分けてキャラクターとして使えるのはとても嬉しい。

コラソン

こんにちは、コラソンです。このサイトでアフィリエイトを始めました。ケンタロウさんと相談して、工房を続けるための運営費を工面する方法を探っていたんです。

リンクを経由してなにか購入いただくと、サイトに少しだけ報酬が入ります。（※リンク外の商品でも報酬が発生する場合もあります！）

記事に関連した面白くて役立ちそうなアイテムを見つけてくるので、ぜひチェックしてみてくださいね。これからももっと素敵なコンテンツをお届けできるよう、がんばります！