本書について

　本書は、HTML5とJavaScriptを用いて画像処理の基礎から、簡単な2次元のARアプリケーションの作成までを「初心者向け」に説明したもので、大妻女子大学社会情報学部情報デザイン専攻での3年生の講義をまとめたものです。
　講義では種々の事情からC言語を用いて講義を行いました。本書は以下の理由からそれをHTML5とJavaScriptに置き換えてあります。

（1）Webブラウザで実行することができるため、PCだけでなく、タブレットやスマホなど、さまざまな環境で画像処理を試してみることができる。
（2）動画やWebカメラの扱いが非常に簡単。UIとの組み合わせが楽。
（3）特別なエディタや開発環境を必要としない。

　特に（2）は大きく、これまでの画像処理の本は主に静止画をベースにしたものが多いのですが、本書は動画をベースにする方法を示すことでアプリケーションの幅をさらに広げることができるのではないかと思います。

目　次

• 第1章　はじめの一歩はRGB
  • 1.1　画像って何？
  • 1.2　画像処理って何？
  • 1.3　画像は何からできているか？
  • 1.4　ピクセルの色を見てみる
  • 1.5　赤、緑、青で三原色
  • 1.6　なぜ赤、緑、青だけでよいのか？
  • 1.7　コンピュータで色をどう表現するか？
  • 1.8　8ビットで大丈夫？
  • 1.9　まとめ
• 第2章　画像処理のためのHTML+JavaScript
  • 2.1　HTML入門
  • 2.2　JavaScript入門
  • 2.3　Canvasって何？
  • 2.4　デバッグ用のメッセージの表示とツール
  • 2.5　まとめ
• 第3章　画像を読み込み、表示、変更する
  • 3.1　画像ファイルを読み込み表示する
  • 3.2　ピクセルを取り出し、色を調べる（HelloPixel）
  • 3.4　ピクセルの色に応じて色を変える（ModifiedPixel）
  • 3.5　まとめ
• 第4章　画像全体を処理する
  • 4.1　画像の色を反転する
  • 4.2　画像を明るくする、暗くする
  • 4.3　型付き配列って何？
  • 4.4　画像のコントラストを変える
  • 4.5　乱数を用いたエフェクト
  • 4.6　まとめ
• 第5章　グレースケール化処理
  • 5.1　グレースケール化って何？
  • 5.2　単純なグレースケール化
  • 5.3　一般的なグレースケール化
  • 5.4　テンプレートマッチング
  • 5.5　まとめ
• 第6章　動画を画像処理する
  • 6.1　動画ファイルを再生する（ShowVideo）
  • 6.2　Webカメラの画像を表示する
  • 6.3　カメラの画像をキャプチャし表示する
  • 6.4　色を反転した画像を動画で表示する
  • 6.5　差分画像による動物体の抽出
  • 6.6　まとめ
• 第7章　画像を解析するための前処理
  • 7.1　輪郭を抽出する
  • 7.2　ノイズ処理
  • 7.3　2値化処理
  • 7.4　まとめ
• 第8章　図形要素を抽出する
  • 8.1　線を抽出する
  • 8.2　円を検出する
  • 8.3　高速化の手法
  • 8.4　まとめ
• 第9章　図形の特徴量を計算する
  • 9.1　図形の特徴量
  • 9.2　ラベリング処理
  • 9.3　輪郭追跡
  • 9.4　まとめ
• 第10章　アプリ：スマートノート
  • 10.1　どうやって実現するか？
  • 10.2　サンプルプログラム（Note.html）
  • 10.3　サンプルプログラム（Note.js）
  • 10.4　メモ用紙の4隅の点を探す
  • 10.5　画像を正面に向ける
  • 10.6　まとめ
• 第11章　アプリ：マーカーを用いた2次元AR
  • 11.1　どうやって実現するか？
  • 11.2　サンプルプログラム（Scouter）
  • 11.3　90°ずつ回転したマーカー画像を作成する
  • 11.4　動画にする
  • 11.5　まとめ
• 付　録
  • 付録A　ブラウザを介した画像の読み込み
  • 付録B　透視変換行列の計算
  • 付録C　自分のPCでWebサーバをあげる
  • 付録D　cuon-image.js関数一覧
  • 付録E　Visual Studio Express For Webの使い方

■追加情報■ 2020/5/12

巻末301ページにプログラムの実行環境設定の説明の http://www.st.rim.or.jp/~nakata/
はサポートがなくなったようです｡ 他のWebサーバをインストールされてください｡
例えば､apacheが有名です｡ apacheのインストールは
https://www.apachefriends.org/jp/index.html
でxamppをインストールするのが一番楽です。
また､それができない場合は、もう1つの方法はフリーのレンタルサーバを利用されてみてください｡
https://www.xfree.ne.jp/manual/man_order_user.php

追加情報（2020/5/19）

ChromeでのcreateObjectURL廃止に伴い、第6章のサンプルコード「Capture.js」（本文p.153、リスト6.5）の末尾部分を下記のように変更してください。

  // カメラからの画像を取得する
  navigator.getUserMedia({'video': true, 'audio': false},
      function(stream) {
        video.srcObject = stream; // Chrome
        // video.src = window.URL.createObjectURL(stream); Chrome以外
      }, 
      function(error) { alert('エラー: ' + error); }
  );
      

同様に、「CaptureReverse.js」（本文p.155、リスト6.6）の末尾部分を下記のように変更してください。

  // カメラからの画像を取得する
  navigator.getUserMedia({'video': true, 'audio': false},
      function(stream) {
        video.src = window.URL.createObjectURL(stream); // video.mozSrcObject = stream;
      }, 
      function(error) { alert('エラー: ' + error); }
  );
      

• 書籍一覧に戻る
• ＜
• TOPに戻る