#7 自動生成ボタンを実装した、季節のカルテット
2023/3/12Guest:HIDEKI
で、俺も今日外出たから、パソコンいじりたかったんだよね、本当は。
一応パソコン持って外出て、なんか久しぶりに作りたいなと思ってたんだけど。
あー、いいな、そういうの。
うん、それがそのハンバーグが並びすぎたせいで何もできなかった。
確かに、普通にハンバーグに1時間半ぐらい使ってるってことか。
で、考えたら何もしたくなくなるな。
そうねー、こないだ季節のカルテッドを進めたじゃん。
はいはいはい。
あれ、もともと楽曲を紹介しているブログの中で見たのよ。
うんうんうん。
ちょっと待ってね、1回そのページ送るわ。
えーっと。
サーッと見た。
ボタン使えた?
うん、使えた。
それを作ったのよ、俺。
うん、いや、ブログで見た覚えはあるよ。
そう、それで。
そうだね、そこのページで季節のカルテッドを聞いたんだよな、そういえばって思って。
うんとね、まあ、すごく言うとあった。
そう、そんな感じに何か作りたいなって思ったんだよな。
あー。
それってまずアイディアだよな、何を作ろうかってところからだもんな。
できるできないわ、ともかくとして。
ね、俺はこれをやりたいだけで、何かこうしたいとか思ってないので、これもTwitterでこうやりたいなーっていうのを見たから勝手にできるんじゃないかと思ってやってただけなんだよね。
あーそうだね、要望もちょうどいいぐらいなのかもな。
そんぐらいだったらできそうって。
うん、これできんじゃね?って思ってやってみたら、どのぐらいかかったんだろうこれ。
なんだかんだ1日ぐらいだった気がするんだけど。
おー。
あれ、次の曲にも飛べるの?
押しながら、再生ボタンを押してスクロールしてって次の曲が出てきたら、それに切り替わるみたいな感じになってる。
あー、思ってたよりも逆にすごいな、それ。
なんか連続再生するだけかなって思ったけど、そうじゃないんだな。
そうね、なんていうか、こういうさ、楽曲の紹介記事とか俺もよく見るんだけどさ、
リンクとかこうやって載せてくれてるけど、めんどくさいから押さないんだよね、なんだかんだ。
はいはいはい、まあわかるよ。
1個も押さないのに、これ要は10個書いてあったら10回押さないといけないんだよね、それぞれ聴くためには。
はいはいはいはい。
だったらこの1回再生ボタンを押したら、ちょうど今見てる奴の曲が流れてくれたら嬉しいっていう。
え、もしかして何、そうやって曲の途中でスクロールしてったら切り替わんの?
切り替わるよ、もちろんiTunesのサンプルだから30秒しか聴けないけど、1回やってみたら、1回また切ってもいいから、ぜひ。
いや、俺が思ってるよりすごいかもしんないな、そしたらそれ。ちょっとやってみるわ。
どう?楽しかった?
うーん、思ってるよりすごかったな。ただこの人の場合、曲の紹介文が短いと決まったから。
あー、なるほど。
あれ程度ビッシリと曲の紹介文書いてたらちょうどいいかもしれない。
うんうんうん。やっぱ1回押してスクロールしてって流れてると、やっぱり便利だなって。
そう、まあ確かにすごくいいかもしんない。
ああいうブログ書く人は全員搭載した方がいいかもしれない。
やっぱり全人類Apple Musicにするしかないかもしれない、Apple歯に染めて。
そうか、Apple Musicしか使えないのか。
あ、そうね。使えないっていうか、これそもそもサンプルの主張だから、Apple Musicに入ってることとかは全然関係ないんだけど。
でも人によって違うやつ埋め込んでることも多いからね。その人のこだわりとかもあるだろうし。
あー、なるほどね。
そうね、なんか大変だったかな。このね、やっぱさ、こういうの作り出すとさ、ちょっと凝りたくなってくるよね。
うーん、まあ言いたいことはわかりやがって。おそらく誰も気づかないようなところとかこだわり出すんだろうな。
そうそう、一番最初はまあ、そのツイッターで見たね、この今見てるのが流れてくれたら嬉しいみたいなのが書いてあったの。
それ自体はまあ、まあ割とすぐできるかなと思ってパッてやったんだよ。
で、その後に、なんかボタンのさ、ボタンどういうボタンがいいんだろうっていうのもよくわかんなくてさ。
うーん、まあそうだね。
再生ボタンか、いやなんか実は音符の方がいいのかとか思い始めたりしてさ。
虹かちゃんの顔でも置いときゃいいじゃん。
でもそうなんだよ、なんか画像があった方がウキウキかなって思って、
だったらジャケット写真あったらめっちゃよくねって思い始めたら時間がかかった。
あーなるほどね、あーそっかそっか。
そうだね、ボタン押したらジャケット写真になったな、すごいな確かにそれ。
そう、押したら、最初は押したら、あの、なんていうんだろう、一時停止ボタンに変わるみたいな感じで作ったんだけど。
うん。
それよりはジャケットあった方がおしゃれだよなって思って。
まあわかりやすいしな、今はどっちの曲なんだろうってなった時。
ね、その後が、これできなかったことなんだけど、
えっとね、ボタンをさ、今三角の再生ボタンを丸で囲ってる状態なのね。
うんうん。
で、グレーの色、灰色。
ちょっと薄めの色だったね。
そうそう、これ押した時は、どうなってたっけ、かなり薄くなるんだっけ多分。
グレー、なんか半分グレー半分透明みたいな感じになるんだけど。
うん。
ここ本当はジャケットの色だったらめっちゃ良くねって思い始めたのよ。
うーん、色ね。
そうそう、今ジャケットをそのグレーで囲ってるけど、
あの、例えばディストーション流してたら赤色っぽいからこの曲って赤で囲いたいなって思って。
うーん。
これ、そうだね、この辺で無駄な時間ばっか使ってたのは失敗したし。
難しかったんだよね、それ。
難しいな、きっとそれはな。
最初、そうだね、ディストーション流してたら赤っぽいから赤。
えーと、何が悪いは黄色っぽいから黄色みたいな。
それって結構難しくないっていうところでさ、このジャケットのどこを取るかによって色って全然違うじゃん。
いや今見てんだけど、何が悪いだったらさ、周り青く四角く黄色くなってんじゃん。
うんうん。
全部がそれだったら簡単だなと思ったよな、そのある範囲だけ切り取ればいいわけだからな。
そうそうそう。
けど他の曲ってなるとそんな曲ばっかじゃないもんな。
うん。
で、それでそういうライブラリとかがあるのを調べたんで、そういう機能を提供してくれてる代表色。
代表色。
まあまあ言いたいことはわかるけど代表色な。
その画像の中の、まあ実際にそういう色かわかんないけどその画像の中でメインとなりそうな色っていう意味なのかな、きっと。
言葉違うかもしれないけど、まあその一番それっぽい色を抽出してくれるライブラリとかは結構あったんだよね。
おー。
でもなんか、それって要は他の、他のライブラリに依存してるとちょっとめんどくさかったりするので。
はいはい。
これ自分でもできるなって思ったのよ最初。
自分でできる、ああそう。
うーん、他のを参照する必要がなくできるなと。
要は、あの1ピクセルごとに一番多く使われている色を採用するみたいな。
まあまあまあ、なるほどね、うん。
うん。
で、そこでも、それも自分で作って、もうそこまでは良かったんだけど、最後結局この画像を読み取ることができなくて諦めた。
なんだろう、なんて言ったら伝わりやすいかな。
まあ要はあくまでこれ、アップルとかがなんか持ってるような画像なので。
うん。
うーん、まあうまく参照できなかったって感じなんだよね。
こいつをうまくその仕組みに載せることができなくて、残念ながら残念。
画像を貼り付けることはできたけどその仕組みには載せられなかったんだ。
そんな正確に言うとややこしいけど、そうだね、要はあそこに映すことはできるけど抽出したりしようとするのはできないみたいな感じ。
あー、へー。
で、それできてたら、めっちゃ細部だけど色変わる、めっちゃオシャレやんって思ったんだけどな。
あとなんかあったかな、これをやる上で大変だったこと。
これって何?文字に反応してるの?文字反応っていう言い方が楽しいのかもしれないけど。
あー、このiTunesメディアに反応してる、この再生できそうなと。
あー、なるほどね。
ボタンの活性化も今これ生きてるかわかんないけど一応ページが全部読み込まれるまでは再生ボタンを押せなくはなってるんだよね。
あー、活性化ね。
そうそうそう、まだ全部読み込んでない状態だと再生できないみたいな。
あー。
その後がなんか初めて知った、そのブラウザによってこの自動再生ブロックされてるっていう。
へー。
ここはすごく歴史がありそうだったんだけど、なんだろう、だからひできがたまたまこのウェブサイトに訪れた時に勝手に音楽流れたらちょっと嫌な気持ちになる可能性がある。
まあそうだね、会社で流れたら困っちゃうもんね。
そうそうそう、会社でちょっとねサボりながらブラウザ見てた時に急にディストーション流れたらお前サボってるやんけってなっちゃうのが困るから。
そうだね。
大体のブラウザで勝手に音を流す機能はオフにされてるというかできなくなってるんだよね。
なんか大体許可を求めてくる気がするよね、そう言われてみれば。
あ、そうだね、まあもしかしたらそういう、ありがちなのはマイク使う時の許可とかだけど、音で言うと何かしらこっちがアクションしたら音流していいよみたいな感じが多かったのよ。
うーん。
だから明示的に再生ボタンを押したらもちろん流れていいっていう。
あーなるほどね。
そうそうそう、だからこれもあくまでボタンを押したら流れるよっていう形にしないといけなくて、なんかちょっとこの辺はめんどくさかったな。
てかこれって結構難しいのかもしかして。
Chromeとかなんちゃらって書いてあるけど、全部のウェブサイトで対応しなきゃいけないってこと?
ウェブサイトじゃないか、ブラウザか。
いいこと言うね、それがあれじゃない?ウェブアプリケーション開発の難しくてめんどくさいところだよね。
いろんなブラウザがあるっていう。
あーそうなんだ。
だいたいブラウザどこも同じような機能を実装してたり、同じ仕組みになるようには頑張ってるみたいだけど。
あーまあまあ。
やっぱり細かい差異はあるし、それがあるからよくインターネットエクスプローラーIEがディスられたりしてない。
あーいやわかんない、俺IEしか使ってなかったんだけどさ、これまでの人生で。
もうIEは、なんかあれだよね、もうダメだよね。
昨年かな、昨年当時。
現役引退しちゃったので。
現役引退しちゃった。
そうだね、それもあるし、ウェブアプリケーションだとね、パソコンなのかスマートフォンなのかとかによっても違う。
あーまあそりゃそうか、そっちの方が大きいのかもしかしたら。
だから、例えば俺が仕事とかでやってる時はそういうのって基本的に限定するんだよね、このブラウザーのこの端末では動きますみたいな。
あーまあそうだよな、保証範囲みたいな話もあるしな。
それはB2Bだからいいけど、B2Cみたいな感じになると、どんなユーザーがどんな環境で使うかわかんないっていう。
そうだね、確かにChromeじゃ使えませんって言われたら困っちゃう人多いな。
うん、でも大丈夫ですよ、全人類iPhoneしか使ってないし、全人類Chromeしか使ってないから。
え、iPhoneはSafariじゃないの?
あーそっか、俺もイレギュラーか。
うん、でもこれブログの冒頭にも書いてあるんだけど、俺のPCと俺のスマホの俺のブラウザで動作するだけなので。
確かに、まずはそこからだわ。自分以外の人間はどうでもいいわ。
まあよかったな、Androidで動くことはおそらく間違いない。
Windowsはまだやってないな。
うん、あとでWindowsもぜひ。
Windowsもやっとくか。
さっきのボタン押す話に戻っちゃうんだけど、そうなんだよな、ボタン押さないと音流せないんだよ、ブラウザの機能的に。
うん。
何が痛いかっていうと、ボタンを押した時に、ディストーションを押したらディストーション流していいんだけどさ、その下の。
あー、まあなるほどね。
何が悪いとか、大好きとかは押してないから自動で活性にできないんだよね。
だからそれがすごくめんどくさかったから、自動再生ボタンを押したら、自動再生ボタンを押したっていうアクションに対して、
ここに映ってる全部の楽曲を一回ロード状態にしとくと流れるようになるっていう、やや裏道っぽいような感じのことをして実装した。
最初全部読み込んでからじゃないと流れないよっていうのも。
ああ、そうだね。あくまで自動再生ボタンをクリックした、その状態でもちろん全曲流れたら超困るんで、わーワーワーワーワーワーになっちゃうんで。
そうだね。そりゃ1番困るね。
全部流すんじゃなくてロードだけした状態にすると、1回ユーザーからアクションをもらったらその後はこっちで何かの景気に自動で流すことはできるんだよね。
そこでやっと主役のインターセクション、オブザーバーっていう超かっこいい名前の機能が出てくる
かっこいいわ、確かに
でもこれ普通に簡単なもんで、ページのどこかまで来たら何かするよっていう仕組み
それ簡単なんだ、俺それが一番難しいのかと思った、むしろ
それが一番難しいのかと思った
あーそれ簡単なんだ、俺それが一番難しいのかと思った、むしろ
そうね、もちろん俺が作ってるわけじゃないしね、そのブラウサーが提供してくれてる
あーまあまあ、そっかそっか、なるほど
うん、あのここまで来たら何とかするよっていう仕組み提供してくれてるんで、俺はそこ来た時何したいかを書いてるだけ
うーん、あーなるほどね
うん、ちょっとだけ使ったんだよな、そのオプショナルな仕組みというか
今一応さ、画面の3割ぐらいまで来たら次の曲が流れ始めるってなってるんで
あーまあそれは実感はできなかったけど、まあうんうん
でしょ、これねあんまりいらなかったかもしんないけど
このページの下のどこだっけ、今のインターセクションオブザーバーの章のところに載せてるハードコピー、スクショ
のとこで何かフライングして流れてきちゃうと困るんじゃないかって思ったんだよなこの時は
はいはいはい、なるほどね
そうそう、今そこのスクショみたいにさ、上の文読んでんのに下のところが来て、この曲流れ始めちゃうと困るなと思って
なるほどなるほど、あーまあそういう意味じゃいいのかもしんないな、3分の2っていうのはもうだいたいっていうちょうどいいラインかもしれないな
最初そう思ったんだけどさ、普通に自分でやってたらさ、なんだろう今このここに写してるスクショみたいな微妙なこのページスクロールにすることってあんまないんだよね多分
あー、やっぱ文字を読んでいくからなんだろうな
そうそう文字読んでたら、文字の区切りが見えたらそこでなんだろうこの上まで一義にスクロールしてって読まない気がして
うんうんうん、わかるわかる
文字読んだらピッて一回スクロールするから多分この機能意味ないんだなってことに気づいた
あーまあそれはな、やってみなきゃわかんねえからな
そんな感じで余計なことばっかしてたからすごい時間かかったな
あーいいんじゃないか、やっぱこだわりは大事だろ
で一回これやるとさ、またなんかこれ系のことをやりたくなるじゃん
なるほどね、せっかく得た知識だしな
そうそう、で結論うまくいかなかったんだけど
なんかだろうな、こういう曲の紹介書くときって
ここの、この2番のサビの後のここのギターがいいですとか
うーん、まあまあまあ、そりゃ書きたいよな、落ちサビが一番いいですとかってな
そう、落ちサビの裏で鳴ってるこの音がすごい良くてとかって結構あるんだよね
そうだね
その文字を押したらそこに飛べるようにしたかったんだよ
すごく欲しいね、それはね
正直この楽曲児童再生はまあいいんだけどさ
あの正直聞きたいのはそこじゃなくて、あの紹介してくれてるとこ聞きたいんだよ
いやそうだね、いやーわかるよ、いやそれ見てて思ったことはあるもん
どこだよって、何分何秒まで書いてくれてる奴はまだ親切だよね逆にね
あ、そうだね確かにそれはそうかもね
あの2サビって言われても知らない曲の2サビどこから始まるのか知らねえよって思うかもしれないので
何分何秒だったらもしかしたら聞いてやるかもしれないよね、そういう意味じゃね
でね、それがね、いやーまたもうちょっと頑張ってもいいかな
これも、これこそApple Musicに限っちゃうんだけど
今iTunesの埋め込みなんだけど、もう一個Apple Musicって埋め込みの形式があるのよ
なるほどね
まあ見た目が違うだけだと思ってくれればいいよ、若干見た目が違うみたいな
そっちは、あのApple Musicにサインインした状態だと
自分はサインインしてて、要はちゃんとお金払ってる状態なんで
楽曲フルで聞けるんだよね
そうはね、買ってる人はね
そうそう、このブラウザ上でこの30秒とかじゃなくてちゃんと長い時間聞けるから
これだったら要は、今30秒あるから絶対さ、さっきの2サビのとことかいけなかったりするんだけど
フルだったら飛ばせるなって思って、これも簡単そうだなと思ったんだけど
そうだね、そんなに難しくないのかなって俺も聞いてて思って
そしたら、えっとね、ここから調べるのがめんどくさくなってやってないんだけど
なんか1分半だったりフルだったりするんだよね、なんか違いがよくわかってないんだけど
あー、逆にそれはあれか、iTunes側のなんか色々調べていかなきゃいけないってことか
あ、そうそうそう、ちゃんと調べてないけど、あれさっき俺が試したとき4分半だった気がするのに
なんか今1分半しか聞けねえなって思ったりしたことがあって
そこでめんどくさくなってやめちゃったんだよな
あー、いやその機能欲しいな
そうだよね、その機能こそ求められてるはずなんだよ
確かに
これこそ本当に、だからこの機能が実装されれば全人類Apple Musicに入ってくれるからさ
だって、記事読んだときにApple Musicだったらそこ聞けますようになるんでしょ
あー、それは確かに月1000円の価値があるかもしれないな
そうそうそう、あ、そうね、ひできみたいにそもそも入ってないんじゃなくて
Spotifyに入ってるとか別で入ってるってケースが多いんだよね
まあいるだろうね
だからそれを全員俺はApple Musicに入れてやろうと思ってるのです
Spotify潰すか
うん、Spotify潰してApple Musicに、あー、このポッドキャストをSpotifyで配信してるのに
くそ、さすがにそれは配信停止だわ
バンされるかな
うん、さすがにバン
いやー、もう一回頑張ってみるかその機能を目指して
そうだね、いやどのブログ見てても大体はその人の推しポイントってのがあるからね
ね、まあそんな感じで
なんかお悩みがあったら募集してるわ
そうだな、まあ言うてお悩みがなきゃできないわけだからな、それもな
そうだね、顧客がいないと何もできないので
なるほど、難しいな
季節のアカルテッドはどう?良かった?
あとね、コメントにはまだ言ってないけど、そうだね今のところ1位だな多分
おー、2023年楽曲大賞
これなかなか覆えんないレベルだね多分ね
え、相当だね
相当来てるね
まあやっぱり春ですからカルテッドの季節ですよね
あー、なのか?
春夏秋冬季節のカルテッドだからカルテッドじゃない季節は存在しないんだけど
そうだね、いやそうだよ
だからすごい常に季節のカルテッドなんだよこれからは
あー、今年1年は来てるな、すごい
さっき帰り際にさ、季節のカルテッドってインストあるんだってことに気づいてそっちを聞きながら帰ってきたわ
あー、シングルかあれは
うんうん、なんかそれさ、ちょっとめんどくさいことになってなかった?一回ググっていい?
えっとね、公式が謝罪をしてるのを見たことある気がする
なにそれ
あ、見つけた、えっと、鈴木実ニューシングルミュージカルにつきましてのお詫びとお知らせっていうタイトルで
この初回限定版に限るのかわかんないけど、このニューシングルの初回限定版がオリコンランキングで収録曲数によってアルバム扱いになってしまうことがわかったと
へー
であと、通常版はシングル扱いになるらしい
何なんだろう、なんか文脈がわかんないけどもしかしたらオリコン、オリコンランキングはもちろん高い方がいいのか、みんな頑張ってたのかな、わかんないんだけど
まあ確かに謝罪はしたはいいけど何が悪かったのかがいまいちわかんないな、これだと
けどなんかね、片方はアルバム扱いになったらしいっていうか、オリコンランキングは曲数によるんだ
そうだね、そっちだよね
え、でも5曲でしょ?
いや、あれじゃない?初回限定版は季節のカルテッド、春バージョン、季節のカルテッド、夏バージョンってなってたんじゃない?
ああ、夏のカルテッド
そういうことね
そうそう
まあ春夏秋冬これを活かしたら確かにアルバムになっちゃうな、それは
そうそう、冬のカルテッドがね、バラードでまたこれがいいんだってなってたかもしれない
春のカルテッドは結構陽気な感じでいいよね
そうだね
やっぱでも俺夏のカルテッドのピアノイントロで始まるのが一番好きだな
え、待ってこれ気になるな、ミュージカルアルバム、何曲入ってんだ一体
初回限定版ね、初回限定版の方だよ
まああれか、付属の特典CDが付いてると
ああ、そっちの曲もあれかな
まあ要はCD2枚組なんだよね、その説はあるな
ああ、なんかそっちの方がそれっぽいと思う
ていうか、びっくりしたのはまず季節のカルテッドは表題曲じゃなかったんだな
あのさ、俺それめちゃくちゃびっくりしたんだよね、俺も
びっくりすぎてそのツイートしてたと思うんだけど
見てないわ
一応さ、テレビアニメシュガーアップルフェアリーテイルオープニングテーマって書いてあってさ
たぶんアップルミュージックにもこの情報書いてあったと思うのよ
たぶんね
まあ確かに俺今の今までそういうアニメで季節のカルテッド流れるんだなって思ってたけどな
あ、そうそうそう、なんかさ、この名前の文字列さ
すごく季節のカルテッドと親和性高くない?なんだろう
確かにね、シュガーアップルフェアリーテイルね
そうね、季節のカルテッドも別になんかそんな果物って感じじゃないんだけど
シュガーアップルフェアリーテイルとすごく親和性が高かったから
あるある、ミュージカルよりは親和性あるわ
ずっとこれのオープニングだと思い込んでた
なんならミュージカルと2曲並んでてもこっちがアニタイだと思うぐらいだったんだけど
違う、なんで2番目に置かれてるんだろうって気づいた時から
いや、まあ楽しみはできたな、今日聴いちゃう可能性はあるけど
とりあえず次はミュージカルを聴こう
確かに期待が持てるけど、あれかもね
季節のカルテッドがこういう曲調だったってことは
裏を返すと表題は違った曲調な気がするので
そうだね、ただ言うてシュガーアップルフェアリーテイルだからな
そうだね、この名前から連想されるから
そっちの方を見ればいいのか、そのアニメを見ればいいのか
うんうん、季節のカルテッド求めてそれ見て面白くねーじゃんば怒られるぞ
確かに面白くねーし歌は流れねーし、クソだわ
これはどこが良かったの?カルテッドって歌詞が良かった
あー、何が良かったんだろうな
うーん、そういうのうまく表現したことがないから分かんないな
カルテッドカルテッドが良かったとしか言えないな
でもそうだよね、ボーカルがすごく印象的で
あーそうだね、別にこの
やれ後ろの音楽はどうだとかってのはあんま興味がなかったな、この曲は
ね、すごく浅い感想みたいになるけど、もう普通にボーカルと歌詞に気を取られた曲だったな、もう
まあそうだね、歌詞も良かったね
改めてちゃんとインストとかも聞いて、あーこんなに音鳴ってたんだってことに気づいた
あーいいですね、音楽を楽しんでますね
ね、いやむしろ通常時から気づけよって感じなんだけど
イントロでギターみたいな音鳴ってたんだってことに気づかなくて
あー思ったのはアウトロがちょっと長いなーってのは思って
そこは音楽を楽しんでる感はあった気がするけどな
結構あといろんな音色入ってたね、キラキラした音とかも多いし
幸せいっぱいな感じなサウンドでした
なるほど、それを聞けばいいんだな
カルテッドばっかりに気を取られずに後ろの音に目をやるとまた楽しいかもしれない
なるほど