YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Japanese subtitles

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

Get Embed Code
17 Languages

Showing Revision 5 created 12/01/2015 by Haruhiko Minamiguchi.

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