web制作してる人間がIonicでアプリ作った話(Ast制作):1 ざっくり概要

初めまして。

AstCrowと申します。

タイトルのとうりですが、初めてionicを使ってアプリ作り公開まで完了したので、それらでつまづいたり知ったこと、調べたことや参考になったURLを共有、また自分への学んだことのメモ書きとして残せたらなと思います。

同じようにionicでアプリ作りたい、webデザイナやマークアップエンジニアだけれどアプリ作りたい、作るはともかくstoreで公開って難しいの？とか知りたい方は是非是非、見てもらえるととても嬉しいです。

色々長くなりそうなので複数回に分けて書こうと思います。

 

今回は

  • そもそもどんなアプリ作ったの？
  • アプリ制作の経緯
  • ionicについて
  • 制作環境（使用ソフトやツール等）
について書こうと思います。

 

ちなみに私はWeb制作関連の仕事をしています。ディレクタではなくページのデザインだったり、htmlでのマークアップ、あとは運用更新をしている人間だと思っていただければなと思います。

そのため、制作者はWeb制作関連の知識がある前提で読んでいただけたらなと思います。

 

そもそもどんなアプリ作ったの？

Astという対戦ゲーム向け分析アプリを作ってみました。
無料のアプリなので、気になる方は是非是非インストールして使ってみていただけると嬉しいです。
Ast
▼iOS版
▼LPページ
ざっくり説明：

Astは対戦ゲーム用分析アプリです。分析したい対戦ゲームを元にテンプレートを作り、試合毎にデータを登録・管理や登録物を元に勝率等や平均値を出すことができます。例えば、自分がどのくらいミスをしているのかとか、試合で使っているキャラクターや武器でどのキャラクター・武器の勝率が良いのかとか。対戦相手でどの相手が得意で、どの相手が苦手なのか…。そういったデータの登録・分析ができるのがこのアプリです。

 

▼スクリーンショット

 

と、まあこんな感じです。

対戦ゲームでの試合結果を記録し勝率等やミス、得意な武器やキャラ等を数値化、分析して練習や強化に使えたらなと思います。

テンプレートはあるもののある程度自由にカスタマイズが可能です。

個人的には第五人格やDBDとかでの使用を想定していますが、ランキング用のテンプレートも用意しているため、荒野行動等の勝ちデータの分析価値が低いものや勝ち負けがはっきりしていない順位での対戦ゲームでも使えるかなと思います。

 

アプリ制作の経緯

複数ありますが、ざっくり箇条書きにすると

  • 仕事のリモート化、それによる時間の余裕（通勤族だったため、家に帰れば時間もあまりなくだらだら＆寝る怠惰生活だった）
  • 元々第五人格というゲーム用に記録アプリを考えて作ろうとしていた（ただし途中で断念）
  • 何か新しい事に挑戦してみたかった
  • 制作をしたい！

上記記録アプリですが、元々第五人格（identity）というゲームにハマっており、その対戦結果を記録、分析したい（要は強くなりたい）⇒けど自分が思うようないいアプリがないな⇒じゃあ作ってみようか。てなことで一昔xcodeで作ろうとしたことがありました。

ただし結果は途中で挫折。元の構想が甘かったのもありますが、一番の理由はそれ以上にデザインどうりに物をxcode(swift)で作るのが難しかったというのがあります。

プログラマさんやアプリ開発している方からすれば、え？どこが！？となるかもですが、お恥ずかしながら知識や経験のない私には厳しい物でした。

データベースの導入だったり、データの習得だったり仕組みだったりは検索を駆使すればどうにかなる場合がほとんどでした。

でもガワの部分（実際の見える画面）は…一つ引っかかると自分の思うような形にジャストフィットする情報がなかなか捕まらない……。本を読んでもわからない、自分が欲しい情報にありつけない……。

調べていくうちに疲れ果ててやめてしまった、という有様でした。

そしてこの一件でいかにhtml/CSSがガワを作るのに特化した素晴らしい言語だったということを知ることができました……。

Ionicを選んだのは、ここら辺のガワ制作を自分が持っているノウハウ（Web制作知識や技術）で補えるというメリットがあったためです。

 

ionicについて

Ionicを使っての制作です。

Ionicとは、を説明すると長くなってしまうため、有志の方の素晴らしいまとめをどうぞ。

 

ままざっくりいうとhtml/CSS(SCSS) + type script（フレームワーク:Angular/Vue.js）の知識でweb/ios/andorid複数の環境対応のアプリ開発ができるということです。（ビルドは別ですが）

逆をいえばhtml/CSS/type scriptの知識が必要です。

 

制作環境（使用ソフトやツール等）

macでの開発です。

  • VScode (コードのマークアップに使用)
  • chorme (見た目の確認、情報検索に)
  • Gravit Designer (アプリ内で使っているアイコン等の作成に)
  • xcode (iphoneエミュレータでの確認やiOS版の公開ビルドに必要)
  • Android studio (Androidエミュレータでの確認や公開ビルドに必要)
この中でGravit Designerはあまり知らないかもなので説明しておくと、ベジェ曲線を使ってのイラスト作成ができるソフトです。
イラストレーターみたいに使うことができます。
ただイラストレーターほどの機能はないですが（失礼）シンプルで簡易的なものなら充分なくらいです。操作性も非常に使いやすいと感じでいます。
アドベさんのイラストレーターそこまで使わなくて、個人で契約するにはちょっとお高いかも…てな方には是非是非。
一部機能制限はあるものの無料（！！）で使えますので、気になる方は使ってみてはどうでしょうか。ちなみに機能制限のない有料版もお値段もそこまで高くない上、買い切りなのでおすすめです。
 
ちなみに上記ツールはどれもお金がかかっていないのですが、実際アプリを作りストアに公開するとなると開発デベロッパー登録にiOSなら$99ドル⇒12,800円（税込）、Androidの場合は$25⇒2795円（税込）かかります。※2021/9時点での金額です。今と金額が異なる場合があります。
アプリ公開にはお金がかかるので要注意です。
 

最後に

これ以上書くと長くなりすぎるので一旦ここで切ります。
次回はアプリの構想とか、デザインとかについて書いていくかもです。
ブログは初めてなのでドキドキです…蒸発しないよう、定期的に記事を載せられるよう頑張ります！