僕たちが画像を表示できる理由-盛者必衰の理-

システム開発をしている永松です。
RPGではロマサガシリーズが好きです。

前回はパソコンが文字を表示する方法についてふんわりと書かせていただきました。
お前ふんわりの意味わかってんのか？という声が聞こえてきそうですが、ふんわりと書きました。

でもここはデザイン会社さんのブログ。
なのに文字、しかも文字コードのお話、フォントですらない、流石に心苦しい。

そこで今回は前回の教訓を活かし、パソコンをふんわりわかろうシリーズ第2回目として画像のお話をさせていただこうと思います。
題して、「僕たちが画像を表示できる理由」です。

書いたよ！2回目！！

前回パソコンはbyte単位でデータを扱っており、文字コードという辞書を使って文字を表現できるというお話を書かせていただきました。
じゃあ画像、音楽ファイル、動画とかはどうなってるの？という疑問を持たれた方も多いと思います。
そんな方たちにふんわり伝えたい、それが今回の主な趣旨となります。

ん？そんな疑問は持ってない？
うける。

1．まずは下準備

皆さんパソコンで画像を扱う場合の最も基本的な画像形式ってご存知でしょうか。
そう、bitmap(ビットマップ)です。

最も基本、故に最も単純、故にファイルサイズも大きいこのビットマップですが、今回の例題にすごく使いやすいので今回はこのビットマップを例に書かせてもらおうと思います。

ちなみに今回例で利用するのは以下のビットマップとなります。

縦横10pxというすごい小さいサイズなので、拡大した画像も貼っておきます。

では、このビットマップを使ってなぜパソコンで画像が表示できるのかを見ていきましょう。

2．ビットマップを「見てみよう」

ビットマップを見ると言っても、イラレやフォトショ、ペイントなどの画像編集ソフトで開くわけではないです。
試しにテキストエディタで開いてみましょう、すると以下のような感じになると思います。

環境によって多少見え方は違えど、おかしい表示にはなったと思います。

少し脱線します、なぜこんな表示になるのか。

パソコンには大きく分けて2種類のファイルが存在します。
テキストファイル（text file）と呼ばれるものと、バイナリファイル（binary file）と呼ばれるものです。

見分け方は、拡張子が「.txt」ならテキストファイル、それ以外はバイナリファイル。
または、先ほどのようにテキストエディタで開いてみて、読めたらテキストファイル、読めなかったらバイナリファイルです。

テキストファイルは各種文字コードに合わせてbyteを保存していますが、バイナリファイルは文字コードの制約に縛られずに保存しているため、テキストエディタで開くとこんな表示になるわけです。

ただし、あまりサイズの大きなファイルをテキストエディタで開くとパソコンがフリーズするので、もし試して見るなら1KByte程度までのファイルでお試しください。

なお、wordなどの「文書ソフト」と呼ばれるもので保存したファイルも「バイナリファイル」です。
テキストしか書いてなくても「バイナリファイル」です。

脱線からの復帰

ということで、ビットマップはバイナリファイルになるのですが、どうやって開くのか。

テキストファイルを開くエディタをテキストエディタというように、バイナリファイルを開くエディタとしてバイナリエディタというソフトが存在します。
興味がある方はネットからパソコンに合ったバイナリエディタをインストールしてみて下さい。

3．バイナリエディタで開いてみよう

では早速先ほどのビットマップファイルをバイナリエディタで開いて見ましょう。
すると以下のような表示になります。

左側(1番上が+0～+Fまで)は、ファイルのbyteを16進数というもので表示したものです。
右側(1番上が0～Fまで)は、もしこのファイルをUTF-8のテキストファイルとして開いたらこうなるという結果です。

また、バイナリファイルというものは、ほぼすべてがヘッダ部とボディ部というものに分かれます。
今回でいうと、以下の画像の赤枠がヘッダ部、青枠がボディ部になります。

ヘッダにはこのバイナリファイルをどう扱えばよいかといった定義が書かれています。
詳しくは「bitmap フォーマット」などで調べてもらうと出てきますが、わかりやすいところで言うと以下のようなものがあります。

色分けで囲った場所がそれぞれ以下を定義しています。
ファイルサイズ
画像の幅（ピクセル）
画像の高さ（ピクセル）

ファイルサイズは16進数で「176」です。これをいつも私達が使う10進数に直すと「374」になります。
つまり、このファイルは374byteであることがわかります。

次に幅、高さですが、どちらも16進数で「0A」です。これも10進数に直すと「10」になります。
つまり、10×10ピクセルであることがわかります。
どちらも実際のサイズと一致しています。

ボディからのデータは見覚えがある方も多いのではないでしょうか。
ビットマップのボディはRGB色で定義していきます。
この辺りはフォトショなどでも馴染みがあると思いますし、HTMLコーダーの方ならさらに馴染み深いと思います。

RGBなので、オレンジ枠の部分は「緑」、黒枠の部分は「グレー」を意味しています。

あれ、元のビットマップは左上は赤だからおかしくないか？と思われる方もいらっしゃるかもしれませんが、オレンジ枠は「緑」で正解です。
これは、ビットマップのボディは左下から右へ、下から上へと定義されるためです。
そのため、ボディの最後は右上の「青」になります。

これ以外にも色々な制約があるのですが、そこを書き始めるとすごいことになるためそこには触れません。
だってふんわりだから。

このように、ビットマップというファイルはこういうルールでデータを持つよ、と言う決め事があり、決め事があるから正しくファイルを表示することが出来るというわけです。
また、他にもpngにはpngフォーマット、jpgにはjpgフォーマットがあります。
これらを総称して、ファイルフォーマットと呼びます。

ちなみにビットマップのヘッダ定義にはファイルサイズが定義されていますが、そのサイズは4byteになっています。
4byteで表現出来る数値の最大値は約4.2GByteとなります。
つまり、ビットマップファイルは、フォーマットの制約から4.2GByte以上のファイルは作れない、なんてこともファイルフォーマットからわかったりします。

上限が4GByteなんて小さすぎる！

4GByteが上限なの？と思われるかもしれませんが、ビットマップの仕様を作った頃はもっとパソコンが低スペックだったため、4GByteなんてほぼ無限に等しいぐらいのサイズでした。
なので、当時は十分過ぎる定義だったわけです。
また、今はビットマップにも色々別のファイルフォーマットがあり、新たに作られたファイルフォーマットではまた話が変わってきます。

ただ、わざわざビットマップで4GByteの画像を作る必要性もないと思うので、実質この制限は問題にはならないかと思います。

バイナリの支配者：エンディアン

ヘッダのファイルサイズのとこですごくさらっと流しましたが、私は「76 01 00 00」を「176」と言いました。

いや、普通その書き方なら「7601」だろう、と。
100歩譲って「176」だというなら「00 00 01 76」だろう、と。

実はこれ、パソコンの中でもややこしい概念の1つ、エンディアンというものが関係してきます。
※バイトの並びなので、そのままバイトオーダーと呼ばれることもあります。

パソコンには2つのエンディアンが存在します。
その名もビッグエンディアンと、リトルエンディアンです。
※正確にはミドルエンディアンというのもありますが、あまり使われないので省略します。

エンディアンは、2byte以上のデータを扱う場合にどう並び替えるか、を定義しているものです。
先ほどのデータでいうと、
「00 00 01 76」はビッグエンディアン。
「76 01 00 00 」はリトルエンディアンです。

つまり、今回のビットマップはリトルエンディアンで保存されている、ということになります。

こんな定義があるので、違うシステム同士でデータのやり取りをするときにエンディアンの違いで動かなくなる、なんてことが結構あります。
おそらく皆さんそんなこと意識されてないと思いますが、プログラマは急にエンディアンの差に襲われて、戦いを余儀なくされることがあります。

ちなみにUTF-8を保存するときに、「BOM付き」「BOMなし」なんて聞かれることがあるかと思います。
BOM=爆弾、と思うと、やな上司・客先に送るときは爆弾付きで、なんて思われてる方もいらっしゃるかもしれませんが、このBOM、正しくはByte Order Markの略です。

つまり、保存してテキストファイルのエンディアンがどちらかを記載したデータとなります。
※BOMなしの場合はビッグエンディアンとするというルールもあります。

エンディアンについて、これ以上の説明は省略させてもらいますが、詳しく知りたい方は、「ビッグエンディアン」「リトルエンディアン」で調べてみて下さい。

4．バイナリエディタで画像編集

さて、なんとなくバイナリエディタでのビットマップの見方もふんわりわかったような気がしてきたところで、実際にバイナリエディタで画像を編集してみましょう。
編集内容は、サンプルのビットマップの右下、グレーの部分を白にしてみます。

サンプルのビットマップをバイナリエディタで開いて、以下のように編集して保存してみましょう。

保存したファイルを画像ビューアなどで開いてみると、以下のように、ちゃんと白になってることが確認出来ると思います。
※拡大しています。

ちょっと拍子抜けかもしれませんが、たったこれだけで画像編集が終わります。

感の良い方ならもうおわかりかもしれません。
そう、そのとおりです。

皆さんが普段使われているフォトショ、イラレ、ペイントなどなどの画像ソフトも、保存するときはpngならpngフォーマット、jpgならjpgフォーマット、bmpならbitmapフォーマットのバイナリデータを作成して保存しているのです。

なので、「ちょっとこの画像修正して」と言われたら、おもむろにバイナリエディタを開き修正する、なんてことも可能となります。
が、世の中のファイルフォーマット覚えて、これを変えるにはここを直して・・・なんてことは作業効率が悪すぎます。
画像ソフトは、この面倒なフォーマット変換の部分も担ってくれているというわけです。
そう考えると、多少お金がかかるのも納得出来るのではないでしょうか。

フォトショとかもうそんな次元にいないけど

もちろん画像だけじゃなく、音楽ファイル（mp3,wavなど）や動画ファイル（mp4, wmvなど）などなど、すべてのファイルにファイルフォーマットがあります。
プレイヤーやエディタと呼ばれるソフトは、それぞれのファイルフォーマットを利用して表示または再生をすることで、作ったデータが意図した形で表現出来るようになる、というわけです。

5．公開されていないファイルフォーマットもある

ビットマップはファイルフォーマットが公開されています。
また、その他にも公開されているファイルフォーマットはたくさんあります。

ただ、ファイルフォーマットが公開されていないファイルもたくさんあります。
これらは各企業の独自仕様であったりするため、解析したりすること自体が禁止されています。

なので、興味本位で見てみて、調べた結果を公表したりすることは、犯罪行為となる可能性があります。

バイナリデータに興味を持つことはとてもいいことだと思いますが、取り扱う際は優雅に、そして紳士的に扱いましょう。

6．ほんとにファイルは0,1だけだった

今回は聞き慣れない言葉が多く、かつ身近なようで縁遠いところの話だったのでかなり読みづらいところあったかと思います。

ただ、パソコンで扱うことが出来るファイルは、大きく分けてテキストファイルとバイナリファイルだけですので、前回と今回を読んでいただいた方は、ふんわりとパソコンのファイルについてすべて理解された、ということになるわけです。

ふんわりと、ね。

この2回で、バイナリファイルを開くルールとしてファイルフォーマットがあるんだということが、
テキストファイルの文字コードが、バイナリファイルのファイルフォーマットになるんだということが、
ふんわりわかってもらえたら大丈夫です。

また、テキストファイル同様、バイナリファイルも0,1だけで表現されてるんだな、表現出来るもんなんだな、ほんとにパソコンって0,1だけで頑張ってるんだな、ということも、ふんわりわかってもらえれば、個人的にうれしいです。

確かに画像の話だったけど思ってたのと違う。
そう思われた方もいらっしゃるかもしれませんが、多分今後も私の記事はこんな感じです。

あと、この程度の画像加工でもプロと素人の差が出るもんだなと感じました。
記事の内容より、こんな画像載せてもいいのか？と思いながらこの記事をアップしたことをお伝えし、今回の記事をおしまいにしようと思います。

おまけ

ちょっと下の画像をご覧ください。

FTPアップのときに画像壊れたらこんな感じになった、なんて悲しい経験をされた方も多いと思います。
そんな画像ですが、これをバイナリエディタで見てみるとこうなります。

 

わぁ、平家物語だぁ

 

ビットマップは1色を3byteで表現します。
また、文字コードのUTF-8も1文字を3byteで表現するため、こういったことも可能となります。

平家物語を絵で表現したら、という問に対する1つの答えですね。
思ってたより汚かった。

このように、画像に文字を仕込むことだって出来ちゃいます。

 

 

あなたの秘めた恋心を、そっとビットマップに仕込み、意中の方に送る。

 

なんてこともロマンチックでいいんじゃないでしょうか。

 

 

私はやりませんが。