以前、顔アイコンを自動生成するサンプルを紹介しました。 WEB APIを使わずに、顔認識する手段があるようなので紹介します。
手段1: JSライブラリを利用(ccv.js)
顔認識機能のJSライブラリがいくつかあるようです。 今回は、ccv.jsを利用します。
コード
「ccv.js」と「face.js」を読み込み後、下記「sample1.js」を読み込みます。 submit.successイベントの処理は過去記事を参照してください。
・sample1.js
(function() {"use strict";kintone.events.on(['app.record.create.show','app.record.edit.show'],function(){variconSize=150;document.addEventListener('change',function(event){if(event.target.type!=='file')return;
[].forEach.call(event.target.files,function(file){if(!file.type.match('image.\*'))return;varimg=newImage();img.src=URL.createObjectURL(file);img.addEventListener('load',function(){varfaces=ccv.detect\_objects({
canvas:ccv.grayscale(ccv.pre(img)),
cascade:cascade,
interval:5,//大きくすると、再現率が上がり処理時間が長くなる。min_neighbors:1//正確度に影響。小さすぎると再現率が下がる。大きすぎると適合率が下がる。});varreader=newFileReader();reader.addEventListener('load',function(){faces.forEach(function(face){varcanvas=document.createElement('canvas');canvas.classList.add('face-icon');varimg=newImage();varlongLength=Math.max(face.width,face.height)img.src=reader.result;canvas.width=iconSize;canvas.height=iconSize;img.addEventListener('load',function(){canvas.getContext('2d').drawImage(
img,face.x+(face.width-longLength)/2,face.y+(face.height-longLength)/2,
longLength,
longLength,0,0,
iconSize,
iconSize
);kintone.app.record.getSpaceElement('icons-space').appendChild(canvas);
});
});
});reader.readAsDataURL(file);
});
});
},true);
});kintone.events.on(['app.record.create.submit.success','app.record.edit.submit.success',
],function(event){//過去記事参照});
})();
所感
マルチブラウザで、WEB APIの設定をせずに使える手軽さはGoodです。 WEB APIと比べると、正確度や処理速度はやや低めです。 ccvで利用している深層学習手法についてはこちらで説明されています。
手段2: ChromeのShape Detection APIを利用
Google Chromeの機能のShape Detection APIでも顔認証が可能です。
コード
利用にはChromeの設定変更が必要です。 ChromeでURL「chrome://flags/#enable-experimental-web-platform-features」を開きます。 開いたページの「Experimental Web Platform features」を「Enabled」に変更します。 変更後、Chromeを再起動します。
Chromeの設定変更後、kintoneアプリで下記「sample2.js」を読み込みます。 submit.successイベントの処理は過去記事を参照してください。
・sample2.js
(function() {"use strict";kintone.events.on(['app.record.create.show','app.record.edit.show'],function(){variconSize=150;varfaceDetector=newFaceDetector();document.addEventListener('change',function(event){if(event.target.type!=='file')return;
[].forEach.call(event.target.files,function(file){if(!file.type.match('image.\*'))return;createImageBitmap(file).then(function(img) {faceDetector.detect(img).then(function(faces) {varreader=newFileReader();reader.addEventListener('load',function(){faces.forEach(function(face){varcanvas=document.createElement('canvas');canvas.classList.add('face-icon');varimg=newImage();varlongLength=Math.max(face.boundingBox.width,face.boundingBox.height)img.src=reader.result;canvas.width=iconSize;canvas.height=iconSize;img.addEventListener('load',function(){canvas.getContext('2d').drawImage(
img,face.boundingBox.left+(face.boundingBox.width-longLength)/2,face.boundingBox.top+(face.boundingBox.height-longLength)/2,
longLength,
longLength,0,0,
iconSize,
iconSize
);kintone.app.record.getSpaceElement('icons-space').appendChild(canvas);
});
});
});reader.readAsDataURL(file);
});
});
});
},true);
});kintone.events.on(['app.record.create.submit.success','app.record.edit.submit.success',
],function(event){//過去記事参照});
})();
所感
正確度と処理速度はWEB APIに劣らず良好です。 ただし、画像が小さすぎる場合は上手く認識できないようです。 Chromeでしか使えないのがネックですね。 余談ですが、Shape Detection APIではバーコードの読み取りも可能です。
あとがき
WEB APIを使わなくても、AIチックな機能を実装できるサービスは様々あるようです。 調べてみると、kintoneアプリ開発の幅が広がるかもしれません。 機械学習はほぼ無知なので、間違えがあればご指摘お願いします。