mizdra's blog

ぽよぐらみんぐ

Emtimerの紹介

ポケモン programming

はじめに

この記事はPokémon RNG Advent Calendar 2017 一日目の記事です 🎉🎉🎉

adventar.org

今年もPokémon RNG Advent Calendarの季節がやって来ました! ポケモン最新作も発売したことですし, 皆さんの乱数調整への意気込みもいっそう高まっていると思います. 今回は皆さんの乱数調整を支援するためのツールを開発したのでその紹介をします.

Emtimerの紹介

乱数調整では, 事象を発生させるタイミングを合わせるためにカウントダウンタイマーが頻繁に使われます. 既に乱数調整のためのタイマーはいくつか公開されていますが, 多くは次のような問題点を含んでいます.

  • Adobe Flashへの依存
    • 今後数年を掛けてAdobe Flashはサポート終了される予定*1であり, Adobe Flashに依存するツールを利用するのは不適切です
    • メジャーなモバイル向けブラウザではAdobe Flashに対応していないものが殆どです
  • モバイルフレンドリーでない
    • スマートフォンやタブレットといった, 画面の小さな端末のことを考慮して設計されておらず, 画面の乱れや操作への支障が生じます
    • モバイル端末を利用するユーザが急増する今, モバイル対応はとても重要です
  • マルチプラットフォーム非対応
    • Adobe Flash や特定のOSに依存するツールは様々な環境で動作させることを考慮していません
    • 例えば, Adobe Flashに依存しているツールはAdobe Flashをサポートしていない環境では動作せず, Windows向けに開発されたツールは MacOS 上では動作しません
  • 新機能の導入が困難
    • 多くのツールのソースコードは公開されておらず, ユーザが新機能を開発して追加することは困難です

これらの問題を解決するために, 新たにEmtimerというツールを開発しました.

emtimer.mizdra.net

Emtimerは乱数調整のために開発されたシンプルで扱いやすい高機能なカウントダウンタイマーです. Emtimerには次のような特徴があります.

機能の紹介

Emtimerは乱数調整で最も使われているポケモンの館のエメループ *2を参考に作られました. Emtimerにはエメループから引き継いだ機能と, より乱数調整を快適にするために追加された新機能があります.

  • エメループから引き継いだ機能
    • キーバインド
    • サウンド
    • 開始までの猶予
    • 切り上げ
    • 残り時間特大表示
  • 新機能
    • ループ
    • モバイルに最適化されたコントローラ
    • カウントダウン時間の単位切り替え
    • ハイライト
    • Progressive Web Apps

エメループから引き継いだ機能

キーバインド

カウントダウンの開始/停止をスペースキーで操作することができます. スペースキー押下で停止, 押上で開始です. この機能により簡単にタイマーを再起動できます.

サウンド

秒の桁が更新される時に「ピッ」という音を鳴らします. サウンドを有効化するか無効化するか, カウントダウン終了の何秒前から音を鳴らすかを設定できます. タイミングを合わせたいときに便利です.

開始までの猶予

「待機時間」のカウントダウンを開始する前に別途カウントダウンを設けます. 両手が塞がっていてカウントダウン開始のボタンが押せない時に便利です.

切り上げ

値を設定すると, 「待機時間」のカウントダウンを指定秒数だけ早く切り上げることができます. 甘い香りを使って乱数調整する際は甘い香りを使ったときに発生する鳴き声の長さがポケモンによって異なるので, その調整に利用すると便利でしょう.

残り時間特大表示

エメタイマーBIGから引き継いだ機能です. 残り時間の秒未満の値を赤丸の位置で表現します. 赤丸が中央に来たときが秒の桁が更新される瞬間です.

f:id:mizdra:20171130221504p:plain:w600
残り時間表示. カウントダウン中は1秒ごとに赤丸が左から右へと流れていく.

新機能

ループ

タイマーの1サイクル (開始までの猶予のカウントダウン+待機時間のカウントダウン) をループします. ループ回数を直接指定, もしくは無限ループできます. 一定間隔でタイマーを起動したい時に便利です.

モバイルに最適化されたコントローラ

再生/一時停止/再開/停止ボタンを搭載したコントローラを設置しました. モバイルでも扱いやすいよう画面下部に固定し, ボタンを大きくしています.

f:id:mizdra:20171130221641p:plain:w300
画面下にコントローラが表示される

カウントダウン時間の単位切り替え

待機時間, 開始までの猶予, 切り上げの値の単位を「秒」および「フレーム」から選択できます.

ポケモンの館のエメループにもフレームを秒に変換するツールが結合されていますが, 実際のカウントダウンで使われる値の単位は「秒」です. これはカウントダウンしたい時間を「秒」と「フレーム」どちらを基準にしたのかの判断が困難になるという問題があります.

本ツールではカウントダウンしたい時間をどちらの単位の値として扱うかを直接していする設計にすることで, どの単位を基準にしたのかを判断しやすくしています. 多くの場合, こちらのほうが直感的でしょう.

f:id:mizdra:20171130221556p:plain:w500
それぞれの入力欄に異なる単位でカウントダウン時間を入力できる

ハイライト

秒の桁が更新される時に「残り時間特大表示」の枠内がハイライト (発光) します. タイミングを合わせたいときに便利です.

youtu.be

Progressive Web Apps

これはほんの先程追加した新機能です! Progressive Web Apps (PWA) とは簡単に言うと, 「モバイル向けWebアプリを (Google PlayやApp Storeでインストールするような) ネイティブアプリに近づける」技術です. WebアプリをPWAに対応させると様々な便利な機能が有効になりますが, ここでは本ツールで活用されているほんの一部の機能を紹介します.

(残念ながらPWAはSafariなどの一部のブラウザには対応していません😢 今後SafariでもPWAの対応が進んでいくと思われますが*3, 今すぐにこの機能を利用したい場合は Google Chrome の使用を推奨します👍)

ウェブアプリ マニフェスト

ウェブアプリ マニフェストはアプリを(スマートフォンやタブレット, パソコンなどの)ホーム画面に追加したり, ホーム画面からアプリを起動した時の外観をカスタマイズする機能です.

youtu.be

動画では次の機能を確認できます.

  • ホーム画面にWebアプリを追加する
  • ホーム画面からアプリをタップすると初めにスプラッシュ画面が表示され, ロードが終わってからアプリ画面が表示される
  • ブラウザのUI (アドレスバーなど) が隠されている
  • ブラウザとは別のウインドウとして扱われている

キャッシング

ツールを構成するコンテンツは全てローカルにキャッシュされ, 初回以降のアクセスが高速になります. コンテンツの取得はキャッシュを優先的に使用し, 必要なコンテンツだけがネットワークから取得されます.

オフラインで動作可能

なんとEmtimerはWebアプリにも関わらず, オフラインでも動作します!!! これは先程紹介したキャッシングを用いて, オフライン時は全てキャッシュからコンテンツを取得することで実現しています. お使いの端末が機内モードであっても動作します. 飛行機の中でも乱数調整し放題です 💪💪💪

youtu.be

自動更新

PWAは一見するとネイティブアプリのようですが, 実際にはWebアプリであり普通のWebアプリと同じようにアクセスする度にコンテンツは更新されます. ユーザは更新ボタンを押さずに, ツールにアクセスするだけで新機能を利用することができます.

新機能/改善のリクエストについて

ここまで本ツールに搭載されている機能を紹介してきました. もしかしたら🔥熱心な乱数勢🔥*4の方々は「あの機能が欲しいのに無い…!」, 「UIを改善して欲しい!」などと思っているかもしれません. そういった場合は思っていることを開発者に伝えて (フィードバックして) 頂けると今後の開発の支援になります. フィードバックはこの記事のコメントや, 開発者 @mizdra へのリプライ, またはGitHubリポジトリのIssueまでお気軽にどうぞ 😃

今後の開発の予定

Emtimerの開発は🚀今現在も進行中🚀です. 今後の開発の予定はまだ不透明な部分が多いですが, ちょっとだけ紹介します.

  • UI/UXの改善
    • モバイルでより使いやすいようUI/UXを改善します
  • カウントダウン処理の改善
    • カウントダウンがより正確に行われるよう改善します
  • 新しいタイマーの追加
    • 今あるSimpleTimerとは別に, 新しいタイマーを追加します
    • 8秒間のカウントダウン -> 16秒間のカウントダウン -> 17秒間のカウントダウン のように, 異なるカウントダウン時間のタイマーを組み合わせられるプログラマブルなタイマーを追加予定です

おわりに

以上が Pokémon RNG Advent Calendar 2017 1日目「Emtimerの紹介」となります. ここまで読んでくださった方々, ありがとうございました! 😄

それでは今日からクリスマスまでの間, Pokémon RNG Advent Calendar 2017 を楽しんでいきましょう! 良いクリスマスを!

adventar.org

2日目は @Blastoise_X さんの担当です!

参考

*1:http://blogs.adobe.com/japan-conversations/201707adobe-flash-update/

*2:一般的にエメタイマーと呼ばれています

*3:PWAの基礎となっているService WorkerがSafariに実装されることが決まっている (参考: http://trac.webkit.org/changeset/220220/webkit/trunk/Source/WebCore/features.json)

*4:乱数調整に携わる人々のことをそう呼びます

ポケットモンスター・ポケモン・Pokémon・は任天堂・クリーチャーズ・ゲームフリークの登録商標です.

当ブログは @mizdra 個人により運営されており, 株式会社ポケモン及びその関連会社とは一切関係ありません.