アニメ化に感謝しかない(´艸｀*)
歌詞がなかったのでメモ
www.youtube.com
The Sky Blue Archive
新しい景色が見たくて
自転車をこいだ
ただ同じ場所で止まっている
日々から抜け出して
屋上サボって寝転んで
青空を見下ろした
クジラみたいな雲が
カタチを変えていく
返せないほどの過去を抱えたまま
砂だらけの世界で
分け合うジュースの味
ひとりきりじゃきっと
みんながいないときっと
笑うことも泣くこともできない
運命共同体
世界中の記憶がいつか
砂のように消えてしまっても
空と 海と 風と 君が
そこにあれば
青春は終わんない
守るべき理由はいつも
単純明快 この場所が私達の
たったひとつの居場所だから
最新すぎてカラオケにない曲を歌いたい...
というときに"Kalyoke"
こちらのURLから青春のアーカイブを歌えます
https://himazi.f5.si/search_id/Q4sWF6z9TuE
一つ一つのjsやcssだけを狙って更新する。っていうのできないかな？と思ったら、あったので共有。
apacheを用いてflaskサーバーを用意した。しかしjsやcssを書き換えてもいちいちブラウザのキャッシュを消さないとサーバーサイドでエラーが出る。
「おい！なんか内部がおかしいぞ！(過去のjsを引用して)お前の言う機能はないぞ！」
みたいな？
これを解決するためにChatGPTに聞いたら
HTMLに
<meta name="cache-control" content="no-cache">
これ付け加えろ
って答えが返ってきたから。実際にやったらまぁいちいち消す必要はなくなった。
と思ったら毎回すべてのキャッシュを消してるせいで、つぎの弊害が発生した。
①スマホでアクセスするときに画像読み込みに時間かかる。
②flaskのsessionで管理しているログイン履歴が消える
③毎回サーバーに無駄に負荷がかかる
①は、画像が読み込まれるのが遅いせいでUIが崩れることがあった。
②は、ログインしたら次アクセスしたときもログインしたままになっててほしいのに。勝手にログアウトされるからめんどい
③は、利用者数増えたらえぐいことになりそうやから予防
って感じかな。
ここで！狙ったファイルだけ強制更新させる方法があったんですわ。
やり方は簡単！
<link rel="stylesheet" href="static/css/defaults.css"> ↓ <link rel="stylesheet" href="static/css/defaults.css?ver=20240407"> <link rel="stylesheet" href="{{ url_for('static', filename='css/defaults.css') }}"> ↓ <link rel="stylesheet" href="{{ url_for('static', filename='css/defaults.css') }}?ver=20240407"> <script type="text/javascript" src="static/js/session.js"></script> ↓ <script type="text/javascript" src="static/js/session.js?ver=20240405"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/session.js') }}"></script> ↓ <script type="text/javascript" src="{{ url_for('static', filename='js/session.js') }}?ver=20240405"></script>
引用するファイル名の後ろに?〇〇=△△って書き足す、だけ！
こうするだけで、サイトの利用者全員が
webサイト更新後にアクセスしたときに指定されたjs,cssが更新されるようになるんだな。
もし、付け足してから変更点があったらクエリパラメータの値を変えればまた更新できるよ！
?ver=20240405→202404051917
とか
これのおかげでflaskのsessionからもデータが消えてログアウト状態になることも防げたしバンバンザーイ！だ
ちなみにhtmlに直接styleやscriptを書いている場合は自動的に更新されるからクエリパラメータとかキャッシュの更新作業はいらないかも
クエリパラメータって2，30年前から使われている技らしいけお、今も昔もwebの大枠は変わってないんだなってことがはっきりわかんだね
カラオケで新曲あったけど本家MV,PV見ながら歌いたいな....
ってのを解決できるアプリがあります！
カラオケアプリKalyokeへアクセス
なんでも歌えるカラオケアプリを作るにあたって音源を確保する必要があったので
いろいろ探してたらyt-dlpなるものを発見した。
pythonで実装しよう！としたのだが、実行環境がコマンドライン上がメインだったので
コード内で実行するのに苦戦した。同じ苦しみを味合わないようにメモを残します。
pip install yt-dlp
必要ならば仮想環境でのインストール
def download_with_info(youtube_url, output_dir): out_dir = "./output" os.makedirs(out_dir, exist_ok=True) ydl_opts = { "quiet": True, "format": "bestaudio/best", "outtmpl": f"{out_dir}/%(id)s.%(ext)s",#指定フォルダに[videoid].mp3で保存する "postprocessors": [{ "key": "FFmpegExtractAudio", "preferredcodec": "mp3", "preferredquality": "192", }] } with yt_dlp.YoutubeDL(ydl_opts) as ydl: info = ydl.extract_info(youtube_url, download=True) return info#動画の情報を返す
def get_playlist_videoids(playlist_url): ydl_opts = { 'quiet': True, 'extract_flat': True, } try: with yt_dlp.YoutubeDL(ydl_opts) as ydl: info = ydl.extract_info(playlist_url, download=False) if 'entries' in info: video_ids = [video_data['id'] for video_data in info['entries']] else: video_ids = [] # 'entries'キーが存在しない場合は空のリストを返す except yt_dlp.utils.DownloadError as e: print(f"エラーが発生しました: {e}") video_ids = [] # エラーが発生した場合は空のリストを返す return video_ids
洋楽も最新曲もニッチな曲も歌えるカラオケアプリを作りました！
ぜひ使ってみてください。
カラオケアプリKalyokeへアクセス
FlaskはPython上で手軽にサーバーを開くことができるもの。である。
導入とかはほかの人の記事のほうが参考になると思うので書きません。
自分がflaskでよくわかんねぇ？って最初なった部分。使えるようになったらクソ便利だった。「Jinja2」の使い方を残そうと思います。
base.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>AppName</title> </head> {% block [name] %} {% endblock %} </body> </html>
※[name]は好きな単語
page01.html
{% extends 'base.html' %}
{% block [name] %}
<div> content01 </div>
{% endblock %}
page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> content02 </div>
{% endblock %}
この3つを用意することで、base.htmlにあるヘッダーとかタイトルとか、フッターの内容をpage01,02で転用できる。
いちいち全部のhtmlをコピペする必要がなくてすっきりする！
pythonでデータベースから曲の情報を取得するのだが、その内容をhtmlやjsに利用したい。
そんなときに使える機能がある。
app.route('/page02') def main(): title=GetTitleFromDatabase(musicid) return render_template("page01.html", music_title=title)
ここではmusic_titleという受け渡し用の変数にtitleという変数(今回は曲の題名という文字列)をいれて...
page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> title: {{ music_title }} </div>
{% endblock %}
---------------
htmlで{{ 受け渡し変数 }}って用意することでpythonからの値を利用できる。
<a href="https://music/{{ music_title }}">元の曲サイトへアクセス</a>
hrefの中に入れたり
<script>let title = "{{ music_title }}";</script>
jsの変数にも代入できる
複数の変数を渡したいときは
(1)
app.route('/page02') def main(): title=GetTitleFromDatabase(musicid) lyric=GetLyricFromDatabase(musicid) return render_template("page02.html", music_title=title, music_lyric=lyric)
page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> title: {{ music_title }} </div>
<div> title: {{ music_lyric }} </div>
{% endblock %}
(2)
app.route('/page02') def main(): title=GetTitleFromDatabase(musicid) lyric=GetLyricFromDatabase(musicid) datas={ "music_title": title, "music_lyric": lyric } return render_template("page02.html", datas=datas)
page02.html
{% extends 'base.html' %}
{% block [name] %}
<div> title: {{ datas['music_title'] }} </div>
<div> title: {{ datas['music_lyric'] }} </div>
{% endblock %}
このように書ける
履歴を表示する部分を作るときに同じhtmlをコピペで用意するのが面倒だからどうにかできないかと思ったら。forが使えるだと...!
{% for i in datas['history'] %}
<div class="user-singed-history-index-box">
<a href="{{ i['url'] }}" id="user-history-title{{ loop.index }}">・{{ i['title'] }}</a>
</div>
{% endfor %}
datas['history'] はリストになっていて、リストの要素数分
セッションの有無で表示する。しないが設定できたからマジ助かった。
{% if 'username' in session %}
<p id="welcome-message">ようこそ{{ session['username'] }}様！</p>
{% endif %}
ほかにも
style="display: {% if 'user_name' in session %}block{% else %}none{% endif %};"
という表示、非表示の操作もできる
似たようなことができる物に「Pug」というものがありますが、flask環境で導入がめんどくさそうだったから使いませんでした。あと、開発初期じゃなくて中盤に知ったのも入れれないなと思いましたねｗ
洋楽も最新曲もニッチな曲も歌えるカラオケアプリを作りました！
ぜひ使ってみてください。
カラオケアプリ Kalyoke へアクセス
and-ha.com
カラオケアプリを作ってみよう！！(0)なぜ作りたいと思ったか。 - 暇があるから人である。暇でなければ機械だ
前回のあらすじ
従来のカラオケに「歌いたい曲が無い」という不満があったからアプリ作ろう！と思った。
じゃあどういうアプリを作ろうかと仕様書？設計書？をある程度決めようとなった。
①初期段階
・androidとios、PC用のアプリ、ソフトを作るのは面倒だった。そのため全部の媒体でも使えるwebアプリとして作る。
・ytdlpでyoutubeから音源を取得
・[DEMUCS]という音源分離(音楽をvocalとinstに分ける)ことのできるAIを使用してオケ音源を作ろうとした。
・そのためにPythonを扱いやすいwebフレームワーク[Flask]を用いることにした。ほかにもサーバーに以前使ったことのある[nginx]を用いることにした。
・xserverのVPNレンタルサーバー(800円/月)を借りて運営する
②1カ月後
・[nginx]だと一つのタスク（音源分離）中ほかの人がサイトにアクセスできないことが分かったので[Apache]に変更
③クラウドファンディング開始
・現PC、レンタルサーバーの処理速度が遅すぎたため、資金を集めていいGPUを積んだ自作PCを作ろうと判断
④クラファン終了(自作PC完成)後
・[Docker]を用いて自前のデータベースとサーバーを用意する。
・ピッチ変更をできるようにする
・サーバーからメールを送信できるようにする
・お問い合わせ機能を作る
・ログイン機能を付ける
・課金機能を付ける
・ランダム再生できる
・youtubeのプレイリストからカラオケを作れるようにする
という風に仕様がどんどん増えていった。やっぱボトムアップはこうなるよね。
⑤正式サービス前後には次の要素も増えた
・歌詞の自動検索機能を付ける
・リアルタイムにピッチを変更できるようにする
あとは思いついた内容をコードに書き直したり、運用設定するだけだ！全然「だけ」じゃない。やったことないことが多かったからまぁ苦戦した。
他の記事にまとめていきたいと思う。
「音楽は人生の楽しみの源であり、人生の苦しみからの解放である。」 - レオナルド・ダ・ヴィンチ
「音楽は、言葉では言い表せないことを表現する唯一の方法である。」 - レフ・トルストイ
「音楽は、聴く人の魂に直接語りかける。」 - アリストテレス
「音楽は、すべての人にとって共通の言語である。」 - ヘンリー・ワズワース・ロングフェロー
「音楽は、時間の経過とともに変化する芸術であり、常に新しい表現方法を探求している。」 - ジョン・ケージ
「音楽は、喜びと悲しみ、愛と憎しみ、すべての感情を表現できる。」 - ピョートル・チャイコフスキー
「音楽は、人の心を癒す力を持っている。」 - クラウディオ・モンテヴェルディ
「音楽は、人々に希望を与える。」 - ネルソン・マンデラ
「音楽は、世界を平和にする力を持っている。」 - スティーヴィー・ワンダー
「音楽は、人生を豊かにしてくれる。」 - ヴォルフガング・アマデウス・モーツァルト
さまざまな偉人たちの言う通り、音楽って生きてるものを楽しませてくれる。動かす力がある。
私も小さいころから動かされ続けた一人だ。その過程で一つ困ったことが発生した。カラオケに歌いたい曲が無いのだ。
・ニコニコで見つけた音MAD
・ふざけて歌う系の替え歌
・洋楽（英語、インドネシア、ロシア、イタリアなどなど)
・ゲームのOST
・東方
・ニコニコメドレーシリーズ
・ラップ
・ボカロ、UTAUの界隈曲
・最近出たばっかの曲
・推しのアイドル
などなど沢山ある。
カラオケに行くたぁんびに「歌いたい！」と思って検索しても出てこない。悲しさが積もり積もった。JoysoundでもDAMでもだめだ。取り扱っていない曲が多すぎる！今すぐ歌いてぇってのに。
ほかのサービスもそうだ。曲は無いし、カラオケアプリは余分なコミュニティ機能が多い。それか金がかかる。Karaoke Mugenというサービスは理想に近いけど、まぁ歌いたいのがないよね。
そんななかIpadで、めちゃんこ使いやすいAnyTuneっていう再生アプリに出会ったの！自分の好きな曲をアプリに入れて、歌詞を入れたら。はい！簡易カラオケ？機の完成！音を抜いてるわけではないけど、各曲に対しどのピッチで歌ったかを自動保存してくれるめちゃ使いやすいアプリだったんだよな！
あと、最近のカラオケ施設ではスクリーンとIpad,Iphoneをつなぐコネクターの無料貸し出しがあるから...
AnyTuneを開いたIpadの画面をスクリーンに表示させて、歌詞見ながら好きなピッチで、カラオケに無い曲を歌って満足してたわぁ。
だけど、人の欲望は足るを知らないせいか、これでも満足できなくなったんだよね。
・どうせ歌うなら本家MV,PV見ながら歌いてぇ
・いちいちAnyTuneに曲を用意するのめんどくせぇ
・歌詞をいちいち検索して、コピーして用意するのめんどくせぇ
・やっぱし空のオケ（声無し）で歌いてぇなぁ...
っていう風に。
これ以上はもう今用意できるものでどうにもできなかったから、さてどうしようと考えてたら。自分でカラオケアプリが作れるのでは？
以前からプログラミングはしてたし、Unityでゲーム作ってたし、レンタルサーバー借りて二次元エロ画像のπを動かせるサイトを作ったりしてたから..まぁいけるだろう！と思い。2023年9月から製作に取り掛かった。
今更感あるけど歌いたかったのにちょっと↓のがみずらかったので、修正したのを作った。
おとわっかのMADの歌詞を書き込んでください。１番早かった人に知恵... - Yahoo!知恵袋
↑感謝感謝
-------------------------------------------
ワワワッカさん53位
ワッカ落ち着け ワッコが熱いよぉぉぉ
あたい知ってるよ
オーラカエボウヨって知ってるよ (なんで黙ってんだよ)
知らないよ違うな
チルノさんはアルベドじゃないだろうな
チルノは アルベドだ (バカ) 小声 (バカ) 小声
チルノはアルベドだ(あ、なるほどねぇ) (最悪だぜ...)
(チルノさんもアルベド族と一緒なんてよ...)
53位ユウナのガード
ワッカ *1
「選手交代だ」「まぁ見 てろって」
「ワッカ」 「一緒に続けよう」
「俺たちの物語をだ」
(サビはセリフ多すぎて聞き取りずらいので割愛)
唸れブリッツボール!
(サビはセリフ多すぎて聞き取りずらいので割愛)
アアアアア———!
「チャップの代わりにはならない」
「今は分からないだろうけど」
「いつだって私の方が正しかったでしょ?」
「でもさぁ... あいつだって困ってたし…」
「また言い訳?」「だって…」
「だって? でも? 聞き飽きたわ。」
くそっなんで俺がしゃーねぇなぁ
うーん... はっ! いいこと 考えたぞ!
お願いがあるんだなぁ
分かった分かった分かったから離せよ
きっと上手くいくぜ! よぉし、 じゃあ行って こい
うおおおおぉふっざけんなよ! なんなんだよぉ!
わ おっわっ余裕っす 任せとけよ楽勝っす
アウッ! 嫌が らせか? 痛い痛い痛い痛い
「事態はどんどん悪くなっていく」
「夢も希望も ありません」
「このスットコが!」 「まぁ見てろって」
「ワッカ 選手登場!!!」「やったるかぁ」
「いっちょ決めようぜ」 「ちょろいってんだ!」
「さーすっがオレ!」 「こん なもんや」
「のわっ!!!」「クソっ痛い!」
「どういう ことだよ」 「なっ! 早すぎるってぇ!」
「ヤバいヤバいヤ - !! うわぁぁぁあぁ」
「ワッカは水属性の魔物だから、弱点は、分かるでしょう?」
「覚えとくよルールー」
「アルベドだ!」 「うるせーからだまってろ!」
「俺は機械を認めない」 「大体なんで戦うんだ?」
「おっ とうごくな?」
「あぁl」「ふざけやがってぇぇ!!!」
「このスットコが!」 「くそぉぉ」
「危ねぇー」「ふざけ てくれやがって」
「楽して暮らしてた奴なんて弱っちいに決まってるしな」
「おらよぉ!」 「うわぁ!」 「なんだってんだ!?」
「腹が立つよなぁ!」 「今だ怒りのロストストラーイク」
５３位
ひとつだけお願いがあります。
いなくなった人たちのこと時々でいいから...
思い出してください
「おい! 読め」 「ワッカを愛でろ?」
「ふーー」「お前ブリッツボール上手いな負けちまったよ」
「約束だお前の言うことなんでも聞くぞ言ってみ?」
「俺と合作したいだとおおおお!?」
「...分かった」 「俺も男だ 約束は守る!!」
「俺も合作するぞ!!!」
あーダメこいつら
まるでなにもきいていない
でもね、きっと明日は・・・
君と素敵な物語をお願いがあるんだなぁ〜♡
「ぐふふふお願いがあるんだなぁ↑」
「俺だってのかよぉ」 「俺だよな･･･」
「しゃぁねぇなぁ」「うし」
「付 き合ったるかぁ」
空耳「パンティー丸出し見ないふり」
また明日の夜に逢いに行こうと思うが
どうかな 君はいないかな
それでもいつまでも僕ら一つだから
またね Sky Arrow(スカイアロー)
笑ってよ
未来を少しでも君といたいから
叫ぼう今日の日をいつか思い出せ
未来の僕ら
「アァ!」「ディ!? 」
「だーいじょうぶかー?」
ワッカ!!! 「すっげぇえええ...」
ワッカさんが産むんだよぉおおおお
オ オ オ オ オイ
*1:*`ω´)キッ)
キャラクター部 門堂々の1位 (すげぇすげぇすげぇ (早口気味)
なぜそこにいるのかさっぱり分からないワッカ。 (おい!)
結構好きなのかも (やめれぇ~ ///)
美しさ、儚さ、強さ、女性らしさがあって
自らの生まれを呪い世界を憎む男、 ワッカ。
(すてきだね ぇ～ 行きたいよォ)
続いて上位にランクインしたキャラクターはこちら (アアアアアア)
モ"キモ""キモ”モ"キモ" "キモ”
(言葉を慎めよ)
Don't stop Don't stop (ふぇぇ)
(産まれそうなの?) (変だよ) (最悪 だぜ (小声)
(このワッカさんが来たんじゃちょっと心配だな (小声)
ぷにぷにワッカ!!!
モキモ""キモ” モ"キモ""キ モ (すっげぇぇ)
(素人じゃねぇな、どこのチームだ?)
ザナルカンド・エイブス
(ボッツボッツ) (キッパキッパ) (ボッツキッパキッパ)
(ボッツボッツ)(キッパキッパ)(ボッツボッツ) (キッパキッ パ)
(ボッツボッツ) (キッパキッパ) (ボッツティーダ) (キッパ )
(ボッツボッツ) (キッパティーダ) (ボッツティーダ) (キッパキッパ)
(ボッツティーダ) (キッパティーダ) (ボッツティーダ)
(ティーダティーダティーダティーダティーダ)
ねぇ キモ キモ キモキモなワッカを
(おい! おい! おい!おい! 言葉を慎めよ・・・！) (ワッカー!!!)
愛してる (照れるからやめれー)
大概アルベドのせいにしてるような... (ワッカー!)
天使ですが (キモ!)
エボルドは嬉しくなっちゃうとついやっちゃうんだ
皆も一緒にやってみようよ
「イクヨォ!」
ランランランラン ランララランラン
ララララランララランラン ルー!!!
くっだらねぇ! なんだよそれ!バカバカしい
(エボルド賢者タイム 「……」
イクッ!
ﾍﾍﾍﾍﾍﾍﾍｰﾝ
なんで寺院に機械があるんだよ 教えはどうなってんだよ教えは
お前ら禁じられた機械を平気で使ってるじゃねぇか分かってんのか!?
「シン」 が生まれたのは人間が機械に甘えたせいだろうが
金取んのかよ、くそったれ!
「きちんと 寺院の裁きを受けてもらいたかった…」
ティーダのちん○気持ちよすぎだろ!
ちん○気持ちよすぎだろ!
ティダノちん○気持ちよすぎだろ!
気持ちよすぎだろ!
「ティーダのちん○気持ちよすぎだろ!
ちん○気持ち よすぎだろ!
ちん○ (舌なめずり)
気持ち良すぎだろ！ちん○--!!! 」
(ｱｱｱｱｱー)
「大丈夫かー?」 (人一!!!)
「ワッカは良い奴だと思っ た」
「だから聞いてみたくなった」
「まさか」「そうだ」 「シンはワッカだ」
(おい!) (おい! おい! おい! おい！)
(口笛 ピ ーピーピピピー)(やめろー(小声
