情報学概論2 第12回（7/7)

(Introduction to Informatics 2)

1 ファイルフォーマットを知る（つづき）

1.3 データ変換

（前回の資料を参照）

補足解説：

• 画像フォーマットの違い

  • BMPでは（標準では）圧縮なしでデータ部を置く
  • 他のフォーマットでは圧縮される

• 圧縮率に生じる差

  • zipによる圧縮は、写真に対してはあまり性能を発揮できていない（画像に特化した技術ではないからだと推測される）。
  • すべて白の画像、１ピクセルあたり２４ビットのものだと、 図のように ffが並ぶことになる。ff で表される１バイトが３つで １ピクセル分のデータを表現している。
  • なお、この状態を、右図のような言葉で端的に表現したら（UTF-8換算で）12バイト （のデータ量で表現したことになる）。これも（広い意味）ではデータ圧縮である。
    
  • もちろん、特殊な表現すぎて実用上には不適だが。

  

• クロード・シャノンの研究

  • シャノンは情報理論の創始者。

  • 情報量についてもシャノンが提唱した基礎理論が現在の我々が使う概念の土台になっている。

  • その理論によれば、データの圧縮は無限にできる（いくらでもサイズを小さくできる）訳ではなく、ある限界の値よりも小さくすることは（可逆的圧縮では）できない

    （というような理論的な性質は理解しておこう）。

  • 情報学の礎を築いた重要な人物（右図）３人の名前ぐらいは知識として知っておこう。

2. HTMLの表現力

（調査、実証）以下の２つ、実際にやってみて下さい。

2.1. 縦書きとふりがな

（前回解説を参照）。

• ふりがなを打つためには、右図のような ruby タグを使って漢字部分とかな部分を括る必要がある。

• 縦書きで表示させるために、CSS のwriting-mode 属性の値として、vertical-rl を指定する必要がある。

  • なお、IE（インターネットエクスプローラ）の一部のバージョンでは、上記CSS属性名は使えない。
    1. IEも含めて対応できるようCSS属性名を複数設定する。
    2. 対象となるブラウザをモダンブラウザに限定する。
    のいずれかの方針を選ぶ必要があるだろう。

補足：markdown とrubyタグ

• markdown にはruby を効率的に書く書式は（標準では）用意されていない。
• が、Pandoc の filter として実現している例はある（さほど複雑ではない）。
  • markdown で リンク（a タグ）を書くときの記法に似た文法で、
  • [かんじ](-漢字) のように、漢字部分の前（ 括弧内の先頭）に - （ハイフン）を入れるという書き方を想定して、
  • フィルターが作られている（Pandocと同じくHaskell言語で書かれている）。

• ソースプログラム（拡張子 .hs）の状態だと、それを使うために Haskell言語処理系がインストール されていることが必要になる （具体的には右板書図の手順で進めることになる）。

• ふりがな拡張文法を含むMarkdownで書かれた原稿（ここでは xxx.md と仮定）と、 上記 .exe を同じフォルダに置いて、

  pandoc -F ./handleRuby -o xxx.html xxx.html

  のように呼ぶことになる。

2.2 数式

２次方程式の解法を要約したページ。これも、HTMLファイルを１つ作ってみて下さい。

1. 数式 y=ax²+bx+c はHTMLで表示できますか。

• 上付き文字を HTMLでどう書くかは、わかりますね？（調べれば） 　

2. その解の公式は習いましたか？（右に png画像あり）
   • これもHTMLページの中に（画像ではなく綺麗に表示されるものとして）書いてみましょう（これはやや難解）。

• 参考に、LaTeX での数式の書き方を以下に抜粋します。

  式	（英語）	書き方
  分数	fraction	¥frac{a}{b}
  べき乗	power	a^b
  平方根	squre root	¥sqrt{a}
  プラスマイナス	plus minus	¥pm

• 追加情報1：

  pandoc は（ドキュメントによると）様々な方式での数式の表示をサポートしていて、

  どれを選ぶのがいいか混乱するかもしれない。

  • とりあえず pandoc コマンドに --mathml オプションをつけるのが単純だろう。

    （補足）–mathml オプションだとブラウザによって動作しないことがあるらしい。

    その時は、—webtex オプションも試してみてください。

  • 非常に単純な数式の入ったサンプルファイル（これ）で試してみて下さい。

  • pandoc を使わずに HTMLで書く人は、Mathjax を使うとよさそうです。

    ¥[ の行と ¥] の行の間に、上に列挙した記号を使って（texの形式で）数式を書くと、変換表示してくれます。
    

• 追加情報2：

  LaTeXの数式記法をオンラインで学ぶことができるサイトもいくつかあります（以下に例を示した）のでこれも活用して下さい。

  • HostMath、 mathURL、 Daum Equation Editor、 CodeCogs Equation Editor、 iTex2Img、 TeX equation editor など。

グラフを使う

解説ページ => ここは次回

3. 課題

1. 前回資料に沿って、題材として用意した２つのJPEGファイルを出発点として、
   • BMP PNG への変換
   • 結果的に生成されたファイルをZip圧縮してみる
   を、試みて下さい。どんな方法を使ったか、結果的にできたファイルのサイズについて気がついたこと、についても報告ください。
   
2. 今日解説した技術（縦書き、ふりがな、数式）を使ったページを 自分で作ってみて下さい。

（HTMLに関して豊かな経験をすでにお持ちで、上記課題を物足りなく感じる人は、たとえば 右図のようなテーマでページを作る技術を試してみて下さい。）