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

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

今日は、画像データを扱う際によく耳にする各単語について、理解する夜にしたいと思います。普段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

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

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

Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字バイナリデータを扱うためのエンコード方式である。
具体的には、AZaz09 までの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

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

おしまい

この記事を気に入っていただけたらシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。