追記、
記事を投稿する際に「はじめてのアドベントカレンダー」って書いてあったのでつい興味本位で押したら参加してました。(故意)
本当に人生で初めてアドベントカレンダー書くので何卒宜しくお願い致します。
今回は映画「バックトゥザフューチャー」の話を前提としてお話しさせていただきます。
全然知らんわ！という方には非常に申し訳ないので、ざっくり説明すると
・タイムマシーンで時空を飛び交うSF映画
・主人公の青年マーティは、発明家ドクのタイムマシンによって過去や未来タイムトラベルする。そこでその時代の両親と出会い、さまざまな出来事を通じて両親を救い元の時代へ戻るために奮闘する物語。
・ビフカジノ
という映画です。もう観たのと同然、完璧ですね。
いや、冗談です。観ないと伝わらないネタを挟みました。是非見てみてください。刺さる人には刺さります。
ということはさておき...
時空転移装置の時計、僕も欲しい！
バックトゥザフューチャーで「時計」と言えば、おそらく時計台を思い浮かべる方が多いでしょう。
でも、僕が欲しいのは時計台ではなく「時空転移装置の時計」、言い換えると「タイムスリップに使う時計」です。
デロリアン号（タイムマシン）でタイムスリップを行う際には
①燃料を調達する
②行き先の時間を設定する
③時空飛べるぐらいのスピードで滑走する
④WAO
のプロセスを辿ります。
時空転移装置の時計は②の場面で使用する非常に大事な時計です。これが無いと行き先の時代を決めることが出来ないし、元の時代に戻ることも出来ません。
しかも見た目がかっこいいときた。✨USJのアトラクションで初めてデロリアン号のレプリカを見るとき、そればっかり見てたし、僕は時空転移装置の時計に何らかの執着心があるのかもしれない。
生憎僕はクソガキのまま大人になってしまったので🎅はプレゼントを届けてくれません。🦌も拒絶しています。
Githubにそれっぽいリポジトリも転がってません...（現物を作ってるすごいリポジトリはあった）
という訳で自力で何とかするしかないので今回は少しでも時空転移装置の時計に寄せた画面を作りました。
今回は気軽にデプロイ出来てリアルタイムでプレビューが反映される点で非常に便利なVue.jsを使用して作っています。
記憶を頼りに作ってみる
僕の記憶では確か
・文字盤が3つあって赤、緑、黄色の時計が表示されてた
・どれか一つが現在の時刻で他は過去か未来を指していた
という事でざっくりこんな感じで書いてみました。
<template>
<div id="clock">
<h1 id="current-date">{{ currentDate }}</h1>
<h1 id="past-date">{{ pastDate }}</h1>
<h1 id="future-date">{{ futureDate }}</h1>
</div>
</template>
<script>
//直前に変数名とかreturnとかそういうの入れてある
methods: {
updateClock() {
const currentDateTime = new Date();
const pastDateTime = new Date('1985-11-05T01:21:00'); //それっぽい時代
const futureDateTime = new Date('1955-11-05T01:21:00'); //それっぽい時代
this.currentDate = this.formatDate(currentDateTime);
this.pastDate = this.formatDate(pastDateTime);
this.futureDate = this.formatDate(futureDateTime);
},
formatDate(date) {
const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
//たしかここは英語だった
const month = months[date.getMonth()];
const day = date.getDate().toString().padStart(2, '0');
const year = date.getFullYear();
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${month} ${day} ${year} ${hours}:${minutes}`;
}
}
};
</script>
これで出力した結果がこちらです。
おお、それっぽい。...それっぽい...？かな。
何というか...うん。
「現在の日付と特定の日時をカラフルに表示しただけのコンテンツ」です。
幼少期に僕がときめいたのは「現在の日付と特定の日時をカラフルに表示しただけのコンテンツ」ではなく「絶対に時空転移出来るであろう何かすごい時計」なのでこれでは再現性に欠けます。
この状態を脱却するために特定の日時ではなく、ランダムな日時を表示するように変更してみます。
getRandomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
},
const pastDateTimeStart = new Date('1950-01-01T00:00:00');
const pastDateTimeEnd = new Date('1985-11-05T01:21:00');
const futureDateTimeStart = new Date('1955-11-05T01:21:00');
const futureDateTimeEnd = new Date('2050-01-01T00:00:00');
const pastDateTime = this.getRandomDate(pastDateTimeStart, pastDateTimeEnd);
const futureDateTime = this.getRandomDate(futureDateTimeStart, futureDateTimeEnd);
このようにgetRandomDateで特定の日付が記載されていた部分をランダムで生成するように変更し、1950年の元旦から2050年の元旦までのランダムな年代や時間を表示するように変更しました。
あ、あ、あ、それっぽいｗｗｗｗ近付いてきました。
でも、現段階ではCSSが基本の枠構造以外何も適用されていないので雰囲気が感じ取れません。
これ以上記憶を遡っても文字盤がどんな雰囲気だったのかうまく掴めないので、徐にBTTFのビデオを取り出し視聴しました。
...
......
全然違うやんｗｗ
いかに僕がどれだけ正確に物事を記憶してないのかが顕著に分かりました。大ファンを名乗ってたのでショック。
本作の時空転移装置を凝視すると以下の点で修正が必要な事が分かりました。
・緑の文字盤がタイムスリップ先。 ここに行き先となる時間が入る。
・黄色の文字盤が現在の時間。
・赤の文字は直近でタイムスリップした時間
もはや現在の時刻と色しか正解ないですね。BTTFの方角に向かって詫びます🚀
現物を見てみて分かったのは、基本は文字の色を入れ替えるだけで良いという点だったのですが、今回僕が課題となったのは赤の文字は直近でタイムスリップした時間という部分です。
一度緑の文字盤で表示された時間を保持しておいて、一つずらしで表示する方法を模索する必要があります。
まずは見た目だけでも寄せてみます。
なかなかいい感じ✨これで完成でもいいんですけど、個人的には過去に旅立った時間がちゃんと残ってた方が原作に忠実なので拘りたいです。
という事で暫定的なオペを行っていきます。
まず、データを保持する部分を設けました。緑の文字盤、未来の時刻が決まった段階で、過去に旅立った記録として残すためにここで保持します。
previousFutureDate: null
const futureDateTime = this.getRandomDate(new Date('1950-01-01T00:00:00'), new Date('1985-11-05T01:21:00'));
//currentはそのまま
this.pastDate = this.formatDate(pastDateTime);
this.futureDate = this.formatDate(futureDateTime);
this.previousFutureDate = futureDateTime;
未来の時刻をランダムで生成しそれぞれの変数に格納します。
this.previousFutureDate = futureDateTime; で、今回生成した未来の日時を保存しておいて次回表示されるタイミングで利用します。
あとはCSSなんも分からんずだけど苦戦しながら寄せて...
完成！
なかなかそれっぽい出来になったのではないかと思います。
こちらで動作が確認できます。
感想
従来までは定義したコンテンツは単体で処理するような仕組みしか書いてこなかったので、今回の時計のように「前の動作が後の動作に直接影響する」という処理に苦戦しました。
コミットが残ってないので記録には残せませんでしたが、試行錯誤の段階ではDESTINATIONTIMEとLASTTIMEがずっとあべこべに表示されてしまったり、インターバルが効かず静止してしまったりと思うようにはいかなかったのでいい経験になりました。
これからクリスマスですね。
季節感を問わない作品だからクリスマスでも正月でも、どのタイミングでもいいと思うので皆さんバックトゥザフューチャーを是非ご視聴ください😊
西日本のビフより。