Ruliea/るりあさんインタビュー

mL民のインタビュー企画第２弾、３人目のインタビューです。
（インタビュー企画通算で９人目です！）
※mL民：作曲アプリmusicLineユーザーのこと
（「#mL民インタビュー企画」タグで他も見てね☆）

インタビュー企画第２弾ラストは現在ボカロPとして活躍されている、Ruliea/るりあさんを紹介します。

DMでのやり取りをインタビュー形式にまとめました。

スー

それではRuliea/るりあさん、よろしくお願いします。
ユーザーネームの由来はなんですか？

Ruliea

昔、ゲームのハンドルネームとして適当につけた名前をそのまま使ってます！なので残念ながらこの名前に込めた意味とかは特にありません😭綴りが複雑なのは他の人と名前被りしたくなかったからです！あと当時はこの珍しい綴りがカッコいいと思っていました...わーー恥ずかしい！！！！

スー

か、か、カッコいいですねぇ〜～～
。。発音とか。。先頭がRのとことか、、🙄

ダラーン

（メモメモ）

ゲームのハンドルネームで意味は特にない。
Rulieaという綴りがカッコいいと思った。
スーは思ってもないことを口にした。

アゴォー

カッコいいぞお！！
特に li と a に挟まれた発音しない e とかサイコー

スー

わーー後ろがうるさくてすみません😂

でもmusicLineで使ってるアイコンはキュートな感じのイラストだったので、可愛いイメージがありましたね～
名前もどっちにもとれる感じで、実は初めは女の子かなと思っていました😄

こちらがmusicLineのアイコンです。

そうそうこのピースのやつ😆
こちらはmL民の麦茶さんが描いてくれたみたいです！
やわらかな線で良いタッチのイラストですね～♪

どことなくアイコンが似ていますね？
もしかして、るりあさん自身がモデルになっていたりしますか？

Ruliea

はい！現在のアイコンはボカロPとしての初投稿曲「エゴチャート」のMVイラストなのですが、ご依頼する際に絵師のごまさんにmLで使用していた麦茶さんのイラストをお見せしてこの子を描いてください！とお願いしました！
なのでmLのアイコンと今のアイコンの子は同一人物という設定なんですが、別にモデルが僕自身というわけではありません…こんなカッコよくないし… ; ;

ダラーン

（メモメモ）

絵師のごまさんに同一人物になるように依頼した。
モデルは自分自身というわけではない。
髪の毛が緑の訳ないのにスーは何を聞いてるんだ。

アゴォー

とりあえず髭を生やせば良いよ！！

スー

わーー見学者うるさいよー

なんか変な事聞いてしまってすみません😅
良い曲を書けることがなによりカッコいいですよ♪

それにしても自分のキャラクターがあるっていいですね～
キャラクターと共に頑張っている感じがします。

では次に、ひとこと自己紹介をお願いします。

Ruliea

るりあです！19歳です。現在はボカロPとしての活動や楽曲提供などのお仕事もしています！散歩するのが好きです。あとゴロゴロするのも好きです。よろしくお願いします！

スー

楽曲提供なんてすごい✨
理想に向けて頑張ってるんですね！
でも散歩とゴロゴロが好きって意外です😮

ダラーン

それよりもボカコレ 2024冬 ルーキー６位おめでとうございます！！🎉

ボカコレ 2024冬

musicLine出身で作曲をお仕事にできるユーザーが出てきたらいいなあと話していたので、夢が１つ叶いました☆
少しでもmusicLineが役に立ったと思うと、嬉しいですね～今日は後ろで見学してます😊

アゴォー

えーーーー！！！

ショ・ウ・ゲ・キ！= = = ☆

るりあさん結構すごいんだね〜

じゃ、６位を獲った曲の作成秘話とか聞いちゃっていいですか？

スー

今知ったんだ💦
どんな気持ちで見学しにきたのー
てかその流れで秘話を聞くんじゃないよ😱

ダラーン

まあまあ～♪
るりあさんファンの方はここがかなり気になるところなのでは☆
なので６位を獲った曲「足んないわ」について、どういう曲なのか工夫した点や苦労した点など聞いてもいいですか？

Ruliea

嬉しいお言葉ありがとうございます…！
一年半という短い間でしたがその期間でここまで作曲できるようになったのは間違いなくmusicLineのおかげです、本当に本当に感謝しています😭

「足んないわ」はとにかく聴いてくださる方にどうやって楽しんでもらうかを意識して制作しました！ボカロPというとクリエイターの要素が強いですがそれと同等にリスナーの方に作品を届けてそこから何かを受け取ってもらうエンターテイナーでもありたくて。ボカコレは沢山の方に曲を聴いていただけるいい機会なので、自分がワクワクするクリエイターとしての側面も大事にしつつ後者に重点を置いて作曲を進めました！
苦労した点は主にMIXです…なかなか納得のいくサウンドにならず、友人にアドバイスをもらいながら何回も何回も試行錯誤しました

足んないわ

ダラーン

るりあさんにそう言ってもらえると光栄です✨

クリエイターとエンターテイナーの両方の部分が上手く生かされていると思います！
曲や歌詞だけじゃなく、エフェクトやアニメーションが凝っている映像も素晴らしいです。

試行錯誤は苦労しそうですが、一つの作品を通じて仲間と作り上げていく過程はワクワクしそうですね♪
今回の成果は、ワクワクしたものがリスナーの心にも届いた結果だと思います😄

スー

何回聴いてもいいですね～
改めておめでとうございます！！

なんだか遠い存在になりつつある るりあさんですが、
今でもmL民と呼ばせて頂いていいですか？

アゴォー

是非とも、呼ばせてください！

Ruliea

勿論です！PCで作曲するようになってmL自体はあまり触らなくなりましたが、今でもmLの友達とゲームしたり通話したり会って一緒に遊びに行くこともあるので気持ちはいつまでもmL民です◎iOSに対応したらまたコミュニティもちらちら覗きにいくと思います！好きでよく聴いていた友達の曲もたくさんあるので！！

アゴォー

サンキュー

ずっとmL民ってことでよろしく☆
みんなもmusicLineでるりあさんの初期の曲を聴きにきてね♪

スー

かる！
さっきの深刻そうなお願いはなんだったの😲

ありがとうございます♪
それにしてもイラストを描いてくれたり、みんな仲良くなっててなんだか羨ましいな～
iOSは2025年夏にリリース予定なので、対応したらぜひ覗きに来てください！

では続いて、作曲を始めたきっかけはなんですか？

Ruliea

高校に入ってからというもの勉強を全くしなくなったので学力がどんどん落ちていき自分はこの先どうなるんだろうと不安でいっぱいでした。苦しい出来事が重なりしんどかった時期にEveさんの「心海」という曲に出会ったんです。本当に全てが救われたような気がして、泣きながらずっとリピートしてたのを覚えています。それ以降自分も音楽を作って人に届けたいと思うようになり高2の夏にmLをダウンロードして作曲を始めました！動機は大量にある夏休みの課題からの現実逃避だったんですが…

スー

そうだったんですね！
色々辛かったんですね。。😧
意識高いイメージがあったので、勉強もちゃんとできて順風満帆な学生生活を送ってるんだなーと勝手に思ってました。
そんなきっかけだったのはびっくりですが、musicLineを選んで頂けて嬉しいです！！
るりあさんを救った曲！「心海」聴いてみます。

心海

ダラーン

びっくりー

僕もEveさんのこの曲で勇気を貰えたんだー🥺
なんだか気持ちわかるな～♪

僕らまだアンダーグラウンド

スー

るりあさんもダラーンも今があるのはEveさんのおかげなんだね～

他にも影響を受けたアーティストはいますか？

Ruliea

沢山いますがその中でも特に影響を受けているのはofficial髭男dismさんです！
当時髭男の曲を全曲聴いて耳コピするくらいにはハマっていたので、音楽理論を学んでからmL時代に作っていた曲のコードを見ると髭男の楽曲で多く見られるコード進行がよく使われていたり、様々な場面で自分の体に髭男の音楽が染みついているのを感じます笑
髭男の曲は誇張抜きで全部いいのでアルバム曲まで聴いてほしいです！！！
本当に尊敬しています。

mL内ではぱるぬんさんに影響を受けました！
彼とはとても仲の良い友達なのでさん付けするのもなんだか不思議な感覚なんですが…笑

スー

髭男いいですよね😭
るりあさんが髭男好きなのは知っていましたが、そんなにだったんですね〜！
染み付いてるのが、表現できるのもすごいです。

ぱるぬんさんと仲が良いんですね♪
コミュニティで影響を受けたり、仲良くなって頂けて嬉しいです！
せっかくなので過去にインタビューしたぱるぬんさんの記事も張っときます～

次に作曲活動をしていて、楽しいと思う時はどんなときですか？

Ruliea

新しいことにチャレンジする時です！
型にとらわれずに今まで作ったことないジャンルのパートを作ったり、使ったことのない楽器を使ってみたり。音楽の文字通り音を楽しんでいる感覚があってその感覚がとても好きです。

スー

音を楽しんでる感覚か〜
そういう感覚をいつまでも大切にしたいですね😊
あと自分にない表現ができたりするとやっぱり嬉しいですよね〜

今後の予定や目標を教えていただけますか？

Ruliea

今後もボカロPや作曲家として活動を続けていく予定です！
たくさんMVも出しますしCDなども制作中です💿
目標というと堅苦しいんですが、自分の音楽を多くの方に届けられたらいいなと思っています!
自分の音楽で誰かの生活をちょっとでも後押しできたらとても嬉しいです。

スー

MVやCD制作もるりあさんの今後の活動が楽しみです！
るりあさんの音楽が多くの方に届けられたら素敵ですね♪

では、最後にみなさんに聴いてもらいたいオリジナル曲名を教えてください。

Ruliea

ソラノムコウという曲です。
この曲はmLの卒業制作というか、最後にありのままの自分でやりたい音楽をやってPCに移行しようという思いで作りました。
ボカロ活動ではあまり作っていないようなアニソンチックで元気をもらえるようなとても明るい楽曲になっておりますので是非聴いてくださると嬉しいです！

Ruliea/るりあ「ソラノムコウ」 ︎︎

https://3musicline.com/community/130236　(アプリリンク)

スー

確かに卒業ソングっぽくて爽やかなのがいいですね！
終わる寂しさがありつつも、新たな始まりに対する期待やこれから頑張るぞっていう意気込みを感じました。
るりあさんに限らずmusicLineを離れていくのは寂しいですが。。🥺
でもどんどん新しく挑戦していく皆さんをいつまでも応援しています✨
またmusicLineのコミュニティも覗いてください～♪

アゴォー

できればボカロPもmLも両方してー
僕の最後の願いです。

Androidアプリのリンク張っとくね☆
play.google.com
そうそうiOSは2025年夏リリース予定な☆

スー

もーアゴォーは調子いいんだから～
今後も無理せずにボカロPとしての活動を頑張ってください！😄
今回は第２弾ラストのるりあさんのインタビューでした。
ありがとうございました！

さて、今回のインタビュー企画第２弾もなかなか見ごたえがありましたね！！
るりあさん含め、白夜さんやうえのさんとそれぞれの魅力が伝われば幸いです🤗
これからもインタビュー企画を続けていきたいと思います。

↓ 過去のインタビューも是非みてね☆
#mL民インタビュー企画

インタビュー記事の挿絵について

インタビュー記事の挿絵 (スー、ダラーン、アゴォー) は、使用許可不要です！
（挿絵画像は長押しでDLできます。）
どこでもご自由にお使いください😃
この変なキャラはなに？と思ってmusicLineも一緒に広まれば嬉しいです～♪

ちなみに、今回の挿絵はLINEスタンプの文字無しバージョンを主に使いました☆
musicLine10thを記念して作成したスタンプなので、是非使ってください😊

line.me

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

うえのさんインタビュー

mL民のインタビュー企画第２弾、２人目のインタビューです。
（インタビュー企画通算で８人目です！）
※mL民：作曲アプリmusicLineユーザーのこと
（「#mL民インタビュー企画」タグで他も見てね☆）

今回はmL民のお母さん的存在のうえのさんを紹介します。いつもmL民の皆さんのことやアプリのことを考えて頂きありがとうございます。

DMでのやり取りをインタビュー形式にまとめました。

　　

スー

うえのさん、よろしくお願いします。
それではまずユーザーネームの由来を教えてください。

うえのさん

本名ですが、ひらがなにする事により親しみやすく覚えてもらいやすいと思いました。

スー

本名そのままだったんですね！
確かにひらがなの方が親しみやすいですね～😊

あとずぅぅっと気になっていたんですが、 うえのさんのアイコンに500円玉を選んだ理由はありますか？

うえのさん

お金は大事なので丸いお金(アイコンのサイズ)で1番大きいのを選びました。

スー

お金が大事！！！！！

（。。えーと、みんな親しみ感じられてる？）

アゴォー

お金は だ・い・じ ☆
現実主義的な考え方、僕は好きだな～

スー

確かにその通りですが。。
はっきりと言いますね😅

今回はそんなうえのさんの魅力を掘り下げていきます✨
それでは、ひとこと自己紹介をお願いします。

うえのさん

音楽や絵、ドラマや映画などの作品を鑑賞する事が好きです。

最近は編集に興味をもち、自身の料理動画の編集に力を入れています。

スー

音楽以外にも色々な芸術を鑑賞することが好きなんですね♪
現状に満足せず新しいことに挑戦する姿もかっこいいと思います🙂

うえのさんの心に残っている作品をなにか一つ教えて頂いてもよろしいですか？

うえのさん

映画「タイタニック」です。船上の演奏家たちの最後の誇りが胸をうちます。

スー

名作ですよね！！
タイタニックは映画としても音楽としても素晴らしいので、うえのさんらしい回答ですね😊
また観たくなってきました～♪

（なんだか親しみを感じてきたぞ☆）

あとYouTubeも見させて頂きました！
料理するうえのさんの適当さが面白くて爆笑してしまいました😁
でもちゃんと合理的で節約料理の勉強にもなるし、料理の楽しさも伝わってきます✨

ダラーン

いや～これは絶賛したい♪
YouTubeでも料理番組でも

そんなに上手くいきますかぁ？？

って突っ込みたくなるんですが、うえのさんの動画は普通に上手くいかないです😲（笑）
なので上手くいかないもどかしさを一緒に体験して、その時の対処法を学べるのがめっちゃ良いです😆
あと食材揃ってない時や省スペースでどう調理するのか、無駄にしない節約術がとても参考になります！！

スー

なるほど～
そんな目で料理番組みてたんだね☆

ちなみに、うえのさんおすすめの動画はなんですか？

うえのさん

1番再生数が多い「お好み焼き」ですかね。

スー

こちらがその動画です～

料理する方もしない方も是非観て下さい♪
お好み焼き食べたくなってきた😋

続いて、古くからアプリを使用して頂いてるうえのさんですが、musicLineを使っている理由はなんですか？

うえのさん

音楽を継続するに越したことはないのですが、私のように一旦リタイアして音楽を再開する人もいるので、20年も経つと初心者同様で、その中でも最も使いやすいアプリでした。

スー

musicLineを選んで頂いてありがとうございます～

アゴォー

２０年のブランク！？

もしかして想像してるよりも上の世代なのか！！

スー

そこ！？😲
そこはどっちでもいいでしょ～
世代問わずコミュニケーションがとれるのが音楽の良さですね！！

でもアプリ作曲を受け入れて頂き嬉しいです😆
作曲はPCですることが当たり前だったので、上の世代にはあまり受け入れられてないんですよね😅
うえのさんはコメント機能を追加した当初から、よくコミュニティを利用していただいてます。

実はコメントした曲数が一番多いのが、うえのさんです✨

そこで質問です。
コメントで心がけてることはありますか？

うえのさん

1番多いのに驚愕ですが、心がけていることは「初投稿」のタイトルやタグがあると、慣れない場所に踏み込む勇気とゆうのが大変であることが分かるので、できるだけ声をかけたりいいねを押して2回目も待っていますよと伝えたい想いで聴いています。

スー

やさしい

すごくありがたいです♪
確かに初めてコミュニティに投稿するときって勇気がいりそうですよね😭
コメントをもらえたら嬉しいし、二回目も作ろうって思えますね✨
これからもよろしくお願いします！

今後の予定や目標を教えていただけますか？

うえのさん

金と権力が欲しいです。

スー

！！！

（親しみが遠のいていくよぉ。。）

アゴォー

金と権力☆
うん、良い響きだ～

うえのさん

生活の地盤があってこそ夢を見れるのであって、その地盤が整わない環境にいる人の助けに少しでもなりたいです。

そのための金と権力です。

スー

なるほど。
金と権力が欲しいってだけ聞くとかなりダークな感じですが、夢を見れるように手助けしたいってことなんですね🤔

そう思うきっかけになったことはありますか？

うえのさん

家族が病気になってお金が必要になったことがきっかけです。金と権力は悪用しなければ大きな力となります。

スー

そうだったんですね！！
ご苦労されてきたようですね。。

お子さんも育てられてとても尊敬します🙂
世の母親は強いことがよくわかりました！
なんだかうえのさんという人物が少しわかったような気がします。

それでは最後にみなさんに聴いてもらいたい自分のオリジナル曲を教えてください

うえのさん

「フリフリラ」です。 自身の子ども達に書いた前向きな曲で、料理動画のBGMに使っています。

スー

うえのさん「フリフリラ」
https://3musicline.com/community/16693　(アプリリンク)

素敵な曲ですね♪
タイトル「フリフリラ」にはどういう意味が込められてますか？

うえのさん

「フリフリラ」は自身の子ども達に書いた曲ですが全て白鍵で作っています。誰もが親しみ踊れる曲であることを意識しました。

スー

白鍵だけなんですね☆
みなさんもぜひ聞いてください♪

僕もピアノで弾いてみようかな～

というわけで今回はインタビュー企画第２弾、２人目のうえのさんへのインタビューでした。
お忙しい中ありがとうございました！

次回は現在ボカロPとして活躍されている、るりあさんを紹介しますのでお楽しみに☆

次へ

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

白夜さんインタビュー

mL民のインタビュー企画第２弾１回目のインタビューです。
※mL民：作曲アプリmusicLineユーザーのこと
第１弾を含めると今回でインタビュー７人目になります✨
（「#mL民インタビュー企画」タグで他も見てね☆）

インタビュー企画第２弾は僕スー（運営）が気になる３名の方にオファーさせていただきました！

今回は白夜さんを紹介します。
DMでのやり取りをインタビュー形式にまとめました。

　　

スー

白夜さん、よろしくお願いします。
それではまずユーザーネームの由来を教えてください。

白夜

本名から2文字取ってこれにしました。

スー

なんと！本名からなんですね☆

。。。もしかして！

いや、気になりますが予想するのはやめておきます😊

では次に、ひとこと自己紹介をお願いします。

白夜

白夜です。musiclineはかなり昔から使わせていただいています。
最近はあまり作曲できていないので、私のことを知らない方もいらっしゃるかと思いますが、このインタビューを見て少しでも興味を持っていただけたら嬉しいです。

スー

本当に長く使って頂きありがとうございます！
確かに最近musicLineを使い始めた方は知らないかもしれないですね😭

でも殿堂入りを果たしたり、第１回作曲コンテスト「RPGのBGM」では１位に輝き、昔から魅了的な作品を多く残して頂いているので、オファーしました😆
今回はそんな白夜さんにインタビューできて嬉しいです♪

白夜さんと言えば歯車のアイコンが特徴的ですが、

歯車を選んだ理由はありますか？

白夜

なんかかっこよかったからです！
ただずっと使う気はなくて、いいアイコンが見つかるまでのつなぎとして使っていたのですが、歯車のイメージが定着してしまっていたので結局そのままになっています。

スー

シンプルーーーな答えですね！

でも歯車かっこいいのはわかります～
なんか感覚が似てるかもしれないですね😄

聞くと最近かなり多忙だということですが、どういう仕事をされていますか？

白夜

あまり詳細は言えませんが、企画開発系の仕事をしています。音楽とは完全に無縁の職です。

スー

企画開発ってかなり興味深いところですが。。
色々と言っちゃいけないことが多そうですね～

でも作曲できることって発想力とか論理的思考力が高いと思います！
なので音楽が企画開発の仕事に繋がったんじゃないかな～
そっか！musicLineで作曲してたから、企画や開発の能力が鍛えられたのでは😋

なんてね～
（都合よく解釈しちゃお☆）

それでは、次の質問です。
好きな楽器はなんですか？

白夜

私の曲を聞いたことがある方はだいたい予想できると思いますが、アコースティックピアノが好きです。

スー

確かに、ピアノのイメージありますね〜

白夜

軽く作曲したい際に、楽器1つで完結させられるアコースティックピアノにはつい頼りがちになってしまいます。
ちなみにピアノは弾いたことがないので、こんなん人間には弾けないよって曲になっていても見逃してほしいです...

スー

ピアノ弾いたことないんですか！それでも表現力が高くてびっくりです😲
打ち込みは楽器の経験がなくても良いので、そういう方にもmusicLineを使って頂いて嬉しいです。

こんなん人間には弾けないよって曲、僕は好きです☆
そういう曲を表現できるのも打ち込みの魅力ですからね～♪

音楽知識があまりないということですが、作曲は感覚で音を追加していくような感じですか？

白夜

そうですね。理論はあまり勉強していないので、感覚に頼っています。
ただ、感覚だけで作っているとなかなか引き出しが増えないと感じるので、いずれ理論についてもちゃんと勉強したいですね。

スー

確かに音楽理論があると、引き出しが増えそうですね～

うんうん

（お、いたんだダラーン）

ダラーン

musicLineとしては自然と音楽理論が身に付くような設計にしたいと思ってます。音楽理論って程のものでなくとも、次はどうすれば良い曲に磨いていけるのかがわかるような仕組みを作りたいなあ🤔
知識なしでもセンスで突っ走れば良いけど、大半が作曲できたって実感が沸かずに辞めちゃうんだよね。。

それは勿体ない！！
少しの知識でも、次はこうしてみようかなって思えることで作曲が楽しくなると思うな～

スー

うんそうだね～
ごめんなさい突然musicLineの想いを語っちゃった😄
ありがとう、ダラーン

気を取り直して、
感覚に頼っているということですが、白夜さんは作曲する際に心がけていることはありますか？

白夜

シンプルかつ綺麗な音が鳴るように心がけていますが、如何せん音楽的な知識があまりないので、いつも頭を捻りながら作曲しています。

スー

シンプルーーーな音！

白夜さんの曲は繊細でエモいメロディな曲が多いように感じていましたが、シンプルと綺麗を心がけてるんですね♪
知識よりも音を置いては消してを繰り返して紡ぎ出される感じですかね～🙄

でも音楽知識がないと、思うように作曲できなくて嫌になってしまうような気がします。
作曲始めた頃はどういう思いで作曲してましたか？

白夜

私の場合は、むしろ作曲始めたての方がのめりこめていましたね。なんとなく音を置いて、思ったとおりの音が鳴らせた時が楽しくて、ひたすら曲を作っていました。
むしろある程度自分のスタイルが固まってきて、曲調がワンパターン化してしまう時期の方がモチベーションを保つのが難しい気がします。そういった点で、日々新しい曲調にチャレンジしているmlの方々はとても尊敬しています。
私もそう在れたらいいなと常々思っていますが、そもそもここまで作曲を続けてこれたのは、始めるにあたってmusiclineという使いやすいツールに出会えた事が大きいです。素敵なアプリをありがとうございます🙇‍♂️

スー

musicLineを褒めて頂いてありがとうございます！
思った通りの音が鳴らせた時って楽しいですよね😁

確かに、作曲初めのわからない時期もそうですが、新鮮さを味わえなくなったマンネリ化の時期もハードルがありますね。
何事も続けることは難しいですが、同じ時期に作曲してるmL民がいるって感じれれば、もうちょっと続けるかって気持ちになるかもしれませんね～
白夜さんをはじめ、日々チャレンジングなmL民の方々に感謝です😊

今後の予定や目標を教えていただけますか？

白夜

最近は短いフレーズしか作らなくなってしまっているので、ちゃんとしたものを1曲作るのが目標でしょうか。

スー

今は短い曲も流行っているようですが、ぜひまたフルの曲も期待しています！

白夜

あとiOSに移行してしまったので、iOS版のmusiclineが出ることがあればまたそちらにも顔を出したいと思っています。

ダラーン

ありがとうございます！
iOS版を作る励みになります😆

スー

また白夜さんの曲聴きたいな～
インタビュー時は告知してませんでしたが、iOS版は来年（2025年）夏リリースを目標にしています☆
お仕事も忙しいと思いますが、iOS版を作って待ってます♪

急がなきゃー

それでは最後にみなさんに聴いてもらいたい自分のオリジナル曲名を教えてください！

白夜

night skyと夕立ですかね。
どちらも殿堂入りはしていないのですが、個人的に気に入っている2曲です。

スー

白夜「Night sky」
https://3musicline.com/community/65942　(アプリリンク)

白夜「夕立」
https://3musicline.com/community/34130　(アプリリンク)

殿堂入りしてなかったんですね！
どちらも聞かせていただきました😊
みなさんもぜひ聞いてください♪

というわけで今回はインタビュー企画第２弾１回目の白夜さんのインタビューでした。
お忙しい中ありがとうございました♪
企画開発のお仕事も大変そうですが、無理せずに頑張ってください！

次回はｍL民のお母さん的存在、うえのさんを紹介しますのでお楽しみに☆

次へ

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

【iOS】作曲画面の進捗報告 6

musicLine(iOS)についての進捗。
フレーズツールの追加実装と通知機構の見直し、描画速度の改善について報告します。

いつでも、どこでも、気軽に作曲 ♪
musicLineをインストール

フレーズツールと変更通知の動作

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

実装状況

	カテゴリ	タイトル	補足
View
	Composition UI配置 ガイド表示	音符描画の高速化	音符が多くても描画できる速さへ最適化
		音符の編集状態	選択や変更した時に枠線の色変更
Composition
	Common 作曲共通	通知機構	Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ
	PhraseTool フレーズツール フレーズの編集	データ構造	トラックのフレーズを取得・追加、削除、状態 通知機構の実装を見直す。現状は一部描画がおかしい
		フレーズの結合	連続する2フレーズの接する小節線をタップで結合（iOS独自）
		フレーズの分割	フレーズをタップで分割（iOS独自）
MIDI
	Common MIDI共通	データ構造	MIDIフォーマットへ出力できる構造
		コンバーター	Compositionのデータ構造へ変換・逆変換

全進捗マップを表示

	カテゴリ	タイトル	補足
View
	Composition UI配置 ガイド表示	ピアノ
		スクロールエリア
		小節番号
		小節線
		分割線	拡大率によって間隔を変化
		フレーズ	フレーズがないところはフレーズ作成ボタンを表示
		ツールボタン	選択中のツールはツール色にハイライトする
		メロディーライン	ペンツールでの音符作成時の入力線
		メロディー音符	音符の先頭にチョボをつける
		リズム音符	ベース音符のみ下に表示
		サンプルデータ	手入力したサンプルデータの音符を配置
		連符	連符は数字で表示、拡大率によって省略
		ツールガイド（ペン）	長さ編集しているリズム音符、伸ばした時の削る範囲音符移動時、移動先の音階をわかりやすくする
		ツールガイド（指）	移動中の音符影、矩形選択の枠
		ツールガイド（消しゴム）	削除範囲、和音のみの削除範囲
		ツールガイド（フレーズ）	フレーズ移動・伸縮のバー、選択範囲テキスト（iOS独自）
		フレーズボタン	フレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小
		フレーズタブ	ツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動
		音符描画の高速化	音符が多くても描画できる速さへ最適化
		音符の編集状態	選択や変更した時に枠線の色変更
		音符音階	メロディ音符に音階表示
	Community UI配置
	Dialog ダイアログ	フレーズ	フレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定
Composition
	Common 作曲共通	データ構造	座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック
		コンバーター	Domainのデータ構造へ変換・逆変換
		通知機構	Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ
	FingerTool 指ツール 音符の編集	データ構造	フレーズの音符を取得、基点と移動ベクトルを保持して移動する
		音符の移動	和音や連符は上下のみに制御
		音符の影	移動中に操作できているかわかりやすいように（iOS独自）
		内外判定	音符の移動をフレーズ内に留める
		衝突判定	移動する音符が他の音符に重なったときの挙動
		タップ選択	タップした音符の子音符も選択・解除
		矩形選択	囲った音符を選択
		音符の入れ替え	リズム音符のスライドで重なった音符と入れ替える（iOS独自）
		和音の削除	和音を移動した時に重なる時に削除する
		連符に切り替え	リズム音符タップで切り替え
	PenTool ペンツール 音符の作成	データ構造	音符を作成・分割・統合、フレーズへ音符を追加する
		音符の作成	タップで音符を作成。分割線に合わせて長さを決定
		音符列の作成	スワイプに沿って複数の音符を作成。音階変わる時に音符分割
		有無判定	タップやスワイプした縦ラインに既に音符があるか判定
		音符の移動	音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了
		音符の分割	リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす
		音符の統合	２つのリズム音符の間をタップした場合、音符を統合
		音符の伸縮	リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし（仕様変更）
		音符の消滅	音符の伸縮をした時に長さが0になると削除する（iOS独自）
		領域差演算	音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る
		サンプリング補間	素早くスワイプしても音符が移動できるようにサンプリング間を補間する
		細かい音符	分割線内の細かな音符を移動する挙動
	EraserTool 消しゴムツール 音符の削除	データ構造	和音と連符の認識、フレーズから音符を削除する
		音符の削除	タップで音符を削除
		和音・連符の削除	和音・連符をタップで和音・連符のみを削除（iOS独自）
		音符種別判定	タップした音符が和音・連符・ルート音符なのか判定する
		音符列の削除	スワイプで指定する削除範囲内の複数の音符を削除。
		和音列の削除	リズム音符をスワイプで複数の和音のみを削除。（iOS独自）
		休符に切り替え	リズム音符タップで休符に切り替える
	PhraseTool フレーズツール フレーズの編集	データ構造	トラックのフレーズを取得・追加、削除、状態 通知機構の実装を見直す。現状は一部描画がおかしい
		フレーズの作成・挿入	ダイアログで長さとリピートを設定 リピートフレーズは未実装
		フレーズの選択	２点タップで範囲選択、範囲ガイドタップで選択解除（仕様変更）
		フレーズの移動	左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む
		フレーズの伸縮	サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除（iOS独自）
		フレーズの貼り付け	選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除
		周囲有無判定	作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御
		フレーズボタン・タブ	ツールに応じてフレーズボタン、タブの処理を変更
		フレーズの結合	連続する2フレーズの接する小節線をタップで結合（iOS独自）
		フレーズの分割	フレーズをタップで分割（iOS独自）
	StampTool スタンプツール モチーフの編集
	Transform 画面移動 座標変換	画面を上下移動	ピアノのスワイプにより
		画面を左右移動	スクロールエリアのスワイプにより
		画面を拡大・縮小	ピンチアウト・インにより基点を画面中心に設定する
		画面を拡大・縮小(軸指定)	長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向
MIDI
	Common MIDI共通	データ構造	MIDIフォーマットへ出力できる構造
		コンバーター	Compositionのデータ構造へ変換・逆変換
Commnity
	Common コミュニティ 共通	データ構造	カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持
Domain
	データ構造 Json形式	Melody	MelodyTrack, *MelodyPhrase, NoteContainer, NoteBlock, Note
		Drum	DrumTrack, *DrumPhrase, BeatContainer, Beat
		共通化	Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化
	Service サービスモデル	SongReder	Jsonファイルを読み込み、Domainのデータへ変換
		SongWriter	DomainのデータからJsonファイルへ書き出し
Common
	Service サービスモデル	MidiPlayer	Midiファイルを再生する
		リポジトリ	保存データを管理

フレーズツールの実装

フレーズの結合

リズム編集領域でフレーズの境目をタップすることで2フレーズを1フレーズに結合します。

フレーズの結合

フレーズの結合はiOSからの新しい操作ですが、音符の統合も同じような操作（音符間の境目をタップ）なので、違和感はないと思います。

フレーズの分割

リズム編集領域でフレーズ内の小節線をタップすることで、その小節線から左右にフレーズを分割します。
なお、音符がフレーズ外にある時は切り取り、音符がフレーズ間を跨っている場合は長さを短くします。

フレーズの分割

こちらも音符の分割と同じような操作を意識しました。

通知機構の見直し

通知機構
音符の編集状態

通知で音符の編集状態が変化

前回はフレーズを変更しても描画に反映されない不具合があり、スクロールをして強制的に描画を要求してました。
これはモデルの通知機構に問題があり、モデルの変更を適切に監視できてないことが要因になっていました。モデルの監視について、ObservableObjectからEventBusの仕組みに変更することで解決しました。

通知機構の選定など内部的な話はこちらの記事で紹介しています。

描画速度の改善

描画速度の改善によるFPSの向上

リズム音符の描画方法を見直し、処理の最適化を行いました。このくらい音符を敷き詰めるとfps10程度になっていましたが、fps20程度に向上しています。

おわりに

フレーズツールの追加実装と通知機構の見直し、描画速度の改善を行いました。

フレーズの結合・分割はmusicLine(Android版)で要望で上がっている機能改善項目です。Androidは基盤が固まっているので修正がかなり大変ですが、iOS版はリメイクするついでに要望も取り入れてます。iOSリリース後に良い機能はAndroidにも反映していきたいと思います。

通知機能は不安定でしたが、かなり安定してきて一安心です。
描画速度が遅いと最後にボトルネックになるので今のうちからちゃんとして最適化しておかないといけないですね。

次は、MIDIのデータ構造へ変換するコンバーターモデルを実装していきます。musicLineの作曲データをMIDIのデータへ変換できると、MIDIプレイヤーで音を鳴らすことができるようになります。

記念動画デザインの観察（ランキング・急上昇・殿堂入り編）

musicLineの記念動画（ランキング・急上昇・殿堂入り）のデザインを紹介。
内部の実装もちょこっと紹介！の第二弾です。

いつでも、どこでも、気軽に作曲 ♪
musicLineをインストール

ランキングの記念動画

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

はじめに

musicLineコミュニティでは曲（MIDI）の再生時に音の可視化映像が流れますが、ランキング等で上位に上がった曲はキラキラしたリッチな表現の映像になります。

ちなみに、前回はコンテストの記念動画を紹介しました。

今回はランキング・急上昇・殿堂入りの映像について観察し、内部実装（GLSLのコーディング）について軽く触れます。

デザインの観察

ランキングと急上昇の記念動画 1~8 位と殿堂入り含めて合計17種類あります。
各々のバリエーションを比較して、記念動画の要素を分解することでデザインを観察します。

バリエーションの比較

殿堂入りとランキング・急上昇の 1~4 位の記念動画を比較します。

殿堂入り
ランキング	急上昇

各々の記念動画を比較すると

• 順位ごとにテーマカラーがある
• モチーフの図形が異なる（丸、菱形、格子）
• ランキング・殿堂入りはノイズ感がある
• ランキングはチェック模様、殿堂入り奥行きのある背景
• 3位以上はより華やなエフェクト
• 殿堂入りは色合いにグラデーションが掛かる

等の違いがあります。

以下に紹介させて頂いた曲のアプリリンクを載せています。
気になった曲はmusicLineで聴いてください ♪

殿堂入り
ランキング	急上昇

要素の分解

この記念動画を分解すると、4つの要素（レイヤー）で構成されています。

名前	イメージ
エフェクト
情報
コンテンツ
背景

この内、エフェクトと背景を変えることで記念動画のバリエーションを出しています。

エフェクト（ランキング）

エフェクトの実装

今回はランキング記念動画を単純化したピカーンエフェクトの実装を紹介します。AndroidはOpenGLESが動作するため、実装はGLSLを使いました。

ピカーンエフェクト

なお、サンプルはWebでGLSLを実行できるエディタ** The Book of Shaders Editor **で表示して確認しました。

エフェクトの構成要素

ピカーンエフェクトは3種類のアルファアニメーションを用いて、カラーとテクスチャをブレンドすることで実現しています。

構成要素	イメージ
アルファ 1 パターン アニメーション
アルファ 2 コースティクス アニメーション
アルファ 3 リフレクション アニメーション
カラー
テクスチャ

パターンアニメーション（アルファ 1）の作成

パターンアニメーションは座標変換とアニメーションの2ステップで解説します。

1. 座標変換

菱形を描画しやすいように、
ST座標 → 回転ST座標 → タイル座標
と座標を変換します。

ST座標

precision mediump float;
uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy; // 正規化
    gl_FragColor = vec4(st, 0., 1.); 
}

左下原点（0, 0）でサイズ 1 の基準となるST座標空間へ変換します。
このサンプルでは座標を可視化するため、gl_FragColorの赤と緑の値にXとYの値を渡して色を表示しています。なので、値が大きくなる程色がつきます。例えば、座標（1, 1）はRGB（1, 1, 0）となり黄色になります。

回転ST座標（45度回転）

...
vec2 trans_st = (st - 0.5); // 原点を中心に移動    

float rot = radians(45.); 
mat2 rot_matrix = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
vec2 rot_st = trans_st * rot_matrix; // 45度回転
gl_FragColor = vec4( rot_st, 0., 1.);

菱形になるようにST座標空間を45度回転します。
回転は行列演算を用いますが、これは原点中心を起点として回転します。回転する前に原点を画面の中心に移動しておくことで、後の処理が計算しやすくなります。

タイル座標

vec2 scaled_st = rot_st * 6.;  // スケーリング
vec2 shift_st = scaled_st + .5; // 位置をずらす
vec2 tile = fract(scaled_st); // 小数点のみ（0 ~ 1の間を繰り返す）
gl_FragColor = vec4(tile, 0., 1.); return;

パターンアニメーションは中心の菱形から波紋状に周囲の菱形へ広がっていくアニメーションになります。そのため、同じ菱形が繰り返されるように、座標をタイル状に分割します。shift_stで中央に菱形が来るように位置をずらします。

2. アニメーション

アニメーションは全体と細部の2種類あります。
タイルアニメーションで全体の動き、スケールアニメーションで細部の動きを制御します。

タイルアニメーション（全体）

// 中央からタイルまでの距離
vec2 tile_pos = floor(shift_st);  // 整数へ（小数点切り捨て）
float dist = length(tile_pos);
      
// アニメーション進捗の調整
float progress = sin(u_time - dist); // -1 ~ 1 を周回
float easeIn_progress = progress * progress; // イージング（徐々に加速）
float adjust_progress = pow(easeIn_progress, 2.2) * 0.5; //　出現時間のバランスを調整
gl_FragColor = vec4(vec3(adjust_progress), 1.);

floorでタイルの座標を取得し、lengthで中心からの距離を算出しています。外側に行くほどタイルの色が明るくなります。

progressは中央からの距離と時間に応じてタイル毎のアニメーション進捗度を-1 ~ 1で算出します。ざっくり言うと0 ~ 1でアニメーションを行い、-1 ~ 0でアニメーションを休憩するイメージです。
progressのままでは単純なSin波なので、イージングでメリハリをつけたり出現時間のバランスを調整します。

ちなみに、イージングの変換数式はこちらが参考になりました。 easings.net

スケールアニメーション（細部）

// ルール画像（タイル端から中心までの距離　端 0 中心 0.5）
float animation_rule = min(min(tile.x, 1.0 - tile.x), min(tile.y, 1.0 - tile.y));

// ルール画像を元にアニメーション
float pattern_margin = 0.15;
float preview_progress = pow(sin(u_time), 2.) * .5;
float preview_value = smoothstep( preview_progress - 0.05, preview_progress, 0.95 * (animation_rule - pattern_margin));
gl_FragColor = vec4(vec3( preview_value), 1.); return;

アニメーションするために、ルール画像というものを作成します。ルール画像はアニメーション進捗度0 ~ 1を明度で示した画像です。真ん中から外へ広がるように明度を指定しています。

あとはsmoothstepを使って、ルール画像に基づき菱形が拡大縮小するような動きに制御します。

こちらはsmoothstep関数やShaderについての解説されています。
thebookofshaders.com

コースティクスアニメーション（アルファ 2）の作成

float h12(highp vec2 p) {
    return fract(sin(dot(p,vec2(32.52554,45.5634)))*12432.2355);
}
            
float n12(highp vec2 p)
{
    vec2 i = floor(p);
    vec2 f = fract(p);
    f *= f * (3.-2.*f);
    return mix(
        mix(h12(i+vec2(0.,0.)),h12(i+vec2(1.,0.)),f.x),
        mix(h12(i+vec2(0.,1.)),h12(i+vec2(1.,1.)),f.x),
        f.y
    );
}
            
float caustics(highp vec2 p, highp float t)
{
    highp vec3 k = vec3(p,t);
    highp float l;
    mat3 m = mat3(-2,-1,2,3,-2,1,1,2,2);
    float n = n12(p);
    k = k*m*.5;
    l = length(.5 - fract(k+n));
    k = k*m*.4;
    l = min(l, length(.5-fract(k+n)));
    k = k*m*.3;
    l = min(l, length(.5-fract(k+n)));
    return pow(l,7.)*25.;
}

...
float caust = caustics(st, u_time * 0.3);
gl_FragColor = vec4(vec3(caust), 1.); return;

コースティクスは水に乱反射して映し出された光を意味し、光のCG表現で使われたりします。
こちらは処理が複雑すぎて理解できなかったのですが、乱数に上手いこと規則性を持たせているようです。この辺りは数学の深い部分に入らないとわからなそうですね。。
とりあえず、caustics関数を使うことで表現できます。

リフレクションアニメーション（アルファ 3）の作成

float interval_time = 2.; // 光線が通る時間の間隔
float gap_pos = st.x * 2.0 + st.y; // 斜めにずらす
float speed = 8.0;
float line_width = 1.;
    
float dist_to_line = mod(gap_pos - u_time * speed, interval_time * speed);
float line = (1.0 - step(line_width, dist_to_line));
float decay_line = line - (line_width - dist_to_line) * line;
gl_FragColor = vec4(vec3(decay_line), 1.); 

dist_to_lineは原点から光線までの距離ですが、光線が通る時間の間隔が大きいほど座標系を大きくします。modは剰余演算（割り算の余り）なので、特定の区間を繰り返すことになります。decay_lineで光線が減衰するようにしています。

カラーの作成

vec3 shift_col(vec3 RGB, vec3 shift) {
    vec3 RESULT = vec3(RGB);
    highp float VSU = shift.z * shift.y * cos(shift.x * 3.14159265 / 180.0);
    highp float VSW = shift.z * shift.y * sin(shift.x * 3.14159265 / 180.0);
    
    RESULT.x = (.299 * shift.z + .701 * VSU + .168 * VSW) * RGB.x
        + (.587 * shift.z - .587 * VSU + .330 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU - .497 * VSW) * RGB.z;
    
    RESULT.y = (.299 * shift.z - .299 * VSU - .328 * VSW) * RGB.x
        + (.587 * shift.z + .413 * VSU + .035 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU + .292 * VSW) * RGB.z;
    
    RESULT.z = (.299 * shift.z - .3 * VSU + 1.25 * VSW) * RGB.x
        + (.587 * shift.z - .588 * VSU - 1.05 * VSW) * RGB.y
        + (.114 * shift.z + .886 * VSU - .203 * VSW) * RGB.z;
    
    return (RESULT);
}

...
float gap_pos0 = (st.x + st.y); // 斜めにずらす
vec3 shift = vec3(200.0 * (gap_pos0 + u_time), 1.0, 1.0);
vec3 rainbow = shift_col(vec3(0.5, 0.3, 0.2), shift);

shiftは（色相、彩度、明度）をshift_col関数に指定しますが、そのうちの色相のみ変更しています。色相はST座標と時間で決めており、時間が進むことで色が変化していきます。

テクスチャの作成

highp float random(highp vec2 st){
    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

...
float sand_noise = mix(.7, 1., random(st));
gl_FragColor = vec4(vec3(sand_noise), 1.);

サンドノイズのテクスチャはrandom関数で簡単にを作れるので、金属感を出す時などにおすすめです。最小を白と最大を黒にすると、コントラストが効きすぎるのでmixで微調整しています。

全コードを表示

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

// 乱数を取得する。
highp float random(highp vec2 st){
    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

// shiftにより、色をずらす。
vec3 shift_col(vec3 RGB, vec3 shift) {
    vec3 RESULT = vec3(RGB);
    highp float VSU = shift.z * shift.y * cos(shift.x * 3.14159265 / 180.0);
    highp float VSW = shift.z * shift.y * sin(shift.x * 3.14159265 / 180.0);
    
    RESULT.x = (.299 * shift.z + .701 * VSU + .168 * VSW) * RGB.x
        + (.587 * shift.z - .587 * VSU + .330 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU - .497 * VSW) * RGB.z;
    
    RESULT.y = (.299 * shift.z - .299 * VSU - .328 * VSW) * RGB.x
        + (.587 * shift.z + .413 * VSU + .035 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU + .292 * VSW) * RGB.z;
    
    RESULT.z = (.299 * shift.z - .3 * VSU + 1.25 * VSW) * RGB.x
        + (.587 * shift.z - .588 * VSU - 1.05 * VSW) * RGB.y
        + (.114 * shift.z + .886 * VSU - .203 * VSW) * RGB.z;
    
    return (RESULT);
}

float h12(highp vec2 p) {
    return fract(sin(dot(p,vec2(32.52554,45.5634)))*12432.2355);
}
            
float n12(highp vec2 p)
{
    vec2 i = floor(p);
    vec2 f = fract(p);
    f *= f * (3.-2.*f);
    return mix(
        mix(h12(i+vec2(0.,0.)),h12(i+vec2(1.,0.)),f.x),
        mix(h12(i+vec2(0.,1.)),h12(i+vec2(1.,1.)),f.x),
        f.y
    );
}
            
float caustics(highp vec2 p, highp float t)
{
    highp vec3 k = vec3(p,t);
    highp float l;
    mat3 m = mat3(-2,-1,2,3,-2,1,1,2,2);
    float n = n12(p);
    k = k*m*.5;
    l = length(.5 - fract(k+n));
    k = k*m*.4;
    l = min(l, length(.5-fract(k+n)));
    k = k*m*.3;
    l = min(l, length(.5-fract(k+n)));
    return pow(l,7.)*25.;
}

// タイル座標(回転あり)を取得する。
vec2 convertRotatedTileCoord(vec2 st, float degree, float repeat){
    vec2 trans_st = (st - 0.5); // 原点を中心に移動
    float rot = radians(degree); 
    mat2 rot_matrix = mat2(cos(rot), -sin(rot), sin(rot), cos(rot));
    vec2 rot_st = trans_st * rot_matrix; // 回転
    vec2 scaled_st = rot_st * repeat;  // スケーリング
    return scaled_st;
}

void main() {
    // ST座標
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    // gl_FragColor = vec4(st, 0., 1.); return;
    
    
    // 回転ST座標
    vec2 scaled_st = convertRotatedTileCoord(st, 45., 6.);
    vec2 shift_st = scaled_st + .5;
    // gl_FragColor = vec4(shift_st, 0., 1.); return;
    
    
    // タイル座標
    vec2 tile = fract(shift_st); // 小数点のみ（0 ~ 1の間を繰り返す）
    // gl_FragColor = vec4(tile, 0., 1.); return;
      

    // タイルアニメーション（全体）
    vec2 tile_pos = floor(shift_st);  // 整数へ（小数点切り捨て）
    float dist = length(tile_pos);
    // gl_FragColor = vec4(vec3(dist * .1), 1.); return; // 中央からタイルまでの距離
      
    // アニメーション進捗の調整
    float progress = sin(u_time - dist); // -1 ~ 1 を周回
    float easeIn_progress = progress * progress; // イージング（徐々に加速）
    float adjust_progress = pow(easeIn_progress, 2.2) * .5; //　出現時間のバランスを調整
    // gl_FragColor = vec4(vec3(adjust_progress), 1.); return; 

    
    // スケールアニメーション
    // ルール画像（タイル端から中心までの距離　端 0 中心 0.5）
    float animation_rule = min(min(tile.x, 1.0 - tile.x), min(tile.y, 1.0 - tile.y));
    // float preview_progress = pow(sin(u_time), 2.) * .5;
    // float preview_value = smoothstep( preview_progress - 0.05, preview_progress, 0.95 * (animation_rule - .15));
    // gl_FragColor = vec4(vec3( preview_value), 1.); return; // スケールアニメーションのみ
    
    float pattern_margin = 0.15;
    float value = smoothstep( adjust_progress - 0.05, adjust_progress, 0.95 * (animation_rule - pattern_margin));
    
    // タイルにばらつきを与える
    value *= mix(.5, 1., random(tile_pos));          
    // gl_FragColor = vec4(vec3(value), 1.); return;
      
    
    // コースティクスアニメーション
    float caust = caustics(st, u_time * 0.3);
    // gl_FragColor = vec4(vec3(caust), 1.); return;
    
    
    // リフレクションアニメーション
    float interval_time = 2.; // 光線が通る時間の間隔
    float gap_pos = st.x * 2.0 + st.y; // 斜めにずらす
    float speed = 8.0;
    float line_width = 1.;
    
    float dist_to_line = mod(gap_pos - u_time * speed, interval_time * speed);
    float line = (1.0 - step(line_width, dist_to_line));
    float decay_line = line - (line_width - dist_to_line) * line;
    // gl_FragColor = vec4(vec3(decay_line), 1.); return;
    
    
    // カラーの作成（レインボーパターン）
    float gap_pos0 = (st.x + st.y); // 斜めにずらす
    vec3 shift = vec3(200.0 * (gap_pos0 + u_time), 1.0, 1.0);
    vec3 rainbow = shift_col(vec3(0.5, 0.3, 0.2), shift);
    // gl_FragColor = vec4(rainbow, 1.); return;
    
    
    // テクスチャの作成（金属のサンドノイズ）
    float sand_noise = mix(.7, 1., random(st));
    // gl_FragColor = vec4(vec3(sand_noise), 1.); return;
    
    
     gl_FragColor = vec4(vec3(value + caust + decay_line) * rainbow * sand_noise, 1.); 
}

おわりに

今回はmusicLineの記念動画（ランキング・急上昇・殿堂入り）のデザインを紹介しました。共有動画をもっと美しくしたいと軽い気持ちで手をつけましたが、良い感じにエフェクトを付けることは思ったより大変でした。orz

今回も内部処理をがっつり紹介してしまいましたが、ざっくりイメージが伝われば良いなと思います。奥深いShaderの世界を知って、少しでもプログラミングに興味を持っていただければ嬉しいです。

あと今回は省略しましたが、殿堂入りの記念動画は最後に特殊な処理が施されています。また機会があればOpenGLのFBOという機能について紹介します。

え、そんなマニアックな機能興味ない？
まあそう言わず〜 ( ◜ᴗ◝)و

記念動画デザインの観察（コンテスト編）

musicLineの記念動画（コンテスト）のデザインを紹介。
重ねているエフェクトを観察し、内部の実装をちょこっと紹介します。

いつでも、どこでも、気軽に作曲 ♪
musicLineをインストール

コンテストの記念動画

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

はじめに

musicLineコミュニティでは投稿された曲（MIDI）を再生する時に、視覚的にわかりやすくなるように音符に合わせて可視化した映像が流れます。
その映像が、コンテスト等で上位に上がった曲はキラキラしたリッチな表現の映像になります。

詳しくはこちら

今回はその映像をどのようにして作成しているのかについて観察し、内部実装（GLSLのコーディング）について軽く触れます。

デザインの観察

コンテストの記念動画は各部門で1~8位まであります。
各々のバリエーションを比較して、記念動画の要素を分解することでデザインを観察します。

バリエーションの比較

一般部門とビギナー部門の1~4位の記念動画を比較します。

一般部門	ビギナー部門

各々の記念動画を比較すると

• 順位ごとにテーマカラーがある
• 一般部門とビギナー部門でテクスチャが異なる
• 3位以上はより華やなエフェクト

等の違いがあります。

以下に紹介させて頂いた曲のアプリリンクを載せています。
気になった曲はmusicLineで聴いてください ♪

一般部門	ビギナー部門

一般部門	ビギナー部門

要素の分解

この記念動画を分解すると、4つの要素（レイヤー）で構成されています。

名前	イメージ
エフェクト
情報
コンテンツ
背景

この内、エフェクトと背景を変えることで記念動画のバリエーションを出しています。

エフェクト（コンテスト）

エフェクトの実装

今回はコンテスト記念動画を単純化したキラキラエフェクトの実装を紹介します。AndroidはOpenGLESが動作するため、実装はGLSLを使いました。

キラキラエフェクト

なお、サンプルはWebでGLSLを実行できるエディタ** The Book of Shaders Editor **で表示して確認しました。

エフェクトの構成要素

キラキラエフェクトはタイル状に十字のパターンを敷き詰め、アニメーションするカラーとアルファをブレンドすることで実現しています。

構成要素	イメージ
パターン
カラー
アルファ

パターンの作成

ST座標

precision mediump float;
uniform vec2 u_resolution;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy; // 正規化
    gl_FragColor = vec4(st, 0., 1.); 
}

左下原点（0, 0）でサイズ 1 の基準となるST座標空間へ変換します。
このサンプルでは座標を可視化するため、gl_FragColorの赤と緑の値にXとYの値を渡して色を表示しています。なので、値が大きくなる程色がつきます。例えば、座標（1, 1）はRGB（1, 1, 0）となり黄色になります。

タイル座標

...
float repeat_count = 30.; // 繰り返し回数
float aspect = .8; // 縦横比
vec2 scaled_st = repeat_count * vec2(1., aspect) * st; // スケーリング 
vec2 difference_st = scaled_st  + vec2(0, .3) * mod(floor(scaled_st).x, 5. ); // ずらす
vec2 tile =  fract(difference_st); // 0 ~ 1 の間を繰り返す
gl_FragColor = vec4(tile, 0., 1.); 

キラキラエフェクトは同じ形が繰り返し描画されるパターンなので、座標をタイル状に分割します。タイルはY軸方向に少しずらすことで単調さを軽減しています。

十字パターン

vec2 tile_center = abs(tile - .5); // 端 0.5 中心 0.
float tile_dist = step(.6, 1. - length(tile_center)) * min(1., step(.42, .5 - tile_center.x) + step(.42, .5 - tile_center.y / aspect));
float  cross =  step(1., tile_dist);
gl_FragColor = vec4(vec3(cross), 1.);

タイルの中心が（0, 0）になるように-0.5します。そして、中心からの距離を使ってなんやかんやで十字を描画します。

（菱形パターン）

vec2 tile_center = abs(tile - .5);    // 端 0.5 中心 0.
float tile_dist = 1. - step(.3, tile_center.x + tile_center.y);
float diamond =  step(1., tile_dist);
gl_FragColor = vec4(vec3(diamond), 1.);

少し処理を変えると菱形になります。

カラーの作成

vec2 tile_pos = floor(difference_st);
vec3 shift = vec3(200.0 * (random(tile_pos * 2.) + u_time * 0.2), 1.0, 1.0);
vec3 random_col = shift_col(vec3(1.0, 0.3, 0.3), shift);
gl_FragColor = vec4(random_col, 1.);

tile_posでタイル毎に色をランダムに決定します。u_timeで時間により色が変化します。
randomとshift_colは自作の関数です。

vec3 shift_col(vec3 RGB, vec3 shift) {
    vec3 RESULT = vec3(RGB);
    highp float VSU = shift.z * shift.y * cos(shift.x * 3.14159265 / 180.0);
    highp float VSW = shift.z * shift.y * sin(shift.x * 3.14159265 / 180.0);
    
    RESULT.x = (.299 * shift.z + .701 * VSU + .168 * VSW) * RGB.x
        + (.587 * shift.z - .587 * VSU + .330 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU - .497 * VSW) * RGB.z;
    
    RESULT.y = (.299 * shift.z - .299 * VSU - .328 * VSW) * RGB.x
        + (.587 * shift.z + .413 * VSU + .035 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU + .292 * VSW) * RGB.z;
    
    RESULT.z = (.299 * shift.z - .3 * VSU + 1.25 * VSW) * RGB.x
        + (.587 * shift.z - .588 * VSU - 1.05 * VSW) * RGB.y
        + (.114 * shift.z + .886 * VSU - .203 * VSW) * RGB.z;
    
    return (RESULT);
}

highp float random(highp vec2 st){
    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

GLSLにはランダムに数字を取得する標準関数がないので自作します。こちらもなんやかんやで乱数と色を取得できます。
なおshift_colは色とシフト値を指定しますが、シフト値は（色相、彩度、明度）となっています。色相は360で一周し、彩度と明度は倍率となっています。

アルファの作成

float cycle_time = 5.; // 光る周期時間
float on_rat = .6; // 全体に対して光る割合
float PI = 3.14159265359;
highp float animation_offset = random(tile_pos); // アニメーションの開始オフセット      
float alpha = sin((animation(on_rat, cycle_time, u_time, animation_offset) - 0.25) * PI * 2.) * .5 + .5;
gl_FragColor = vec4(vec3(alpha), 1.);

sinを使うことでアニメーションにイーズインアウト効果をつけてループ再生します。animation_offsetを乱数にすることで、タイル毎にバラバラに光るようにしています。
animationは自作の関数です。

 highp float animation(highp float animation_ratio, highp float cycle_time, highp float time, highp float offset){
     highp float start_time = offset; // 0. ~ 1.
     highp float end_time = start_time + animation_ratio;
     highp float pos_in_cycle = mod(time, cycle_time) / cycle_time; // 0. -> 1.
     highp float pos1 = smoothstep(start_time, end_time, pos_in_cycle);
     highp float pos2 = smoothstep(start_time, end_time, pos_in_cycle + 1.); // 境界用
     return max(fract(pos1), fract(pos2));
 }

アニメーションの開始時間start_timeと終了時間end_timeは0~1+(a)に正規化しています。時間timeと光る周期時間cycle_timeにより、pos_in_cycleサイクル中の進行位置を出しています。アニメーション開始時間がサイクル終了よりの場合、end_timeが1以上になりアニメーションがサイクルを跨ぐ場合があります。そのパターンを考慮して、アニメーション進行位置をpos1とpos2の2つを使います。

全コードを表示

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

// 乱数を取得する。
highp float random(highp vec2 st){
    return fract(sin(dot(st.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

// shiftにより、色をずらす。
vec3 shift_col(vec3 RGB, vec3 shift) {
    vec3 RESULT = vec3(RGB);
    highp float VSU = shift.z * shift.y * cos(shift.x * 3.14159265 / 180.0);
    highp float VSW = shift.z * shift.y * sin(shift.x * 3.14159265 / 180.0);
    
    RESULT.x = (.299 * shift.z + .701 * VSU + .168 * VSW) * RGB.x
        + (.587 * shift.z - .587 * VSU + .330 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU - .497 * VSW) * RGB.z;
    
    RESULT.y = (.299 * shift.z - .299 * VSU - .328 * VSW) * RGB.x
        + (.587 * shift.z + .413 * VSU + .035 * VSW) * RGB.y
        + (.114 * shift.z - .114 * VSU + .292 * VSW) * RGB.z;
    
    RESULT.z = (.299 * shift.z - .3 * VSU + 1.25 * VSW) * RGB.x
        + (.587 * shift.z - .588 * VSU - 1.05 * VSW) * RGB.y
        + (.114 * shift.z + .886 * VSU - .203 * VSW) * RGB.z;
    
    return (RESULT);
}

 // timeにより、0 ~ 1 の間を繰り返す。
 highp float animation(highp float animation_ratio, highp float cycle_time, highp float time, highp float offset){
     highp float start_time = offset;
     highp float endTime = start_time + animation_ratio;
     highp float time_in_cycle = mod(time, cycle_time) / cycle_time; // 0. ~ 1.
     highp float pos1 = smoothstep(start_time, endTime, time_in_cycle ); // 1-> 0
     highp float pos2 = smoothstep(start_time, endTime, time_in_cycle + 1.); // 1 -> 0 (境界用)
     return max(fract(pos1), fract(pos2));
 }

void main() {
    // ST座標
    vec2 st = gl_FragCoord.xy / u_resolution.xy; // 正規化

    
    // タイル座標
    float repeat_count = 30.; // 繰り返し回数
    float aspect = .8; // 縦横比
    vec2 scaled_st = repeat_count * vec2(1., aspect) * st; // スケーリング 
    vec2 difference_st = scaled_st  + vec2(0, .3) * mod(floor(scaled_st).x, 5. ); // ずらす
    vec2 tile_pos = floor(difference_st);
                
    
    // 十字パターン
    vec2 tile =  fract(difference_st); // 0 ~ 1 の間を繰り返す
    vec2 tile_center = abs(tile - .5); // 端 0.5 中心 0.
    float tile_dist = step(.6, 1. - length(tile_center)) * min(1., step(.42, .5 - tile_center.x) + step(.42, .5 - tile_center.y / aspect));
    float  cross =  step(1., tile_dist);
     
    
    // カラーの作成
    vec3 shift = vec3(200.0 * (random(tile_pos * 2.) + u_time * 0.2), 1.0, 1.0);
    vec3 random_col = shift_col(vec3(1.0, 0.3, 0.3), shift);
    
    
    // アルファの作成
    float cycle_time = 5.; // 光る周期時間
    float on_rat = .6; // 全体に対して光る割合
    float PI = 3.14159265359;
    highp float animation_offset = random(tile_pos); // アニメーションの開始オフセット      
    float alpha = sin((animation(on_rat, cycle_time, u_time, animation_offset) - 0.25) * PI * 2.) * .5 + .5;
    
    gl_FragColor = vec4(random_col * alpha * cross, 1.);
}

おわりに

今回はmusicLineの記念動画（コンテスト）のデザインを紹介しました。 どのようにエフェクトが構成されているか分かったのではないでしょうか？

内部実装を紹介してたら、気分が乗って予想以上に説明してしまった。
ちょこっと紹介のはずががっつり紹介になった。プログラムの知識がないと意味不明だと思うので飛ばし飛ばし見てもらえたらと思います〜(´ε｀ )

でもShaderはコーディングでリアルタイムで見た目が変わるので面白いです。プログラムに興味があったらまずShaderを触るのがおすすめ。
Webで手軽にできるし〜

あと、Shaderの実装はこの辺りのサンプルを参考にしました。
Shadertoy BETA
GLSL Sandbox Gallery

複雑すぎて何書いてるか解読するのが大変でしたが。。

次はランキングの記念動画デザインについても紹介できたらと思います。

サブテーマ「メモリアル」

musicLine(ver.8.20.0)でリリースするソングビジュアライゼーションのサブテーマメモリアルについての紹介。
作曲の記念になるような機能を考えました。

いつでも、どこでも、気軽に作曲 ♪
musicLineをインストール

サブテーマ「メモリアル」の共有動画

3分作曲 musicLine

~ いつでも、どこでも、気軽に作曲 ♪ ~

はじめに

musicLineでは作曲に対するモチベーションを維持・高めることを目的にコミュニティを運営しています。コミュニティでは、作曲した楽曲を共有し、他の作曲ユーザーとの交流を楽しむことができます。

またランキングやコンテスト等で上位にあがった曲は、ユーザーの反応（いいねや投票等）を多く貰った証としてトロフィーが付与されます。このトロフィーを貰うことが作曲した達成感を高め、モチベーションに繋がると考えています。

今回のメモリアルテーマはトロフィーに加えてより達成感を感じてもらえることを期待して実装しました。ランキング等で上位の曲はメモリアルテーマを選択できるようになり、キラキラの記念動画を作成・共有することができます。
（Youtubeみたいに盾を送って表彰できるほどの凄いアプリになれたらいいのですが。。）

ランキングに関して 曲に順位がつくことに違和感や抵抗を感じるかもしれません。ランキングはあくまで一つの指標として楽しんで頂ければ幸いです。上位に上がってこない曲でも素晴らしい曲は沢山あります！逆に埋もれた素晴らしい曲を発掘するのもコミュニティの楽しみ方です♪
順位の是非はどうであれ、一番の願いは作曲を長く楽しんでもらうことです。みんなで盛り上がるという点ではランキングやコンテストのような企画もありだと思っています。

メモリアルテーマ

急上昇とランキング、コンテストで入賞（1 ~ 8 位）または殿堂入りした曲を共有する時に、サブテーマメモリアルを選択できます。

サブテーマメモリアルの選択

順位によってテーマ色やデザインが変化します。 以下にメモリアルテーマの一例を載せます。
（すみません勝手に使ってます。）

急上昇 x スペクトラム

ランキング x ピアノロール

コンテスト x サークル

殿堂入り x シンプル（画像）

以下、アプリリンクです。
（タップするとmusicLineを開いてコミュニティへジャンプします）

ソングビジュアの設定

コミュニティ曲を再生する時、ソングビジュアライザーション設定でサブテーマはダークかライトが選択されていますが、上位の曲を再生する時は自動的にメモリアルになります。

自動的にメモリアルテーマへ変更

ただし、メモリアルテーマではピアノロールが若干見づらくなる等の欠点もあるので、従来通りに再生できるように設定項目を増やしました。

ソングビジュアの設定

• メモリアルテーマを含める
  上位の曲を再生する時、サブテーマをメモリアルにします。
  上位曲でもダークやライトで観たい場合は、設定をOFFにしてください。

• エフェクトを含める
  ソングビジュアにエフェクトを掛けます。
  メモリアルテーマは付けたいけど画面のチカチカを抑えたい場合は、エフェクトを含めるをOFFにすることでエフェクトのみ切ることができます。

• 画質
  画質をLow Middle Highの3段階で設定できます。
  曲や端末により描画処理が重くなる場合にフレームレートを抑えていますが、画質を落とすことで描画処理を軽くしてコマ落ちを軽減します。

おわりに

今回はソングビジュアライゼーションのサブテーマメモリアルについて紹介しました。
作曲の記念になったり、曲を作り続けるモチベーションに繋がれば幸いです。

なお、説明用にコミュニティに投稿された曲を使用しています。
掲載で困る方がいれば対応しますのでご連絡ください。

気に入ってもらえるといいですが。。
子供の頃、遊戯王のパラレルレアカードがとても綺麗で喉から手が出るほど欲しかった記憶があります。そのキラキラを眺めているだけで幸せな気分になれます。
そんな感覚でキラキラした記念動画が欲しいと少しでも思って頂ければ嬉しいです。 リリース後にTwitterみた時にメモリアルテーマが多いといいですね。

また反響があれば、メモリアルテーマのデザインについて掘り下げて行きたいと思います。