2022年8月31日(水)

非エンジニアが内製化支援サービスを使ってWEBアプリを内製する物語 その⑥

top
こんにちは、プランニング部です。第6話【LINE連携】編②です。
uchi
LINE連携実装の続きをやってくよ

変更・改訂履歴

  • 改訂

    会社名を変更

おさらい

第5話:非エンジニアが内製化支援サービスを使ってWEBアプリを内製する物語 その⑤
内製化支援とは
専任のSPIRALエンジニアによる開発支援体制を提供します。
詳細は内製化支援をご覧ください。

content1
katsura
今回はエキスパートコースを使っています!
登場人物
plan

残タスクの確認

・会員登録後リッチメニューを会員用に切り替える処理
・リッチメニューのリンク先 / デザイン変更
・トップページ内を非会員 / 会員でコンテンツを出し分け
・切り分け診断のプログラム作成

会員登録後リッチメニューを会員用に切り替える処理

▽リッチメニューの詳しい解説はこちら
完了ページでLINEのリッチメニューを切り替えるサンプルプログラム

非会員 / 会員リッチメニューの作成自体はできましたが、会員登録してもリッチメニューが自動で会員用に切り替わるようにはなっていないため、今回はその実装からスタートです。
uchi
内製化支援チームの話によると、会員登録フォームの完了ページに遷移した時に、会員用のリッチメニューに切り替えるプログラムを仕込むらしい…
uchi
もらったサンプルプログラムの「[配布用]lineRichMenu.php」を使えば良さそう!
サンプルプログラム
uchi
コメントを参考に修正して…phpファイルだから、登録フォームを設置したページの「PHP」のところに貼ればいいのかな?
PHPタブ
uchi
よし、LINEから会員登録してテストしてみよう!
フォーム
完了
実際のトーク画面

LINEトーク画面で非会員リッチメニューから会員用に切り替えができました。

リッチメニュー
uchi
できた〜!

リッチメニューのリンク先とデザインを正式なものに変更

当初、リッチメニューは「トップページ」「切り分け診断」「ナレッジサイト」「問い合わせ」「Facebook」の予定でしたがこのような形が正式版となりました。

リッチメニューデザイン変更
uchi
そういえば、LINE連携解除後ってどうなるんだろう?
連携解除
uchi
リッチメニューが会員用のままだ。
さっきの逆バージョンだから、応用すればできると思うけど時間かかりそうだし、内製化支援チームに聞いちゃえ!

---------------チャット開始----------------
uchi
LINE連携解除のプログラムがあればご共有お願いできないでしょうか?
現状、削除フォームでレコードを削除できるもののLINEリッチメニューが会員用メニューのままになってしまっております。
yama
LINE連携解除のプログラムですが、共有可能です。
プログラム作成と検証しますので少し時間をください。
明日には提出できるように進めます。
---------------チャット終了----------------

トップページ内を非会員 / 会員でコンテンツを出し分け

uchi
その間にトップページの出し分け処理をやっておこう。
このままだと会員リッチメニューからトップページにアクセスしても、会員登録フォームになっちゃう。
uchi
トップページのサンプルコードを見る感じ、ステータスに応じて会員の場合はトップページに、非会員の場合は会員登録フォームが表示されるようになってるっぽい。
TOPページソース
uchi
そもそもステータスって自動で変わるようになってないよね…!?
uchi
カタカタ…(調べ中)ポチポチ…
uchi
「DBトリガ」っていうのを使ってみたら、会員登録したときに自動的にステータスが変更されるようにできた!

トリガ
kino
DBトリガは、レコードの登録/更新/削除をきっかけに、各種アクションが実行できる機能です。
プログラム処理を入れなくてもステータスを更新したり、計算をさせた値を登録するなど、色々な処理をマウス操作と簡単な数式を入れるだけで設定することができます。
uchi
ソースもちょっと修正。Thymeleafは今回初めて触ったけど、【初級編】Thymeleafの使い方を読んだら、どんな意味で書かれているのか理解できた!
uchi
テストしてみよう…やった!トップページが表示されるようになったー!
ログイン後のトップページ
トップ
uchi
内製化支援チームに質問を投げている間に、他の作業ができるから効率的に進められた気がする!

LINE連携解除後リッチメニューを非会員用に切り替える処理

ー翌日ー
yama
LINE連携解除後のリッチメニュー切り替えプログラムです。
補足説明も添付していますので、ご確認のうえお試しください。
トップ
uchi
返信きた!早速やってみよう。
登録時の切り替えと同じ要領だから、ソースをちょこっと修正して、ページに貼り付けっと。
実際のトーク画面

LINEトーク画面で会員用リッチメニューから非会員用に切り替えができました。

連携解除後リッチメニュー
uchi
実装完了!LINE周りはこれで終わりだ〜!

裏話

リッチメニューの構成を変えた理由
katsura
切り分け診断や問い合わせをリッチメニューに置いてアクセスするとエラーになってしまったからです。
トップページに一度アクセスした後はエラーが出ませんでした。
恐らく、今はトップページにログインする処理しか実装していないからだと思います。
uchi
今回はリリースまで時間があまりなかったので、社内で話し合い、トップページの中から切り分け診断と問い合わせフォームに遷移できるようにしました。
katsura
実際にやってみると、最初は見えてなかった細かい点が見えてきて、予定よりも工数がかかる。
アプリ開発の経験が少ないほど見えない工程があると思って、余裕を持ったスケジュールを組むと良いと思った!

次回予告

次回はついに最終回! 切り分け診断テストの開発です。お楽しみに!
スパイラル株式会社では内製化支援を提供しております。


第7話を読む
【最終話】非エンジニアが内製化支援サービスを使ってWEBアプリを内製する物語 その⑦