東京のWeb制作会社LIGLIGならできるおもしろいこと。茶畑に囲まれて育ち、大学4年間は雪に囲まれてました。初心者エンジニアとして日々精進します......!突然ですが、近年ウェアラブルやIoTなどが盛んになってきました。ZERO」をご存知ですか?動画を見ていただけるとわかるとおり、右の人差し指に装着して使う、指輪型のウェアラブルデバイス。スマートフォンアプリを使って、さまざまなジェスチャーアクションを設定できます。OFFやSNSの投稿などができるように!今回は、家で持て余していたこのアイテムを、webと連携させてみたいと思います。ZEROができることは下記のとおり。ZEROの簡単なデモとして、OpenURIで新しいアクションをつくります。ダウンロードが完了したらサインインをおこなってくだいさい。アプリのダウンロードはこちらから。Play<<OpenURIアクションの追加ローカルサーバーのwebページに文字を出すアクションを追加していきたいと思います。アプリを開いたら、プラスのアイコンをタップします。新しいアクション追加の一番下にあるOpenURIを選択します。Actionというところをタップすると、ホームに新しくアクションを追加できます。先ほど追加した項目を選択すると、このような設定画面に切り替わります。ここで好きなジェスチャーを描くことができます。ここで注意点なのですが、ジェスチャーを描くときは必ず一筆書きで描いてください!URIの項目に、設定したジェスチャーが認識されたときのURIを指定します。今回URIには、“http://(PCのIPアドレス):3000/test”と指定します。ZEROの準備が整いました。続いて、webとの連携部分を用意します。以下の3つを使って、実装します。socket.ioを使うために、ターミナルで下記のコマンドを入力してください。socket.ioどちらも任意のディレクトリでおこなってください。Expressでサーバーの待ち受けrequire関数を使いexpressモジュールを読み込みます。require('http');サーバーを立てるため、httpも読み込んでおきます。node.jsのサーバーとなる部分をcreateServerメソッドを呼び出して、http.Serverオブジェクトを作成します。listen関数を実行することで待ち受けをおこないます。stream.pipe(res);});app.jsに、index.htmlを読み込むコードを追加します。streamを使うことで、fs.readFileするよりもメモリを食わずにindex.htmlが読み込めます。app.jsの同ディレクトリ内に表示させるindex.htmlを用意します。Testここで以下のコマンドを入力します。appブラウザでlocalhost:3000にアクセスするとindex.htmlの内容が表示されるはずです。これでサーバー側からクライアント側への処理は実装できました。以下のコードを追加して、ターミナルに表示させます。ZEROに設定したOpenURIの/testの部分を指定します。ZEROで設定したジェスチャーアクションをしてみてください。ZEROとブラウザをつなげるジェスチャーアクションからブラウザに表示させるところを実装します。取得したジェスチャーアクションをブラウザに表示させるために、socket.ioを使います。app.js(サーバー側)に接続時のイベントを追加し、socket.ioのモジュールも読み込んでおきましょう。io.socketsオブジェクトにconnectionイベントが発生します。(connectionイベントが動作しているかconsole.logで表示させておきます。world!!!の文字を渡しています。}}渡された文字を、hoge.emitメソッドでクライアントに送信させます。index.html(クライアント側)に接続時のイベントを追加し、クライアント用のsocket.ioライブラリも読み込みます。});</script></body></html>以下のコードは、サーバー側とのコネクションをつくっています。io.connect();io.connectメソッドは引数にURLを取れ、サーバー側のURLを指定することができます。デフォルトでは、HTTPサーバーと同じURLが指定されます。サーバー側からのhoge.emitで送られてきたイベントを関数として登録します。crimson;"></h1>内に文字を渡します。ZERO」は他にも色々な可能性を秘めたデバイスだと思います!これからもさまざまな魔法のようなアクションが追加されていき、今よりもっと面白いことができるようになると思います。ZEROを試してみてください。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。