【Rails】バッテリーホイミ機能を実装しました

個人開発のWebアプリまちかどルート」v6.1に、名づけて《バッテリーホイミ機能》なるものを実装したときのメモです。

TL; DR

まちかどルートは

「道ばたのゴミを拾おう」
「お年寄りに席をゆずろう」
「〇〇に行って〇〇しよう」 など。

みんなの日常からちょっとした一日一善やおつかいなどをお題にしてサブクエストを作りクリアしあうことで世界がちょっと明るくなる、そんなリアルRPG系Webアプリです。

そしてユーザーには、レベルや経験値のほかHP (ヒットポイント:ドラクエのアレ)という属性値を持たせています。

Battery Status API

どうやらPCとAndroidのChrome限定のようですが、バッテリーの状態変化でJavaScriptを発火させることのできるBattery Status APIというものがあります。

今回はそれを応用してみました。

こんな流れです。

  1. まちかどルートを開く
  2. 充電を始める
  3. APIが充電を検知したことを画面に表示
  4. バッテリー残量値を取得
  5. 「ホイミ!」ボタンを押す
  6. バッテリー残量値をHPに加算してDBに保存

view / JavaScript

<div id="posts">  
 # ここに下記のJavaScriptからDOM要素が挿入されます  
</div>  
navigator.getBattery().then(function(battery) {  
  // 充電を検知したら発火   
  battery.onchargingchange = function(){  
    // 充電開始(true)のときだけ処理  
    if (battery.charging === true) {  
    // viewのid="posts"のところにDOM要素を挿入  
    var element = document.getElementById("posts");  
    element.insertAdjacentHTML("afterbegin", "  
       <p>充電を検知</p>  
       <form action='battery' accept-charset='UTF-8' method='get'>  
       <input name='utf8' type='hidden' value=''>  
          <input type='text' id='battery' name='battery' readonly=''>  
          </input>  
          <button name='button' id='battery_btn' type='submit' disabled>  
            ホイミ!  
          </button>  
       </form>  
     ");  
    }  
  }  
  // 充電の残量が変化したら発火  
  battery.onlevelchange = function(){  
    // 充電の残量値を入力フォームに表示  
    document.getElementById( "battery" ).value = battery.level * 100;  
    // 入力フォームのdisabledを無効にして「ホイミ!」ボタンを押せるようにする  
    document.getElementById( "battery_btn" ).disabled = "";  
  }  
 });  

controllerでホイミ!

    def battery  
        # viewから送られてきたバッテリー残量値をHPに加算してDB保存  
        if params[:battery] != nil  
            battery = params[:battery]  
            @current_user.hp += battery.to_i  
            @current_user.save  
            flash[:notice] = "HPが回復しました!"  
            redirect_to root_path  
        else  
            flash[:error] = "呪文が失敗しました!"  
            redirect_to root_path  
        end  
    end  

ルーティング

  get 'battery' , as: 'battery', to: 'posts#battery'  

あとがき

とてもザックリな感じになってしまいましたが、要点は上記のとおりです。HPが残り少なくなったらバッテリーを充電して「ホイミ!」

けっこう楽しいです。

オープンソース開発用のリポジトリを公開しました。今回の件、こちらにもアップしてあります。
https://github.com/west2538/machiroute_oss