Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

Vueでコンポーネントを作る時の知見

Rollup Vue.js コンポーネント

Vueでコンポーネントを作る時、意外といろいろな方法があります。そのため、毎回調べてしまうので記事にまとめてみました。

全体の流れ

  1. component.vueを書く
  2. app.jsでcomponent.vueを読み込む
  3. rollupでapp.jsを変換(dist/main.jsとする)
  4. vue.jsとdist/main.jsを読み込む
続きを読む

asyncキーワードはなぜ生まれたのか？

JavaScript ES2017

みなさんasync/await使っていますか？とても便利な機能ですよね。しかし、ふとこんな疑問をいだきませんか？「これ、なんでわざわざasync関数を導入したんだろう」と。

そうです。awaitさえ実装していれば、機能的に既存の関数で十分に対応ができたはずなのです。一体どうしてasync関数が導入されたのでしょうか？今回はそこを考えてみました。

続きを読む

プログラマが資本主義についてかじってみた話

(まだ大学生なので職業プログラマではありませんが)

最近というか万年金欠で食費1万円チャレンジを毎月課せられているクロパンダです(親にバレたら怒られそう)。金欠すぎて「投資」で稼げないかと思い、資本主義についてかじってみました。そうしたら「プログラマは今後こうすれば儲かるのでは？」というある種の結論を得たので書きます(経済学部でもない一学生の記事ということに御留意ください)。

資本主義については、かなりアバウトな解説となっている上、間違いを多分に含んでいると思われますので、話半分にお読みください。

資本主義とは？

「資本主義」と「社会主義」について漠然と言葉だけ知っている人は多いと思います。「資本主義は市場があってお金がすべて」「社会主義は全員が働いて一定の生活が保証される」こういうイメージだと思います。

しかし、資本主義は「資本」主義であり、「お金」主義ではありません。つまり、「お金」と「資本」はやや異なる概念なのです。そのため、「資本主義はお金が全て」は半分正解半分不正解なのです。

「資本」とは？

資本というのは、「商品」「工場」などのことです。ここでいう商品とはお金で交換可能なものです。会社は「工場」や「土地」という形で様々な資本を持っていることがほとんどです。

資本主義では、「素材」という資本を得て、「労働力」で加工し、「商品」という資本に変えて売り出します。つまり資本に価値を付与して売り、お金を得る。これが市場です。

資本主義では「資本」を持っているとお金が増える

資本主義では「会社」「土地」「株券」など様々な資本が存在します。これらの資本はお金を生み出します。資本が生んだお金でさらに資本を買うと、加速度的に資本が増えていきます。

情報資本主義

では、プログラマは資本主義社会のなかで、どのような立ち位置なのでしょうか？彼らは「無」から「ソフト」「アプリ」を作ります。つまり、元となる資本がないまま資本を生み出します。しかも、これらの資本には「お金と交換可能か」「どれくらいの価値があるのかわからない」といった問題があります。資本主義社会において「無」から資本を生み出すことは極めて不自然きわまりないことなのです。

では彼らはどうしているかといえば、月額やアプリ内課金、広告収益を得て生活をしています。これらも(間接的には資本から生み出される収益ではありますが)資本主義においては違和感のある存在です。

そんななか、「資本的価値のある」情報が現れました。「ビッグデータ」です。ビッグデータは「資本」でありえます。ビッグデータを解析し、その結果には「資本的価値」がある可能性がふんだんにあります。

つまり、「情報資本主義」とはビッグデータという情報資本によって動く仕組みのことです。

ビッグデータという資本

ビッグデータという資本は、加工してもなくならないという特徴があります。つまり、一度ビッグデータを収集する基盤を整えてしまえば、無限に価値ある資本を生み出すことが可能です。Google、Facebook、Twitter、どれも今後は莫大な収益を上げ、世を牛耳る存在となるでしょう(すでになりつつありますが)

そして、プログラマもビッグデータから資本を生み出す職業となれば、とんでもなく儲かる可能性をはらんでいます。

終わりに

資本主義の部分について、割とガバガバ解説をしてしまったので、資本主義について知りたい人は本を読むなどしてください。僕が言いたかったのは「今後のプログラマはビッグデータから資本をガンガン生み出すことで生計を立てるんじゃないか」ということでした。

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

JavaScript Google Chrome

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

f:id:panda_noir:20180930221255p:plain

さて、アキラ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%さんが安心しておぼんを外せる世界は実現できませんでした…

プロフィール

お問い合わせは @le_panda_noir まで

SNS