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

2021年7月15日ガジェット・自作アプリ自作アプリ

リールの番手とPEの号数を選ぶと何m巻けるかを表示する無料オリジナルアプリ"Wind PE"の開発者K☆太(@makiriri_com)です。いつもご利用ありがとうございます。

まったくの素人によるアプリ開発奮闘記を全6回にわたり公開。

それでは張り切っていってみよう!

きっかけから開発までの経緯

きっかけ

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

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

なんせ当時の俺氏の環境は自作Windows PCiPhone 5S。なんとしてもMacを手に入れなくてはならない。

中古のiMacを購入

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

とてもじゃないけど新品のMacなど買える経済的余裕はない。

そして中古のiMac Early2008を激安て購入したのだった。

しかし、せっかくiMacを手に入れてx−codeをインストールしたものの、objective-cが難しくてなかなか先に進めないで丸2年も放置することとなる。

2016年2月始動

ちょうどそのころの俺氏はというと、育児に忙しく釣りにも行けず悶々とした日々を過ごしていた。

そんな時、偶然にもiOS版とAndroid版のアプリをいっぺんに作れる無料ハイブリッド開発サービスMonaca(モナカ)というものを知り、これならプログラミングがまったく分からない俺氏でもできるんじゃないかと思い立った。

構想から2年、やっと重い腰を上げて開発がスタートしたのだった。

コーディング編

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

まずはノートにデザインカンプを書きまくってある程度の骨格を考えた。

アプリ名もすでにこの段階で"Wind PE"に決定していた。

なぜ"Wind the PE"にしなかったかは、「なんだか響がキャッチーじゃないな」と思ったからだw

2.コーディング

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

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

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という広告サービスに決定した。↓