ども！寒さが本格的になってきてタイプミスが随分と増えてきている龍ちゃんです。
こちらの記事は依然執筆した、「LINEミニアプリで作るチャットゲーム」の開発の際に気を付けていたポイントについてまとめています。
これからLINEミニアプリを作る人の助けになったらうれしいなと考えています。
開発に関して
開発の構成としては、フロントエンドとバックエンド分割した形で開発を進めていきました。フロントエンドをReactで、バックエンドをnest.jsで構成しています。
画面は2画面で、作成したAPIとしては3つになります。APIのざっくりとした役割としては、以下のよう内容です。
- 対戦相手取得：データベースからランダムに一名の情報を取得
- 戦績取得：LINEログインしているユーザーの情報を取得
- 審判AIによる判定：AOAIにアクセスして戦闘描写と勝敗を返答する
開発の際に詰まったポイント・注意点
開発の際には、いろいろ詰まった点があるのですがLIFFアプリだからこそ詰まった点に注目して大きく3点に分割してみました。
リファレンスでも「LIFFアプリ開発ガイドライン」というページがあるので、是非ご一読ください。
トークンの取り扱い・LINE登録情報の取得
これは、セキュリティにも関係してくるので一番気にした方が良いですね。今回の構成は、バックエンド側でAPIとして処理をするのでフロントエンドで取得した情報をバックエンドに送信する必要があります。ユーザー特定のために固有のIDを取得する必要がありました。
リファレンスでは、以下の二パターンでユーザー情報の取得が紹介されてます。
- フロントのみで扱う場合 LIFF SDKからデコード済みのIDTokenを取得する
- サーバーに送信して扱う場合 AccessTokenをサーバーに送信しサーバー側でトークン検証・ユーザー情報を取得する
今回はAPIを作成したので、フロント側で取得したAccessTokenをHeaderに付与してサーバー側で情報を取得する構成で実装しました。ガイドとして公開されていたのでこちらに沿って開発をしています。
フロントエンドでLINEからのアクセスか確認
LIFFアプリは、LINE内から専用のURLを開いた際に実行されます。静的アプリとしてデプロイしている場合は、普通にアクセスができますが、LIFF SDKの初期化に失敗します。こんな時に便利な関数として、liff.isInClient();があります。こちらは、実行環境を判定することができます。LIFFアプリ外からのアクセスの際にはアプリとは別の画面を表示して、LINEの友達登録誘導なんてこともできるかと思います。
動作確認
LINEを使って開発するときは、いつでも直面する問題ですね。HTTPS化したURLしか受け付けてもらえません。さすがに開発期間中に、毎回動作確認のためにデプロイはやってられないです。そこで活躍するのが、ngrokさんですね。お手軽に手元でHTTPS化したURLを取得することができます。
終わり
今年は、様々な形態のデモを準備していました。デモも来場される方の属性によって注目を集めれたりなかったりと様々です。LINE関連のデモの場合は、若い世代の方に好評でした。これからもひっそりと開発を進めていきます。
