見出し画像

岩岡、MAオンラインハッカソンでスベるってよ

おいしもとき

2020年6月20日に開催された「MAオンラインハッカソン」に参加した記録です。

「MAオンラインハッカソン」とは、ITクリエイターの自由な創作活動を促進する、つくりたい菌培養法人一般社団法人MAが主催するオンラインでハッカソンを行うイベントです。

一般社団法人MAは、ヒーローズリーグなどの日本最大級のイベントを主催するモノづくり大好きっ子ならば知らない人はいないのではないか、という大御所である

世の動向により、外を出歩いたり、集団で集まったりしにくい環境であることは言わずもがなな事ですが、密にならずにモノづくりを楽しめるようにオンラインでの開催となっています。

#テーマ 「ソーシャルディスタンスを楽しもう！」

世の中では新しい生活様式を求める声が上がる一方で、3密を防ぐべく、人との接点について不便に思うことも出てきました。

不便なことがあっても楽しめることを考えようぜ！的なテーマが楽しそうだ！と思い参加しました。

#ハッカソンで利用したコミュニケーションツールは ？

オンラインハッカソン会場として「Remo」が使われ、チーム作業やオンラインプレゼンなどで利用されていました。

画像1

アイディアを書くツールとしては「miro」が活用されていました。

このツールには当日の進行スライドやタイムスケジュール、

画像2

お試し用の砂場やアイディアを発散させるボード

画像3

写真撮り忘れましたが(笑)、アイスブレイクの自己紹介を書く場所、協賛企業様からのインプットをメモする場所、誰かが書いたメモをみんなで見れる場所があったり

(写真ないので、赤い芸人さんのインプットの時の写真)

画像4

アイディア発散の場から誰かが書いたアイディアを参考に、1人1枚アイディアを書く場所

画像5

そして、1人1枚書いたアイディアからメンバーを募集したり、誰かのアイディアに加わり、チームを結成した際に記入する場所が用意されていました。

画像6

そして、もう一つコミュニケーションツールとして「discord」が使われていました。運営からのアナウンス(RemoのGeneralコメントでも発信)に使われていましたが、私が属したチーム(2人だけですけどね)は、開発中のコミュニケーションと本番のプレゼンに大活躍しました。テキストチャンネルもありますが、フェースブックメッセンジャーから敏腕ディレクターの声も発信されていたため今回はあまり使わなかった。

#何を作ったの ？

今回は「ソーシャルディスタンスの極み乙女」というタイトルの作品を作成しました。タイトルを見ると何のこっちゃ、ですが、誰かがスベった時に「旗」と「着信」でスベったことを伝えるツールを作りました。

ProtoPediaに公開しています。が、プレゼンの動画を見てもらった方が作品としてはわかりやすい。なぜならば、この作品は、「いわおかさんのスベるトークを含めて作品」だからである。

#どうやって作ったの ？

今回のイベントの縛りとして、IBMCloud、Obniz、Twilioの３つのうち1つ以上使うことが条件だった。

まあ、1つと言わず全部使ったけどねw

まず「旗」ですべったことを知らせるツールですが、家にたまたまサーボを組み込んだパチパチトール君があった(厳密には家にサーボの在庫なくて焦った)

画像7

これにobnizを接続して、サーボを動かすプログラムを作成した。

Scriptを見ると一目瞭然だが、180度の位置から、90度の位置に行き、180度に戻るいうすごくシンプルなソースです。

<!-- HTML Example -->
<html>
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
 <script src="https://unpkg.com/obniz@2.5.0/obniz.js"></script>
</head>
<body>
<script>
var obniz = new Obniz("Obniz ID");
obniz.onconnect = async function () {
 var servo = obniz.wired("ServoMotor", {gnd:0 , vcc:1 , signal:2 });
 servo.angle(180);
 await obniz.wait(2000);
 servo.angle(90);
 await obniz.wait(2000);
  servo.angle(180);
 await obniz.wait(2000);
}
</script>
</body>
</html>

これをWebhookで起動するだけでObniz周りの実装は完了です。

Obnizサイコーありがとう！！！

次に、「着信」でスベったことを伝える実装です。

この部分は、偉大なるTwilio Studioのパワーにより、まったくプログラムを書いていません。Twilioサイコーありがとう！！！

REST APIでリクエストを受けたら、Make Outgoing CallでREST APIに設定された電話番号に発信し、もし、電話に出たら、REST APIに設定されたメッセージをText to Speechで再生する、というもの。

スクリーンショット 2020-06-20 19.21.46

Twilioについては、毎月「Twilioオンラインコンテスト」が開催されている。毎月末締め切りで、翌月の５日前後に発表があり、なんと赤いボトルがもらえるという素晴らしいイベントです。グランドチャンピオンになるとiPad proが当たるので、これは毎月応募するしかないですよね!

もちろん申し込みました・・・（超絶審査コメントに悩む赤い芸人さんが思い浮かぶ）

スクリーンショット 2020-06-20 17.16.02

最後に、今回の仕組みの根幹となった「IBM Cloud」ですが、数ある機能の中ですごく扱いやすい「Node-RED」です

スクリーンショット 2020-06-20 19.21.13

「iwaoka」というHTTP GETで受け付けるフローは、スベったときに押してもらうボタンをHTMLを表示するものです。

コードはすごくシンプルで、「すべったね」という丸いボタンをブラウザに表示するだけ。

<html>
   <head>
       <style>
       .btn-circle-flat {
       display: inline-block;
         text-decoration: none;
         background: #87befd;
         color: #FFF;
         width: 500px;
         height: 500px;
         line-height: 500px;
         border-radius: 50%;
         text-align: center;
         overflow: hidden;
         font-size: 50px;
         transition: .4s;
       }
       
       .btn-circle-flat:hover {
         background: #668ad8;
       }
       body
       {
        margin:0px;          /* ページ全体のmargin */
        padding:0px;         /* ページ全体のpadding */
        text-align:center;   /* 下記のautoに未対応用のセンタリング */
       }

        #main

           {
            margin-left:auto;    /* 左側マージンを自動的に空ける */
            margin-right:auto;   /* 右側マージンを自動的に空ける */
            text-align:left;     /* 中身を左側表示に戻す */
            width:650px;         /* 幅を決定する */
           }
       </style>
   </head>
   <body>
       <div class="parent">
           <a href="https://XXXXXXXXX.mybluemix.net/iwaokaReq" class="btn-circle-flat">すべったね</a>
       </div>
   </body>
</html>

「iwaokaReq」というHTTP GETで受け付けるフローは、TwilioのREST APIをたたいて電話をかけたり、ObnizのWebhookを叩きサーボで旗をあげる動きをするフローとなります。

「Twilioコール準備」というFunctionは、Twilioに渡すパラメータを定義しているのみです。今回は、岩岡さんを狙い撃ちでスベったコールをするため、岩岡さんの電話番号をベタで書いてます。ここのパラメータを柔軟に変えることにより、いろんな人にスベったコールができるでしょう（いらないと思うけど）

msg.payload = {'From': '発信する番号', 'To': '電話をかける先（今回はいわおかさんの電話番号）', 'Parameters': JSON.stringify({'message': 'すべりましたね'})};
msg.headers = {'content-type':'application/x-www-form-urlencoded'};
return msg;

「Twilio」のHTTPリクエストは、Twilio Studioで参照できるREST APIのURLとBasic認証の情報として、TwilioのSIDとパスワードを入力するだけである。

スクリーンショット 2020-06-22 21.44.01

「Obniz」のHTTPリクエストについては、WebhookのURLを指定するのみである

スクリーンショット 2020-06-22 21.45.41

WebHookのURLは、Obnizの開発者コンソールにある「サーバーレスイベント」で作成することができます。冒頭で書いたHTMLを「リポジトリ内のHTML」で選択し、「Endpoint」の箇所に書かれているURLをNode-REDに定義するだけである。

スクリーンショット 2020-06-22 21.46.06

#最後に

今回は優勝を逃したものの、なんと「IBM賞」をいただきました！888888888

優勝はFAXで婚姻届を送るという狂気のプロダクトで、あれはマジでやべぇ・・・（褒め言葉）

あのプロダクトに負けたのは納得です。次は負けないぞーーーーー

数時間しかないハッキングタイムでいかにモノを作るか？と考えた時に、提示されたサービスをフル活用して如何に工数を短縮するか？というのがポイントだったと思います（終わってから気がついたけどねw)

限られた時間の中で使えるソリューションとしては「IBM Cloud」「Twilio」「Obniz」が最強だったのではないでしょうか。もはや３種の神器と言っても過言ではないと信じます。

今回のオンラインハッカソンは本当に笑った。

運営側が自由に作らせる、他の人のノウハウ（メモ）を共有して活用させる、というスタイルも本当によかった。自分が次運営するときパクろう（え？）

運営の皆様、とても良いイベントありがとうございました。

参加者の皆様お疲れ様でした。

そして、プレゼンで笑いを提供してくれた岩岡リーダー、ありがとうございました！

いいなと思ったら応援しよう！