LoginSignup
32
9

More than 1 year has passed since last update.

LINEでスタンプ(QRコード)を集めて抽選会ができるサービスを作った話

Last updated at Posted at 2021-12-05

概要

LINEで抽選会ができるサービスを今年のゴールデンウィークに作りました。このサービスを作った経緯・技術についてこのアドベントカレンダーで書きます。

どんなサービスを作ったのか?

LINEで簡単に抽選会が開催できるサービスを作りました🎉

ザ・抽選会

なぜこのサービスを作ったのか?

家の近くのショッピングモールに遊びに行ったときに、抽選会を開催していました。コロナ禍ということもあり、デジタルでの抽選会でしたが、完全にはデジタル化できていませんでした。

その抽選会では 5,000円以上買い物をすると、抽選券をゲットでき、抽選券に書かれている番号を打ち込むと抽選会に参加できるという仕様でした。「5,000円以上の買い物をしているかどうか」のレシート確認に長蛇の列ができており、これは果たしてデジタル抽選会なのか?自分であればもっとよいプロダクトを作れそう?と思ったのがこの、サービスを作るきっかけです。

画面設計・仕様

アセット 1@3x.png

システム構成

LINE上で動くアプリケーションとなっており、LIFFの技術を用いて実現しています。

  • LINEログイン(LIFF)
  • Nuxt.js
  • Firebase(Firestore・Functions・Authentication・Hosting)
  • Bulma/Buefy

アセット 2@3x.png

実装

LIFF(ScanCode)

QRコードを読み取る部分の実装はLIFF(LINE Front-end Framework)のscanCodeという関数を呼び出しで実現しています。このscanCodeはLIFF v2.15.0(2021/09/30公開)からscanCodeV2となり、アップデートされています。

scanCodeV2もscanCodeもOSやOSのバージョンによっては使えなかったりするので、そのあたりを確認して、使えないバージョンの場合は独自実装したQRコードに飛ばし読み込みを実現しております。

LINE Front-end Framework - LIFF

  • liff.scanCodeV2()

  • liff.scanCode() (非推奨)

抽選時のロジック(排他制御)

デジタル抽選会なので、当選した景品の在庫管理が必須になり、同じ景品が被ってしまうことが許されません。
同じデータを同時に参照してしまい、その値を同時に更新してしまうと競合状態が生じてしまいます。ある処理がデータを参照している間、別の処理によるデータの利用を制限もしくは禁止する必要がありました。

FirebaseのFirestoreにはrunTransactionとうい、排他制御を可能にする関数が用意されており、これを使うことで実現しております。

ezgif-1-9b1732deff29.gif

100msで処理を続けて実行した場合でも問題なく処理できました。

まとめ

これまでWEBやネイティブで実現できる抽選会はありましたが「LINEで抽選会ができるアプリ」は無かったので作りました。リリース後は実際に、ショッピングモールや自治体などでも導入していただきました!

LINEは多くの人のスマートフォンに既に導入されている基盤のため、LINEのプラットフォームの乗っかることで、ネイティブのアプリをインストールさせたり、メール・パスワード認証をさせる必要がないという体験がユーザーが導入するときのハードルをグッと下げています。

LINE APIはドキュメントは仕様についてとても詳細に記載されているため初めて何かを作る方にもオススメできるAPIです!またコミュニティの活動なども活発なので、皆さん何か作って世の中に出してみるとよいかもしれません。

32
9
0

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
32
9