ICT基礎 第3回

アンケートFeedback

• (Pros. &) Cons.

  • パソコン本当に分からなくて頭をかかえた 少しわからなくなると置いてかれるからもう少し授業ゆっくりにしてほしい

  • 前回よりも複雑な作業が増えて、説明が少し早かったように感じたのでもう少しゆっくりとしてくれればうれしいです。それ以外はとくにないです。

  • 周りがWindowsばかりで難しく感じた。

  • やることがたくさんあってバタバタしてしまったけれど、友達に教えてもらいながら課題を提出できたのでよかったです。

  • 課題の提出期限とかわかるずらかった。

  • プロジェクターで写している画面を大きくしてくれたので、前回の授業よりも見やすかったです！

  • クリックの回数がわからず難しかったので徐々に慣れていきたいと思います。

• 対面希望 or オンライン希望?

Google Meet

GWなので, Google Meetをオープンしておきます!! 私自身は大学で授業しているため, 気づくのが遅れるかもしれませんが, わからない点があればコメントで質問してください.

ICT基礎 5月 1日 (木曜日) · 午後2:30～6:00 タイムゾーン: Asia/Tokyo Google Meet の参加に必要な情報 ビデオ通話のリンク: https://meet.google.com/poh-dyyy-vnk

今日のフォルダの準備

• Windows: C:\Users\[ユーザ名]\Documents\ict に移動し, 03 というフォルダを作成しておく

  • C:\Users\[ユーザ名]\Documents\ict\03 というフォルダ構成になる

• Mac: /Users/[ユーザ名]/Documents/ict/ に移動し, 03 というフォルダを作成しておく

  • /Users/[ユーザ名]/Documents/ict/03

今日のサンプルファイル集

下記のどちらかからからダウンロードできます

• サンプルファイル集 (zip)

• WebClassの授業資料

文字の表現

文字コード

コンピュータの中では, 実際にbitという0 or 1を用いて様々なものを表現しています.

シンプルな例は文字です. 活版印刷が生まれる以前, 文字は下図のような手書きによるものでした.

上図では, 上の行と下の行とで同じ内容: a b c あ い う 漢 字 を書いています.

誰が書いても, どんなに汚く or キレイに書いても文字は文字で, 等しく a b c あ い う 漢 字 という同じ内容を示します.

すなわち, 汚い, キレイ, かっこいい, 太い, 細い, 大きい, 小さい等の要素は, 文字の本質ではなく, 装飾であることがわかります. そして, 活版印刷の活字が生まれたことで, 文字自体と, その装飾との区別がより明確になっていきます.

コンピュータで文字を表現する場合も同じです. 文字そのものを表現する共通の方法を用意することが基礎としてあり, 文字の装飾は機器やアプリごとに異なっても良いのです.

コンピュータが扱えるのは (原始的には) 数のみであるため, 文字に数を割り当てる (例: K↔75) ことで文字を表現します. この割り当て方のルールを文字コード (character code) と呼びます.

世界中にただ1つの文字コードしか存在しない、という状況なら特に困らないのですが, 現実はそうではありません. 英語のようにアルファベット26文字で済む場合もあれば, 日本語のように, ひらがな, カタカナ, 漢字など大量の文字を必要とする言語もあります.

各々が各々のルールで文字と数とを割り当ててきた歴史があるため, 現状では様々な文字コードが存在します.

• 例: ASCII, EBCDIC, JIS, Shift_JIS, EUC, Unicode 等

ASCII

これらの文字コードの中で, 最も基本的な文字コードと呼ばれるものが ASCII (アスキー) です.

アルファベット, 数字, いくつかの記号, そして制御文字 (改行など) を, 7bit (2進数なら7桁の0000000 ~ 1111111, 10進数なら0 ~ 127, 16進数なら0 ~ 7F) で1文字を表します. 他の文字コードでも, この128文字はASCIIと共通している場合がほとんどです.

具体的には下表です. 青文字は制御文字, それ以外が印刷可能文字です.

「文字に割り当てられた数」を実際に確認する

VS CodeにHex Editorという拡張機能を入れると, テキストファイル内の「各文字に割り当てられた数 (16進数表現) 」を確認できます.

Hex Editorの導入方法と使い方の動画は下記の通りです.

• 導入方法

  • VS Codeを開いた状態にする

  • 左側の3つの四角と1つの四角が書かれたマーク をクリックする

  • 左横に出てきた列の上部の検索ボックスにhex editorと入力する

  • Hex Editorというツールのinstallボタンをクリック

  • これでHex Editorという拡張ツールがVS Codeにインストールされた

• 使い始め方

  • VS Codeでテキストファイル (hex-test.txt) を開いた状態にする

  • Windows: Ctrl キーとShiftキーを押したまま pキーを押す Mac: Command キーとShiftキーを押したまま pキーを押す

  • Hex Editor: Open Active File in Hex Editor をクリック

  • テキストデータ内の文字に割り当てられた数を確認できる新しいタブが開く

• テスト方法

  • 適当に文字を入力し, 上書き保存: Windows: Ctrl + s Mac: Command + s

  • テキストに割り当てられた数が表示される

Unicode

上記で紹介したASCIIには日本語や他の言語の文字が含まれていません.

そこで, 各国がASCIIを拡張して独自の文字コードを作っていきました. 自国内で閉じて使用している分にはまだ良かったのですが, 国際化が進むにつれ, 異なる言語間のメールでやり取りする場面が増えていきました.

すると, ある数に割り当てられた文字というのが, 文字コードごとに異なるため, 異なる言語間のメールにおいて, 意図しない文字が表示されてしまう問題が発生しました. これを文字化けと呼びます.

そこで, 世界共通で使用可能な文字コードを作ろうと策定されたものがUnicode (ユニコード) です.

Unicodeではコードポイントと呼ばれる一意な非負整数 (0, 1, 2, ...) が用意されており, その各数字と各文字とが1対1に対応しています.

日本語の例は下表です.

このコードポイントに対して, 更に「コードポイントをどう符号化するか?」という文字符号化形式 (UTF: Unicode Transformation Format)も別途 策定されています.

符号化 情報を一定の規則に基づいて別の形式に変換すること。 今のコードポイントの例だと「あ=12354というコードポイント(数字)を「11100011 10000001 10000010」という0 or 1のビット列に変換すること」 ↕ 復号化 符号化された情報を元の形式に戻すこと

現行では UTF-8, UTF-16, UTF-32 の3種類が定められていますが, 実際によく使うのは UTF-8 です.

UTF-8は,

• 8 bit = 1 byteずつの単位で符号化

• 1 byte目は何byte文字かの判定に使用

  • もし1byte目がASCIIの範囲内だったら, そのままASCIIとして使用し, ASCIIとの互換性を担保

  • もし1byte目がASCIIの範囲外だったら, その他の言語の文字

    • 何bytes文字の指定範囲の分だけ続くbytesをまとめて1つの文字として扱う

    • 2 ~ 6 bytesの可変長で対応

という特徴をもっています.

1 byte目の具体的な割り当ては下表です.

また, 各byte文字の場合に, 実際にコードポイントとして使用する場所は下表です.

例えば, UTF-8によって符号化されたbyte列 CF 80 E3 81 82 33 41 を読み取ってみましょう.

• CFは2 bytes文字の範囲内なので, 「CF 80」という2 bytesで1文字

  • 「CF 80」を2進数に基数変換すると「11001111 10000000」

  • 青字部分を集めたコードポイントは「01111000000」

  • これは10進数で960

  • 10進数で960というコードポイントはギリシャ文字の「π」という文字

• E3は3 bytes文字の範囲内なので, 「E3 81 82」という3 bytesで1文字

  • 「E3 81 82」を2進数に基数変換すると「11100011 10000001 10000010」

  • 青字部分を集めたコードポイントは「0011000001000010」

  • これは10進数で12354

  • 10進数で12354というコードポイントは日本語で「あ」という文字

• 33は1 byte文字の範囲内なので, 「33」という1 byteで1文字

  • 「33」はASCIIで「3」という文字

• 41は1 byte文字の範囲内なので, 「41」という1 byteで1文字

  • 「41」はASCIIで「A」という文字

となるので, 実際には πあ3A という文字列だったことがわかります.

文字化けさせてみよう

日本人がたまに直面する文字化けは, 日本固有のShift_JISと世界標準のUTF-8との間で起こるものです. VSCodeで実際に文字化けをさせてみましょう.

• Shift_JISで保存したファイルをUTF-8で表示 → 文字化けしている → Reopen with Encoding → Japanese (Shift JIS) → 文字化けが直る

• UTF-8で保存したファイルをUTF-8で表示 → 正しく表示される → Reopen with Encoding → Japanese (Shift JIS) → 文字化けが発生 → Reopen with Encoding → UTF-8 → 文字化けが直る

	UTF-8で表示	Shift_JISで表示
UTF-8で保存したファイル
Shift_JISで保存したファイル

画像ファイル

画像, 音, 動画を取り扱う拡張子は様々あり, 可逆性などについて特徴がありますので, 有名なものをいくつか紹介します.

ラスタとベクタ

画像の保存形式には, 実はラスタとベクタという2つの形式があります.

ラスタ形式 (raster) は, 画像をマス目 (ピクセル) に分け, その各ピクセルごとに色を決めていくという画像形式です.

これは, 写真などの複雑な画像の表現に向いています. しかし, ピクセル単位までしか細かく表現できないため, 画像を拡大していくと粗くなっていきます.

それに対し, ある空間内の点群の座標データとそれらをつなぐ線によって構成される画像形式をベクタ形式 (vector)と呼びます.

空間に対する数値データによる構成のため, 拡大しても粗くならないというメリットがあります. しかし, 複雑な画像を表現しようとすると, その分データ量が大きくなり, アプリ等で開くのに時間がかかるという問題もあります.

具体例 (ラスタ)

ラスタ形式の画像の代表例は下記です.

• bmp (bitmap, ビットマップ)

  • (基本的には) 無圧縮

    一応, 可逆圧縮の仕様も用意されている

    → ファイルサイズが大きくなりがち

  • 白黒2値画像からフルカラーまで対応

  • 非透過 (透明は表現できない)

• gif (graphics interchange format, ジフ)

  • (基本的には) 可逆圧縮

    一応, 非可逆圧縮の仕様も用意されている

  • 256色以下

  • (基本的には) 非透過

    透過表示できるように拡張されたものもある

  • アニメーション表示可能

  • 一時期, gifで使用しているデータ圧縮アルゴリズムに特許使用料が発生していた. 2003年6月20日 (アメリカ), 2004年6月20日 (日本) に特許が失効し, 現在は自由に使用可能.

• png (portable network graphics, ピング)

  • 可逆圧縮

  • フルカラー (RGB 24bit) 以上の色表現も可

  • 透過

  • gifに特許使用料が発生すると懸念されていた際に, gifに代わるものとして開発が開始された

  • pngファイルであることを表すために, バイナリの最初の部分 (ヘッダ) に「89 50 4E 47 0D 0A 1A 0A」という8 bytesが埋め込まれている

画像	バイナリ

• jpg, jpeg (joint photographic experts group, ジェイペグ)

  • (基本的には) 非可逆圧縮

    一応, 可逆圧縮の仕様も用意されている

  • フルカラーまで対応

  • 非透過

具体例 (ベクタ)

ベクタ画像のcodeの具体例

ベクタ形式の画像の代表例は下記です.

• pdf (portable document format)

  • いわゆるpdfで, 主に電子文書のファイル形式として扱われるが, 内部でベクタ画像を扱うことが可能

• svg (scalable vector graphics)

  • XML (extensible markup language) を基本とした画像形式

  • ウェブページを構成しているHTMLもマークアップ言語であるため, 親和性が高い

  • 画像編集用のソフトでも勿論作成できるが, 中身はテキストで出来ているため, VS codeなどのテキストエディタで画像編集することも可能

  • よく見るブラウザ (Microsoft Edge, Chrome, Safari等)で実際の図を確認可能

円
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2">
  <circle cx="1" cy="1" r="1" style="fill: rgb(3, 3, 3);"/>
</svg>


三角形
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230.94 200">
  <polygon points=".87 199.5 115.47 1 230.07 199.5 .87 199.5" style="fill: rgb(255, 0, 0);"/>
</svg>

種類	円	三角形
テキストとして配置
画像として配置

課題: circle.svgの色を赤 (red=255, green=0, blue=0) から青 (red=0, green=0, blue=255) に変えてみよう!!

VS CodeでSVGをImage PreviewではなくText Editorとして開く

下記の手順でcodeとして表示するように設定変更できます。

1. 画像として開いてしまっている状態 (Image Preview)

2. ファイル名の上で右クリック or 2本指でクリック → Open With...をクリック

3. Configure default editor for '*.svg' ...をクリック

4. Text Editorをクリック

5. codeとして表示された (Text Editor)

課題

提出締切: ● ICT基礎 木4: 2025-05-08 14:40 ● ICT基礎 木5: 2025-05-08 16:20

講義内で作成した下記の3つのファイルをzipにまとめ, 学生番号_ICT_03.zip (例: gk9999_ICT_03.zip) に変更し, 提出してください

• UTF-8のテキストファイル (utf8.txt)

• Shift_JISのテキストファイル (shiftjis.txt)

• SVGファイル (circle.svg)

アンケート

WebClassのアンケートへの回答もお願いします!! 🙌