はじめてのHTML
HTML？
Hyper Text Markup Languageです。今あなたが閲覧しているこのWebページも、世の中の全てのWebページも、HTMLにより記述されています。
HTMLを実際に覗いてみる
世の中のほとんどのWebページのために記述されたHTMLは、GoogleChromeなどのブラウザを使うと実は覗き見ることができます。まずはどんなページでも良いので、Chromeでページを開き、右上の設定ボタン「...」から、「その他のツール」＞「デベロッパーツール」を選択してみましょう
すると、こんな感じで右半分にHTML等のコードが表示されます。
この右側に表示されているものがHTMLになります。圧倒されるほどの行数で表示されますが、実際にこれを一行一行人間が手作業で記入することは、現在はほとんどでしょう。現在は、HTMLを半自動的に記述してくれるツールやサイト（例えばこのHatenaブログもそうです）が普及しています。HTMLを全く意識せずにブログを書いているブロガーが大半かと思います。逆に、HTMLを意識して書いているブロガーはどのくらいいるのでしょうか。
さて今回は、このようなHTMLを、最低限自分で書けるようなかんたんな紹介記事になります。そしてこの記事に続けてJavaScript、そしてWebGLへと展開していきたいとお思っています。
最低限のHTMLファイルの作り方
まずはHTMLを記述するための空っぽのテキストファイルを用意します。ファイルエクスプローラを開き、右クリック＞新規作成＞テキストファイル、を選択します。
そして生成されたテキストファイルをメモ帳等で開きます。そしてそこに、以下のHTMLをコピーペーストします。
<!DOCTYPE html>
<html lang="jpr">
<head>
<meta charset="utf-8">
<title>This is title</title>
</head>
<body>
hello world
</body></html>
そして、今度はテキストファイルを閉じて、ファイル名を「index.html」という風に、拡張子を「.html」に変更します。
そして、このhtmlファイルをダブルクリックで開けばブラウザでこんな感じで表示されるかと思います。
表示された、と言っても真っ白なページの左上に"hello world"と書かれ、タブに”This is title”と表示されただけですね。一応これでもHTMLによって記述されたページになります。
Chrome等のブラウザは、このようなHTMLファイルを開くためにあります。今回はローカル（自身のPCの内部）に存在するHTMLを開きましたが、Webページを閲覧しているときはインターネットを介してサーバ上にあるHTMLファイルをブラウザが開いてくれます。
次回は、このHTMLにJavaScriptを組み込んでいきたいと思います。今回は短いですが、これでおしまいです。
Unity 2020.1.4fで，Androidで，ARCore
今回は，Android上で動作するARのサンプルアプリを，Unityで作ってみたいと思います．
前提条件
Android開発のための環境設定
UnityHubからのAndroidSDK/NDK,JDKのインストール
まずはUnityHubから，UnityにAndroid関連のモジュールを追加します．
数年前まではUnityからAndroidを扱うためには，Android StudioからSDK/NDKをインストールしてパスをUnityに伝えることをしていましたが，今は不要になったようです．便利になりましたね．
下記のチェック欄にチェックをいれたら，「次へ」進み，インストールします．
Unityの新規プロジェクトの作成)
UnityHubの設定が済んだら，新規プロジェクトを作成します．
Unityの設定(File>Build Settings)
まず，Unityのビルド対象をAndroidに切り替えるため，Androidを選択してからSwitch Platformを選択します．プラットフォームの切り替えにはしばらく時間がかかります，気長に待ちましょう．切り替わったら，Player Settingsを開きます．
動作対象とするAndroidの 最低バージョンを指定
Player Settingsを選択すると，Project Settingsが開きます．（これは，誤記なのか意図なのか...?）
そして，下図のように左のタブからPlayerを選択します．そこから，Other Settingsを選び，たくさん続く項目のなかから，Minumum API Levelを見つけて，AndroidのOSバージョンを，Android 8.0に選択します．これはあくまでも動作対象の最低バージョンなので，自身のスマホのバージョンが8以上なら問題ないです．
Vulkanを除去
同様に，Player Settings>Player>Other Settings から，今度は 「Graphics APIs」を見つけ，その一覧から，Vulkanを選択したら，「-」を選択します．これは，Graphics APIとして，Vulkanを除外するために行っています．理由は，Android8以前ではVulkanを扱っていない為です．逆に，最新のAndroid OS 11などではVulkanがサポートされているそうなので，この手順はスキップしてください．ただ，どんなスマホで実行されるか，そんなことまで考えたくないことが多いので，Vulkanは除去しておいた方が無難です．
ARCoreを利用するためのパッケージの追加
1. ARCore Unity Packageの入手＆Import
まずは下記のサイトからarcore-unity-sdk-1.20.0.unitypackageをダウンロードしてきます．ダウンロードしたら，arcore-unity-sdk-1.20.0.unitypackageをダブルクリックで実行すると，自動的にUnityにパッケージを追加しようとするので，Importしてください．
2. Package Managerからの，XR Plugin ManagementのImport
arcore-unity-sdk-1.20.0.unitypackageは，残念ながら単独ではいろいろ足りないようで，いくつか追加していきます．まずはWindow > Package Managerを開きます．
左上のPackagesのところをタブを選択し，そこから「Unity Registry」をまずは選択します．すると，下図のようにたくさんの追加候補のパッケージの一覧が表示されます．
このなかから，XR Plugin Managementを見つけます，リストの一番下の方にあります．見つけたら，Importを選択し，パッケージを追加します．
3. Package Managerからの，Multiplayer HLAPIのインポート
続けて，Multiplayer HLAPIをインポートします，が，これは先ほどのようにリスト一覧には表示されていません．なので，別の方法で追加していきます．まず，さきほどと同じようにPackage Managerを開き，左上の「＋」を選択したあと，「Add package from git URL...」を選択します．
そして，com.unity.multiplayer-hlapiと入力し，Addを選択することでこのパッケージを追加することができます．ちなみに，このURLは下記のサイトに記載されています．
Multiplayer HLAPI - Unity マニュアル
HelloARシーンの追加
さて，上記で環境設定は完了したので，今度はARのアプリのサンプルシーンを追加していきます．まずはGoogleARCoreの中にサンプルとして含まれているHelloARというシーンを追加するために，下図のようにドラッグ＆ドロップします．ついでに，最初から存在しているSample Sceneを除去（Remove)します．
実行してみる
さて，上記でプロジェクトとしては完成しています．とりあえず動作確認してみたいのですが，このWindowsのUnityエディタ上で実行しても，Androidカメラが無い為，ただ真っ黒い画面が表示されるだけです．ただそれでも，予期せぬ設定ミスとかでまともに動作しないことくらいは確認できます．ということで，まずは画面上部の右三角を押して実行し，下図のように真っ黒画面と右上に白の設定ボタンが表示されることを確認してください．
ではここから，Androidスマホで実行するための手順を説明していきます．
まずは自身のスマホで，開発者モードをONにしていきます．スマホによって設定項目の名称が微妙に違ったりしますので，気を付けてください．
次に，スマホをUSBケーブルでPCに接続しておきます．そして，さきほど開いたように，Unityのメイン画面から，File > Build Settingを開きます．
そして最後に，下図のようにHelloARのシーンを，Scenes in Buildに追加したら，Build And Runを実行します．途中何度か「OK」を押すことを求められますが，OKを押して先へ先へと進みます．「Done」と表示された後，スマホを開くとアプリが実行されます．
はい，こんな感じで動作すれば完了です！
マーカーレスARなので，特にマーカーは必要なく，画面内をタップするとそこにARオブジェクトが固定されます．すごいですね～，マーカーレスARがこんなに簡単に，しかも結構ロバストに動作しています．こんな特徴点でなさそうなとこでもヌルヌル動くし．
余談
私がまだ画像処理の研究者を始めたころ，PTAMのデモ動画が発表されて私はとても感動したのを覚えています．こんなワクワクな感動を与える研究を自分もしてみたいと，今でも強く思います．にしもて，PTAMは2007年だったのですね，もう13年も経つのか．．．
これを見て分かるように，当時でもうすでにマーカーレスARってあったんです．この13年，スマホのスペックはどんどん上がり，さらに，より効率的にStructure from Motionの幾何計算をするアルゴリズムが提案され，VR/ARが許容される社会がやってきて，そしてやっと世の中で技術が使われるようになってきたと感じます．
そして今は，ARCoreというこんな簡単にこんなに楽しい技術を気軽に使える時代です．こういった新しい便利なツールはどんどん活用し，ここからさらに楽しい世界を作っていきたいものですね．
Blender 2.8でプロジェクターっぽいライトを作ってみる
今回は，Blenderを使って，２つのことをしていきます
- ちょっとした３次元モデルをBlenderで作ってみる
- テクスチャを投影する光源を置いて，３次元モデルに投影してみる
で，何がしたいかというと，理想のお部屋をモデリングし，そこにプロジェクタ置いてみたいという，ちょっとした趣味です．
話はずれますが，真面目な話，画像処理研究者の皆さんはもっとご自身の研究成果をアピールするために，魅力ある挿絵，図，評価画像とかを工夫するとよいなと感じてます．そんな皆さんに，フリーで手軽にCGコンテンツ作れるBlenderは，ぜひおススメです．
では，さっそくBlenderでちょっとしたモデルを作っていきます．
Blenderを開くと，すでに立方体のモデルが用意されています．
Blenderの細かい使い方についてはたくさんのサイトで紹介されているので，ここでは本当に簡単なことだけ書いておきます．
- マウスの中央ボタン：視点の移動
- 数字キー１，３，７，９：視点を特定の位置へ移動
- 数字キー５：透視投影と平行投影を切り替える
- オブジェクトの選択：左クリック
- オブジェクトの移動：g（g押下後に，x/y/zで移動する軸を指定）
- オブジェクトの拡縮：s（ s押下後に，x/y/zで拡縮する軸を指定）
- オブジェクトの回転：r（ r押下後に，x/y/zで回転する軸を指定）
- オブジェクトの複製＆貼り付け：Ctrl+C & Ctrl+V
- 各頂点を編集する編集モードへ移行：TAB
まずはこれくらい覚えて頂ければ，簡単なオブジェクトを置いたりすることはできるかと思います．また，Blenderにはあらかじめプリミティブなオブジェクト（平面，キューブ，球，錘など）がいくつか用意されています．
では，上記のことを組み合わせていくつかのオブジェクトを追加，編集することで，とりあえず下のようなシーンを作ってみました．
では，このシーンに対して，ここからプロジェクタのようなライトを追加していきます．
まずは，ライトを選択し，その種別を”Spot”へ変えていきます．
右側のタブに表示されている”Light"を選択，そして右下のほうにある電球のアイコンを選択しライトの設定タブを開く．そしたら，ライトの種別をスポットへと変更します．すると，左のビューでは，ライトの照射範囲を示す大きな円錐が表示されるはずです．
それでは次に，この照明をプロジェクタに見立て，プロジェクタに投影する画像を設定していきます．
まずは，レンダーエンジンを変更して，照明にテクスチャを持たせることができるように変更します．下図のように，レンダーエンジンを"Cycles"に変更しておきます．
次に，ライトがリアルタイムに反映されるように，左側の画面が表示するものを，デフォルトの"ソリッド"から"レンダー"に変更します．そのためには，シンプルに左のビュー画面を選択しているときに，キーボードの"Z"キーを押して表示される"レンダーを選べばOKです"．
すると，こんな感じのちょっとCGっぽい感じの絵になってきます．しかしながら，この時点ではスポットライトは単なる白色の光源ですので，絵はついていません．
そこで，ここからスポットライトに絵を付けていきます．スポットライトに絵を付けるために，シェーダエディタという機能を使っていきますので，まずはこれを数の手順で開きます．シェーダエディタがちっさくて見にくいので，レイアウトも次いでに下図では変更しています．
シェーダエディタを開いた時点では，なにも要素が表示されていないので，左のビューでライトを選択し（選択されたらオレンジ色の枠線になります），画面上部の”ノードを使用”にチェックをします．すると，下の図のように，何かが追加されます．
この，なんかでたものをマウスホイールで拡大してみます．これは現在のライトの色に関する情報だと思っておけば，とりあえずOKです．
ここに，上部の”追加”から，以下の三つを追加します．
- 追加 ＞ 入力 ＞ テクスチャ座標
- 追加 ＞ テクスチャ ＞ 画像テクスチャ
- 追加 ＞ ベクトル ＞ マッピング
では，追加した３つの要素（ノード）を数のようにつなぎます．
左から順に，
- テクスチャ座標のノーマル ＞＞＞ マッピングのベクトル
- マッピングのベクトル ＞＞＞ 画像テクスチャのベクトル
- 画像テクスチャのカラー ＞＞＞ 放射のカラー
- （最初から結合済み）放射の放射 ＞＞＞ ライト出力のサーフェス
すると，上図のように左側のモデルが紫色になるかと思います．これは，画像テクスチャに対し，まだ何も画像を与えていないから，デフォルト値として紫が指定されています．
そこで，画像を指定していきます．追加したノードの”画像テクスチャ”の”開く”を選択してプロジェクタとして投射したい画像を何でもよいので一枚指定します．
ここでは風景画像を指定しました．
すると，
しかしながら，なんかちょっとおかしい＆見にくいので，左側のビューを大きくして，ライトの照射位置を調整してみます．見やすいように，ライトを床面に対し垂直に照射するように調整してみました．
すると，上図のようになっていることが見てわかります．これは，
- 繰り返している
- ぼけている
- 丸く切り取られている
ようなので，三つを直していきます．
まず，シェーダエディタの，画像テクスチャの，”リピート”項目を”クリップ”に変更します．すると，下図のように画像が繰り返すことがなくなります．
しかしながら，繰り返さない代わりに，扇形になってしまいましたので，これを直すために，同じくシェーダエディタのマッピングにて位置のX,Yをそれぞれ0.5ｍにします．さらに，拡大縮小を任意の値に設定して，ライトの照射範囲の中に投射したい画像が端まで映り込むようにします．
では次はぼけているのを解消していきます．
ライトを選択している状態で，右下のビューで緑色の電球のアイコンを選択します．そしてその中の，いちばん上にある項目群の中で，下記のようにします．
- サイズ を0にする（これが大きいほど，ぼけます）
- 最大バウンス数 を1にする（レンダリング高速化のためなので必須ではないです）
はい，これで設定は完了です！
あとは，左側の３Dビューで好きなようにライトの位置などを変更してみましょう．
こんな感じでライトを動かせば，プロジェクタを動かしたかのようにふるまわせることができるかと思います．
詳しくは割愛しますが，Blenderでつくったモデルをカメラからの視点の画像をレンダリングするには，F12キーを押します．また，左側の３Dビューで，今見ている視点にカメラを設定するには，Ctrl+Shift+0を押します．
以上，Blenderによるプロジェクタっぽいライトの作成方法を紹介しました．
Blenderは手軽に使える無料のCG作成ソフトです．チュートリアルもたくさん紹介されており，私も独学でいろいろ学んでいる途中ですが，ちょっとやれば下のような，それらしいリアルなCGが作れます，おススメです．
OpenCVでカメラ/ビデオを取り込む
ここではOpenCVを利用してカメラ（USB接続のカメラや，ノートPCに付属のカメラ）から映像をリアルタイムに取り込んで表示することをしてみたいと思います．
凄く簡単なソースなので，とりあえず貼ります．
#include <opencv2/opencv.hpp> int main() { cv::VideoCapture vcap(0); cv::Mat frame; while (vcap.read(frame)){ cv::imshow("capture", frame); if (cv::waitKey(1) == 'q')break; } vcap.release(); return 0; }
凄く短いです，コメント書くのもってアレですがちゃんと書きました．
#include <opencv2/opencv.hpp> int main() { //ビデオファイルやカメラからキャプチャを行うためのクラス //引数の0は，0番目のカメラの意味もしカメラが2台以上あれば1とか2とかにすれば別のデバイスに切り替え cv::VideoCapture vcap(0); //カメラが取り込んでいるデータから，画像にしてを入れておくための箱を用意 cv::Mat frame; //カメラから画像を取り込み続けられる限り続くwhileループ //vcapから画像frameへ1フレームだけ取り込む while (vcap.read(frame)){ //画像を"capture"という名のWindowに表示 cv::imshow("capture", frame); //キーボードでqキーを押したらwhileループ終了 if (cv::waitKey(1) == 'q')break; } //vcapをリリース vcap.release(); return 0; }
以上が，カメラからリアルタイムに取り込む方法でした．
ビデオのファイルから読み込みたい場合は，このソースコードから一行変えるだけです．
cv::VideoCapture vcap("samplevideo.mp4");
OpenCV 4.1 を使えるようにVisual Studio 2019のプロパティシートを設定
上記のページでは，OpenCV4.1の設定をしてきました．
このページでは，今度はVisual Studio側の設定をしていきたいと思います．
ここでは，"プロパティシート"というVisual Studio独特の方法を使っていきます．プロパティシートは，一回作っておけば，今後OpenCVを使うプロジェクトには使いまわすことができる便利な機能です．
空のプロジェクトの作成
まずは新しくプロジェクトを作成します．
C++の空のプロジェクトをとりあえず作ってみます．
プロジェクト名称は何でもよいので，とりあえず適当に"TestOpenCV"とつけておきます．
空のプロジェクトが出来上がると，こんな感じの画面になります．
”空のプロジェクト”なので，本当に空っぽですね．
続いて，右下の"プロパティマネージャ"を選択します．
※そもそも右側のタブが出ていないときは，上部のメニューバーの”表示＞その他のウィンドウ＞プロパティマネージャ”から開くことができます．
プロパティシートの作成
さて，プロパティマネージャがこんな感じで表示されたかと思います．
プロパティシートは，開発の環境ごとに設定できるため，私の環境では下記のように4つフォルダが既に切られています．おそらくデフォルトでこうなっていますので，皆さんの環境もこうなのかと思います．小難しい説明は割愛しますが，ざっくりと４つを分けている用語の意味は
- Debug：デバッグ環境でのビルド用（実装⇔実行のトライ＆エラーを繰り返す作業用で，実行中の変数の途中経過とかを観察できる）
- Release：リリース環境でのビルド用（デバッグ用のように，変数の途中経過を細かくは負えないが，実行速度が速い．アプリケーションをリリースしたりするとき用）
- x64/Win32：作りたいアプリケーションは64bitマシンを想定するのか，それとも32bitを想定するのか？
とりあえず，まずはDebug/x64でプロパティシートを作っていきます．
まずはこいつを右クリックします．
そして，”新しいプロジェクト プロパティシートの追加”を選択します．
すると，下のような画面が立ち上がるので，新らたに"OpenCV410d_64.props"という名前で空のプロパティシートをまずは作ります．名前も任意でよいですが，上記とおり，OpenCV410d_64.props, OpenCV410_64.props, OpenCV410d_32.props, OpenCV410_32.propsの４つ分作るので，それが区別できるような名前にしておくとよいかと思います．
それを追加出来たら，下記のようにプロパティマネージャに表示されていれば新規作成は成功です．
プロパティシートにOpenCVの設定を書き込んでいく
続けて，先ほど作成した"OpenCV410d_x64"をダブルクリックして編集を始めていきます．下記の３つの箇所に，それぞれOpenCVのパスを追記してください．
新規の行はこちらから追加できます．
上記３か所を設定したら，x64のDebugモードにおけるOpenCV4.1のプロパティシートは完成です．
Rleaseモードのプロパティシート
続けて，x64のReleaseモードのプロパティシートも作っていきます．
手順は先ほどと同様です，まずは空のプロパティシートとしてOpenCV410_x64を追加します．そして，中身を編集しますが，Debugとの違いは，プロパティシートのファイル名に"d"を付けないことと，リンカの入力の依存ファイルが異なること，の２点です．
以上で完了です！
OpenCVの関数を"TestOpenCV"のプロジェクトでは，呼び出すことができるようになっています！
今後作っていくプロジェクトのために．．
上記の手順により，"TestOpenCV"からはOpenCVの関数を呼び出すことができます．
しかし，例えば"HelloWorld"など別のプロジェクトを作った場合はどうでしょうか？毎回上記を実施するのは面倒です．
そこで，さきほど作った"OpenCV410d_x64.props"と"OpenCV410_x64.props"を保存しておき，別プロジェクト立ち上げの時には読み込めるようにしておけばOKです．
プロパティシートの保存
さきほど作ったプロパティシートを，プロパティマネージャ上で右クリックし，"保存"を選択します．
保存されたけど，どこ？と思われますが，下記に保存されています
- 御自身の作業ディレクトリ> TestOpenCV> TestOpenCV> OpenCV410_x64.props/OpenCV410_x64d.props
これらのプロパティシートをコピーして，どこか上の階層（"マイドキュメント"とか）に置いておくと便利です．
プロパティシートの読み込み
新しいプロジェクトを作成したら，先ほどと同じようにまずはプロパティマネージャを開きます．そして，プロパティマネージャ＞Debug|x64もしくはRelease|x64を右クリックし，”既存のプロパティシートを追加”を選択して，先ほど保存しておいたOpenCV410d_x64.propsとOpenCV410_x64.propsとを，それぞれDebugとReleaseのほうに選択して追加します．
これで準備は完了です！
OpenCV 4.1 インストール
環境
- Windows 10 64bit
- このブログの別ページで，Visual Studio 2019を使っていきますが，このページで解説している内容自体にはVisual Studioは不要です．
手順概要
1. ダウンロード
ここから適切なバージョンのものをダウンロードする．
2019.6時点では，opencv-4.1.0-vc14_vc15.exeが最新だったので，これを使っていきます．
2. インストール
さきほどダウンロードしたopencv-4.1.0-vc14_vc15.exeを実行していきます．
まずはこれをダブルクリックして実行しますが，インストールといっても，このExeファイルは，OpenCVに必要なファイルを展開してくれるだけす．
最初の画面では展開するパスを設定します．
このパスは一回決めたらずっと変えないものなので，一時的なフォルダよりはC:\User\username\Downloadよりは，C:\User\usernameなどをお勧めします．
上記にて，展開するパスを決めたら"Extract"を押します．そのあと，指定したフォルダに下記のように必要なファイルが展開されます．
3. 環境変数 PATHの設定
Windows10になってから環境変数の設定の場所がわかりづらくなってたけど，検索欄を使うのが簡単でした．
WindowsのHOMEの左下の検索欄にて，”環境変数”と入れて検索します．
そして「システム環境変数の編集」を選択してください．
続いて，開かれた下記の画面にて”環境変数”を選択します．
システム環境変数の"Path"を編集していきます．下記のPathをダブルクリック，もしくはPathを選択してから編集を選択します．
下記のように，新たにOpenCVのパスを追記します．"新規"を選択すれば，新しい行を追加できます．何を追記するのか？ですが，これは使っている環境に寄りますが，ここでは64bitマシン，かつVisual Studioは2019を使っていくので，
- 先ほど展開したフォルダの下の，\opencv\build\x64\vc15
と，なります．私の場合は，C:\Users\cv_lover\opencv\build\x64\vc15となります．
これで，OpenCVの機能を呼び出すための準備は完了です！
とはいっても，Visual Studioを使う場合には，Visual Studio側の設定もしなくてはいけません．それはこちらのページで説明していきます．
Visual Studio 2019 + OpenCV 4.0 + Unity 環境構築
ここでの目的
Visual Studio 2019 + OpenCV 4.0 + Unityで，実装していく環境を作っていきます，めっちゃ初心者向けの解説です．高校生とか大学生の初学者向けです
それぞれ何者？
Visual Studio 2019
https://visualstudio.microsoft.com/ja/vs/
C++,C#,Pythonをこのブログでは扱っていきます．これらのソースコードを書くだけならメモ帳とかテキストエディタでもできるのですが，ソースコードをコンパイル（可読性のあるソースコードを，非可読な機械が理解できる状態に変換）したり，デバッグ（書いたソースコードがバグってないかを実行しながら確認する作業）する際に，統合開発環境は便利です
OpenCV 4.0
https://opencv.org/opencv-4-0/
画像処理のライブラリ（先人の知恵がつまった関数群）で，世界的に有名なオープンソースソフトウェア(Open Source Software; OSS)です.
Unity
ゲームをつくるための統合開発環境です．Visual Studio + OpenCVは画像処理屋さんにとっては必須なツールですが，ぜひUnityも併せて使ってもらいたいです．ゲーム開発のために作られましたが，結果を可視化するのにとても便利で，画像処理の世界をもっと面白くしてくれます
各種インストール
1. OpenCV4.1のインストール
2. Visual Studio 2019の設定
インストールについては，多くのサイトで紹介されているのでここでは扱いません．
ここでは，OpenCVを使えるようにするための設定方法について解説させてください．
