タイトルにもあるとおり、ЯAMUNEは初音ミク「マジカルミライ 2025」プログラミング・コンテストに参加しました。
今回はそのコンテストの概要や、コンテストの流れなどを解説したいと思います。
まず、「初音ミク」は存知でしょうか？
クリプトン・フューチャー・メディア社(以下CFM社)が販売しているバーチャルシンガーであり、キャラクターは多くの人に親しまれています。そのCFM社は毎年、「創作」をテーマにしたイベントである「マジカルミライ」主催しており、その中で楽曲コンテストとプログラミングコンテストが開催されています。今回参加したのは、そのうちのプログラミングコンテストです。このコンテストでは、楽曲コンテストでグランプリ、準グランプリを受賞した6曲を用いて「リリックアプリ」を制作することが課題となっています。
公式サイトはこちらから！
リリックアプリとは、音楽に合わせてタイミングよく歌詞が動くWebアプリケーションのことで、毎回まったく同じコンテンツが提供されるリリックビデオとは異なり、ユーザーの操作などによって毎回異なる演出などを行うことができるのが魅力です。
このコンテストでは、JavaScript用ライブラリである、「TextAlive App API」を使うことが義務付けられています。
このライブラリは産業技術総合研究所が研究開発を行っており、リリックアプリの開発をスムーズに行うことが可能にするというものです。
今回のコンテスト(2025)の簡単な流れを説明します。
アプリの募集は4/10の楽曲コンテストの結果発表と同時に開始されており、7/8の正午に締め切られました。その後、8/9にその応募作品の中から「入選作品」という形で選ばれた10作品が発表されました。
そして、8月19日までの期間中、それら10作品を対象とした一般投票が実施されます。この投票結果をもとに最終審査が行われ、8月29日に受賞作品が発表される、という流れです。
さて、ここからは私の提出作品について簡単にご紹介します。
タイトルは｢StarryLogues｣といいます。このアプリでは、ページ内に表示される星空が、その時刻の東京で実際に見える恒星(太陽を除く)の配置を再現しています。また、観測時刻や観測地域は左下のボタンから変更が可能で、未来の星空や、世界各地の星の見え方を自由に楽しむことができます。さらに、ブラウザ経由でお使いのデバイスの緯度、経度を取得し、実際のその場所での星空を再現することも可能になっています。(正確性は保証できませんが。)
ちなみにこれはサブコンテンツであり、メインコンテンツ(=リリックアプリ部分)は正面の望遠鏡をクリックすれば楽しむことができます。操作方法はページ内に書いてあります。
メインコンテンツでは、楽曲を「銀河」に、そしてその楽曲の歌詞を「星」と見た立てて表現しています。PCでもお楽しみいただけますが、スマホなどジャイロセンサを搭載したデバイスでアクセスすると、センサを使って感覚的に操作することもできます。
この星空は「ヒッパルコス星表」内の各恒星の天球上の角度などの値を、観測地点の緯度経度、時刻を元に計算し表示しています。
ちなみに、作品名は星(想い)と星の対話による「記録」「繋がり」をイメージしてこの名前にしました。
そんな私の作品ですが、喜ばしいことに入選作品のひとつとして選んでいただけました。
今回初めて参加であり、加えてJavaScriptなども1年弱しか使ったことがない状況の中で、このような評価をいただけたことは非常に光栄です。
今回の作品は、私にとって初めて扱う技術やライブラリ、数学的な考え方などを、ゼロから学びながら制作しました。ほとんどの構成要素が初挑戦で、非常に難しい部分も多くありましたが、それと同時に「創作」の楽しさを改めて実感することができました。
「自分で一生懸命に調べて、考えて作った物が試行錯誤の末に実際に動く」
この経験こそが、プログラミング、そして「創作」の大きな醍醐味だと思います。
この記事を偶然にも目にしたそこのあなた！ぜひあなたも「創作」というものを体験してみてください！それがさまざまな理由で難しいと感じるなら、「作る側」ではなく「使う側」「見る側」として関わることでも大歓迎です！みんなで日本が誇るべき「創作」という文化の輪を広げていきましょう！
入選作品の紹介ページはこちら
先ほどタイムラインの部分でも触れましたが、現在、まさに一般投票が受付中です！選ばれた10作品の中から、皆さんが「面白い！」「楽しい！」と思った作品に、ぜひ正直な気持ちで投票してみてください。それこそが「創作」を純粋に楽しむということだと思います。
※投票は情報アプリ「ミクナビ」で受付中とのことです。
さて、そんな私の作品ですが、恥ずかしながら提出時にひとつミスを見逃してしまいました。規定によりそのミスは修正できないため、公式サイトで遊ぶ際もその問題が残っています。そのミスの内容は、
「ノートパソコンなどの画面が中途半端に小さいデバイスだと、読み込み後最初に表示されるボタンが見切れてしまい、ボタンが押せず先に進めない」
というものです。何やってるんですかね。
というわけで、ここではその問題に対する対処方法を3つ紹介します。
この問題は画面の高さが足りないことで起こる問題です。そのため、F11キーなどで全画面表示(フルスクリーン)にすれば、ブラウザ上部のツールバーなどが消え、高さが確保され、ボタンが表示されます。(フルスクリーンにした後は、F5キーを押してページをリロードすることを推奨します)
フルスクリーンにしてもまだボタンが見えない場合は、「Ctrl + -」で表示倍率を縮小してみてください。こうすることで文字なども小さくなってしまいますが、ボタンを表示させることができるようになります。
こちらは上級者向けです。問題の要素のスタイルを変えてしまう手もあります。フォントサイズをいじるなり、overflow-yの設定を変えるなりして、ご自由にご対応ください。(多少のCSS知識が必要ですが)
私の不手際でご不便をおかけしてしまい、誠に申し訳ありません......！
(尚、この問題はスマホではたぶん発生しません。タブレットかノートPCが怪しいです......!(怨念))
基本的に、PC,タブレット,スマホどれでも動作するはずですが、3Dのグラフィックなどを行っているため、一昔前のスマホなどだと厳しいかもしれません。
また、私はipadやiphoneなど、appleの端末で実行すると途中で勝手にページがリロードされる不具合があるようです。そのため、スマホで遊ぶ場合はAndroidのChromeを使うことを推奨します。
(ちなみに、Macbookは持ってないのでテストすらできていません。ご了承ください。)
まぁ、現状書くことはこれぐらいですかね。
ソースコードなどは、コンテストが完全に終了したあとに、いろいろと修正してから公開しようと思っています。
ぼちぼち、受験勉強も頑張りますかね(遅い)
では、次回の記事、
「【悲報】入選作品、JSファイルが一つしかない」でお会いしましょう！
(次回の内容は冗談ですが、タイトルの内容は事実です)
次の記事↓
前回の記事↓
@e_Coachi_AI
© 2025 ЯAMUNE