アプリのリリースまでなんとか漕ぎ着けたので、宣伝も兼ねて使ったフレームワークについて紹介します。
どんなアプリか
写真で一言アプリです。
特徴的なのはリアルタイムで集まった人たちが、お互いに投稿し合ったボケを評価し合う部分です。
マッチングした最大10名が、制限時間内に一つのお題写真に対してボケを投稿します。
投稿はお互いに評価することができ、一定数イイネを集めると一本獲得になります。
こちらからダウンロード可能です。
よかったら遊んでみてください。
android
https://play.google.com/store/apps/details?id=jp.co.popbits.funnyapp
ios
https://apps.apple.com/jp/app/funny-one/id1515018792
アプリ側
ionic
アプリのベースはIonic Frameworkで作成しました。
ざっくりいうと、
webview + Angular
にネイティブっぽいリッチな見た目のコンポーネントと、共通化されたプラグインが利用できます。
プラグインの例としてはSocial Sharingやdeeplink等があります。
Angularではなく、vueやreactで記載することも可能なようです。
※reactは最近入ったらしい。
android, ios同一のコードで記載できるので工数削減になりました。
環境構築やビルドなどもかなりスムーズにできました。
(多少のつまづきはありますが、ネイティブアプリの環境構築にはつきものです)
懸念点として、webviewベースであるためパフォーマンスがあまり良くないのではないか気になりましたが、
端末の性能も上がってきているからか、思ったよりサクサク動いてくれています。
createjs
大喜利バトルの部分はcreatejsで作成しました。
https://createjs.com/
Adobe Animate
https://www.adobe.com/jp/products/animate.html
でcreatejs用にアニメーションを書き出しています。
アプリへのつなぎ込みには色々と試行錯誤が必要でしたが、細かい話になるので割愛します。
大喜利バトルでは後述するgolangサーバとwebsocketで接続し、イベント毎にアニメーションを変化させます。
## サーバ側
golang
リアルタイムや並列処理に強そうなので採用しました。
pythonもよく書くのですが、golangは型があるのでバグが起きづらい、
パフォーマンスが良いなどのメリットがあります。
コードは誰が書いても同じ書き方になるよう矯正され、必然的に可読性が高くなります。
一方、リアルタイム部分(websoket接続)はgoroutine と channelを駆使して作るのですが、
正直自分以外理解できないコードになってしまったと思います。
並列処理そのものが難しいのもあると思います。
通常の処理とは違いコードの上から追っていくだけでは読み解くことができず、
どこからchannnelにアクセスが有るなど把握していないといけません。
並列処理は色々な書き方ができるので正解がない感じです。
gin
デファクトスタンダードっぽいので採用しました。
良さげです。
melody
websocketを扱う際にいい感じの機能を提供してくれます。
sqlx + squirrel
https://github.com/jmoiron/sqlx
クエリ結果をstructsにマッピングしてくれます。
https://github.com/Masterminds/squirrel
SQLクエリビルダーです。
where句の検索条件をqueryオブジェクトに対して注入していく、
みたいなことがやりたい場合はこれでSQLを作ります。
最初はgormを使っていたのですが、最終的に上の構成に書き換えることにしました。
gormは人気があるようなので使っていたのですが、挙動が直感的でなかったのと、
思いも寄らない部分で大量のSQLを発行されていたことがあったりで、嫌になってやめました。
まとめ
色々紹介しましたが、ionicはかなり気軽にアプリが作成できるので本当におすすめです。