Webサイトを手描きのサインで制御できるJavaScriptライブラリ「Recosigns」を使ってみた！

【 Recosigns】

■「Recosigns」の使い方

それでは、「Recosigns」をどのように使えばいいのか詳しく見ていきましょう！

まずは公式に提供されているサンプルデモを実際に試しながら、どんな感じの挙動になるのかをチェックしてみます。

スマホのブラウザで以下の公式サイトを表示して、「demo」のリンクをタップしてください。

＜「Recosigns」公式サイト＞
https://gaidadei.ru/recosigns/

（※タッチディスプレイ搭載のPCブラウザでも構いません）

サンプルデモが表示されると「3種類のサイン」が表示されているので、いずれか1つを画面上に指でなぞりながら描いてみましょう。


サインを描くのは画面内のどこでも構いません。

注意点としては「赤い点」から「青い点」に向かって指でなぞるようにしましょう。逆方向になぞっても反応しません。

正常にサインが描けたら番号が画面に表示されるはずです。例えば、1番のサインであれば画面上に「sign is 1」と表示されます。

実際の様子を以下のGIFでも確認してみてください。（1番のサインを描いてます）


このように任意のWebサイト上で、自分が決めたサインを指で描くと指定したアクションを実行できるのが「Recosigns」の特徴となります。

例えば、特定のサインを手描きすると専用のページに遷移したり、Webゲームのコントロールに使ってみたり、隠しコマンド的な使い方でオプションを実行するなど、アイデア次第でユニークな使い方ができるようになるわけです。

■JavaScriptで「Recosigns」を実装する

今度は「Recosigns」が提供するJavaScriptライブラリを利用して、サインを描く機能をプログラミングしていきましょう。既存のWebサイトへ簡単に組み込めるように設計されているので、非常にシンプルなコードで実現できるのが魅力です。

まずはHTMLに「script」タグで以下の専用ライブラリを読み込みます。

<scriptsrc="https://gaidadei.ru/recosigns/recosigns.js"></script>

「Recosigns」のGitHubリポジトリから、ライブラリをダウンロードして使うこともできるので好きな方法を選択してみましょう。

＜参考リンク＞
・「Recosigns」のGitHubリポジトリ

次にどんなサインを描くのかを決める必要があります。これは画像ファイルを用意するのですが、今回は公式サイトで公開されている画像を使ってみましょう。

サイトにアクセスして「Templates」のところに表示されている画像を右クリックでダウンロードします。

（※独自の画像を作成する方法は後述します）

今回は、それぞれPNG形式で以下のように保存しました。

そして、画像ファイルのパスを以下のように配列へ格納しておきましょう。

const images = ["img/sign1.png",
    "img/sign2.png",
    "img/sign3.png"];

これで前準備は完了です！

あとはRecognizeオブジェクトを作成するだけで、すぐにでもサインを描く機能を実装することができます。

基本的な構文としては次のようになります。

new Recognize(【➀画像パス】, 【②DOM】, 【③アクション】); 

＜概要＞
・【➀画像パス】画像ファイルのパスを格納した配列

・【②DOM】サインを描く場所

・【③アクション】サインが成功したら実行する関数

②のDOMはサインを描く場所を指定できるのですが、画面内のどこでも描けるようにしたい場合はwindowを設定しておきましょう。

上記の内容を踏まえて、サインを描いたらアラートが表示されるようにプログラムを組み立てると次のようになります。

new Recognize(images, window, index => {alert(`サインは${index}番目です`);


});

【③アクション】の部分は、認識したサインの配列インデックス（index）も返してくれます。

それでは、ブラウザで確認してみましょう！

Webサイトを表示して決められたサインを描くとアラートが表示されます。

また、サインによって処理を振り分けたい場合はswitch文などを使うといいでしょう。

new Recognize(images, window, index => {switch(index) {case 0:
            // sign1の処理break;
        case 1:
            // sign2の処理break;
        case 2:
            // sign3の処理}});

このように簡単なコードを使って、Webサイトに手描きのサインを認識できる機能を搭載できるわけです。

サンプルのソースコードは以下のリンクからすべて閲覧できますので、ぜひ参考にしてみてください。

＜参考リンク＞
・「Recosigns基本サンプル」GitHub

■独自のサインを作成してみよう！

「Recosigns」は自分で決めた独自のサインを認識することも可能なので、その画像ファイルを作成する方法について見ていきましょう。画像はとてもシンプルなので標準搭載されているペイント系アプリや、スマホのお絵描きアプリなどを使ってもOKです。

ただし、サインを認識しやすくするために、背景は白色で500×500ピクセルの画像(PNG)にしておくなど最低限のルールはあります。

そこで、画像ファイルの基本的な仕様を以下のようにまとめておきました。

赤と青のマークは必須で、どのような軌道を描くかを黒の線で示すようにしましょう。ちなみに1つの画像には1つのサインだけしか設定できません。

上記の内容さえ守っておけば、さまざまなパターンを独自に作成することができるでしょう。

■まとめ

今回は、Webサイトを手描きのサインで制御できるJavaScriptライブラリをご紹介しました。

Webサイトの制御だけでなく、Webゲームの操作に活用するなどアイデア次第でさまざまな使い方ができると思います。公式サイトには他にも便利なAPIの使い方が掲載されているので参考にしてみてください。

ぜひみなさんもオリジナルのサインを作成して遊んでみてください！

＜参考リンク＞
・「Recosigns」GitHubリポジトリ

「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら