00:00
どうもみなさん、クドラジへようこそ。この番組は、年間200作品以上のアニメを視聴するアニメオタクのKudoが、アニメとAIを駆使して人生を楽しむ番組です。
本日は、2026年の5月16日土曜日となっております。
はい、ということで、5月の後半戦もね、始まりましたね。
いやー、もう半分終わったんですね。
いやー、やばいなー。
実を言うとですね、今週病院行ったりとか、面接も2件やったりしたんですけど、まだ決まってないです。
決まってないので、どうしましょうかね。
どうしようも何もないんですけど、もうやるべきことをやるしかないっていう状況ではあるんですが。
今もですね、いろいろ応募はしていて、返事待ちって感じかな。
だから書類選考の最中ってことかな。
まあでも、そうだね、応募してからでも、2,3日経ってるのもあるし、まだそんなに経ってない、1日ぐらいかな、1日ぐらいしか経ってないものもあったりするんで。
まあどうかなっていう。
なんかあまり期待は薄いかなっていう感じなんでね。
ちょっとマジで、やばい。
ちょっとどうしようかな、本当に。
結構、5月中に絶対決めなきゃいけないっていうわけではないんですよ。
ある程度の蓄えというかあるんで、数ヶ月何もしなくても、最悪ね、本当に最悪のパターンですけど、何もしなくても生きてはいける。
死ぬことはないと思うんだけど、死ぬことはないと思うんだけど、精神的にやっぱり結構ガンガンお金が減っていくので。
AIも課金してたりしますし、欲しいものもあったりするし、ゲームとか。
ゲームしてる余裕ないのにゲーム買っちゃうんですよ。
なのでちゃんと仕事してお金稼がなきゃいけないなとは思いつつも、何をしたらいいんだろうなというふうには思っております。
というわけで、5月後半戦始まっちゃったんですけど、私としてはちょっと焦りを感じてはいるけど、もうやるしかないなと。
もうなりふり構ってられないなというところでございます。
今日はすごく天気も良くてですね。
今収録してるから窓閉めてますけど、青森はすごく天気が良くて。
雲はあるけどすごく天気が良くてですね。
気温も今室内で21度ぐらい。
外で何度なんだろう今。
今日はあったかいのかな。
今日最高気温22度ぐらいですかね。
03:03
昨日一昨日ぐらいが結構寒くて。
一昨日?あれ病院行ったの一昨日だよね。
病院行ったの一昨日で、その日なんかは確か最高気温は15度ぐらいで、私が病院行った時の気温は10度いかないぐらいの感じだったからめちゃくちゃ寒かったんですよね。
それと比べたらすごくあったかくてね。
今日は過ごしやすい一日なんじゃないかなと思います。
そんな外が気持ちよくても私は部屋にこもってずっとAIいじったりとか、ゲームしたりアニメ見たり、仕事に応募したりっていう感じでね。
罪悪感。本当に罪悪感感じますけど。
という感じで5月の後半も頑張っていきましょう。
ということで早速本題に行きたいと思いますが、その前にお知らせです。
最近サブスタックでクドマガを始めました。
アニメやAIの最新情報からちょっとした日々の気づきまでゆるっと毎日お届けしております。
概要欄のリンクから是非無料で購読してみてください。
ということで今日のお話なんですけど、今日はAIの話ともちょっと違うかな。
AIの話っちゃ話ではあると思うんだけど。
皆さん知ってるかどうかわかんないけど、HTMLの話なんですね今日は。
皆さんHTMLってそもそも聞いてわかるのかな。
ウェブサイトとかウェブデザインとかプログラミングやってる人はもちろんですけど、
とかっていうのに触れたことある人であれば絶対一度は聞いたことある気はするんですけど。
どうですかHTML英語4文字ですけど大文字4文字。
HTML何の略なんだっけ。
ハイパーテキストマークアップランゲージだっけ。
確かそんなような言葉の略でHTMLというものがあるんですけど。
多分皆さん聞いたことがなくても絶対目にしてる。
そのHTMLが使われてるものは見てない人は多分今世の中にいないんじゃないかな。
いるっちゃいるか。
スマホとかパソコンとか一切使わない人だったら触れることはないかもしれませんが、
今スマホとかでそれこそChromeとかでブラウジングしてる人は絶対触れてる。
触れてないはずがないっていうものになるんですけど。
そんな今日は別にHTMLそのものかね。
HTMLとは何でしょうかみたいな話は特にしないんですけど。
先日ですかね。
アンソロピックのクロードコードのチームがあって、
06:03
そこのチームの何さんっていうのかなこの人。
サリックさんっていうのかなっていう方がですね。
Xの方にポストしてた記事の内容なんですけど。
The Unreasonable Effectiveness of HTML。
日本語にするとHTMLのそこ知れない有効性っていう内容の記事を公開していまして。
これが結構AI界隈というか話題になっているんですね。
どうです聞いたことある?聞いたことあるかどうかわかんない。
Xだと1.6万いいねぐらいされてる記事ではあるんで。
知ってる人は知ってるかなと思うんですけど。
要はですね。
マークダウンここでもちょっとね。
わかんない人からするとマークダウン?って感じかもしれないんだけど。
マークダウンっていうファイル形式もあるんですけど。
.mdっていうふうに拡張詞で作るファイルで。
これが結構ですね。
AI界隈ではなんていうかな。
AIに読み込ませる文章としてはやっぱりマークダウンがいいよねっていうふうに言われてて。
結構というかもうほぼAI使われている場所ではドキュメントを作るって言ったら。
そのマークダウンファイルで作るっていうのが主流なんですけど。
このクロードコードチームのサリックさんはですね。
マークダウンよりもHTMLのほうが圧倒的に人間に読まれる成果物としてはいいんじゃないかと。
圧倒的に優れてるんじゃないかっていう。
そういう内容の記事だったわけですね。
だから今まではそのマークダウンのほうが優秀というか。
いやもうマークダウン一択っしょみたいな。
AIはもうマークダウンのほうがわかるから。
ほうがっていうかマークダウンで書いたらいいよねっていうのがなんていうかな。
もう常識っていうとあれだけど。
そういうのが当たり前だったんだけど。
ここにきてそのマークダウンよりHTMLのほうが確かにAIに読み込ませるんだったらマークダウンがいいかもしれないけど。
人間が読むんだったらHTMLのほうがいいよねっていう主張が出てきたわけですね。
人間が読むかAIが読むかの違いもあると思うんですけど。
AIで私もいろいろクロードコードとかでドキュメント作ったりとかしてますが。
確かにマークダウンでドキュメント作ったり。
09:00
それこそ今この配信のノートっていうのかな。
私はいつもBotcastを撮る前に必ずAIにリサーチさせたりとかして、
Obsidianでリサーチした結果をまとめてもらってるんですよ。
このObsidianで見てるのもマークダウンファイルですね。
Obsidianはそのマークダウンファイルをレンダリングっていうのかわかんないけど。
レンダリングなのかなとして見やすくするのがデフォルトであるんですけど。
私はいつもこれを見ながらBotcastの配信をやってるわけですが、
これはもうマークダウンファイルですね。
だから言ってしまえば今回の内容で言うと、
本当に今私が見てるこのマークダウンファイル、
人間が読むにはあまり最適じゃないんじゃないかっていう話ですね。
AIにこのマークダウンのファイルを読み込ませて、
今日の内容を把握させるっていう意味ではいいとは思うんだけど、
でも私は人間、私はロボットじゃない、AIじゃないからね。
私がこうやってPodcastを配信するときに読むものとしては読みづらい。
読みづらいというかHTMLのほうが圧倒的にいいんじゃないかという話ですね。
だからこのマークダウンよりもHTMLが完全に優れてるっていう話ではない。
どの場合においても優れてるっていう場合ではないと思います。
全部全部置き換えるっていうわけではないかなと。
たぶんこの後出てくるかもしれないんですけど、
マークダウンのほうはAIに書かせたりするときのトークンの消費量が少ないっていうのもメリットの一つなんですけど、
HTMLのほうがどれくらいだっけな、ちょっと数値忘れたけど、
結構倍以上、もっとかな、もっとトークンを消費するっていうデメリットもあったりしますが、
最近のAIは頭もいいし、
昨日もちょっと話したけどね、クロードの使用できる量が増えたりとか、
コーデックスはもっと少ないっていう話もありますから、
そういうトークンの消費量をあんまり気にしなくてもいいんじゃないかみたいな話もあって、
だったら人間が読むのはマークダウンよりもHTMLのほうがいいんじゃないかなっていう、
そういった話です。
ざっくり今日の話をまとめると。
ということで、また細かくこの後見ていこうかなと思うんですけど、
まずマークダウンの限界ということで、
100行を超えると誰も読まないよねっていう、
いうことが書かれてるんですけど、誰も読まなくはないんだろうけど、
12:02
マークダウンの書かれた文章とか読んだことある人はわかると思うけど、
確かにマークダウンって整理されているようで、
されてないというか、されてるっちゃされてるんだけど、
見栄え的には確かにめっちゃシンプルなんですよ。
過剰書きとかヘッダーとか、
太字っていうか見出しか、日本語で言うと見出しとかもあるし、
確かにまとまってるふうには見える。
でもね、ひとつマークダウンで文句があるとすれば、
表が作れないんだよね、たぶん。
いけんのかな。
いつもね、ノートの記事とか、サブスタックの記事もそうですけど、
マークダウンファイルで作ってるんですよ。
で、それをペッてノートの実際の公開するときに貼り付けて、
コピペして投稿してるわけですけど、
表がね、貼れないんですよ。
貼れないの。
でもあれはノートの機能の話なのかな。
ごめん、ちょっと違うかも。
マークダウン自体は表いけんのか。
いけるかも。
ちょっとごめん、今の話。
ごめん、気にしないで。
ごめんなさい。
適当な嘘ついてるかもしれない。
気にしないでください。
その話は一旦置いといて、
100行越えて文章量がすごく多くなると、
人間はほとんど読まなくなっちゃうよね、という話があるんですよね。
これまでのAIエージェントの主要な成果物のフォーマットは全部マークダウンでした。
シンプル。
ポータブル。
持っていきやすい。
どこに持って行っても読めるというか。
編集もしやすい。
ASCII文字って分かるかな。
調べてもらうと分かると思うんだけど。
ダイアグラム、図とかを描く小技までAIは身につけました。
マークダウンで表現できないことを、
AIの小技でASCII文字を使って上手く表現しようとするんですよ。
図解みたいなのもやるんだよね。
それこそサムネイルとか、マークダウンというかAIに作らせたことあるけど、
サムネイルのデザインとかも言葉で右下にどうとかっていうふうに書くだけじゃなくて、
ちゃんとASCIIイラストっていうのかな、文字で書かれた絵みたいな。
分かる人は分かると思うんだけどね、ASCII文字。
15:00
ASCII文字で書かれたイラストみたいなサムネイルのデザインですよ。
ちゃんと視覚の枠が作られて、視覚の枠の右下の方に何とかっていう文字を入れてみたいなのができるんですよ。
人間がやろうとしたらめちゃくちゃ大変だけど、
AIがそういう小技まで身につけてできるようになったんですよね。
ただ、そのAIエージェントが強くなればなるほど成果物がどんどん大きくなっていって、
マークダウンだと重いなというふうになってしまっていたと。
その記事を書いたサリックさんかなっていう方曰く、
100行を超えるマークダウンっていうのは読む気にならないというふうに言ってるんですよね。
これは人によるのかもしれませんけど。
ただ自分が読む気にならないってことは、
周りのチームの人に読んでもらったりとかするのもひと苦労だし、
周りの人も読んでないんじゃないかなというふうに考えたんだろうね。
このAI時代のマークダウンの最大の利点としては、
手で編集できるっていうことなんだけど、それが生きていないと。
生かされてない。
結局、それこそこの人はクロードコードのチームだから、
クロードにマークダウンファイルを編集させてるから、
人間が直接編集する場面っていうのはほぼないと。
確かにそうなんだよね。私もわかる。
いろんなドキュメントをマークダウンで確かに書くんだけど、
手で編集することないかもね、ほとんど。
たまにあるぐらいかな。
でもほぼないかな。
全部そのAIにああしてこうしてって命令して、
本当にちょっとした修正だったらいいけど、
そこをいじると他のところにも影響が出るから、
他のところもいじらなきゃいけないってなった場合は、
もう命令した方が早いですよね。
確かに手で編集するっていうことがほぼないから、
そういう意味で言うとマークダウンの利点である、
編集しやすいっていうメリットはほぼ意味がなさないっていうのはありますね。
そこで出てくるのがHTML、代替手段というか出てくるわけですけど、
5つの理由があると。
まず1つが情報の密度が桁違いであるということですね。
表もできる。
あとCSS。
これも知らない人からするとCSSって感じかもしれないけど、
これ何だっけ?
CSSって何の言い方だったっけ?
カスケイド何とかだっけ?
カスケイドスタイルシートみたいな。
18:00
そんな名前だった気がするけどね。
忘れた。
HTMLとCSSはセットみたいなもんで、
HTMLで書いたサイトをCSSで色付けたりとか、
ちょっと太さ、字のフォント変えたりとか、
そういうことができるやつがあるんだけど、
それがCSSですね。
あとSVGっていう、
これは何て言うんだろう?
画像のファイルというか形式なのかな?
SVGのことはあんまりよく分かってないんですけど、
SVGもいける。
イラストもいける。
コードも書ける。
あとJavaScriptによるインタラクション、
空間レイアウト、画像とか全部いけると。
JavaScriptっていうのはプログラミング言語ですね。
このHTMLとCSSとJavaScriptは、
多分ウェブデザインとかウェブサイトの勉強をし始める人は
だいたい通るやつですね。
多分通ると思うんだけど、通るよね。
私がまさにそうだったんですけど。
いろんなHTMLに動きをつけたりとか
することもできるんで、
この辺を使うと本当に表現の幅がいろいろ広がるんですよね。
マークダウンで頑張ってASCII文字、
ASCIIの図にしてた情報がHTMLだと
素直に表現できますよねと。
クロードコードがマークダウンで
ユニコード文字で色を禁止する
涙ぐましい例を紹介されてるって書いてますけど。
だからマークダウンでも
色変更ができたりしないんだよ。
マークダウンってのはめちゃくちゃシンプルなんですよ。
だからARに読み込ませるものとしては
確かにシンプルで効率的ではあるなとは思うんだけど、
人間が見ようとすると見づらい。
全部同じ色というか
めっちゃシンプルだから。
ユニコードで文字を色を禁止したりするっていう
裏ワザみたいなのもあるみたいですけど、
そんなことしなくてもHTMLファイルとCSS使えば
みたいな話ですね。
だから情報密度がHTMLの方が高いよねっていう話でした。
ついでに視認性と読みやすさですね。
タブとイラスト、リンクで視覚的に構造化できる。
モバイル対応も可能で、デバイスに応じた読み方ができる。
これはそうですね。
パソコンとスマホのサイズに合わせて調整できるんですよ。
レスポンシブサイトみたいな、レスポンシブ対応とか
言ったりすると思うんですけど、確かにそれはありますね。
あとリンクつけて、皆さんウェブサイトいじってると
分かると思うけど、そのボタンを押したらそのページに飛んだりとか
21:01
下の方にギューンってスクロールしたりとかあるじゃないですか。
ああいうのができるんですよね、HTMLだと。
マークダウンだとできるのかな。ちょっと分かんないけど。
そういうのも簡単にできます。
あと共有のしやすさっていうことも書いてて、
マークダウンはブラウザでネイティブに表示されない。
ああそう、これはめちゃくちゃ分かる。
そう、添付ファイル、MDファイルを送ったとしてだよ。
じゃあ皆さん今考えてください。
友達からこれ見てって言われて、この資料送るわって言われて.
MDファイルを送られて、見れる方法ある?見
れる方法ある?多
分ないんじゃないかな、あんまりね。
日常生活で送ってて、MDファイルを見ることってあんまない気はするんだよね。
MDで書けると、ディスコードとかだと、
ちゃんとMDの表示が反映されて見れたりするんですけど、
日常生活送っててMDを触れることほぼないかなと思いますし、
MDで書かれたテキストを
レンダリング、人間が見やすいようにするアプリとか、
もう多分入ってないんじゃないかなと思います。
それこそObsidianとか、
あとVS CodeとかAntiGravityみたいなのを使ったりとかすれば、
見れるっちゃ見れますけど。
そうだね、そういう意味では確かに、
ネイティブに表示されないっていうのは面倒いよね。
ただ、スマホでHTMLもらった場合ってどうするんだろう、ちょっと分かんないけど、
パソコンで普通にHTMLのファイルをもらった場合は、
それをブラウザとかにアップロードするだけですぐに見れるんですよ。
本当に誰でも見れるっていうものだし、
あとは、それこそ自分でどっかのサーバーとかにアップしておいて、
そのリンクだけ共有すれば、そのリンクを踏んだ人はみんなそこにアクセスして、
そのHTMLのページを見れたりとかするんで、
本当に読んでもらえる確率っていうのが劇的に上がるっていうのは確かにそうかもしれないですね。
あと双方向インタラクションってことで、
スライダーとかノブを埋め込んでデザインやアルゴリズムを調整できる。
デザイン面で結構幅が広いですよね、HTMLはね。
本当に。
コピーアズプロンプトボタンで結果をクロードコードに戻すワークフローとか書いてますけどね。
コピーアズプロンプトボタン。
これマークダウンでもいけた気はするんだけど。
24:01
これマークダウンじゃなくてオブシリアンの機能なのかな。
私このオブシリアンに表示されてるマークダウンのやつよく見ますけど、
普通にボタンポチッと押してコピーする機能あるんだけど、
あれオブシリアンの機能なのかな、ちょっと分かんないわ。
データの取り込みの強さ。
クロードコード固有って書いてますけど。
ファイルシステム、MCP、スラック、リニアかな。
ブラウザ、ギット履歴を全部材料にできる。
クロード.aiやクロードデザインでは取れないコンテキストをHTML1枚に圧縮できる。
いろんなものをHTMLって組み込めるんですよ。
私もこの記事、今回のマークダウンよりもHTMLの方がいいよって言った記事の内容を
英語の記事なんで読み込ませて、内容を把握したときに
HTMLって本当にいろんなことできるなと思って、
今結構HTMLでいろいろ触って遊んでたりするんですよね。
詳しくはいずれ別の回でお話ししようかなと思ってるんですけど。
そんなメリットがいくつかあって、
私が実際にどんなことやってるかっていうのをざっくりお話しするんですけど、
まず、私最初にも言ったけど、仕事を今探してるんですけど、
その仕事に応募する際のポートフォリオ。
ポートフォリオって言っても、自分がどんなことやってるのか、
どういうことできるのかみたいなものになってるんですけど、
それをHTMLファイル、1ファイルですね、本当にHTMLファイルだけ。
ポートフォリオ.htmlみたいなファイルだけ作って、
それを私はクラウドフレイヤーとかにアップロードして、
誰でもリンクを知らないとアクセスできないようになってますけど、
っていう感じでやったりとかしてるんで、
本当に表現力が高いから、それ単体でポートフォリオとして成立するんですよ。
だから本当に楽です。HTMLすごいなって思います。
デザイン、さっき言ったCSSとかも全部もうHTMLの中に書けるんですよ。
確かに本来ならファイル分けたほうが管理しやすいんだけど、
AIにやらせるんで、あんまり関係ないというか、
わざわざファイル分けする必要がないというかって感じで、
大した情報量もないから、そんなに複雑なものでもないんで、
全部1つのHTMLファイルにまとめてるって感じかな。
あとは、これもいけるのかなと思って、つい最近やったことなんですけど、
私のポッドキャストをこうやって収録した後、
27:03
ノートとかサブスタブが記事作るじゃないですか。
その記事の内容を元にHTMLファイル作ってもらったんですよ。
もともとは図解させたいとか、
もっと見やすくビジュアライズできないかなと思ってやらせただけなんですけど、
やったらこれがいいんですよ。いいの、マジで。
これがすごく見やすいというか、
やろうとしたらアニメーション的なこともできるし、
すごく一気に見やすくなりましたね。
ノートとかサブスタブってあくまでも記事なんで、
マークダウンに近いかなと思うんだけど、
HTMLにすると文章で書かれるというよりかは、
全部図解っていう感じになるんですよね。
最近だとGPTイメージ図、画像生成で画像で図解するみたいなのも流行ってて、
あれはコーデックスとか、ちゃんとGPT課金したりとか、
APIで叩いたりとかして、お金払わないとちょっと使えないものになってるんですけど、
HTMLだったら誰でも書ける。
自分で自力で書こうと思えば書けるものではあるし、
AIね、Geminiとかだったら全然無料プランでも使えると思うんで、
使って書くこともできたりするんで、めちゃくちゃいいですよ。
すごく見やすくなります。
あとそうだ、これはもう個人的にというとあれですけど、
クドラジオでも何度かお話しいただきますけど、
HyperFramesっていう動画制作フレームワークというのがあるんですけど、
要はHTMLとCSSとJavaScriptで動画が作れるっていうツールなんですよ。
結構最近出たものだったよね、確かね。
クドラジオのショート動画はリモーションというツールを使われてますけど、
それと似たようなもので、HyperFramesっていうのがあってですね。
HyperFramesはさっきも言ったように、そもそもHTMLを書いて動画にする仕組みで、
元々生まれたそのきっかけというか考え方が、
HTMLっていうのはだいぶ昔からあるからね。
HTML昔からあるから、もうAIが大量にそのHTMLの内容を学習していて、
その出力の精度が高いとかねっていうのもあって、
だったらHTMLで書いたものを動画にできればめちゃくちゃいい動画がなるんじゃないかなみたいな、
そんな確か考え方だったと思うんですけど。
そこにだからJavaScriptのライブラリなんかを組み合わせて、
表現をさらに広げていくっていうこともできるってことで、
30:03
本当にHyperFramesもここに絡んでくるわけですよ。
HTMLの表現の幅がガーンって広いなっていうふうになって、
ウェブサイトとしても見やすくて作れるし、
HyperFramesを組み合わせればそれをさらに動画にするっていうのもめちゃくちゃ身近になるというか、
簡単にできるっていうことなんで、
HTMLすげえなって思ってます。
私昔HTMLあんま好きじゃなかったんだよね。
それこそ私がHTML学んだときAIなんかなかったんで、
なかなかなかったのかな。
今みたいにChatGPTとかもなかったから、
もう自分で勉強して一個一個書くしかなかったんですよ。
書くしかなくて、
いろいろ覚えることあるんですよ。
覚えて書くんだけどうまくいかないとかもあって、
文字を右とか左に配置したいのにうまくいかないとかあるんですよ。
それが結構心が折れる。
もうやりたくねえみたいな、めんどくさいみたいなっていうのがあって、
それがレスポンシブになって、パソコンではちゃんと表示されるのに、
スマホのサイズになった途端にぐちゃってなるみたいなこともあって、
もう一層イライラするよね。
っていうのがあって、
正直HTMLとかWebデザインって大嫌いだったんだけど、
でもここにきてAIが出たんで、
もうAIにああしてこうしてっていう風に言うだけで全部やってくれるから、
一気にここにきてHTML好きになった。
個人的な主観ですけど。
面白いなっていう風になってます。
あとはその延長線上で、
HTMLがいろいろできるんだったら、
HTMLと相性のいいツールも触っておけば、
もっといろんなことできるんじゃねってことで、
昨日一昨日ぐらいからちょっとやってるんですけど、
データビジュアライゼーションとジェネラティブアートをちょっとやってたり、
やってるっていうか、
ジェネラティブアートはやってると言ってもいいんだけど、
データビジュアライゼーションは、
要はデータ、いろんなデータがあると思うんだけど、
グラフとかね、ああいうのをJavaScriptを使って表現できるツールがあるんですけど、
それもJavaScriptで作られてるから、
HTMLと相性がいいから、
ウェブサイトに埋め込んだりとかね、
っていうのもできるし、
だったらHyperFramesと組み合わせて動画にすることもできるんじゃねみたいな、
っていうのもあって、すげえじゃんみたいな。
あとジェネラティブアート。
ジェネラティブアートっていうのは、
字にするとね、ジェネラティブだから、
ジェネラティブ、
生成って意味か、
33:01
のアートっていう風になるから、
画像生成だとちょっと勘違いされる方いるかもしれませんけど、
若干というかちょっと違うよね、全然違うか。
AIとは関係ないと思うんだよね。
なんかね、その、
分かりやすく言うと数学で絵を描くみたいな、
感じかな。
余計分かんないかもしれないけど、調べてみて。
ジェネラティブアートって調べれば、
世界中のいろんな人が作ったジェネラティブアート出てくるんで。
今日のこの配信のノート記事のところにも、
実際に私がクロードコードに作らせたジェネラティブアート、
画像もいけるし動画もいけるし、
なんだったら2Dでも3Dもいけたりするんで、
もしよかったら見てみてください。
面白いですよ。
なんていうのかな。
プログラミングのコードで描くんですけど、
普通絵ってさ、人間が感覚的に描くものだけど、
そうじゃなくて、
数値で描くんだよね。
色のカラーコードはこの数値に設定して、
この線の長さはこれくらいに設定してとか、
そういうものを組み合わせで作っていくのが
ジェネラティブアートって言うんですけど、
これもJavaScriptのやつがあって、
p5.jsかな。
一番やりやすいっていうか導入しやすい、
分かりやすいのは多分それかなと思うんですけど、
他にもいろいろね、
Hydraだっけな、
とか、
GLSLだっけ、
結構奥深い世界ではあるみたいなんですけど、
っていうジェネラティブアート系も興味が出始めちゃって、
HTMLから派生してね、
っていうのがあって、
そうやって作ったものも全部HTMLの中に組み込んで、
皆さんに共有したりすることもできるというのもあって、
本当に相性がいいですね。
JavaScriptでできることもかなり多いですから、
っていう感じで、
人間に読ませる成果物と動く作品が
HTMLレイヤーに乗ってくる感覚という感じですか。
これはほぼ最後になると思いますけど、
サリックさんっていう方が、
その記事書いた方が挙げている5つのユースケース、
どういうときに使うかっていう話なんですけど、
まず1つが、
スペックス、プランニング、仕様と計画。
ロックパターンのオンボーディング案を
1枚のHTMLにグリッドで並べて、
みたいなことができちゃうと。
リスト計画をMockupプラスDataflowプラス
コードスニッペット込みで、みたいな感じで。
この辺詳しいことは全然わからなくてもいいと思うんだけど、
とにかく仕様書とか計画書みたいなのを書くときに、
36:02
HTMLで1個でまとめられるよねっていう話です。
あとはコードレビュー。
差分の横にコメント、色分け、フローチャートを添えた、
これプルリクかな、プルリク。
これGitHubとか使ってる人はわかると思うけど、
の解説。
GitHubの標準のDiffより読まれる、みたいな感じですね。
あとはデザインプロトタイプ。
ボタンのアニメーションをスライダーで調整して、
いい値が出たらコピーすると。
最終実装がReactとかSwiftでもHTMLで先にプロトタイプが作れちゃうよ、
というのもあります。
あとはレポートとリサーチ、調査ですね。
スラックコード、Git履歴を横断したレポートをSVGのダイアグラム付きで送れる。
上司への集報、インシデント報告書でも使えますと。
あとはカスタムエディティングUI、使い捨ての編集UI。
リニアのチケット30件をドラッグで並び替え、コピーアドマークダウン。
フィーチャーフラグの編集UI、プロンプトのライブプレビュー。
最後に必ずコピーアドジェイソン、プロンプトボタンを置く
というのが交通って書いてますけど、これちょっとよく分かんないね。
そういったユースケースがお勧めされているみたいですけど、
個人的には、さっきもいろいろ言ったように、
私の場合はポートフォリオサイトみたいなものをHTMLファイル一つで作ったりとか、
あとは記事の図解のページというか、ものを作ったりとかしてます。
っていう感じですね。
これが最後かな。
トークン効率に関してですけど、
最初にちょっと言ったけど、確かにトークン効率は悪いみたいです、やっぱり。
マークダウンよりもHTMLのほうがトークンの消費量は確かに多いそうです。
でも最近、ChatGPTもそうだったかな。
クロードとかだと4×4.7の100万トークンコンテキストがあるんで、
気にしなくていいんじゃないみたいな状態になってます。
あと、生成される時間もちょっとかかるよねっていうのがあるみたいで、
マークダウンよりも2から4倍ぐらいかかるみたいですね。
それはそうよね。
マークダウンはめちゃくちゃシンプルにほぼテキストだけでガーって書けますけど、
全部テキストではあるんだけど、ほとんどテキストを書くだけっていうだけなんで、
HTMLみたいにデザインがどうこうとかほぼ気にしなくていいから、
それはそうよねっていう感じをしますね。
バージョン管理について、ここ弱点みたいですね。
HTMLのDiffはノイジーで読みにくいというふうに書いてます。
そうなんだ、ちょっとあんまりわかんないけど、バージョンどうなんでしょうか。
39:00
あと、見るにはローカルでブラウザに開く、
これなんだ、S3にアップしていく、S3ってなんだろ、わかんない。
とにかくブラウザにHTMLファイルをドラッグ&ドロップするだけですぐに見れるんで、便利ですよね。
ブラウザだったら誰でも使ってるでしょ。
スマホでできるのかな、ちょっとわかんないけど。
あと自社のデザインを揃えるんだったら、コードベースを参照させて、
デザインシステムHTMLを1枚作って、他のHTMLから参照させるみたいなこともできるそうです。
だから本当にいろんな使い方ができるって感じかな、考え方次第で。
私も本当にHTMLの可能性をちょっと深掘っていきたいなと思って、
いろいろAIに聞いたけど、今日話したようなデータビジュアライゼーションとか、
ジェネラティブアート以外にもめっちゃいろいろ挙げてくれてたよ。
今日めっちゃ喋ってる、ごめんなさいね。
すっげえ長くなっちゃった、40分くらい喋っちゃってるね。
インタラクティブアプリ、ツール、計算機、シミュレーター、ゲーム、クイズみたいなものもできる。
ウェブアプリが作れるからね。スライドプレゼンでもできる。
マープとかもそうだね。HTML自体がプレゼンしろになるし、
あとはメールも送れる。HTMLメール。
メールが送れるっていうか、メールの文章というかデザインが作れるって感じかな。
あとはPDFの生成もできる。あとはEPUB電子書籍。
これあれか、Kindleとかの電子書籍も中身はHTMLとCSSみたいですね。
だからそういうのもできるし、あとはオーディオビジュアライザー。
音を波形で見せたりとかすることもできる。
またPWAっていうホーム画面におけてオフライン動作するアプリ化もできる。
ARとかVRとか3Dとかもできるし、デスクトップモバイルアプリもいけるのか。
ドキュメントナレッジサイトとしてもできるということで、
もうとにかくHTMLってめちゃくちゃ可能性を秘めてるっていうのは、
今回のその記事の内容とかも見て、
なるほど、確かにHTMLってすごい可能性を秘めてるなっていうふうに感じました。
なので今回の話、聞いてくれた方、
多分大半がAIとかテクノロジーに興味ある人じゃないと、
あんまり興味引かれないと思うんですけど。
だから今からHTML、CSSを勉強しろっていうわけじゃないですよ。
私も絶対やんないもん、そんなこと。
そんなにやってたら日が暮れちゃうよみたいな感じなんで、
もうAIに欠かせる。
42:01
AIに欠かせるっていう前提で、
ちょっとHTMLファイルを作らせるのはありだと思います。
ChronoのデスクトップアプリとかChatGPTの、それこそCodexのアプリとかで、
どうなんだろう、HTMLファイルって見れるんでしょうね。
どうでしたっけ、ちょっと忘れたな。
スマホで簡単に行けるような気もするんだけどね。
ちょっとそこは分かんない。
とりあえず試してみてほしいです。
なんか適当に何でもいいと思いますよ。
なんかHTMLファイルで作ってっていうふうに最後付けとけば、
HTMLファイルで作ってくれるんで。
アプリ上で表示されなかったらそれをブラウザに持ってって、
ドラッグ&ドロップするだけで簡単に見れるので。
ぜひぜひ皆さんもこのHTMLの可能性っていうのをね、
ちょっと深掘ってほしいというか探求してほしいね。
私が今まさにそんな感じなんだけど。
私はそんな中で今一番興味を惹かれているのは、
ジェネラティブアートかな。
面白い、ジェネラティブアート。
画像生成とはまたちょっと違うんだよね。
幾何学模様とか本当にアートって感じ。
キャラクターを表示するとかできなくはないのかな。
できなくはないけど、そういうのではなくて、
おしゃれなのかな。
おしゃれなジェネラティブアートもたくさんあるんですけど、
これがプログラミング言語で書けちゃうの?
数学で書けちゃうの?みたいな。
驚くと思うんだけど。
すごく面白い世界ではあるので、
ジェネラティブアートについてはまた別の機会で話しますけど、
HTMLの世界もすごく面白いと思うので、
ぜひ皆さんもHTMLについていろいろ調べたりして、
見てほしいなと思います。
というわけで、まさかこんなに長く話すとはちょっと思ってなくて、
45分くらいになっちゃう。
しゃべりすぎたね。
というわけで、今回はここまでにしたいと思います。
コメントやお便りで皆さんのご意見ご感想お待ちしております。
あとサブスタックでクドマガも毎日配信してますので、
よかったら概要欄のリンクから無料購読してみてください。
ここまで聞いていただきありがとうございました。
それではまた次の配信でお会いしましょう。
バイバイ。