オリジナルのReact Nativeアプリを作り始めた話とか

昨日もモブプロやった。

別途振り返りのブログは書く予定だが、チーム外からの参加者からフィードバックをもらえて有意義だった。

継続こそ力。

 

 

[プランク]

プランクの記録に使っているのがこちらのアプリ。

30 Days Plank : Exercise and Chanllenge

30 Days Plank : Exercise and Chanllenge

  • ShuRong Deng
  • ヘルスケア/フィットネス
  • 無料

 

で、実際のプランク中の画面がこちら。

f:id:kidani_a:20180206010557j:plain

 

どうしてこうなった……。

AppStoreのスクリーンショットとは似ても似つかぬ姿。

 

いやまあ、普通にフィードバックして直してもらえばいいんだろうけど、もう半年以上この状況。誰もフィードバックしないのかしら。

 

プログレスバーとタイマーが重なって表示される以外にも、スタート時の「Ready set go」の音声をオフにする設定がないので音楽とかポッドキャスト聴きながらはやりづらいとか、社内SNSへの結果の共有手順がめんどくさいとか、色々問題はある。

あとは、個人開発のネタ不足もあるので、プランク用アプリを作ることに。

 

[手始めにタイマーを導入してみる]

タイマーなんて、適当に、 

    setTimeout(() => {
      // do something
    }, 1000);

とかやっとけばカウントできるのでは?

と思ったが一応「react-native timer」でググる

 

www.npmjs.com

なるほど、モバイルアプリだとバックグラウンドに回した時の動作とかも考えなきゃいけないぽい。確かに。

 

と言うわけでタイマーを使いつつ適当な画面を作ってみた。

 

f:id:kidani_a:20180206013957g:plain

1秒ずつ画面の数字をカウントアップしていくだけ。

あとはこれを分・秒単位で表示できるようにしていけば良さそう。

 

gifアニメ作成には、最初はQuickTimePlayer->Giftedを試したが、

  • 動画ファイルを一度経由しないといけない
  • Giftedが動画の画面サイズを勝手に変えてしまう(設定が見つからない……

などの理由により、GIPHY Captureを採用。

GIPHY Capture. The GIF Maker

GIPHY Capture. The GIF Maker

  • Giphy, Inc.
  • ビデオ
  • 無料

 

そもそもこの手のコンポーネントならどこかにありそうな気もするからそれは今度探す。 

 

 

いや、先延ばしは良くない。今探す。

www.npmjs.com

timerを検索ワードにすると、自作してみた系のブログ記事がヒットしてあまりいい結果が得られなかったが、stopwatchで検索したところこれが良さそうだった。

今週中に乗せ替えよう。

 

[まとめ]

開発中のソースはこちら。 

github.com

開発を一通り完了してからブログ記事書くスタイルだといつ公開できるか分からないので、できたところからちょっとずつ公開していく。

 

ちなみに、今日のブログ執筆BGM。

www.youtube.comEricの声が若い。 

 

Mr. Bigはオフィシャルサイトに行くとpowered by Makitaとあって流石。

ドリルいいよドリル。

www.mrbigsite.com

 

[2018/02/20追記]

続きを書いた。

 

kdnakt.hatenablog.com