2022年8月2日(火)

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

top
こんにちは、プランニング部です。第4話【会員登録フォーム・認証エリア作成】編です。
uchi
ついにサイト作成だ!

おさらい

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

content1
katsura
今回は基本サービス+開発支援サービス(オプション)を使っています!
登場人物
plan

会員登録フォーム作成

参考にしたページ
 メルマガ会員サイト
 フォームブロック
会員登録フォーム作成
まずはフォームに表示させるフィールド(項目)を選択します。
uchi
会員DBのフィールドは全部表示させるから全て追加っと。
フィールド選択
uchi
「職種」や「このLINEをどこで知ったか」は設問数が多いからプルダウン形式。
「個人情報取得同意」はラジオボタン形式にするか。


ラベル選択
uchi
「作成」と。これで終わりかな?
フォームプレビュ
uchi
会員登録フォーム作成完了。 すごい簡単にできた!
情報変更フォームも同じ要領で作っちゃおう!
kino
ちなみに現在は初期状態のデザインですが、ビジュアル設定ではクリック操作で色や文字のサイズなど簡単な調整が可能です。
CSSを用いてリッチなデザインにすることも可能です。
ビジュアル設定-SPIRAL ver.2 デモ一覧
ソース設定-フォームで使えるコピペCSS 「シンプルモダン」

認証エリア作成

LINEからログイン認証をするために設定します。
ログインした後のマイページも認証エリアで作成ができます。
参考にしたページ
 認証エリア
認証エリア作成
uchi
認証っていったらIDとパスワードの入力欄が2つ並んでるやつが一般的だよね…
あれ、そうなるとIDフィールドって何にしたらいいんだろう…?設定画面でも選ばないとだ…
認証エリア発行
uchi
Googleで「LINE 外部サービス 認証」で検索して…ふむふむ…???…む、難しい…!
内製化支援チームに聞いてみよう!
内製化支援チームとチャット
内製化支援サービスではチャットで気軽に質問することができます。
チャットのイメージは下記をご覧ください。
スパイラーズボード(制限版)ご利用の流れ


---------------チャット開始----------------
uchi
認証エリアを作成する画面のIDフィールドについてです。
こちらは、今回の会員DBだとどの項目が適切でしょうか?
メールアドレスで良いとも思いますが、LINE認証用のIDがあると認識しています。
yama
認証エリアのIDについて回答いたします。
LINE連携時にLINEのIDが返ってきますので、ご認識の通りそのIDを認証IDとして使用します。
LINEID用の項目をテキストフィールド(必須制約あり、ユニーク制限あり)で追加をお願いいたします。

また、 APIでログインする際にパスワードが必須項目となるため、パスワードフィールドの追加もあわせてお願いいたします。
パスワードはプログラム側で生成するため、ユーザが入力する項目ではありません。
▼SPIRAL ver.2 認証エリアにログイン
 https://docs.spiral-platform.com/api/#tag/SiteAuthentication
yama
お問い合わせとは別件になりますが、LINE連携の流れは下記となります。
--------------
APIでLINEID、パスワードを登録。
 ↓
更新フォームからその他の項目(名前や会社名など)を登録。
--------------
そのため、きちんと最後まで登録完了したか管理したい場合は、ステータス用の項目も追加することをお勧めいたします。
----------------チャット終了----------------
uchi
DBに「LINE ID」「パスワード」フィールドを追加しないといけないんだな。
あと「ステータス」もおすすめされたしいれておこっと。
DBに項目追加
uchi
認証エリアのIDフィールドで「LINEID」が選べるようになった!
認証エリア発行2
uchi
認証エリアも発行完了。IDを選ぶところでわからなくなって焦ったけど、「これで大丈夫」と言ってもらえるとやっぱり安心だなぁ!
認証エリア発行完了
uchi
うーん、次はSTEP3までできたから次はSTEP4だけど「ログイン処理プログラム実装」か…。
このあとどう進めたら良いかわからないし、一回内製化支援チームに連絡してみよっと!
----------------チャット開始----------------
uchi
以下2点についてお伺いします。
①ここまでのアプリ構成のレビュー&アドバイスの実施方法
 STEP3まで進めましたが、どのように共有すればよいでしょうか?

②LINEログイン処理実装の支援
 STEP4を進めたいです。

参考にすべきサイトもしくは、サンプルコードがありましたらいただけますと幸いです。
yama
LINEログイン処理について現在今週中を目途に検証をしています。
来週にはサンプルコードをお渡しできる見込みですので、申し訳ありませんが少々お待ちください。
アプリ構成のレビュー&アドバイスですが、 今回はサンプルコードの解説も併せてできればと思いますのでWeb会議での実施を考えています。

下記候補日にてお時間いただけますか。 レビュー&アドバイスとサンプルコード解説のため2時間ほどを予定しています。
7/13(水)14時-16時
7/15(金)14時-16時

上記で難しい場合はご都合の良い日程をご提示いただけると幸いです。
よろしくお願いいたします。
uchi
7/15(金)14時-16時でお願いできますか。
yama
7/15(金)14時-16時、承知しました。よろしくお願いします。
STEP4の想定スケジュールがおしてしまって申し訳ありません。
STEP5で着手できる部分があれば先行して作成いただければと思います。
よろしくお願いいたします。
----------------チャット終了----------------
このように内製化支援チームからWEB会議を申込まれることもあります。
逆にユーザ側から会話したい場合にもチャットでご連絡いただければ調整可能です。

感想

uchi
チャットでも丁寧に返信してもらえて助かった!
katsura
うちさんに任せっぱなしだった…。内製化支援チームもリアルタイムで把握することはできないから、わたしたちがどこまで進んでいるか、進行役として進捗や作成目処をこまめに共有しておくとよかったかも。
yama
要件定義の時に、認証IDの案内ができずお手数をお掛けして申し訳なかったなぁ。
ただSPIRAL ver.2は後からDBにフィールド追加しても属性変更や並び順変更が可能なので、リカバリーができて良かった!

次回予告

無事にSTEP3まで進めることができましたが、スケジュールの雲行きが怪しくなってきました…。
次回は「アプリレビュー&LINEログインサンプルコード説明会編」お楽しみに!

パイプドビッツでは内製化支援サービスを提供しております。