LINE Front-end Framework(LIFF)でアプリケーションを開発したい - 4日目

昨日でNode.jsの学習が終了しました。今日からアプリケーションを開発します。

アプリケーションの要件

「汎用施設予約システム」を作ります。要件は以下。

・施設が一覧表示され、予約可／予約済が分かる
・予約可の施設を予約できる
・予約履歴を参照できる
・当日予約のみ可能で、時刻の指定はできない
・予約の取り消しはできない

とりあえず動くものを作りたいので、時刻指定や日付を跨ぐ予約はできないようにしました。また、取り消しもできません。

アプリケーションの仕様

上記の要件を実現するため、以下のような仕様にします。

システム予約専用のLINE公式アカウント（以降、公式アカウント）が用意されている。

ユーザーが公式アカウントのトーク画面を開くと、「施設一覧」「予約履歴」ボタンが表示される。

ユーザーがトーク画面の「施設一覧」ボタンを押すと、LIFFの「施設一覧」画面が開かれ、予約対象の施設が一覧表示される。
各施設には「予約可」または「予約済」のステータスが表示される。

ユーザーが「施設一覧」画面で「予約可」の施設をタップすると、その施設は「予約済」となる。

日次の夜間処理により、「予約済」の施設は、日付が変わると「予約可」となる。

ユーザーがトーク画面の「予約履歴」ボタンを押すと、LIFFの「予約履歴」画面が開かれ、自身の予約履歴を確認できる。

この仕様に沿って、開発を進めていきます。

LINE公式アカウントを作成する

アカウントの作成方法は以前記事にしていますが、あらためで説明します。

LINE公式アカウントのページで、右上の「アカウントの開設（無料）」をクリック。

管理画面ログイン｜LINEヤフー for Business

次の画面でも同名のボタンをクリック。

次の画面の内容をよく読み、「未認証アカウントを開設する」をクリック。

ログイン画面が表示されたら、適宜ログインしてください。筆者は自身のプライベートLINEアカウントでログインしました。

アカウント名、メールアドレス、業種を入力し、確認ボタンを押してください。

「完了する」ボタンを押せば、公式アカウントの登録は完了です。

完了したら、公式アカウントの管理画面を開いてください。

トーク画面にボタンを追加する

管理画面で「リッチメニュー」のページを開く。

「作成ボタン」を押す。
「表示設定」では「タイトル」「表示期間」を入力する。（他の項目はデフォルト値）

「コンテンツ設定」では、まず「テンプレートを選択」を押し、適切なテンプレートを選択する。

「画像を作成」ボタンを押し、メニューボタンの見た目を作成する。
作成したら「ファイルに保存」を押してから「適用」を押す。

「アクション」のタイプで「リンク」を選択し、URLにLIFFのリンクを入力する。
※LIFFのリンクに入力したURLは、1日目に作成したスターターアプリのもの。

「保存」ボタンを押し、管理画面に戻る。
ステータスが「アクティブ」になっていれば成功。

自身のスマートフォンから公式アカウントのトーク画面を開き、ボタンが表示されることを確認します。

「施設一覧」ボタンを押して、LIFFスターターアプリの画面が表示されることを確認します。

本日はここまで！