MESH SDKをいじった話

先日、出場したハッカソンで、MESHのSDKをいじる機会があったので書いときます。

今回やったこ

今回はMESHの動きセンサータグを使い、動作を検知したら特定のURLを叩くということをしました。

MESHとは?

センサーやボタンが着いた消しゴムサイズのMESHタグと、MESHタグをビジュアルプログラミンで他のタグに繋げることができるMESHアプリを使い、簡単にIoTサービスを作ることができるデバイスです。

meshprj.com

↑公式サイトを見るのが一番わかりやすいです。

MESH SDKとは?

MESHでは、アプリ上でセンサータグ(動きや人感など)やモバイルのタグ(カメラやマイクなど)、連携タグ(IFTTTやHue)を繋げてサービスを開発することができますが、これら以外にもソフトウェアタグといって、JavaScriptのコードを実行することができるタグがあります。そのソフトウェアタグを開発することができるのが、MESH SDKです。

meshprj.com ↑公式ドキュメントです。

まずはアカウント作る。

meshprj.com

ここでアカウントを作成してください。

f:id:tetrapod117:20171014220129j:plain

新しいタグを作る

作成したアカウントでログインすると、タグを作るページになります。

f:id:tetrapod117:20171014221742j:plain

「Create New Tag」でタグを作ることができます。 f:id:tetrapod117:20171014225929j:plain

名前や説明、入力の設定ができます。

f:id:tetrapod117:20171014225608j:plain

こんな感じでテストとして適当に書きます。

コーディング

f:id:tetrapod117:20171015163726j:plain

直接コードを書くのは、codeの項目の4つの箇所になります。

公式のドキュメントでは、それぞれ以下の際に実行されると記載されています。

メソッド 概要
Initialize Functionの初期化時に呼ばれます。内部変数の確保やスケジューラーの設定といった、初期化処理が必要な場合に実装します。
Receive 入力コネクタからメッセージを受け取った際に呼ばれます。入力コネクタが複数あり、どれから受け取ったか区別したい場合に実装します。
Execute Function実行時に呼ばれます。通常、手続きはこのメソッドに記述します。
Result Executeメソッドが完了し、出力コネクタから次のタグにメッセージを送信する際に呼ばれます。出力コネクタが複数あり、どのコネクタからメッセージを出力するかを選びたい場合に実装します。デフォルトでは全ての出力コネクタから出力されます。

今回のように入力が1つで他のタグなどに出力をしない場合は基本的にExcuteにコードを書けば大丈夫です。 特定のURLを叩くというのはこんな感じで書けます。なお、Ajaxを使うのですが、MESH内では、素のJavaScriptの中でAjaxを使います。

var apiURL = "http://example.com"; //叩きたいURL

ajax ({
    url : apiURL,
    type : "get", 
    timeout : 5000,
    success : function ( contents ) {
    log("success");  //成功した場合はアプリ内のlogへ「success」の文字列を出力 
    },
    error : function ( request, errorMessage ) {
        log("error");
        runtimeValues.outputIndex = -1;
        callbackSuccess( {
            resultType : "pause",
            runtimeValues : runtimeValues
        } );
    }
});

//次のメソッドを呼ぶかどうかの処理。
return { 
    resultType : "pause"
};

最後のreturnの部分はMESH SDK固有のもので、ExecuteからResultメソッドを呼ぶかどうかを書けます。 今回はpauseで呼んでいませんが、呼ぶ場合は、continueで呼べます。詳しくは公式を https://meshprj.com/sdk/doc/ja/#sdkdoc_section_3-2

なお、今回は入力が1つだけでしたが、入力が複数ある場合は、Receiveの中に

if ( index == 0 ) {     //1番目のコネクタから入力がきた場合の処理
    log( "入力1" );      //アプリ内のlogへの出力 
}
if ( index == 1 ) {     //2番目のコネクタから入力がきた場合の処理
    log( "入力2" );
}

このような感じで、if文で分岐処理をすることが可能です。

MESHアプリに入れる

コードを書いたら、saveボタンを押して保存しましょう。 f:id:tetrapod117:20171015174925j:plain

保存をしたら、次はMESHアプリを使います。

MESHアプリ内で、最初に作成したアカウントでログインをして、新しいレシピを作ります。 そして、下のメニューからカスタムの追加を選択します。

f:id:tetrapod117:20171015175638j:plain

そして、先ほど作成したtest_tagを選択。

f:id:tetrapod117:20171015181112j:plain

すると、test_tagが追加されるのでこれを画面上に置いて、他のタグと繋げてみましょう。

f:id:tetrapod117:20171015180955j:plain

こんな感じでログを見ると、successと出力されれば成功です。 f:id:tetrapod117:20171015180834j:plain

あとがき

もともとは、MESHのBluetooth通信を解析して、PCと直接通信できれば最高だったんですが、あまりに自分に知識がなかったですね...

MESHは非常に面白いプロダクトですが、使用するのにスマートフォンのアプリを起動しっぱなしにする必要があったり、まだまだ思うようにできないこともあるので、これからに期待したいですね。

今年中にラズパイにハブのアプリが出るらしいので楽しみです。 www.get.meshprj.com

実を言うと僕はまだMESH買ってないんですけどね...

欲しいけどお金が...

1つ6000円は高いかな...

PythonとOpenCVを用いた顔の類似度判定についての話

ハッカソンで使用したOpenCVを用いた顔の類似度判定について話をしようと思います。

環境

Python 3.5.2 OpenCV 3.1.0

やりかた

どうやって顔の類似度の判定を行うのかというと、特徴点のマッチングをします。簡単にいうと、判定したい2画像の特徴点を抽出し、それらの距離を比較します。

今回は、ジェフ・ベゾスの顔写真をターゲットとして、ビル・ゲイツスティーブ・ジョブズの顔写真と比べてみようと思います。

01.png f:id:tetrapod117:20170928163409p:plain

02.png

f:id:tetrapod117:20170928163426p:plain

target.png f:id:tetrapod117:20170928163448p:plain

コード

imagesというフォルダに比較したい顔写真とターゲットとなる写真を入れてください。

##!/usr/bin/env python
# -*- coding: UTF-8 -*-

import cv2
import os

TARGET_FILE = 'target.png'
IMG_DIR = os.path.abspath(os.path.dirname(__file__)) + '/images/'
IMG_SIZE = (200, 200)
target_img_path = IMG_DIR + TARGET_FILE
target_img = cv2.imread(target_img_path, cv2.IMREAD_GRAYSCALE)
target_img = cv2.resize(target_img, IMG_SIZE)

bf = cv2.BFMatcher(cv2.NORM_HAMMING)

# ORBとAKAZEは特徴点や特徴量を抽出するアルゴリズム
# コメントアウトを調節することによりどちらでも行える

# detector = cv2.ORB_create()
detector = cv2.AKAZE_create()

# ターゲットの写真の特徴点を取得する
(target_kp, target_des) = detector.detectAndCompute(target_img, None)

print('TARGET_FILE: %s' % (TARGET_FILE))

files = os.listdir(IMG_DIR)
for file in files:
if file == '.DS_Store' or file == TARGET_FILE:
continue

comparing_img_path = IMG_DIR + file
try:
comparing_img = cv2.imread(comparing_img_path, cv2.IMREAD_GRAYSCALE)
comparing_img = cv2.resize(comparing_img, IMG_SIZE)
# 比較する写真の特徴点を取得する
(comparing_kp, comparing_des) = detector.detectAndCompute(comparing_img, None)
# BFMatcherで総当たりマッチングを行う
matches = bf.match(target_des, comparing_des)
#特徴量の距離を出し、平均を取る
dist = [m.distance for m in matches]
ret = sum(dist) / len(dist)
except cv2.error:
# cv2がエラーを吐いた場合の処理
ret = 100000

print(file, ret)

実行結果

ジェフ・ベゾスの顔写真を用いて、ビル・ゲイツスティーブ・ジョブズの顔写真と比べた結果が以下になります。 01.pngビルゲイツで、02.pngスティーブ・ジョブズです。

 

TARGET_FILE: target.png
01.png 128.7171717171717
02.png 123.4949494949495

距離の平均が近い方が似ているということなので、今回は02.pngつまりジョブズの写真の方が若干類似度が高いという感じになりました。

あとがき

今回は拾い物の画像で検証したため、写真の顔の位置などが違い、あまり高い類似度は出せませんでしたが、これを顔の位置がほぼ同じ場所で撮影した場合にはかなり高い類似度が出ると思います。(R-Stack Hack Dayで使用した写真ではもっと高かったので...)

画像の類似度判定といえば、機械化学習で行うイメージですが、このように機械化学習を行わなくても、簡単な類似度チェックは行えるということは覚えておいて欲しいですね。

DashButton Hack! その2

tetlab117.hatenablog.com こちらの記事の続きです。

前回は、DashButtonを押したイベントを取得しましたが、その2では、IFTTTとの連携を行おうと思います。

IFTTTとは?

まぁ、今更説明する必要はなさそうですが。 簡単にいうと、異なるWebサービスなどを連携させることができるサービスです。 たとえば、Twitterで特定のつぶやきを自動的にEvernoteにアップロードしてくれるなどのことを、わざわざコーディングする必要がなく自動でやってくれる便利なサービスです。

今回やること

IFTTTではTwitterで特定の言葉をつぶやいたりするなど、Webサービスをトリガーにすることが多いですが、Webhookをトリガーにすることができます。 今回はDashButtonを押した際に、IFTTTにWebhookを送り、IFTTTがそれをトリガーにして、Googleスプレッドシートに出勤と退勤を書き込むサービスを作ります。

f:id:tetrapod117:20170923145245p:plain こんな感じ

IFTTTでアプレットを作成

ということで、まずはIFTTTのアプレットを作っていこうと思います。

[New Applet]のタブを選択肢するとこんな感じの画面になります。

f:id:tetrapod117:20170923150440p:plain

thisを押すとトリガーとなるサービスを選択する画面になります。 そこでWebhooksを選択 f:id:tetrapod117:20170923150644p:plain

Event Nameは適当に f:id:tetrapod117:20170923152133p:plain

お次はthatを選びます。 f:id:tetrapod117:20170923152357p:plain

Googleスプレッドシートはないので、GoogleDriveを選択します。 f:id:tetrapod117:20170923153325p:plain

GoogleDriveの項目に、スプレッドシートへの追加があります。 f:id:tetrapod117:20170923153457p:plain

次に、スプレッドシートの設定をします。 スプレッドシートの名前は適当にわかりやすいものを。 フォーマットは、わかりやすいように、投稿された時間と、Value1とVlaue2を入れます。

あとは、フォルダーのパスも適当に入れてください。 そのあと、Create Actionを押してください。 f:id:tetrapod117:20170923154413p:plain

Value1やValue2には、コードからWebhookを送る際に、JSON形式で好きな値を入れることができます。 今回はValue1には名前、Value2には出勤や退勤などの状態を入れることにします。

これが終われば、IFTTT上での作業はほぼ終わりです。 最後に、Webhooksのドキュメントの画面からAPIキーやリクエストのURLを取得しましょう。

f:id:tetrapod117:20170923160301p:plain

コーディング

ということで、IFTTTの設定も終わったので、コーディングしていきます。 前回、Node.jsでDashButtonのイベントを取得したので、今回もNodeで書いていきます。 まずは、IFTTTにWebhookを投げるコードです。

var request = require('request');

//IFTTTのWebhookの中身
var options = {
  uri: "https://maker.ifttt.com/trigger/{event_name}/with/key/{your_api_key}",
  headers: {
    "Content-type": "application/json",
  },
  json: {
    "value1": "名前",
    "value2": contents
  }
};

//IFTTのWebhookへpostする
request.post(options, function(error, response, body){});

まずは、Nodeのrequestモジュールを読み込み、Webhookの中身を書き、POSTしています。 uriの{event_name}には、IFTTTでWebhooksに設定した、Event_nameを入れてください。 {your_api_key}には、IFTTTのドキュメントに記載されているものを使用してください。

Value2には、変数「contents」の中に出勤か退勤の文字を入れるのですが、今回は、contents_switchという変数にtrueかfalseかのブール値を入れ、contents_switchがtrueの場合は「出勤」という文字を変数contentsにいれ、contents_switchをfalseに変える、contents_switchがfalseの場合は「退勤」という文字を変数contentsにいれ、contents_switchをtrueに変えるようにしましょう。

var contents  = "出勤";
var contents_switch = true;


  if(contents_switch === true){
    contents = "出勤" ;
    contents_switch = false; 
  }else if(contents_switch === false){
    contents = "退勤";
    contents_switch = true;
  };

これらのコードを前回のDashButtonのイベントを取得するコードに入れていくとこんな感じです。

const dash_button = require('node-dash-button');
var request = require('request');
// Dashボタンのアドレス
const dash = dash_button('××:××:××:××:××:××', null, null, 'all');

var contents  = "出勤";
var contents_switch = true;

// ボタンをクリックしたときのアクション
// クリックしてから数秒遅延します。
dash.on('detected', () => {

  if(contents_switch === true){
    contents = "出勤" ;
    contents_switch = false; 
  }else if(contents_switch === false){
    contents = "退勤";
    contents_switch = true;
  };

//IFTTTのWebhookの中身
var options = {
  uri: "https://maker.ifttt.com/trigger/{event_name}/with/key/{your_api_key}",
  headers: {
    "Content-type": "application/json",
  },
  json: {
    "value1": "名前",
    "value2": contents
  }
};

//IFTTのWebhookへpostする
request.post(options, function(error, response, body){});
});

これを

node app.js

ターミナル上で実行した状態で、DashButtonを押すと、 f:id:tetrapod117:20170923172726p:plain こんな感じで、IFTTT上で、設定したスプレッドシートに書き込めるはずです。

最後に

今回はIFTTTを用いて、スプレッドシートに書き込みを行いましたが、スプレッドシート以外にもボタンを押せばTwitterで呟いたりするなど、結構いろんなことができます。 もちろん、IFTTTを使わなくても、プッシュイベントを取れるなら、いろんなことができるので、ぜひやってみてください。

みんなもDashButtonを買って、Let`s Hack!!

DashButton Hack! その1

1ヶ月ほど前に、こちらのイベントでAmazonDashButtonを用いたIoT勤怠アプリについてLTをしてきたので、忘れないうちにブログに書いておこうと思います。

ちなみに、スライドはこちら↓

その1では、DashButtonのイベントを取得するところまで書いていこうと思います。

必要なもの

  • Dash Button

  • Node.jsが使えるPC

  • IFTTTのアカウント(その2で使います)

  • Wi-Fi環境

  • スマホ(Dash Butoonのセットアップに必要)

実行した環境

使用するモジュール

いくつかDashButtonのイベントを取れるライブラリがあるのですが、僕の環境で一発でうまくいった、「node-dash-button」を使用します。

github.com

モジュールのインストール

$ mkdir dash-button // 作業するディレクトリを作成
$ npm init
$ npm install node-dash-button --save

DashButtonのMACアドレスの取得

まずは、お手持ちのスマートフォンで、DashButtonのセットアップを行います。

f:id:tetrapod117:20170824201634p:plain

こんな感じのボタンを押した際に注文する商品を選択する画面になったら右上の×ボタンを押してください。 ここで選んでしまうとボタンを押すたびに商品を注文してしまいます。

セットアップが終わったら、モジュールのfindbuttonを実行します。

$ cd node_modules/node-dash-button
$ sudo node bin/findbutton

これを実行したら、DashButtonを押してください。 そしたら

f:id:tetrapod117:20170824203513j:plain

こんなかんじで、いろいろ文字がターミナル上に出てきます。 モザイクがかかった部分が、MACアドレスになります。

MACアドレスが取得できたら、次は、DashButtonのイベントを取得するプログラムを書きます。 今回は、簡単にボタンが押されれば、ログを出力するようにします。

こんな感じ

const dash_button = require('node-dash-button');
// DashボタンのMACアドレスを入力
const dash = dash_button('××:××:××:××:××:××', null, null, 'all');

// ボタンを押したときのアクション
dash.on('detected', () => {
    console.log("ボタン反応してるよー");
});

これを実行した状態で、DashButtonを押すと、「ボタン反応してるよー」と出力されます。

$ sudo node  test.js
ボタン反応してるよー

数秒ほどラグがあるので出力されるまで、気長に待ってください。

あとがき

ということで、今回はDashButtonのイベントを取得しました。 ボタンプッシュのイベントが取得できたら、後はなんでもできますね。 ということで、次回はIFTTTを用いて、DashButtonとGoogleスプレッドシートを連携させて、退勤システムを作ろうと思います。

Ubuntuをインストールしてからやったまとめ

せっかくブログを作ったのに、ほとんど更新していないので、久しぶりに書きます。

最近は、研究室のPCにUbuntuをインストールして使っていて、たまーに動作が安定しないくて、再インストールから環境構築で、何回も同じような環境構築をしてしまっているので、忘れないように書いておきます。 また、やることが増えたら書き足していくつもりです。

環境

OS: Ubuntu17.04 PC: ThinkPad L560

ディレクトリ名を日本語から英語へ変える

Ubuntuをインストールしたら、ダウンロードとかディスクトップとかのディレクトリ名がなぜか全部日本語になっているので、それだと端末で扱いにくいので英語に変更します。

$ LANG=C xdg-user-dirs-gtk-update

GoogleChromeのインストール

FireFoxも嫌いじゃないけど最近はもっぱらChromeが便利ですね。

公式ページで、debファイルをダウンロード https://www.google.co.jp/chrome/browser/desktop/index.html

libappindicator1というパッケージが必要なので、インストールします。

sudo apt-get install libappindicator1

その後、debファイルをダウンロードしたディレクトリに移動して、dpkgでインストールを行う。

sudo dpkg -i ダウンロードしたインストーラ名.deb

これでエラーが出なければ完了

Atomのインストール

開発用のエディターはAtomがお気に入りなんで、Atomをインストールします。

PPAを入れてリポジトリを追加

sudo add-apt-repository ppa:webupd8team/atom

sudo apt-get update

その後、apt-getでインストール

sudo apt-get install atom

エラーが出なければ完了

DropBoxのインストール

他のPCとのファイルの共有はDropBoxで初期の容量がもっと増えてくれたら完璧。

UbuntuのソフトウェアセンターにDropBoxがあるので、そこでインストールする。

Slackのインストール

研究室でのコミュニケーションツールはSlackです。 他のゼミ生はあまり使ってくれないことが悲しい。

公式ページでdebファイルをダウンロード https://slack.com/downloads/linux

ダウンロードしたファイルをダブルクリックして、ソフトウェアセンター内でインストールする。

Albertのインストール

ランチャーアプリはAlbertを使います。

「webupd8」のPPAリポジトリを追加してインストールします。

$ sudo add-apt-repository ppa:nilarimogard/webupd8
$ sudo apt-get update
$ sudo apt-get install albert

Clipitのインストール

クリップボードマネージャ。 ソフトウェアセンターにあるので、「Clipit」で検索してインストール。

あとがき

あらためてみると、ソフトウェアセンター便利だなぁーと思いますね。 後は、開発環境はあまり書いていないので、開発環境編も後日書きたいですね。

「LINE BOT AWARDS 公式ハッカソン@大阪」に出て来ました

なんだかんだ、全然更新できていないブログですが、これまたハッカソンに出たので、軽くレポート兼備忘録としてブログに書きます。

LINE BOT AWARDSとは?

LINEのchatbot開発促進およびユーザーへの普及を目的に開催するAwardのことです。 詳しくは以下に

botawards.line.me

これの何がすごいって、優勝賞金1000万円なところですね。 そして、部門賞もあって、各賞金50万円。 何と学生賞は100万円です。

これは、学生としては参加せねばならんのですよ。

とは言っても、LINE BOTってどうやって作るの? というところからのスタートなので、今回のハッカソンの目標は2つ

  • BOTの作り方を知ろう!

  • あわよくばなんかAWARDに出せるものを作ろう!

という感じです。

ということで出場しました

f:id:tetrapod117:20170207163722j:plain

場所は関西大学梅田キャンパス。 梅田のど真ん中にあるビルで、下にスタバがあってお洒落です。はい。

最初に、株式会社LINEの社員さんによる「LINE BOT AWARDS」の説明と、エンジニアの方から「LINE BOT」の説明があり、協賛企業のKDDIウェブコミュニケーションズさんの社員さんからTwilioの説明があったり、モーションコントロール株式会社の方からHenryの説明があったりしました。

twilio.kddi-web.com

www.runele.com

その後はアイディアソンです。

アイディアソン

アイディアソンでは、アイスブレイクで、「BOTのイメージを絵で描こう」みたいな事を言われ、僕はキカイダーのパチモンを書きました。

その後は、「LINE BOT AWARDS」の部門賞のライフスタイル部門、エンターティメント部門、ゲーム部門、IoT/Beacon部門 から、それぞれ思いつくアイディアをいくつか出して、その中から、作りたい1つのアイディアを決め、そのアイディアを持ってチームビルドに移ります。

ちなみに、チームビルドはナンパ式で、自分が作りたいものがある人は人を呼んで、ない人はある人についていくという感じです。

ハッカソン

僕は、院生2人と社会人の方1人の4人チームを作りました。 作ったものはこちら。

hacklog.jp

何がしたかったかというと、僕自身、全く大学の時間割とか教室とか覚えれないタイプの人間なので、そういうのを教えてくれるBOTを作ろうぜ→

でも、それだけじゃ面白くないから、可愛い女の子が教えてくれる感じにしようぜ→

それなら、LINEはリアルで良く使うコミュニケーションツールだから、彼女とLINEしてる感の出せるものにしようぜ→

でもまぁ、BOTって言われた言葉にすぐ反応するだけのことが多いから、返事催促したり、既読無視してくる人に近いBOTを作ろうぜ→

じゃあ、予定を教えてくれる彼女風BOTの機嫌をとる恋愛シミュレーションゲームにしようぜ

という感じです(長い)

f:id:tetrapod117:20170211002005j:plain

開発途中のメモ。 なかなか意味が不明ですね……

開発自体は、BOTの作り方????なにそれおいしいの???? の状態でしたので、LINEのエンジニアの方にめちゃくちゃ聞きました。 1からサーバー立てるのは面倒だろうから、ngrok使うといいよとか、リマインダーにはcronで定期実行とか、PHPはあんまりよくないだとか…… ngrok.com こういう話もまとめて、実験でオウム返しBOTを作る記事を時間があれば書きたいですね。

まぁ、LINEのエンジニアの方に実際に教えてもらいながら、LINEBTO作るなんて、絶対にできないですからね。 感謝の言葉しかないです。 ありがとうございました。

発表

Twitterにまとめられているので

僕のチームのはこれ

スネたり

予定教えてくれたりします。

結果

無論、賞は取れず。 まぁ、LINE BOT AWARDSの審査基準にお役立ち度って項目がある中、めんどくさいことを特徴とするBOTを作ればこうなります笑 僕のチーム以外は役に立ちそうなBOTを作ってました。

特に優秀作品賞を取った、「NEWS TATE YOMI」や「てるいいね!(TELine)」はすごかったです。2つとも社会人の方が中心のチームなんですが、学生とのアイディアの詰め方の差や技術力の差を感じ、ただひたすらすげーって思ってました。 もちろん、もう1つの優秀作品の「待ち合わせモブ」もすごかったです。

感想

とりあえず、LINE BOTは作れたので、目標の1つは達成です。 AWARDSに向けては、もっと機能を絞って、かわいい女の子のBOTが時間割とか教室をPushやReplyで教えてくれるBOTでも作ろうかなと思います。(かわいいは譲れない)

あとは、今回のハッカソンを通じ、PHP以外にもRubyとか触れるようにした方がいいなぁと感じたので勉強したいと思います。

特に、ハッカソンのような短期集中のイベントでは、新しい技術や、自分の知らない技術を短期間で詰め込まないといけないので、やっている間は大変ですが、学ぶことはかなり大きいと感じます。

僕も、今回のハッカソンで学んだことを忘れずいろいろ開発していきたいと思います。

NTTComの「WebRTCワークショップ」に行ってきた。

1月21日に、NTTコミュニケーションズさん1Dayインターン「WebRTCワークショップ」に参加してきました。 ワークショップと言っても、午前中に軽くNTTComさんの企業紹介とWebRTCの説明、ハンズオンがあって、午後からはハッカソンでWebRTC技術を使って簡単なプロダクトを作ったのでそれも少し紹介しようと思います。

参加した経緯

去年の11月くらいに行われたハッカソンで、NTTコミュニケーションズさんの提供する「SkyWay」を使ったサービスを開発し、NTTコミュニケーションズ賞をいただきました。 その時の賞品が今回参加した、1Dayインターン「TechWorkShop優先参加権」と「ドローン」でした。 しかし、ドローンはハッカソン当日に用意していなかったみたいで、最初は後日、郵送するみたいな話だったんですが、いろいろあって、人事の方に「インターン来たらその時渡すよ」となったので、ドローンを手に入れるため、そして、前よりもWebRTCとSkyWayについて深く知ろうと思い参加しました。

開催場所の田町にあるグランパークタワー。かなり大きい。NTTコミュニケーションズは東京に4箇所もオフィスがあるらしい... f:id:tetrapod117:20170122205759j:plain

ロゴ f:id:tetrapod117:20170122205743j:plain

NTTコミュニケーションズって長いので、以下NTTComで書きます。

WebRTCとSkyWayとは

Web Real Time Communication 「IPネットワーク(Web)上の時差がほとんどない通信/意思疎通」という意味です。

簡潔に言うと、Web上で電話やビデオ通話チャットなどのリアルタイムコミュニケーションを行えるサービスを実装できるAPIのことです。

特徴 1. 意思疎通(=ビデオ/⾳声通話)と通信(=P2Pデータ通信)の 2つの機能を備える。 2.iOS, Android, Webブラウザなど様々なプラットフォームで利用できる。 3.Webサイトやアプリの中で利⽤でき、SkypeやLINE等の他社アプリのインストールや起動が不要。

細かい話はこういうのを見た方が分かりやすいと思います。

www.slideshare.net

上のスライドでも書いていますが、このWebRTCという技術、ちゃんとやろうとするとめちゃくちゃ難しいみたいです。

jxck.hatenablog.com

そんな、難しいWebRTCの技術を、簡単に扱えるサービスがNTTComさんの提供する「SkyWay」です。 nttcom.github.io

開発したサービス

今回のWebRTCワークショップは「WebRTCの技術を使って、次世代のコミュニケーションアプリを作ろう」というテーマで、条件はWebRTC技術を使うことです。

SkyWayを使えと言われることはなかったですが......

いやまぁ、使わないわけにはいかないですよね......

ということで僕が開発したプロダクトの紹介です!

サービス名「Share Tube」

わかりにくいですが、スクリーンショットはこんな感じ

f:id:tetrapod117:20170122184744j:plain

何をやっているかというと、「SkyWay」のJavaScriptSDKとiOSSDKを用いて、WebとiOSアプリ間でP2P通信を行い、リアルタイムで動画ファイルを共有しています。 その下には、チャットスペースがあって、多少WebとiOS間で動画のラグなどがありますが、チャットを使いリアルタイムで感想を共有することもできます。

解決したい課題で言えば、友達との動画の共有の不便さ。

例えば、ネットで面白い動画を見つけた時、この動画を友達にも観せたいと思ったら

YouTubeなどの動画のURLをコピーLINEに貼って友達に送る、友達はLINEからYouTubeに飛んで動画を観る、LINEで感想を送る

という風に2つのサービス間を行き来しないといけなくて面倒ですよね。(別の方法もありますが...)

それを1つのサービスで実現でき、さらに「この場面のガッキーかわいいよね!」的な、リアルタイムで動画の感想を言い合える!!!!!

超画期的!!!!!

コードをある程度書き直したらGitHubにあげます...

結果

ハッカソンなので、もちろん優秀賞がありました。 学生参加者10人とNTTCom社員さん4名が良いと思ったプロダクトに投票していくシステムで、票の多かった上位2名がFitbitをもらえるのですが、今回は残念ながらFitbitはもらえなかったです。

というか、他の参加者が凄かったです。はい。完敗です。Fitbit取った方おめでとうございます。

でも、最後にSkyWayチームのリーダーの方に「WebRTCで動画を送るアイディアは面白い」って言ってもらえたので嬉しかったです。

今後の課題

今回のワークショップはハッカソン形式でしたが、チームではなく、個人の開発で開発時間は実質4時間ほどでかなり荒削りな感じになってしまいました。しかも、普段はSwiftでのアプリ開発をメインでやっているので、講義の時以外はJavaScriptはほとんど触ったことがないという状況なので、メンターの方に何度も聞きまくって開発しました。メンターの社員さんには感謝の言葉しかないです。

プロダクトの改善点がたくさんあります。ということで僕自身の備忘録的に書いていきます。

  • 動画ファイルを選べるようにする(選べないなんてなかなか致命的)というかYouTubeとかから持ってきたい

  • デザイン

  • チャットに送信された時の動画の時間を入れる

  • 動画止めた場合の処理が入っていない

  • Web版同士ではなぜかチャットができない

などなど とりあえず、時間があったら修正していきます。

感想

1Dayのインターンは、会社紹介で終わると思われて行く意味がないと思う人もいますが、実際の社員さんに技術の話を聞いたり、コードの書き方を聞けたりするので、僕は行ってよかったと思います。

同じエンジニアを目指す学生や、スーパーエンジニアの社員さんと交流することは楽しいというのもありますが、そこで得た知識や経験は一生残るモノだと思ます。

他の学生にも、こういうイベントに行くことは大事ということが伝わってほしいです。

NTTComさんのTechWorkShopはまだまだいろいろあるので、僕もまた行きたいと思います。

www.ntt.com

そういえば、ドローンもちゃんともらえましたよ。 f:id:tetrapod117:20170122205942j:plain

iPhoneが帰ってきたら遊ぼうと思います。