第8回 情報量

情報量の定義

場合の数と情報量

「ファイルのサイズが大きい」とか「このウェブページは重い」と言いますが、情報の量はきちんと量ることができます。(これは記憶装置の容量とも関係しますが、それについては第10回で勉強します)

(PPT版ダウンロード)

練習問題 08-1(☆☆☆)
  1. 血液型を区別するには何ビットの情報量が必要でしょうか?
  2. 血液型を当てるには、yes/noで答えられる質問を何回すればいいでしょうか?if文の図形を組み合わせて、どのようにすれば血液型が当てられるか描きなさい。
  3. ファイル ex08-1.html を次のように書きなさい。
  4. ファイル ex08-1.js を作って、「判定」をクリックすると「あなたは〜型です」というメッセージが出るようにしなさい。
  5. テキスト入力欄にyes, no以外の文字列が入力された時は、「yesかnoを入力してください」とメッセージを出すようにしなさい。

画像の情報量

ビットマップ画像の情報量を考えてみましょう。

  • ビットマップ画像はピクセル(標本化によって区切られたマス目)の集まりです。
  • 白黒画像の場合、各ピクセルは白か黒のカード1枚と同じなので1ビットの情報を持ちます。カラー画像の場合、ピクセルごとに色を表すための情報が必要です。
  • 全体の情報量は、ピクセルごとの情報量にピクセル数を掛けたものになります。
練習問題 08-2(☆☆)
  1. 横640ピクセル、縦480ピクセルの白黒画像の情報量は約何キロバイトでしょうか?
  2. 横640ピクセル、縦480ピクセルの16色画像の情報量は約何キロバイトでしょうか?

テキストエンコーディング(文字コード)

人間が読む文字を、コンピュータで処理できる形に直すやり方をテキストエンコーディング(または文字コード)と呼びます。今までHTMLファイルの最初の方におまじないとして書いていた <meta charset="utf-8"> は、テキストエンコーディングの種類を指定するものです。

(PPT版ダウンロード)

練習問題 08-3(☆)
  1. Firefoxで適当なページを表示し、メニューの【表示】→【文字エンコーディング】→【他の文字エンコーディング】の中からいろいろなエンコーディングを選択してみなさい。
  2. テキストエディタでファイルを保存する時、どのエンコーディングを使うかを指定できます。
    • mi: ツールバーの中に現在のエンコーディングが表示されている。そこをマウスでクリックするとメニューが出て、他のエンコーディングに変更できる(下のビデオ参照)。
    • Emacs: キーで C-x RET f あるいはメニューで [Options]→[Multilingual Environment]→[Set Coding System]→[For Saving This Buffer] とし、エンコーディングの名前を入力する。
    • Atom: 右下に現在のエンコーディングが表示されている。そこをマウスでクリックするとメニューが出て、他のエンコーディングに変更できる。エンコーディングを変更して保存する機能はうまく動かないようです。

    前に作った自己紹介のファイル introduction.html をテキストエディタで別のエンコーディングに変えて保存してみます。これをブラウザで表示する時は、charsetで指定したエンコーディングだと思って表示するので、保存した時のエンコーディングと違うと文字化けが発生します。

    1. テキストエディタのエンコーディングを euc-jp にしてから保存し、ブラウザで表示してみる。
    2. charset="utf-8"charset="euc-jp" に変更して保存し、ブラウザで表示してみる。
    3. テキストエディタのエンコーディングを utf-8 に戻して保存し、ブラウザで表示してみる。
    4. charset="euc-jp"charset="utf-8" に戻して保存し、ブラウザで表示してみる。

    (6/6修正)Atomで上の手順を実行するとファイルが壊れる場合があるので、この部分を削除しました。

データの圧縮

データによっては、見かけは大きくても、冗長な部分があって実際の情報量は小さいことがあります。また、画像や音声などは、人間は気がつかない程度に情報を削ることができます。そのような場合、同じ(あるいは人間から見るとほぼ同じ)情報を別の形に変換してデータ量(保存に必要な記憶容量)を小さくすることを圧縮と呼びます。

(PPT版ダウンロード)

練習問題 08-4(☆☆)
  1. ランレングス法で圧縮された次のビット列を展開しなさい。
    • 長さは3ビットで表し、最初は0の長さから始まります。
    • 途中で000が出てくるのは、同じ数字が長く続く場合です。例えば0が9回というのは(9が3ビットで書けないので)、0が7回、1が0回、0が2回と考え、111 000 010 と表します。
    111 000 110 001 111 000 001 001 101 111 100 011 101 001 011 001 011 001 101 001 001 001 111 001 111 000 010
  2. 紙に9×9のマス目を描き、展開したビット列の0は白、1は黒として左上から右下に順にマス目を塗っていきなさい。どのような図形になるでしょうか。

この例では、元のビット列と圧縮したビット列が同じ長さです。データの内容と圧縮方法によっては、圧縮するとかえってデータ量が大きくなる場合があります。

練習問題 08-5(☆☆☆☆☆)

下の参考資料を見て、次のデータをハフマン符号化で圧縮しなさい。

東京 千葉 茨城 東京 神奈川 群馬 東京 神奈川 神奈川 千葉 東京 千葉 埼玉 東京 神奈川 埼玉 東京 東京 埼玉 神奈川 千葉 茨城 神奈川 東京

画像ファイル

ファイル形式

画像ファイルは、色情報の表現や圧縮の方法の違いによっていろいろな形式があります。ウェブで使われる形式は、主に次の三種類です(詳しくは参考資料参照)。

GIF
可逆圧縮。色は8bit(256色)まで。複数の画像をアニメーション表示できる。
PNG
可逆圧縮。色は48bit(約280兆色)まで。
JPEG
不可逆圧縮で、圧縮率を変更することができる。色は24bit(約1600万色)まで。

写真などのピクセルごとに色が違う画像は、可逆圧縮で小さくすることは難しいので、多少情報を捨てながら圧縮するJPEGが適しています。イラストやロゴなどの色が均一で輪郭のはっきりしている画像は、不可逆圧縮だと画像の劣化が目につくので、可逆圧縮のGIFやPNGが適しています。

練習問題 08-6(☆)
  1. 自己紹介の写真をプレビューで開きなさい。普通はダブルクリックで開きます。
  2. メニューの【ファイル】→【書き出す…】でダイアログボックスを表示しなさい。
  3. JPEGの最低品質を選択し、別の名前でファイルに書き出しなさい。
  4. 元の画像と最低品質の画像をプレビューで並べて表示しなさい。画質の劣化は判るでしょうか?
  5. Finderの表示をリストにするとサイズなどの情報が表示されます。元の画像と最低品質の画像でサイズが違うかどうか比べなさい。

画像のサイズ

画像の「サイズ」と言った場合、ファイルに保存するデータ量という意味の時もありますが、普通は画像を構成するピクセルの縦と横の数を指します。実際に何センチの大きさかということは、表示する装置によってピクセルの大きさが違うので一概には言えません。

画像の情報量のところでやったように、ピクセル数が少なくなれば情報量も小さくなります。画像ファイルが(圧縮してあっても)大きい場合、サイズを小さくして(標本化を粗くして)データ量を減らすことができます。画像の多いページでは、サイズを小さくした画像(サムネイル)をまず表示し、クリックすると元の大きな画像を表示することがよくあります。

練習問題 08-7(☆☆)
  1. 自己紹介の写真の複製を作り、それをプレビューで開きなさい。(すでにサイズの小さな写真を使っている場合は、もう一度フォトブースで撮影して大きなサイズの写真を使いなさい)
  2. メニューの【ツール】→【サイズを調整…】でダイアログボックスを表示しなさい。
  3. 幅と高さを変更し、ファイルサイズがどう変わるかを見なさい。
  4. サムネイルとして適当なサイズにして、保存しなさい。
  5. 練習問題06-9の2枚の写真をサムネイルとオリジナルにしなさい。

写真を切り替えるのにボタンを使わず、img要素onclick属性を付ければデザイン的にスッキリします。ただし、見る人が画像をクリックすることに気がつかない可能性もあります。

表示サイズの指定

img要素で画像ファイルを表示する時に、width属性・height属性でサイズを指定して拡大・縮小することができます。

  • 単位はピクセルです。
  • width属性とheight属性のどちらか片方だけ指定すると、高さと幅は同じ割合で拡大・縮小されます。

JavaScriptでは、setAttribute() でwidth属性やheight属性の値を変更することで拡大・縮小ができます。setAttribute() の使い方は次の通りです。

  • 変更したい要素を document.getElementById() で指定します。
  • その後に .setAttribute() を書きます。
  • カッコの中は変更したい属性名と値です。
練習問題 08-8(☆☆☆)
  1. 自己紹介の写真の複製(または適当な画像ファイル)を作り、ファイル名を picture.jpg としなさい。
  2. ファイル ex08-8.html を次のように書きなさい。
  3. width="600"width="400" に変更し、ブラウザで再読み込みしてみなさい。
  4. ファイル ex08-8.js を次のように書きなさい。
  5. 新しくボタンを作り、ボタンを押すと上の関数 change() を呼び出すように ex08-8.html を修正しなさい(JavaScriptファイルを読み込むscript要素も忘れないように)。
練習問題 08-9(☆☆☆☆)

新しくテキスト入力欄を作り、数字を入力してボタンを押すと、画像がその幅で表示されるように ex08-8.htmlex08-8.js を修正しなさい。

width属性・height属性による指定は、画像を表示する時に拡大・縮小するだけなので、ブラウザが読み込むデータ量は変わりません。サムネイルのつもりで小さな値を指定しても、ページの読み込みが速くなるわけではありません。

チェックポイント
  • 1ビットとは何を意味しているのでしょうか?
  • 場合の数と情報量にはどんな関係があるでしょうか?
  • ビットマップ画像の情報量はどのように計算するのでしょうか?
  • 文字のエンコーディング(文字コード)とは何でしょうか?
  • 可逆圧縮と非可逆圧縮はどう違うでしょうか?
  • PNGとJPEGは、それぞれどんな画像に適しているでしょうか?