祝🎉jamzIpTVのページオープン
途中も、また表現。なんなら死ぬまで途中なんやから
うっほ＝＝＝い
ザ、家内制手工業、一点一点手作りのこのwebサイト
作ろうとしてるコンテンツは長らく
この子達が頑張った結果
徐々に形になりつつあります
これまで、satoが思いつきと衝動で、作りためていた動画が
誰にも知られることなくyoutubeチャンネルに溜まっていまして、
そこから引っ張ってきて、ついでに、この動画への言葉といいますか
どうせならyoutubeチャンネルの中のコメントで書けないことを書いてやろう
ということになりました
それがjamzIpTVというページ
えいやっと、空いている時間でコードを書きまくって仕組みができたので
まだ、動画コンテンツを、投稿しきれてないのやけど
途中もまた、表現
ということで、公開とあいなりました
どーなってんのか
wordpress(以下wp)にyoutube動画を投稿できるようにして、なんならコメント的なものも投稿できるようにまして、このwebサイトはフロントエンドとバックエンドを完全に別個にした
astro+wpのjamstack構成でつくってるので
astroからwpの投稿を引っ張ってきて
どうせなら一覧をクリックしたら、ぐるぐるブラウザがロードしてその動画の個別ページが観れるより
小窓がぱっと開いて（僕らはモーダルって呼んでます）ぱっと閉じたほうが
なんかさくさくしていい感じー
というようにしましたー
一覧クリックしたらこんな感じね
サーバー側でastroをSSR(ServerSideRendering)さーばーさいどれんだりんぐ でこのページは
生成されます。
サーバーに住んでいる小人ちゃん（いままでやったらphpなんやけど、astroはjs、もっというと、サーバーで動くjs(javascript)、Nodejsちゃんが、2010年ぐらいから、世界のあらゆる分野を席巻するようになり、ついにサーバーサイドでもjsがお仕事できるようになったので、古参のphpさんではなく、jsがhtmlを生成するよう、わたくしがお手紙を書き
それをブラウザが受け取る、そしてページをブラウザくんが生成する
という流れなのです
※jsとはjavascriptのことね、1995年あたり生まれ、最初はwebページのちょっとした装飾しかできない、超マイナーなブラウザが実行するプログラミング言語。その後、ありとあらゆるデバイスで実行できるようになり、世界を支配するようになる。例えるなら、バイトで入ってきた地味でコミュ障な子が、あれよあれよとイーロンマスクみたいになる感じ
しかし、一覧に全件をwpから取得すると、えらい重いので
「スクロールしたら続きを読む」という挙動にしたほうが、1ページでいろんなジャンルの動画をならべれるよねー
ということで、この仕事はクライアントサイド（ブラウザくん）にやってもらわないといけないので
astroコンポーネントの中に「これはブラウザくんに渡して」というお手紙を忍ばせて（Vueコンポーネント）
「スクロールしたら続きを読む」という挙動を実現しています
スクロールしたら、wpと通信してね
って書いてあるのですが、自作自演の手作りサイトなので、wp側に
「Vueコンポーネントから、電話がかかってきたら、奥の記事を溜めてる倉庫から、これとこれを取りに行って、これは出荷前にこう言うふうに加工するように」っていう手紙をwpに書いています（wpやから、これはphpで書く）
一覧をクリックしたら小窓が開くのもブラウザくんの仕事なので、そのお手紙を忍ばせて
クリックしたら、ぼわんと小窓がでてくるのです
はーーー
なんでか、内情を語っておりますが
2014年あたりから、web学校の講師を5年ぐらいやったことがあり（その時代の話も相当おもろいのでいつか書きます、小説に出てくるような個性的な受講生に鍛えられて今日がありますので）
その時、おおよそこいったプログラミングちっくなことを
小人の物語で押し通す、好き嫌いが激しくわかれるスタイルで授業を強行していたときのモードに少し突入してしましました。（実は、小人物語モードでずーーとやってきてしまったので、それしかモードがない）
でも、この小窓が開いている状態は、ブラウザくんがやってくれた仕事なので、
サーバーにはいっさいリクエストを送っていないので
URLに変化がないのです
だから、「この動画だけのURLを人に送りたい」「この動画のURLをSNSに貼り付けたい」っていうのができないことに気づき（やってから気づく）
この小窓が出ている状態固有のURL生成作戦を考えるぞ、おー💪
ということで
①小窓開いた時点でURLの文字列だけ生成、ブラウザのURLの文字列が変化
②実際にそのURLをクリックしたら、一覧の上にその動画の小窓が出ている状態をつくる
頭の中の小人さんたちを召還し
おっしゃ実現！
それでこのURL https://www.jamzip.com/tv/watch/9HWtK5GDLlE をクリックすると…
ほーら、こんな感じで、いかにも一覧からモーダルを開いた状態で表示できましたー🎉
ということは、このURLをSNSでシェアできるようにSNSシェアボタン作れるやん！ってそれもつくってみました！うまくいってるかなー、試しにシェアしてみてください。
SNSでシェアした時に、画像とかタイトルとか出てくるのはOGPタグという、各SNSが引用するときは、このタグがあれば利用しますよーっていうタグも<head></head>内に出力できるようにしたので
（しかし、OGPタグはサーバーサイドで出力しないと、SNSは読めないので、実は②はSSRじゃないと実現しない、ということは SSRで出力+クライアントサイドでvue実行という、見た目は連続しているように見えるけど作りは全く別という、変態仕様になっちゃった）
みんなが普通に使って意識もしなくなっているものって、必ずそれを作った人がいる
あれれ、音楽をやっているの人のブログやなかったっけ？っていう心の声が聞こえてきますが
なんで、こんなことを書いているかっていると
つまり
このことを自分でつくることで、知るのです
そして、「それをやってくれた人」この場合でいると「試行錯誤して、自分の人生の時間を使ってコードを書いてくれた人」がいて Facebookもあるしtwitterもinstagramも、おおよそ日常的につかってるものがあるんだなーって、自分が作り手になって初めて気づくのですね。
音楽をミックスダウンしてるときも
普通にスピーカーから聞こえてくる「普通を実現する」って実はすごいことなんだって
思い知らされるのです
jamzIpTVは、まずyoutubeチャンネルにあるものにsatoがコメント加えて足していっています
youtubeに上げられないものは、AWSのS3にアップして、それを引っ張ってこれるようにしようかなー
って考えてます
お楽しみに！！
https://www.jamzip.com/tv
