WEBVTT

00:00:00.000 --> 00:00:00.250
CSP
（コンピューター・サイエンスの基礎）

00:00:01.671 --> 00:00:04.291
「ちょビットだけ ピクセル について」

00:00:09.436 --> 00:00:10.276
いいね

00:00:11.910 --> 00:00:17.740
私がマイクとインスタグラムを設立したのは
モバイルに新たな機会を見いだしたからです

00:00:17.970 --> 00:00:22.700
はじめて日常的にコンピューターを
携帯するようになったわけですから

00:00:22.965 --> 00:00:32.105
中でも 画像の共有 が近い将来 有望で
またやりがいのあることだと思ったのです

00:00:32.250 --> 00:00:36.870
なんでもできるアプリは
一見魅力的かもしれません

00:00:36.870 --> 00:00:40.350
でも現実的な問題を解決しないと
誰も利用しないでしょう

00:00:40.350 --> 00:00:43.880
そこで考えなければならいのは
「あなたは何を解決するか」です

00:00:44.667 --> 00:00:50.401
「画面上に画像を表示する」という問題の
解法は 絵をデータにする ことでした

00:00:50.401 --> 00:00:57.491
1957年 エンジニアのカーシュは
自分で撮った写真をスキャンしました

00:00:57.507 --> 00:01:02.607
この荒い白黒の赤ん坊が 世界初のデジタルイメージ
こうしてピクセルは生まれたのです

00:01:02.687 --> 00:01:05.969
「ピクセル」は興味深い概念です

00:01:05.969 --> 00:01:17.599
ちょっと見ただけではわかりませんが 画面を
ズームすると小さな光る ドット（点） が見えます

00:01:17.743 --> 00:01:25.153
さらにズームすると ドットがさらに小さな
赤 緑 青 に光るドットなのがわかります

00:01:25.273 --> 00:01:31.963
ピクセルが組み合わされると１枚の画像ですが
近くで見るとただの点滅するライトです

00:01:32.210 --> 00:01:36.640
普段目にするコンピューター画像は
すべてこうしてできているのです

00:01:36.770 --> 00:01:42.910
最近「解像度（レゾリューション）」という
言葉をいたる所で耳にしますよね

00:01:43.027 --> 00:01:50.897
解像度は 基本的に画面上の
ピクセル数のことです

00:01:50.897 --> 00:01:56.916
私が学生の頃は ヨコ640個タテ480個 ぐらい
でもいまはもっと大きくなっています

00:01:56.916 --> 00:02:01.346
近年「密度」の重要度も増しています

00:02:01.346 --> 00:02:05.456
スマホとノートPCでは ピクセル数は
同じでも密度がちがうのです

00:02:05.456 --> 00:02:08.924
この例では スマホの密度が高いので
画像はよりシャープです

00:02:08.924 --> 00:02:13.445
ではピクセルの値はどうファイル化
されているのでしょう

00:02:13.445 --> 00:02:18.152
赤 緑 青 の3つの値があり

00:02:18.152 --> 00:02:22.782
その３つが組み合わさって
ピクセル１つを表しています

00:02:22.782 --> 00:02:32.429
値は０〜２５５の範囲で
０は暗く ２５５に近づくほど明るく

00:02:32.429 --> 00:02:35.779
3つの値1組で 1つのピクセルを表します

00:02:37.818 --> 00:02:46.948
画像ファイルの JPEG も GIF も PNG も中身は
すべて＜3つの値＞の集合体からできたデータです

00:02:47.149 --> 00:02:51.489
デジタルの世界のデータは
すべて ビットで表されます

00:02:51.757 --> 00:02:54.991
ビット は常に オン か オフ

00:02:54.991 --> 00:02:57.991
それをコンピューターは 
１ か ０ のバイナリー（２進法）として扱います

00:02:57.991 --> 00:03:01.223
つまり画像ファイルは
たくさんの １ と ０ でできているわけです

00:03:01.303 --> 00:03:06.053
でも 赤 緑 青 の値は0~255だったはず
どうしてでしょう？

00:03:06.125 --> 00:03:11.875
じつはそれぞれ ビット8個の値だったのです
ビット8個で 1バイト になります

00:03:11.897 --> 00:03:20.827
2進法でビット8個の最大値は1が8個
（１１１１１１１１）で10進法の255となり

00:03:20.916 --> 00:03:24.418
すべてが０（００００００００）のゼロが最小値になります

00:03:24.418 --> 00:03:30.258
そういうわけで０から２５５まで
２５６の濃淡が存在することになります

00:03:32.906 --> 00:03:38.473
ターコイズ（青緑）色のピクセルの例です

00:03:38.473 --> 00:03:44.904
１０進法ではそれぞれ
赤６4 緑２２４ 青２０８ です

00:03:44.904 --> 00:03:48.066
でもコンピューター内では２進法なのでーー

00:03:48.116 --> 00:03:56.686
０１００００００ １１１０００００ １１０１００００
ーーと扱います

00:03:56.789 --> 00:04:02.659
この例では１つのピクセルに
２４ビット分もの数字がつかわれています

00:04:02.714 --> 00:04:14.927
そこでプロは１６進数を代わりに用います
すると同じ色でも ４０ Ｅ０ Ｄ０ と表せます

00:04:14.927 --> 00:04:16.247
すごく短縮できたでしょ

00:04:16.247 --> 00:04:20.587
画像の色を変えるには
どうすればいいのでしょう

00:04:20.847 --> 00:04:27.795
基本的には、色の値を変更する
関数（ファンクション）を用います

00:04:27.795 --> 00:04:35.235
ある色のピクセルが入力され 関数を通過し
新たな色として出力されます

00:04:35.235 --> 00:04:45.887
色を暗くする一例です
決まった数（定数）を赤緑青から引きます

00:04:45.887 --> 00:04:54.658
例として定数を５０にします
もちろん０以下にはできませんが

00:04:54.658 --> 00:05:03.408
赤 ー ５０ 緑 ー ５０ 青 ー ５０
とそれぞれ引いていくと

00:05:03.408 --> 00:05:07.659
暗くなったのがわかると思います
［ビフォー］ ［アフター］

00:05:07.829 --> 00:05:17.409
インスタグラムは レトロ調のフィルター
機能など 見た目が注目されがちですが

00:05:17.510 --> 00:05:24.060
もっと大切な存在になれたと思っています
それはひとびとを互いにつなげた ことです

00:05:24.126 --> 00:05:28.825
家族や友達とだけ画像をシェアするだけでなく
世界中の出来事に触れる場になりました

00:05:28.825 --> 00:05:37.723
さまざまな社会的な出来事やムーブメントを
画像を通して体験しているのです

00:05:37.723 --> 00:05:41.853
だからこそ我々は急成長し
世界中で利用されているのだと思います