アキラ100%が安心しておぼんを外せるサービスをつくった

夏休みが終わってしまい悲しみを隠しきれないクロパンダです。

さて、アキラ100%さんを皆さんはご存知ですか？おぼんで恥部を隠して、見えるか見えないか絶妙な動かし方をして視聴者をハラハラさせる裸芸を披露する芸人さんです。

そんな彼はおぼんを落としたら恥部をさらしてしまうリスクをいつも抱えて芸をしています。こんな生活では心休まるときは訪れません。

そこで今回ユーザーが見ていない時、アキラ100%の画像からおぼんが外れるwebサービスを作ろうと決意しました(?)。

…まあ肖像権の問題から、実際に作ったのは「ユーザーが見ていない時に女の子が迫ってきて、ユーザーが見ている時は止まる」、つまりだるまさんが転んだになりました。

技術紹介

今回使うのは以下の技術です。

• インカメから画像を取得
• ChromeのFace Detection(顔認識)API

全体の流れ

1. インカメから画像を取得
2. 顔を認識する
3. 顔が検知された場合『ユーザーが見ている』と判断

ちなみに、今回は使いませんが顔認識APIでは「顔のサイズ・位置」「目や口の位置」といった詳細な情報を取得できます。

インカメから画像を得る

今回はめんどうだったのでjQueryを使ってサービスを作っていきます。

(async () => {
    const $video = $('#video')[0]; // video#videoという要素

    const stream = await navigator.mediaDevices
        .getUserMedia({ video: true })
        .catch(console.error); // インカメを起動
    $video.srcObject = stream; // インカメの画像をvideo要素にアタッチする
    await $video.play().catch(console.error);
    const screenshot = await new ImageCapture($video.srcObject.getVideoTracks()[0]).grabFrame(); // インカメのスクショを取得
})();

これでインカメから画像を取得できます。

顔を認識する

const faceDetector = new FaceDetector();

const detect = async img => await faceDetector.detect(img).catch(console.error); // 顔を認識して、結果を返す

// こんな感じで使います
const screenshot = await getScreenShot($video); // インカメのスクショを取得
const faces = await detect(screenshot); // スクショ内の顔を認識

取得部分自体はなんとたったの1行です！すごい時代ですよね…

FaceDetetorインスタンスのdetect()メソッドに渡せるのは以下のような要素です。

• ImageBitmap
• HTMLImageElement
• HTMLCavasElement
• HTMLVideoElement

実際のサンプル

これが実際のサンプルです。Akira 100%

動かすには以下の条件があります。

• Chrome最新版
• chrome://flags/#enable-experimental-web-platform-features を有効化する
• OSが顔認証をサポートしている

検証した範囲で、Chrome69.0.3497.100、Windows10にて動作確認しました。Ubuntuでは動きませんでした。

問題点

さて、このサービスですが、いくつか問題点があります。

まず、「若干のタイムラグが存在する」点です。これは「顔が認識されなくなってから200ms経ったら外す」という方法でなんとか回避しています。

次に片目を隠すだけでも顔認識されなくなることです。つまり「片目はバッチリみているのに、ユーザーは見ていない」という判定になってしまいます。ガバガバすぎますね。もちろんアキラ100％さんはわいせつ物陳列罪になってしまいます。

というわけで僕の技術力ではアキラ100%さんが安心しておぼんを外せる世界は実現できませんでした…

文字で背景画像を反転させるオシャレなやつやる

こんな感じのものを作ります。

「ビジネスロジック」のビジネスの意味とは？

tl;dr

「ビジネスマン」とか「ビジネスモデル」のビジネスと同じ意味です。

ただし、「ビジネスロジック」はビジネスのみではなく、「そのサービスのロジック」くらいに拡大解釈されていることがほとんどです。

英語wikiを見てみる

英語wikiのBusiness logicによると

In computer software, business logic or domain logic is the part of the program that encodes the real-world business rules that determine how data can be created, stored, and changed.

とあります。簡単に訳すと「ビジネスロジックは現実世界のビジネスルールを符号化したプログラムの一部」と言った感じです。

ビジネスルールとは？

ではビジネスロジックを規定する「ビジネスルール」とは何でしょうか？英wikiBusiness ruleによると

A business rule is a rule that defines or constrains some aspect of business and always resolves to either true or false. Business rules are intended to assert business structure or to control or influence the behavior of the business.

とあります。簡単に訳すと「ビジネスルールとはあるビジネスの側面を定義したり強いたりするもので、ビジネス構造を示したり、ビジネスの振る舞いをコントロールしたりするもの」です。だいぶ意訳ですが。

要するに、ビジネスロジックとはビジネスルールをプログラムにしたもので、ビジネスルールとはビジネスのルールです。そしてここでいうビジネスとは「ビジネスマン」のビジネスと同じです。

ほかにbusinessが入った語

ビジネスオブジェクト、ビジネスメソッドなどがあります。いずれのビジネスも同じです。

Emacsclientの基本的な使い方

Emacsclientに関してまとまった情報が見つからなかったので(というかEmacs全般に言えると思います)、自分で書きました。

LINE Payカードを入手したのでレポート

あまりプログラミングには関係ないですが、キャッシュレスに興味があったのでまとめてみました。

LINE Payカードとは？

LINE PayカードというのはJCBプリペイドカードの一種で、LINE Payの媒体となるカードです。

LINE Payにお金をチャージしておくとLINE Payカードでその金額が使えます。

実際にLINE Payでお会計してみる

近所のスーパーにて先程使ってみました。

1. 店員さんに「JCBカードは使えますか？」と尋ねる
2. JCBカードを提示する
3. ポイントカードを一緒に出す(例えばAEONならWAONカード)
4. 店員さんがカードを通す
5. お会計完了！

クレジットカードのようにサインや暗証番号を入力する必要もなくとても便利です。また、LINE Payカード自体にもポイントが付与されるので二重でポイントがついて大変オトクです。

LINE Payカードのメリット

LINE Payカードでの支払いにはいくつかメリットがあります。

1. ポイントがつく
2. お釣りを計算して小銭を出す必要がない
3. 硬貨に触れないので清潔
4. オートチャージなので使い勝手がいい
5. 楽

やはりキャッシュレスで支払いができるのがいいですよね。クレジットカードはどうしてもサインや暗証番号が必要になったりと面倒です。また、アプリの方で設定しておくとオートチャージされるようになるので、Suicaのようにチャージする手間もかかりません。

補足: LINE Payでもらえるポイントについて

LINE Payで支払いをすると、ランクに応じてポイントがつきます。たとえば「ホワイトカラー」というランクの場合は0.5%ポイントが付きます。ランクが上がるほどポイント率も高くなります。

ランクは「利用金額」と「何人以上に送金」という条件があります。詳しくは他ブログを参照ください。