LoginSignup
19
14

More than 3 years have passed since last update.

@UhRhythminプロトアウトスタジオ

【加速度センサー】初ハッカソンの失敗を活かすための覚書【JavaScript】

Last updated at Posted at 2020-08-12

はじめに

スクリーンショット 2020-08-13 2.48.59.png

【誰でも参加可】Obnizを楽しもう！2人1組の2人3脚型オンラインハッカソン #ProtoOut

当記事はプロトアウトスタジオ主催のハッカソンに参加後の技術面での振り返り記事です。
当日のイベントの様子はこちらのnoteにありますのでお時間あれば是非ご一読ください。

人生初のハッカソンで考えた個人とチームについて | uhrhythm | note

動かないコード

Untitled Diagram (2).jpg

企画のオンライントントン相撲で私に割り当てられたタスクはスマホの加速度センサの値をPOST通信で送る
というものでした。

結果として実装は失敗して、チームに貢献できず大変悔しい思いをしました。

下記のコードが動いているか確認するための苦闘の記録をここから書きます。


window.addEventListener('devicemotion', function(event) {
    x_value = event.accelerationIncludingGravity.x;
    y_value = event.accelerationIncludingGravity.y;
    z_value = event.accelerationIncludingGravity.z;

イベントが正常に動作するかの確認で作業時間の大半を使ってしまいました。

原因はなんだったのか、数日が経過した現在はネットに上がっている記事をもとにサンプルコードを動かすまでできるようになりましたので、工程をおさらいしつつ失敗の要因を考えていきます。

どんな工程を踏んでいけば、自分の役割を果たせたのでしょうか。
加速度センサの値を取得しPOST通信でSpreadSheetに書き込むという仕組みを作りながら検証してみます。

勘違いをしていた

narcissist_narushisuto.png

当日は加速度センサを使いその値を取得するために私は以下の手順を踏みました、

1. スマホを振る
2. obnizがその情報を検知する想定のコードを書く
3. obnizのディスプレイに値が表示される

ここで後日、今回の検証過程で勘違いをしていたことに気付きました。

私のパートではobnizは必要ありません。
私の理解ではobnizはパーツの接続なしに動作はほとんどしません。(2.のことですね)
特に今回はセンサー関連なのですから、尚更です。

誤解したまま時間切れになりました。

さて、この勘違いを気づくに至った、後日実際に行った工程を挙げます。
1. コードを書く
htmlとJavaScriptで書きます。

2. スマホでの動作確認のためデプロイする
Netlifyを使用してデプロイしました。

ファイルを修正するたびにドラッグ&ドロップをしましたがgit連携とかもしかしたらあるのでしょうか。

3. 開発者ツールでリモートデバックをする
エラーがあってもスマホの画面からはデバックができません。
USBでPCと繋いでChromeのリモートデバッグ機能を使って検証しました。

参考記事はこちら。
Android 端末のリモート デバッグを行う

まともに動くまで１２３を繰り返します。

バッチリ動いてますね。
本番でも出来ていたらなあ・・・。

以上のことを踏まえて

さて、加速度センサーの値を取得することはできました。
SpreadeSheetに書き込みを行う次工程が全くうまくいきませんでした。
CORSにより通信が制限されていますね・・・・。

パラメーターに色々書いたりaxios以外のライブラリを使用したりしましたが全くエラーは解消されず解決にいたりませんでした。

加速度センサの部分はできたがPOST通信の部分がうまくいかなかった。
注釈として、POST通信の部分は送信先にSpreadSheetを選択したのが原因の可能性があるのでobnizクラウドなど他のものを選択していれば形になったかもしれません。
一番の難所を乗り越えたと思いきや難所は続いていたので現時点では結局実装を果たすことはできなかったと言えます。

加速度センサへの理解を深める

せめて動くものを残したい・・・。
ですので記事でに掲載されていたサンプルを書いてデプロイして動かしました。
加速度センサについて直感的な理解を促し今後の制作のための経験値としていきたいと思います。

コードを掲載しておきますが、下記のサイトのサンプルをほぼほぼコピペさせていただいております。
スマホの加速度センサを使う - こくぶん研究室

var x_element = document.getElementById("x");
var y_element = document.getElementById("y");
var z_element = document.getElementById("z");

var x_value = 0, y_value = 0, z_value = 0;      // 加速度の値を入れる変数を3個用意
var canvas = document.getElementById('canvas'); // ★canvas要素を取得 
var context = canvas.getContext('2d');          // ★絵を描く部品を取得

window.addEventListener('devicemotion', function(event) {
    x_value = event.accelerationIncludingGravity.x;
    y_value = event.accelerationIncludingGravity.y;
    z_value = event.accelerationIncludingGravity.z;

    x_element.textContent = x_value;
    y_element.textContent = y_value;
    z_element.textContent = z_value;

    // 指定時間ごとに繰り返し実行される setInterval(実行する内容, 間隔[ms]) タイマーを設定
    var timer = window.setInterval(() => {
        drawBall();         // ★drawBall 関数を実行
    }, 33); // 33msごとに（1秒間に約30回

    // ★canvasにボール（円）を描く drawBall 関数
    function drawBall() {
        var centerX = canvas.width  / 2;            // canvasの中心のX座標
        var centerY = canvas.height / 2;            // canvasの中心のY座標
        var ballRad = 50;                           // ボールの半径
        var ballColor = "rgb(0, 0, 255)";           // ボールの色
        var g  = 9.80665;                           // 1Gの時の重力加速度[m/s^2]
        var d  = centerX / g;                       // 1m/s^2 あたりでボールが動く量
        var os = navigator.platform;          // OS名の取得
        console.log(os);
        context.clearRect(0, 0, canvas.width, canvas.height);   // canvasの内容を消す clearRect(x, y, w, h)
        context.beginPath();                        // 描画開始
        context.arc(centerX - d * x_value,               // 円を描く arc(x, y, 半径, 開始角度, 終了角度)
                    centerY + d * y_value,               // 加速度xとyに、1m/s^2あたりで動く量dをかける
                    ballRad - 3 * z_value,               // ボールの半径（zに掛けた係数3はテキトー）
                    0, 2 * Math.PI);                // 角度の単位はラジアン（2π = 360度）で指定
        context.fillStyle = ballColor;              // 塗りつぶす色の設定
        context.fill();                             // 塗る
    }
});

スマホのWEBアプリのデバック方法と百聞は一見にしかずの精神でデプロイして動かした経験ができてよかったと思います。

公開しておりますので遊んでみてください。
結構楽しいですよ。
【Androidスマホで検証済み】
https://boring-bassi-a526fb.netlify.app/

最後に

加速度センサというものは説明だけを読んでもいまいちピンとこないものでしたが実際に動かしてみると
直感的に理解できました。
ハッカソン当日は全く知らない状態で取り掛かったこともありとにかく動かさなきゃ！という気持ちが先走って
結果実装に至らず、という結果でした。

とにかく一度落ち着こう。
話を聞こう。
仕様を確認をしよう。

当たり前だけど大事なことに気づいた一日でした。
次回に役立てたいです。

19
14
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
14