涼宮ハルヒに俺はなる！～自分だけのSOS団をつくる～ #JavaScript

涼宮ハルヒに俺はなる

やりたいこととしては以下です！

お分かりいただけたでしょうか？

私は涼宮ハルヒになります！

そして、こちらが私をハルヒにしてくれるサービスです！

はい！
ちゃんと説明します。

やりたいこと

なぜつくりたいのか？

皆さん「涼宮ハルヒの憂鬱」というライトノベルはご存じでしょうか？

ざっくりどんな物語かというと、以下概要です。

高校に入学して同じクラスになってしまった破天荒なハルヒに、ごく一般的な人間のキョンが振り回されるというストーリー。
ハルヒは「宇宙人や未来人や超能力者を探し出して一緒に遊ぶこと」を目的とした非公式の部活 「SOS団」 を作り出し、その部活を元に様々な物語を紡いでいく。

皆さん、これを見てどう思いますか？
宇宙人や未来人や超能力者と出会いたくないですか？
というか出会いたくない人なんていないと思うのです。
おそらく、SOS団の結成は全人類の悲願ではないかと、私は確信しています。

だから、ここにSOS団をつくることを宣言します！

学生時代に夢みていたことを、今実現するときがきました！

そして、宇宙人や未来人や超能力者と楽しい日々を過ごしたい！！

「ないんだったら自分で作ればいいのよ！」 by涼宮ハルヒ

SOS団をつくるのに必要なこと

ではSOS団にはどんな団員が必要なのか？
物語では以下の属性を持った人物たちが集まっています。

宇宙人
未来人
超能力者
ジョン・スミス

つまり、このSOS団をつくるためには、周りの人間から宇宙人、未来人、超能力者、ジョン・スミスを探し出す必要があります。そして彼らを団員にすることで、SOS団を結成できます。

今回は機械学習を用いて、彼らを探し出してやりたいと思います！
いや、もう無理やり宇宙人、未来人、超能力者またはジョン・スミスになっていただきます！

作り方

機械学習の使用

今回は機械学習を簡単に利用できるものとして、Teachable Machineを使いました。
Tearchable Marcineは、簡単に自分で独自のモデルを作成することができます。

これで、画像から相手が宇宙人か、未来人か超能力者か見分けるモデルを作成します。

Teachable Machineの使い方：こちらのサイト

今回学習させるデータは、ピクシブ百科事典などを用いて、宇宙人、未来人、超能力者を調べた結果出てきたアニメのキャラを学習させることにしました。
画像はGoogle画像検索にて取得しています。

以下が、学習させたキャラクターになります。

宇宙人
- 長門有希、ラムちゃん、神楽、ケロロ軍曹、ドロロ兵長、ギロロ伍長、タママ二等兵、クルル曹長、バカ王子、ニャル子さん、ハタ皇子
未来人
- 朝比奈みくる、岡部倫太郎、アーチャー、ドラえもん、ドラミちゃん、阿万音鈴羽、未来トランクス、せわし、
超能力者
- 古泉一樹、アーニャ、影山茂夫、花沢輝気、鈴木将、ナナ、地獄のフブキ、中島ナナオ、柊ナナ、明神タケル
ジョン・スミス
- ジョン・スミス、キョン

CodePenの利用

CodePenはブラウザ上でHTML,CSS,JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスです。
機械学習にて作成したモデルをCodePenを用いて、ブラウザ上で利用できるようにしました。

CodePen：こちらのサイト

さあ、SOS団ならぬSOU団の結成だ！！

SOS団：世界を大いに盛り上げる為の涼宮ハルヒの団
SOU団：世界を大いに盛り上げる為の梅本良太の団

さあ、判定できるかな？

どうやら、僕は通常は未来人で、フードを被ると超能力者みたいですね！
こんな潜在能力があろうとは、、、

どうやら、判定はできるようになっていそう！

ただ、ほとんど未来人と超能力者になりました！
おそらく宇宙人はケロロ軍曹系を学習させたせいで、人だとなかなか難しい、、、
ジョン・スミスも、学習データが偏りすぎているので、出そうと思うと工夫が必要でした。

でも、動いたので、良しとします！

涼宮ハルヒに俺はなる！

こちらが涼宮ハルヒになれるサービスです！

See the Pen 涼宮ハルヒに俺はなる by UmeTanTan (@UmeTanTan) on CodePen.

動かしてみた動画です！

使い方の順序としては以下になります。

開始ボタンを押して、カメラにて対象物を映してください
「お待ちください」が切り替わるまでお待ちください
画面に映る対象物が「宇宙人、未来人、超能力者、ジョン・スミス」のいずれかとなり、その対象物をSOS団の団員にしたければ「団員ゲット」ボタンを押してください
団員が並べられるので、その団員でSOS団を結成する場合は、「SOS団結成」ボタンを押してください
下に団員の集合写真が出てくるので、その画像を見ながら、ハレ晴れユカイをお聞きください

私のSOS団(SOU団)はこちらです

SOU団を結成しました！
結果的に、全て私一人で結成することになってしまいましたが、、、(笑)

工夫したところ

今回工夫したところとしては、どうしても最後に「ハレ晴れユカイ」を流しながら、自分のSOS団とリンクさせたかったので、「ハレ晴れユカイ」の最後のポーズにSOS団団員の写真を重ねることに心血を注ぎました！
そしてただ重ねるだけでは、味気ないので、画像を丸に切り抜いて対応する相手の顔の位置になるようにしました！

やり方は以下にてご覧ください。

*****切り抜き処理のソースコードはこちらから*****

切り抜き処理

function yukai() {
    let canvas1 = document.getElementById("yukai");
    let context1 = canvas1.getContext("2d");


    let image = new Image();
    // ハレ晴れユカイ画像
    image.src = "https://gyazo.com/2ec2d38d100a9693abef2c9f2121ee83.jpg";
    image.addEventListener('load', function () {
        // 画像を重ねるときは、背面となる画像から描画していく。今回の場合は「ハレ晴れユカイ」の画像が一番背面となるので最初に描画する。
        // ハレ晴れユカイの画像
        context1.drawImage(image, 0, 0, canvas1.width, canvas1.height);
        // 〇に切り抜くための処理
        // X、Y座標と中心からの半径を設定し、そこに重なった部分だけ描画するようにする。
        // 切り抜く場所の設定は、切り抜く画像が描画されるまえに設定しておく必要がある。
        // 座標位置を初期化
        context1.beginPath();
        // 切り抜き位置を設定
        context1.arc(170 + utyuuzin.width * 0.6 / 2, 220 + utyuuzin.height * 0.6 / 2, 40, 0, 2 * Math.PI, true);
        context1.arc(320 + miraizin.width * 0.6 / 2, 220 + miraizin.height * 0.6 / 2, 40, 0, 2 * Math.PI, true);
        context1.arc(380 + tyounouryokusha.width * 0.6 / 2, 140 + tyounouryokusha.height * 0.6 / 2, 40, 0, 2 * Math.PI, true);
        context1.arc(100 + jon.width * 0.6 / 2, 140 + jon.height * 0.6 / 2, 40, 0, 2 * Math.PI, true);
        // 切り抜き処理
        context1.clip();
        // 宇宙人を描画
        context1
            .drawImage(utyuuzin, 170, 220, utyuuzin.width * 0.6, utyuuzin.height * 0.6);
        // 未来人を秒が
        context1
            .drawImage(miraizin, 320, 220, miraizin.width * 0.6, miraizin.height * 0.6);
        // 超能力者を描画
        context1
            .drawImage(tyounouryokusha, 380, 140, tyounouryokusha.width * 0.6, tyounouryokusha.height * 0.6);
        // ジョンスミスを描画
        context1
            .drawImage(jon, 100, 140, jon.width * 0.6, jon.height * 0.6);
    }, false);
    // myPlayVideo()

}

同僚にもSOS団をつくってもらった

会社の同僚にも、使ってもらいました！
反応としては中々によくて、割と楽しんで使ってもらえました！
自分の作ったものを楽しんで使ってもらえると、嬉しいものですね

使ってもらって少し驚いたのが、中々出てこないジョンスミスが出てきたことです！
こちら、なかなか工夫を凝らさないと出てこなかったのですが、同僚が見事にジョン・スミスとなることができました！
しかもこの同僚、なんと女性です！(笑)

もしかすると、髪の毛の具合が良い感じに当てはまったのかもしれません。

そして同僚から意見をいただきました。

宇宙人とジョン・スミスを見つけたくなった
無理やり感がすごいけど、おもしろい
もう少し、良い感じに画像の切り抜きできないですか？
普通におもしろかった
使い方がよくわからない

割と、好評でした
ただ、画像の切り抜きはごめんなさい。ここは結構難しくて、苦戦しました。
たまに上手くいかない時があるので、改善が必要ですね。

操作性に関しても反省ですね。
自分の技術のなさもありますが、デザイン的にも、ただボタンなどは配置しただけなので、説明文を載せるなどしてもよかったかもしれません。
説明してから使ってもらうと、楽しく操作できるんですが、何も言わないと「これ、どうしたら良いの？」となってました。
このあたり、今後の課題だなと思います。

今後の改善点

スマホで使えるようにした(現在使えるが、スマホの縦画面だと画像の比率がおかしくなります)
画像のアップロードにも対応したい
複数人撮影にも対応したい
完成後のSOS団をどこかにアップロードする機能もほしい
画像認識のレベルを上げる

改良できたら、また記事アップしたいと思います！
最後までお読みいただきありがとうございました！

余談

今回は認識した画像を「宇宙人、未来人、超能力者、ジョン・スミス」のどれかに振り分けていますが、やはりハルヒのあの言葉を聞きたくて、「ただの人間」も判定できるようにしました。
「人間みな友達」ボタンを押すことで、そのモードとなります。