【Monacaでアプリ開発】1.コーディング

2017年10月3日

Monacaでアプリ開発

リールの番手とPEの号数を選ぶと何m巻けるかを表示する無料オリジナルアプリ”Wind PE”

いつもご利用ありがとうございます。もうすぐでリリース一周年という事で旧ブログで11回連載だった奮闘記を6回に凝縮して公開スタート!

2016年2月

アプリを開発しようと思ったきっかけは、持っているリールにカタログに書いていない号数の細いPEを巻きたくて「どの位巻けるのか簡単に分からないかなぁ〜!?」と思ったからだっただ。

アプリを作ってしまえば便利だと思った矢先、iOS用のアプリを開発する為にはMacが必要という高いハードルが立ちはだかった(;´Д`A

当時の俺氏の環境は自作Windows PCとiPhone 5S。

俺氏は来る日も来る日もまるで欲しいオモチャを眺める子供の様に中古PCショップのサイトを眺める日々を送っていた。

そして中古のiMac Early2008を激安て購入したヽ(・∀・)

しかし、せっかくiMacを手に入れてx−codeをインストールしたものの、objective-cが難しくて中々先に進めないで放置してから2年も経過してしまった(;´Д`A

丁度その頃の俺氏はというと、育児に忙しく釣りにも行けずもんもんとした日々を過ごしていた。

そんな時、iOS版とAndroid版をいっぺんに作れる無料ハイブリッド開発サービスのMonacaというものを知り、重い腰を上げて開発をスタートしたのだった。

1.デザインカンプを書く

まずはノートにデザインカンプを書きまくってある程度の骨格を考えた。アプリ名も既にこの段階で”Wind PE”に決定していた。何故”Wind the PE”にしなかったかは、「なんだか響がキャッチーじゃないな」と思ったからだ(笑)

2.コーディング

”Monaca” のサンプルの中からデザインカンプのイメージに近いUIを選んでコーディングを開始!
この時はワクワク感がたまらなかったんだけど、これから先数々の試練があったんだな・・・・

基本的にはhtml5とJava scriptのサンプルコードを参考にしてコピペで作れるんだけど、自分が最終的にMonacaから選んだサンプルは”Jquery mobile”を使ったものだった。
しか~し”Jquery mobile”の中で自分がイメージしている多段リスト表示のコードを探すのに凄く苦労した(汗)

Nested listなど色々なリスト表示を試してみたが結局シンプルな”Collapsibleウィジェット”に落ち着いた。本当はjsonを使いテーブル管理にしたかったんだけどまだうまくコーディングできなかったので今後気が向いたら挑戦しようと思う。

やっとアプリの大まかな骨格が決まったが多くの勉強時間を費やしてしまった(;´Д`A

3.アプリアイコンの作成

気分転換にアプリ開発の雰囲気を高める為にアプリの顔であるアイコンの作成だ!

アイコンは最初からドット絵で作ろうと考えていた。小学生の時に夢中になったドット絵なら出来そうな気がしたのだ。作成は無料iOSアプリで人気の高い”dotpict!”のお世話になったぞ!

キャンパスサイズは最大96×96で作成できて、書き出しは最大1536×1536のPNG形式で保存できる。非常に簡単にドット絵が作成できる素晴らしい神アプリである。更新も定期的に行われていてパワーアップしてゆくのも嬉しい。

Wind PEにはこのドット絵以外の画像は出てこない予定なので慎重に作ろうと思ったがあっという間に完成してしまった(;´Д`A
3パターン作ったが文字も無い3色のシンプルなバージョンに決定だ!

4.データの計算と落とし込み

楽しい作業は直ぐに終わってしまった。次は各サイズのスプールに各号数のPEが何m巻けるか糸巻き量を計算して入力するという地道な作業だ。

そもそも、いちいち計算したりWEBで検索したりするのが面倒だからアプリを作ることにした訳なんだけど、一覧表作るのは大変な作業だ(汗)
何故値を選んでその都度計算させるコードにしないのかは後述する。理由があるのだ。

1.スプールの容積の計算

まずカタログに載っている標準糸巻き量とJAFS(日本釣用品工業会)が制定したPE糸の太さ標準規格を使用して各スプールの容積を求める。各スプールに2個くらいずつ書いてある標準糸巻き量のうち、最小容積を採用。巻き過ぎてスプールから糸がハミデントするのを防止する為だ。

  • DAIWA社は1000番~4000番の小型スピニングリール
  • SHIMANO社は500番~4000番の小型スピニングリール
  • ナイロン専用、フロロカーボン専用のスプールは非対応
  • 記載されている号数よりも太いPEはリールの破損に繋がるので標準設定以下の号数とした

4000番に0.10号とかいう現実離れしたセッティングも出てくることになるのだが、これはこれで面白いのでそのままにしたぞ(笑)

2.糸巻き量の計算

そして各号数のPEが何m巻けるかを計算していく。標準糸巻き量はそのまま使用するのだが、各社とも自社のPEの断面積で計算してあるので標準糸巻き量の前後の値にギャップが出てくる箇所が数か所あった。そこは近似値で補正して補うことにした。これが先述した”その都度計算させるコードに出来ない理由”である。

3.データの落とし込み

Excelを使いコツコツ計算して全ての値が揃ったので、実際のコードに落とし込んでアプリの動きをデバックだ。

うん、自分としては便利な感じのアプリになったぞヽ(・∀・)

次回予告

次回は広告の実装である。リサーチの結果、簡単に導入できるnendという広告サービスに決定した。(つづく)

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でK☆太(makiriri.com)をフォローしよう!