こんにちは、プランニング部です。第5話【LINE連携】編①です。
いよいよ本命のLINE連携に突入します！
詳細は内製化支援をご覧ください。
LINEの設定はおおよそ完了していたため、追加でMessaging APIのチャネル作成とPostmanのアカウント作成を行いました。
PostmanとはAPIを開発したりテストしたりできるツールです。
使用は必須ではありませんが、開発しやすくなるとのことで内製化支援チームから利用を推奨されました。
内製化支援チームからLINE連携フローを一部変更したいというところから始まりました。
今回は大まかなフローを作成し、SPIRAL ver.2の設定に着手しつつ、プログラミングの細かい設計を後から行っているため細かな変更が発生することもあります。
事前にどの粒度で設計をして進めるかはご希望に合わせられますので、お気軽にご相談ください。
DBやフォーム、認証エリアの画面を映し確認してもらいました。
不明な点は事前に確認して進めたこともあり、スムーズに終わりました。
LINE Messaging APIでのリッチメニュー作成、リッチメニューID取得
LINEアカウントで認証エリアにログインさせるサンプルプログラム
一通り修正が完了したところで…
一時はエラーでどうなるかと思いましたが、無事にLINEログインすることができました。
既に2時間近い時間が経っており、残りは手順書を貰って進めることになりました。
次回「LINE連携編②」お楽しみに！
スパイラル株式会社では内製化支援を提供しております。
いよいよ本命のLINE連携に突入します！
変更・改訂履歴
-
改訂
会社名を変更
おさらい
第4話：非エンジニアが内製化支援サービスを使ってWEBアプリを内製する物語 その④内製化支援とは
SPIRALエンジニアが専任の支援体制を提供する制度です。詳細は内製化支援をご覧ください。
今回は基本サービス＋開発支援サービス（オプション）を使っています！
登場人物
打ち合わせ前に準備したこと
打ち合わせの数日前に、内製化支援チームから下記のような連絡がありました。
当日までに下記の準備をお願いいたします。
・LINEアカウント発行
・LINE Developers管理画面よりプロバイダーの登録
・LINEログイン、Messaging APIのチャネル作成
・Postmanのアカウント作成
・LINEアカウント発行
・LINE Developers管理画面よりプロバイダーの登録
・LINEログイン、Messaging APIのチャネル作成
・Postmanのアカウント作成
PostmanとはAPIを開発したりテストしたりできるツールです。
使用は必須ではありませんが、開発しやすくなるとのことで内製化支援チームから利用を推奨されました。
LINE連携フロー変更の説明
いよいよ当日。内製化支援チームからLINE連携フローを一部変更したいというところから始まりました。
よろしくお願いします。
よろしくお願いします。
まず初めにLINE連携のフローを変更したいと考えています。
検証を行った結果このような形が適切ということになりました。
まず初めにLINE連携のフローを変更したいと考えています。
検証を行った結果このような形が適切ということになりました。
変更後のLINE連携フロー
元々のフロー
LINEログインをしたら「LINE ID」と「会員登録フォーム（新規登録フォーム）で入力した情報」が同時に会員DBに登録される変更後のフロー
LINEログインをしたら「LINE ID」だけを初めに会員DBに登録し、その後「会員登録フォーム（更新フォーム）で入力した情報」を会員DBに更新する
お手数をおかけしますが、今作成済みの会員登録フォームを「新規登録フォーム」から「更新フォーム」に変更する必要があります。
わかりました。あっ自分なんか更新フォームも作ってたのでそれが使えそうです！
事前にどの粒度で設計をして進めるかはご希望に合わせられますので、お気軽にご相談ください。
現時点のアプリレビュー
内製化支援のメニューにある「アプリ構成のレビュー＆アドバイス」というのをお願いしてみました。
それでは今の設定状況を見ていくので、SPIRAL ver.2にログインして画面共有をしていただけますか？…DBは…認証エリアも…はい、問題なさそうです！
不明な点は事前に確認して進めたこともあり、スムーズに終わりました。
LINE連携の事前準備
ここからは、やまの画面を共有してもらい手順を教えてもらいながら一緒に作業していきました。
まずはSPIRAL側で事前準備です。APIエージェントの作成を行います。
その後、PHP環境変数というところに先ほどは発行されたAPIキーを登録しておきます。
その後、PHP環境変数というところに先ほどは発行されたAPIキーを登録しておきます。
サイト内で複数使用する値は、PHP環境変数に設定しておくことで、PHPの処理内で呼び出すことができます。
今回は、共通の値を使用しますが、テスト環境と本番環境で値を切り替えることも可能なので、PHPを使用する際は、ぜひ使ってみてください！
便利ですね！！
（こういうおすすめ機能は教えてもらわないと自分じゃ使わなかったかも…！）
LINEリッチメニュー作成
▽リッチメニューの詳しい解説はこちらLINE Messaging APIでのリッチメニュー作成、リッチメニューID取得
SPIRAL側の事前準備が終わりましたので、LINE側の説明に進みます。
事前に共有したファイルをご用意して一緒に操作してください。
事前に共有したファイルをご用意して一緒に操作してください。
■事前に共有されたファイル
・リッチメニュー：作成方法手順、サンプルプログラム（テキストファイル）、サンプル画像
・LINEログイン：サンプルプログラム5点、フロー図
・リッチメニュー：作成方法手順、サンプルプログラム（テキストファイル）、サンプル画像
・LINEログイン：サンプルプログラム5点、フロー図
まずは非会員向けのリッチメニューの作成をします。
postmanの画面でこれを貼り付けて…サンプルプログラムのこの部分を書き換えて…最後に「send 」をクリックするとLINEにリッチメニューが表示されるかと思います。
postmanの画面でこれを貼り付けて…サンプルプログラムのこの部分を書き換えて…最後に「send 」をクリックするとLINEにリッチメニューが表示されるかと思います。
表示されました！
私も確認できました！すごい！
同じ要領で会員向けのリッチメニューも設定していきましょう！
実際のトーク画面
LINEトーク画面で会員・非会員のリッチメニューを表示することができました。
LINEログイン設定
▽LINEログインの詳しい解説はこちらLINEアカウントで認証エリアにログインさせるサンプルプログラム
次はLINEログインを実装するためにサンプルプログラムを修正していきます。
事前に共有したサンプルプログラムの中で修正箇所を説明します。
事前に共有したサンプルプログラムの中で修正箇所を説明します。
実際のサンプルプログラムの一部です。
変更する箇所には丁寧にコメントがつけられていました！
変更する箇所には丁寧にコメントがつけられていました！
今修正したソースをログインページのPHPタブに貼り付けてください。
事前に渡しているサンプルプログラムの②をbodyに、③をheadに貼り付けてください。
貼り付けました。
一旦ここでリリースしましょう！
リッチメニューをタップして、ログイン後TOPページがでたら成功です。
リッチメニューをタップして、ログイン後TOPページがでたら成功です。
確認してみます！…あれっ500エラーに…
（うちの画面共有を見ながら）APIキーの指定のところが違いそうです。
APIキーをそのまま書くんじゃなくてPHP環境変数で指定した変数を書けば良いですよ。
APIキーをそのまま書くんじゃなくてPHP環境変数で指定した変数を書けば良いですよ。
あっなるほど…！直してみましたが、まだ500エラーのままです…（汗）
ソースをチャットで送ってほしいです。…全角スペースが入ってますね。
半角じゃないといけないんですね！でもまだ500エラーが出ます…（泣）
あっもしかしてAPIエージェントのステータスが無効のままになっているから…！？
あっもしかしてAPIエージェントのステータスが無効のままになっているから…！？
それです！！
直りました！ログイン後TOPが表示されましたー！！
良かったです！DBも確認してみてください。
自分のLINEに登録している名前とLINE IDが登録されています！
既に2時間近い時間が経っており、残りは手順書を貰って進めることになりました。
感想
今回相談いただいたLINEに関するサンプルプログラムはナレッジサイト上に公開しています。
LINE連携を試してみたい方は参考にしてみてください。
次回予告
リッチメニューの出し分けなど、残りを持ち帰って作業していきます。次回「LINE連携編②」お楽しみに！
スパイラル株式会社では内製化支援を提供しております。
第6話を読む
非エンジニアが内製化支援サービスを使ってWEBアプリを内製する物語 その⑥