※画像はずとまよの新曲とは一切関係ありません
ずっと真夜中でいいのに。（以下、ずとまよ）の新曲『勘ぐれい』のMVが12月1日に公開されましたね。
MV前に公開されていた原曲を聴き、神曲なのは確信していましたが、MVもめちゃめちゃ素晴らしい作品で感動しました。見返す度に「長編映画を見終わった後に感じる満足感」みたいなものを感じます。
さて、MV自体はずとまよっぽい、ギミックに凝った仕上がりで、見返すたびに発見があって面白いです。特にMV中にQRコードっぽいシルエットが登場し、ちょっと気になった人も多いのではないかと思います。
この記事ではこのQRコードの謎について分析してみました。とはいえ、ただ読み込んで結果を表示するだけではつまらなすぎるので、その技術的背景を非エンジニア向けに分かりやすい形で解説しています。お時間のあるときにどうぞ。
注意：記事の後半では『勘ぐれい』のMVに関するネタバレを表示しています
『勘ぐれい』で表示されるQRコード
MVはこちら。
うん、最高。
このMVの 0:19 あたりで、ゲー○ボーイ風のコントローラーを操作している場面がありますが、その画面を遠目にみるとQRコードっぽくなっています。
画像を抜き出したところ↓
コメントをみると、なにやら海外ニキが指摘していて（というかほぼ答え）気になったので変換してみました。
Guys. I don't know if anyone's done it, but the QR at the beginning of the vid is a Base64 string of text that can be converted to an image.
まずは読み込んでみると…
QRコード自体はごくごく一般的なQRコードっぽいので、スマホや変換サービスなどで簡単に読み取れます。
変換結果は以下のとおり。
https://www.dropbox.com/s/xjsisog7a9g672v/binarycity.txt
DropboxのURLが出てきました。
ちなみに、Dropboxはクラウド上にデータを保存（同期）できるサービスで、わたしも以前より愛用しています。
Dropboxは他人とデータを共有できる機能があり、このURLも特定の共有ファイル（テキストファイル）を示しています。
このアドレスにアクセスすると、テキストファイル binarycity.txt がダウンロードできます。
このテキストファイルの内容は下記のとおり。
/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgAAwEaAAUAAAABAAAAPgEbAAUA
AAABAAAARgEoAAMAAAABAAIAAAAAAAAAAAARAAAATgAAAAAAAXbyAAAD6AABdvIAAAPocGFpbnQu
bmV0IDQuMi4xMwAA/9sAQwABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEB……以下略
長過ぎる（2500行くらいある）ので省略します。どうしても気になる人も、簡単に見られるのでぜひトライしてみてください。
Base64形式
この不規則にも見える文字列ですが、結論からいえば正体はBase64に変換されたバイナリデータです。
JPEGファイルなどの画像ファイルの中身は、人が読めるような文字ではなく、バイナリデータというコンピューター向けの2進数データが使われています。０と１で表すデータのことですね。（試しに画像ファイルをメモ帳などのテキストエディタで開いてみると全く読めないと思います）
昔々、バイナリデータはメールで送ることができませんでした（現在のように画像ファイルをくっつけて、とかはできませんでした）。そこで次善策として、バイナリデータを一旦テキスト（アルファベットなどの人が読める形式）に変換して送ろう！となりました。
そこで、その変換アルゴリズムとしてBase64というのが開発されたわけです。
Base64では、バイナリデータ（２進数）をA～Z、a～z、0～9、 記号（+, /）、余白（=）の64文字+1文字に変換します。
そういうわけで、上の長いテキストデータは、どうやら何かのバイナリコードをBase64で変換したものっぽいというのが分かります（結果的に正体は画像であることが分かったのですが）
少し技術的な話になりますが、下記のようにHTMLのimgタグに入れるとブラウザで表示することができます。画像ファイルを指定する代わりにBase64コードを指定するという感じですね。RFC2397で規定されているdataスキームを使って表現します。
<img src="data:image/jpeg;base64,{Base64変換されたコード}" />
【ネタバレ注意】画像の正体は？
JSFiddleという便利な開発用サービスがあるので、これで画像を表示してみました。リンク先ですぐに画像が表示されます。
>>デモサイト
以下は実際に表示される画像。
一体何なんでしょうね？勘ぐれいが主題歌となっている、不可逆性SNSミステリー『Project:;COLD』と関係しているのでしょうか？
ついでに
ちなみに、MVの中ではもう一ヵ所QRコードが出現しているみたいですね。
こちらは未検証です。
ずとまよ 新曲MV「勘ぐれい」
その途中で「ビルに映る数字の羅列」
これを解析すると…
QRコードが出現
QRコードを平面にして読み取ると…
↓謎のアカウントに繋がりましたhttps://t.co/McqkXC8HB8#みやまん謎解き #みやまん考察#みやまんおー#みやまんチャンネル#文化祭実行委員バンド pic.twitter.com/uDdpgsRPK6— 白亜⭐️融解班 (@uGVAyQQ2QteKEBX) December 1, 2020
まとめ
『勘ぐれい』のMVに出てきたQRコードから現れたデータを元に、Base64について簡単に解説しました。
古い技術ですが、WEB業界では未だに現役で使われている技術でもあります。仕組み（アルゴリズム）自体は簡単なので、気になる人はWikipediaの記事などを読んでみると勉強になるかもしれません。
