「タイマーアプリを作りました」のお話

• アプリの更新情報
  2021.04.26 リリースしました

キッチンタイマー(仮)

タイマーアプリのUIです。

▽コチラから利用できます。
https://coco-022.github.io/mapletimer/

何これ？

ブラウザで動くキッチンタイマーのアプリです。
メイプルストーリーの経験値バフの残り時間を管理するためのタイマーアプリです。

更新や機能追加があった時はこの記事に追記していきますので、もし気に入って頂けたら是非ブックマークしてみてください。

ちなみに狩りの時に使うタイマーなので(仮)です。

メイプルストーリープレイヤーの方向け

使い方

各経験値バフの使用時に、対応する項目のStartボタンをクリックしてください。

タイマーの残り時間が、一つでも『00:00:00』になると背景色が赤く変わります。
また、アラーム音の設定をONにしておくと、アラームが流れます。

Resetボタンを押すことで、残り時間が元の状態に戻ります。
残り時間が『00:00:00』のタイマーがなくなった時点で、背景色(とアラーム音)は元の状態に戻ります。
※5秒のタイマーも設置しています。動作確認用にお使いください。

▽コード自体はGitHubにて公開しています！
https://github.com/coco-022/mapletimer

ここからはWEB制作関係の方向け

ここからは真面目な(?)話なので、興味のない方はスルー推奨です。
今回の制作目的について

ネイティブのJavaScriptになれる。

業務内でプログラムに触ることが時たまありますが、時間効率と可読性の面からjQueryで済ませてしまうケースが多いです。そこでネイティブのJavaScriptに慣れるため今回のアプリを制作しました。
今ある知識で書ける物を、とりあえず動くように書いてみる、完成させることを目標に制作しました。
拙い部分もありますがなんとか完成しました。

GitHubでのコードの公開。

近々、業務でGit導入する予定とのことで、使い方の予習のため一番とっつきやすそうなGitHubから勉強し始めました。
SourceTreeというGitのGUIアプリを利用しながら「クローン」「コミット」「プッシュ」等の基礎的な操作を学ぶことができました。
チームでの運用方法やブランチの運用方法についてはまた今度に…

問題解決能力を身につける。

オンラインゲーム「メイプルストーリー」には、ゲーム内に「経験値バフ」と呼ばれるアイテムが複数あります。
種類によっては重複して使用することが出来ますが、それぞれ効果時間がまばらな為、残り時間の管理が大変です。
残り時間が分かりにくい(ゲーム内のUIが簡素なものの為)、アイテムの使い忘れが発生する、という問題に対して、使い忘れてるアイテムの有無と、残り効果時間を見える化するというのが今回のアプリの目的でした。