Entertainment

『勘ぐれい』のQRコードに隠されているものは?

※画像はずとまよの新曲とは一切関係ありません

 

ずっと真夜中でいいのに。(以下、ずとまよ)の新曲『勘ぐれい』のMVが12月1日に公開されましたね。

MV前に公開されていた原曲を聴き、神曲なのは確信していましたが、MVもめちゃめちゃ素晴らしい作品で感動しました。見返す度に「長編映画を見終わった後に感じる満足感」みたいなものを感じます。

さて、MV自体はずとまよっぽい、ギミックに凝った仕上がりで、見返すたびに発見があって面白いです。特にMV中にQRコードっぽいシルエットが登場し、ちょっと気になった人も多いのではないかと思います。

この記事ではこのQRコードの謎について分析してみました。とはいえ、ただ読み込んで結果を表示するだけではつまらなすぎるので、その技術的背景を非エンジニア向けに分かりやすい形で解説しています。お時間のあるときにどうぞ。

注意:記事の後半では『勘ぐれい』のMVに関するネタバレを表示しています

 

『勘ぐれい』で表示されるQRコード

MVはこちら。

 

うん、最高。

このMVの 0:19 あたりで、ゲー○ボーイ風のコントローラーを操作している場面がありますが、その画面を遠目にみるとQRコードっぽくなっています。

画像を抜き出したところ↓

勘ぐれいの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進数データが使われています。0と1で表すデータのことですね。(試しに画像ファイルをメモ帳などのテキストエディタで開いてみると全く読めないと思います)

昔々、バイナリデータはメールで送ることができませんでした(現在のように画像ファイルをくっつけて、とかはできませんでした)。そこで次善策として、バイナリデータを一旦テキスト(アルファベットなどの人が読める形式)に変換して送ろう!となりました。
そこで、その変換アルゴリズムとしてBase64というのが開発されたわけです。

Base64では、バイナリデータ(2進数)を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コードから現れたデータを元に、Base64について簡単に解説しました。

古い技術ですが、WEB業界では未だに現役で使われている技術でもあります。仕組み(アルゴリズム)自体は簡単なので、気になる人はWikipediaの記事などを読んでみると勉強になるかもしれません。

 

  • この記事を書いた人

次世代ペンギン

長いのでペンギンとお呼びください。システム開発・プログラミングのお仕事をしています。甘味とコーヒーは生命線。多くの人に役立つ情報のシェアが目標です。

人気の記事

1

会社員でプログラマーとして働いている人、インフラやネットワークのエンジニアとして働いている人の中には、フリーランスのプログラマーとして独立、もしくは転向したい人もいるので ...

2

キャリアアップのため、または高収入を目指して、しっかりプログラミングを学びたいという人が増えてきましたね。 この記事では現役のエンジニアである私が、実際に仕事で稼げるよう ...

3

フリーランスのプログラマーにとって収入の向上に最も直結するのはスキルです。 必要なスキル、スキルの獲得方法が気になる人も多いでしょう。 また、これからフリーランスを目指す ...

4

Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状(円状)のデザインで教えてくれるUIデザインです。 ローディングのス ...

5

Vuexのstore(ストア)を使うと、各コンポーネント間で個別にデータのやり取りすることなく、データを一元的に管理できます。Vueでは欠かせない機能といえるでしょう。 ...

-Entertainment
-