개인개발의 Web어플리케이션 「마치카도 루트

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가 부족해지면 배터리를 충전하여 "호이미!"

꽤 재미 있습니다.

오픈 소스 개발용 리포지토리를 공개했습니다. 이번 건, 이쪽에도 업하고 있습니다.
htps : // 기주 b. 코 m / ぇ st2538 / 마치 로테 _ 오 s