Return to Video

インスタグラム創業者によるピクセルと画像フィルターの解説

  • 0:00 - 0:00
    CSP
    (コンピューター・サイエンスの基礎)
  • 0:02 - 0:04
    「ちょビットだけ ピクセル について」
  • 0:09 - 0:10
    いいね
  • 0:12 - 0:18
    私がマイクとインスタグラムを設立したのは
    モバイルに新たな機会を見いだしたからです
  • 0:18 - 0:23
    はじめて日常的にコンピューターを
    携帯するようになったわけですから
  • 0:23 - 0:32
    中でも 画像の共有 が近い将来 有望で
    またやりがいのあることだと思ったのです
  • 0:32 - 0:37
    なんでもできるアプリは
    一見魅力的かもしれません
  • 0:37 - 0:40
    でも現実的な問題を解決しないと
    誰も利用しないでしょう
  • 0:40 - 0:44
    そこで考えなければならいのは
    「あなたは何を解決するか」です
  • 0:45 - 0:50
    「画面上に画像を表示する」という問題の
    解法は 絵をデータにする ことでした
  • 0:50 - 0:57
    1957年 エンジニアのカーシュは
    自分で撮った写真をスキャンしました
  • 0:58 - 1:03
    この荒い白黒の赤ん坊が 世界初のデジタルイメージ
    こうしてピクセルは生まれたのです
  • 1:03 - 1:06
    「ピクセル」は興味深い概念です
  • 1:06 - 1:18
    ちょっと見ただけではわかりませんが 画面を
    ズームすると小さな光る ドット(点) が見えます
  • 1:18 - 1:25
    さらにズームすると ドットがさらに小さな
    赤 緑 青 に光るドットなのがわかります
  • 1:25 - 1:32
    ピクセルが組み合わされると1枚の画像ですが
    近くで見るとただの点滅するライトです
  • 1:32 - 1:37
    普段目にするコンピューター画像は
    すべてこうしてできているのです
  • 1:37 - 1:43
    最近「解像度(レゾリューション)」という
    言葉をいたる所で耳にしますよね
  • 1:43 - 1:51
    解像度は 基本的に画面上の
    ピクセル数のことです
  • 1:51 - 1:57
    私が学生の頃は ヨコ640個タテ480個 ぐらい
    でもいまはもっと大きくなっています
  • 1:57 - 2:01
    近年「密度」の重要度も増しています
  • 2:01 - 2:05
    スマホとノートPCでは ピクセル数は
    同じでも密度がちがうのです
  • 2:05 - 2:09
    この例では スマホの密度が高いので
    画像はよりシャープです
  • 2:09 - 2:13
    ではピクセルの値はどうファイル化
    されているのでしょう
  • 2:13 - 2:18
    赤 緑 青 の3つの値があり
  • 2:18 - 2:23
    その3つが組み合わさって
    ピクセル1つを表しています
  • 2:23 - 2:32
    値は0〜255の範囲で
    0は暗く 255に近づくほど明るく
  • 2:32 - 2:36
    3つの値1組で 1つのピクセルを表します
  • 2:38 - 2:47
    画像ファイルの JPEG も GIF も PNG も中身は
    すべて<3つの値>の集合体からできたデータです
  • 2:47 - 2:51
    デジタルの世界のデータは
    すべて ビットで表されます
  • 2:52 - 2:55
    ビット は常に オン か オフ
  • 2:55 - 2:58
    それをコンピューターは
    1 か 0 のバイナリー(2進法)として扱います
  • 2:58 - 3:01
    つまり画像ファイルは
    たくさんの 1 と 0 でできているわけです
  • 3:01 - 3:06
    でも 赤 緑 青 の値は0~255だったはず
    どうしてでしょう?
  • 3:06 - 3:12
    じつはそれぞれ ビット8個の値だったのです
    ビット8個で 1バイト になります
  • 3:12 - 3:21
    2進法でビット8個の最大値は1が8個
    (11111111)で10進法の255となり
  • 3:21 - 3:24
    すべてが0(00000000)のゼロが最小値になります
  • 3:24 - 3:30
    そういうわけで0から255まで
    256の濃淡が存在することになります
  • 3:33 - 3:38
    ターコイズ(青緑)色のピクセルの例です
  • 3:38 - 3:45
    10進法ではそれぞれ
    赤64 緑224 青208 です
  • 3:45 - 3:48
    でもコンピューター内では2進法なのでーー
  • 3:48 - 3:57
    01000000 11100000 11010000
    ーーと扱います
  • 3:57 - 4:03
    この例では1つのピクセルに
    24ビット分もの数字がつかわれています
  • 4:03 - 4:15
    そこでプロは16進数を代わりに用います
    すると同じ色でも 40 E0 D0 と表せます
  • 4:15 - 4:16
    すごく短縮できたでしょ
  • 4:16 - 4:21
    画像の色を変えるには
    どうすればいいのでしょう
  • 4:21 - 4:28
    基本的には、色の値を変更する
    関数(ファンクション)を用います
  • 4:28 - 4:35
    ある色のピクセルが入力され 関数を通過し
    新たな色として出力されます
  • 4:35 - 4:46
    色を暗くする一例です
    決まった数(定数)を赤緑青から引きます
  • 4:46 - 4:55
    例として定数を50にします
    もちろん0以下にはできませんが
  • 4:55 - 5:03
    赤 ー 50 緑 ー 50 青 ー 50
    とそれぞれ引いていくと
  • 5:03 - 5:08
    暗くなったのがわかると思います
    [ビフォー] [アフター]
  • 5:08 - 5:17
    インスタグラムは レトロ調のフィルター
    機能など 見た目が注目されがちですが
  • 5:18 - 5:24
    もっと大切な存在になれたと思っています
    それはひとびとを互いにつなげた ことです
  • 5:24 - 5:29
    家族や友達とだけ画像をシェアするだけでなく
    世界中の出来事に触れる場になりました
  • 5:29 - 5:38
    さまざまな社会的な出来事やムーブメントを
    画像を通して体験しているのです
  • 5:38 - 5:42
    だからこそ我々は急成長し
    世界中で利用されているのだと思います
Title:
インスタグラム創業者によるピクセルと画像フィルターの解説
Description:

more » « less
Video Language:
English
Duration:
05:50

Japanese subtitles

Revisions