【アプリ開発】画像データを扱うときに登場する言葉(Blob/Base64/FileURL/DataURL)を理解する

こんばんは。今週は、画像データのハンドリングに苦戦する１週間になりそうです。（なんとか今週中にケリをつける・・！）

今日は、画像データを扱う際によく耳にする各単語について、理解する夜にしたいと思います。普段Java Scriptを中心に扱っているので、Java Scriptに寄っているかもしれませんが、ご了承を。

それでは参ります！

Blob

Binary Large Objectの略。

https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA%E3%83%BB%E3%83%A9%E3%83%BC%E3%82%B8%E3%83%BB%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88

バイナリ・ラージ・オブジェクト（英: Binary Large Object、別名:BLOB）とは、データベース管理システム(DBMS)においてバイナリデータを格納する場合のデータ型である。画像や音声、その他のマルチメディアオブジェクトがBLOBとして格納される。時には実行形式が格納されることもある。

Wikipediaより

もともと、データベース管理システム（DBMS）に、画像や映像、音声といったデータを格納するために開発されたデータ型のようです。すべてのデータがバイナリ形式で格納されます。

Oracleのドキュメントにも、BLOB含めLOBに関する説明がまとまっていましたのでご参考にどうぞ。

https://docs.oracle.com/cd/E16338_01/appdev.112/b56263/adlob_intro.htm#i1009787

https://developer.mozilla.org/ja/docs/Web/API/Blob

Blob オブジェクトは blob を表しており、これは不変の生データであるファイルのようなオブジェクトです。テキストやバイナリデータとして読み込んだり、ReadableStream に変換してそのメソッドを使ったデータ処理をしたりできます。

Blob が表現することができるデータは必ずしも JavaScript ネイティブ形式である必要はありません。File インターフェイスは Blob をベースにしており、Blob の機能を継承してユーザーのシステム上のファイルをサポートするように拡張しています。

Base64

これは、エンコード方式の１つです。

https://ja.wikipedia.org/wiki/Base64

Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。
具体的には、A–Z, a–z, 0–9 までの62文字と、記号2つ (+, /)、さらにパディング（余った部分を詰める）のための記号として = が用いられる。
この変換によって、データ量は4/3（約133%）になる。

Wikipediaより

変換例含めて、Wikipediaの説明が比較的充実していました。

が、こちらのQiitaの記事の方がもっとわかりやすく充実していました。

https://qiita.com/PlanetMeron/items/2905e2d0aa7fe46a36d4

要は、バイナリデータをテキスト（正確には、ASCII文字列）で表現するためのエンコード方式、ということのようです。

ファイルオブジェクト

ファイルオブジェクトは、JavaScriptで登場するオブジェクトの種類。Blobの一種であり、<input>フォームやドラッグ&ドロップで渡されたオブジェクトがこの形式を取るみたい。

https://developer.mozilla.org/ja/docs/Web/API/File

File オブジェクトは特別な種類の Blob オブジェクトであり、 Blob が利用できる場面ではどこでも利用できます。

データURI

https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

データ URL は data: スキームが先頭についた URL で、小さなファイルをインラインで文書に埋め込むことができます。

データURLは、URLにデータ自体が含まれていて、以下の構文となっています。

data:[<mediatype>][;base64],<data>

メリットデメリットなどについては以下がわかりやすかったです。

https://ja.wikipedia.org/wiki/Data_URI_scheme

ファイルURI

https://en.wikipedia.org/wiki/File_URI_scheme

The File URI Scheme is a URI scheme defined in RFC 8089, typically used to retrieve files from within one’s own computer.

ファイルURIは、デバイスがファイルを取得するために利用するもので、以下の構文で表現されます。

file://host/path

まだもう少し書き足すことになりそうですが、今日は一旦ここまで。

おしまい