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