LoginSignup
3
1

More than 3 years have passed since last update.

Ionic & golangでリアルタイム大喜利アプリを作りました

Posted at

アプリのリリースまでなんとか漕ぎ着けたので、宣伝も兼ねて使ったフレームワークについて紹介します。

どんなアプリか

写真で一言アプリです。
特徴的なのはリアルタイムで集まった人たちが、お互いに投稿し合ったボケを評価し合う部分です。

マッチングした最大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はかなり気軽にアプリが作成できるので本当におすすめです。

3
1
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1