個人開発の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

index.html.erb

<div id="posts">
 # ここに下記のJavaScriptからDOM要素が挿入されます
</div>

application.js

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でホイミ！

posts_controller.rb

    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

ルーティング

config\routes.rb

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

あとがき

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

けっこう楽しいです。

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