まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

久しぶりにウェブサービスを作ってみたので、紹介含めてブログにまとめました。アイデアそのものは2週間ほど前に思いついて脳内設計し、1週間くらい前から作ったり改良を加えたりして、この三連休でとりあえず公開できるレベルになったかな、という感じです。

作ったのはいわゆる CMS (=Contents Management System「コンテンツ管理システム」)です。特徴的な要素として GitHub Issues を使っている、という点が挙げられると思っています。要は CMS のコンテンツそのものは専用 DB などに格納するのではなく、GitHub のリポジトリ内のプロジェクト/課題管理ツールである GitHub Issues を使っています。多くのケースでは GitHub Issues はプロジェクトの課題を記録したり、課題をカテゴリーに分類したり、課題の担当者や解決目標時期を割り当てたり、スレッド形式のコメントを追加したりしながら、プロジェクト全体の進捗を管理することに使われることが多いと思いっています。一方で、この GitHub Issues の仕組み自体はプロジェクト管理だけに使うのはもったいないほど色んな機能が無料で提供されているとも考えることができます。今回作成した GHaC(GitHub as CMS)は GitHub API を使って GitHub のログインや GitHub Issues の取得を行い、CMS 寄りの UI で表示することで CMS として使ってみたら面白いのでは? という興味から生まれたものです。

なお、2022/10/10 の現時点では PC 向けの UI のみ提供しています。


【GHaC の使い方】
GHaC を使う場合はまずウェブブラウザで以下にアクセスします:
  https://ghac.me/

2022101001


GHaC の紹介と簡単な使い方が説明されています。以下、このページに書かれた内容と重複する箇所がありますが、こちらでも使い方を説明します。

GHaC は GitHub のリポジトリを参照して(そのリポジトリの Issues や Comments を取り出して)コンテンツを表示します。例えばサンプルとして dotnsf/sample-issues という公開リポジトリを見る場合を想定します。なお、このリポジトリはソースコードとしては何もコミットされていないので、リポジトリを直接参照すると初期状態のまま表示されます:

https://github.com/dotnsf/sample-issues の画面)
2022101002


ソースコードは空ですが、GitHub Issues としての情報はいくつかの Issues と、各 Issue にコメントがついていたり、いなかったりします:

https://github.com/dotnsf/sample-issues/issues の画面。4つの Open な Issues と、表示されていない1つの Closed Issue が登録されています。また Comments が付与されている Issues は右側に吹き出しマークと一緒に Comments の数が表示されています)
2022101003


GHaC でこのリポジトリを参照する場合は https://ghac.me/ に続けて対象リポジトリを追加した URL にアクセスします。このリポジトリ(dotnsf/sample-issues)の場合であれば https://ghac.me/dotnsf/sample-issues にアクセスします。以下のような画面になります:
2022101004


最初は認証されていない状態でアクセスすることになるので上記のようなログインを促すメッセージだけが表示されています。画面右上の「ログイン」ボタンで GitHub の OAuth 認証ページに移動し、GitHub アカウントを指定してログインします。初回のみ以下のような画面になるので右下緑の "Authorize dotnsf" ボタンをクリックしてください:
2022101005


ログインが成功すると以下のような画面に切り替わります。なお、このリポジトリの例(dotnsf/sample-issues)は公開リポジトリなので誰がログインしてもこのように表示されますが、非公開リポジトリの場合はログインしたユーザーの参照権限の可否によって表示されたり、されなかったりします:
2022101006


画面最上部右にはログインしたユーザーの(GitHub の)プロフィールアイコンが表示されます。このアイコンをクリックすると GitHub からログアウトして GHaC のトップページに戻ります。またその右には GitHub API を実行できる回数※の目安が円グラフで表示されています。このグラフ部分にマウスのカーソルを重ねると、リセットまでの残り API 実行回数と、次回リセットの日付時刻が表示されます:
2022101007



GitHub API は1時間で 5000 回実行できます。1つのリポジトリの Issues や Comments を取得するために実行する API の回数はリポジトリによって異なります。↑の例ではこのページを表示するために既に4回実行していて、2022/10/10 19:50:06 までにあと 4996 回実行できる、という内容が表示されています(2022/10/10 19:50:06 になると API 実行はリセットされて、新たに 5000 回利用できるようになります)。

また画面上部には指定したリポジトリ内の open な issues がテーブル形式で表示されています:
2022101008

(参考 もとのリポジトリの Issues の同じ該当部分)
2022101003


画面下部には各 Issues と、その Issue に Comments がついている場合は全ての Comments がスレッド形式で表示されています。画面をスクロールすれば全て見ることができますが、特定の Issue の内容を確認したい場合は上部テーブルの該当 Issue をクリックすると、その Issue のスレッドに移動します。

例えば「ラベル付き issue」(Comments 数は2)と書かれたこの部分をクリックすると、
2022101008


該当 Issue が表示されている箇所までスクロールして表示することができます:
2022101009


Issue 本文や Comments 内容はマークダウン記法で記述されており、GHaC でも同様に表示されます(mermaid 記法には対応していません)。マークダウンによるリッチテキストを含む Issues や Comments はリッチテキストが再現されて表示されます:
2022101010

(2022/10/13 追記)
mermaid 記法と MathJax 記法に対応しました。


また現時点では GHaC は参照専用のツールです。GitHub リポジトリ内の Issues や Comments を編集するにはこのリポジトリを編集する権限をもったユーザーでログインした後に、画面内の GitHub アイコン(オクトキャットアイコン)をクリックすると・・
2022101009


対象リポジトリの対象 Issue の GitHub 画面が別タブで表示されます。必要に応じて、この画面から Edit ボタンをクリックして内容を編集したり、Comments を追加したり、New issue ボタンから新しい Issue を追加してください(保存後に GHaC 画面をリロードすればすぐに反映されているはずです)。余談ですが GitHub Issues の編集画面はマークダウンで記述できるだけでなく、OS からのコピー&ペーストで画像を貼りつけることができるので、リッチテキストの編集がとても楽です:
2022101011


なお、GHaC はデフォルトでは指定されたリポジトリの Open な Issues だけを対象にこのような画面を提供します。全ての Issues やクローズされた Issues だけを対象としたい場合は URL の最後にそれぞれ state=all (全ての Issues)や state=close (クローズされた Issues)というパラメータを付けてアクセスすることで目的の Issues を変更することができます(実はこれ以外にも URL パラメータで対象 Issues を絞り込むことができるようにしていますが、GitHub API でのオプションと同じ仕様にしているので興味ある人は自分で調べてみてください):
2022101012

2022101013


【まとめ】
このように GitHub Issues をウェブコンテンツのように使うことができるようになるのが GHaC の魅力です。GitHub Issues 本来の使い方とは異なるので少し慣れが必要かもしれませんが、ある意味で GitHub を無料のデータ管理ができるヘッドレス CMS のように使うことができると思っています。

なおこの GHaC を使うことで、公開されている全ての GitHub リポジトリを対象にこのような UI で Issues や Comments を表示することができるようになります。ただ例えば node-red/node-red のような Issues が多く登録されているようなリポジトリに対して実行すると1回の表示に必要な API 実行回数も多くなり、結果として表示されるまでにかかる時間も長くなってしまいます。その点に注意の上でリポジトリを指定して実行してください:
2022101014


(表示まで1分近くかかりました・・)
2022101015


まだまだ不具合も見つかっており、今後はその対処が必要になることに加え、現在は Oracle Cloud の無料インスタンス1つを使って運用していることもあって決して潤沢なサーバー環境ではありません。いろいろ不便があるかもしれませんが、ある程度理解した上で(主に情報提供用の)コンテンツ公開サービスと考えると、アクセス権管理も含めて結構使い道あるサービスなのではないかと思っています。


しばらく今の形で公開するつもりなので是非いろいろ使っていただき、ご意見やご要望などあれば伺って今後のサービス向上に役立てていきたいと思っています。


LINE PayAPI は(クレジットカード情報を取り扱う必要がない、という点で)個人プログラマーレベルでもモバイルやウェブで決済アプリを作ることができて便利です。

また LINE Pay API には「サンドボックス」と呼ばれる開発者向け機能が提供されており、このサンドボックス機能を使うことで「実際には決済しないが、実際の決済と同じ挙動を示す課金アプリケーション」を開発・動作確認することができます。アプリケーション開発段階での動作確認やテスト時に決済料金が発生しないので、安心して使うことができます。

一方で、そのようにして作ったアプリを本当に決済する場合は、サンドボックスの ID ではなく、LINE Pay に加盟店登録した ID を使ってアプリを運用する必要があります。この加盟店登録、個人でも(個人事業主でも)運転免許証などの身分証明があれば行うことができるようでした。自分は LINE Pay API を使った課金アプリ開発に興味があるのですが、実際に加盟店として登録する際の手順や手間なども知っておきたかったので、試しに加盟店登録してみました。以下、その手順の(2022/09/07 時点の内容での)紹介です。


【事前準備】
運転免許証や保険証があればOKです。表面と裏面両方の写真を撮っておきましょう(後ほど使います)。

加えて LINE のアカウントと、LINE がインストールされたスマホがあると理想です。これは加盟店として必要というよりも、アプリケーションの動作確認時に必要になります。


【申請手順】
最初に以下の URL をウェブブラウザで開き、加盟店申請を始めます:
https://pay.line.me/merchant-apply/jp/selection/login-v2

以下のような画面が表示されたら、画面を下にスクロールします:
2022090701


「申請に必要な書類」という項目があります。今回は個人事業主として申請するので、「個人事業主の場合」を選択して内容を確認し、同時に必要な書類(身分証明書を撮影した画像ファイル)を用意します:
2022090702


更に下にスクロールすると加盟店登録を開始するボタンが現れます。メールか LINE で登録できるようですが、(実は私自身はあまり LINE を使わないこともあって(苦笑))今回は「メールで加盟店登録を始める」を選択しました:
2022090703


というわけで、以下はメールでの登録手順となります。最初にメールアドレスを登録します。この後、このアドレスにメールが送信されるので、受け取ることができるアドレスを入力します。そして個人情報取り扱いにチェックを入れて、「認証メールを送信」ボタンをクリックします:
2022090704


すると指定したアドレスに以下のようなメールが届きます:
2022090705


この画面を下にスクロールすると「LINE Pay 加盟店に登録する」ボタンがあるので、これをクリックします:
2022090706


ここから実際に登録する加盟店の情報を入力していきます。まず LINE Pay 加盟店ダッシュボードにアクセスするための加盟店 ID (となる文字列)※1を入力し、右の重複確認を押します。IDの下に「使用可能」と表示されれば、その ID を使うことができます。その後、この ID のパスワードを入力し、再度メールアドレスを入力して、「申請を続ける」ボタンをクリックします:
2022090707

※1 実際の加盟店IDは (入力した文字列)@line.pay となります


アカウント画面が表示され、確定した加盟店 ID が画面に表示されます。続けて「加盟店申請を行う」ボタンをクリックします:
2022090708


ここから加盟店としての登録が始まります。まず加盟店申請の最初に「法人」か「個人」かを選択します。今回は個人登録なので、個人の側にある「選択する」ボタンをクリックします:
2022090709


次に決済手段を選択します。今回自分は自分で開発するウェブアプリ上でのオンライン決済を行うための申請なので、オンライン決済側の下にある「選択する」ボタンをクリックします:
2022090710


以下のような警告メッセージが表示されますが、(他の選択肢もないので)そのまま「オンライン決済のお申込みを続ける」ボタンをクリックします:
2022090711


オンライン決済サービスの利用料金が表示されます(これによるとデジタルコンテンツの決済手数料は 5.5% らしいです、ふむふむ)。内容を確認したら「次へ」ボタンをクリックします:
2022090712


利用規約がいくつか表示されます。内容を参照し、同意する場合はチェックしてください:
2022090713


画面下までスクロールし、すべての項目にチェックが入り、また販売方法や確認事項が「該当しない」が選択されていれば「次へ」ボタンをクリックしてください:
2022090714


次に加盟店の業種情報を入力します。業種カテゴリーとして選択肢が用意されているので、大分類と小分類で近いものをそれぞれ選択します。このまま下にスクロールします:
2022090715


画面下部で取引商材を記入する欄があります。ここにはフリーテキストで商材となるものを入力します。最後に「次へ」ボタンをクリックします:
2022090716


そして会社(個人事業主)に関する情報を入力します。個人事業主の場合、ここは個人名や個人住所を入力することになります。名称や住所、電話番号が入力できたら「次へ」をクリックします:
2022090717


会社・個人事業者の情報として、メールアドレスと店舗またはサイトの URL を指定します(ここ、僕はまだ完成していないサイトなので、アクセスしても認証を求められるだけのアドレスを指定したのですが、審査大丈夫かな・・・)。最後に「次へ」ボタンをクリックします:
2022090718


次は会社・個人事業主の代表者の情報を入力します。個人事業主の場合は先ほどと同じ情報を入力することになると思います。また代表者自宅住所が「会社住所と同一」である場合は、ここにチェックを入れます:
2022090719


次に精算金の振込銀行口座を指定します。金融機関名、支店名、口座種類、口座番号、口座名義を入力します:
2022090720


下にスクロールすると、本人確認書類の添付欄があります。ここに先ほど用意した書類(下の例では運転免許証をカメラで撮影した画像)を添付しています。
2022090721


申請の最後に最終確認ページが表示されます。これまでに入力してきた内容が表示されるので、内容あが正しいことを確認します:
2022090722


下までスクロールし、問題がなければ「提出」ボタンをクリックします:
2022090723


これで LINE Pay 加盟店申請が完了・・・したと思います:
2022090724


同時に登録メールアドレスに以下のようなメールが届きます。申請は完了したので、審査待ちという状況に変わります。ひたすらじっと待ちます:
2022090725


・・・で、今は申請結果を待っている状態です。


個人事業主で申請すると自分の名前を何度か入力する必要があって少し面倒にも感じますが、終わってみるとさほどややこしい内容でもなく、これで登録完了するならかなり簡易化されているように思いました。

まだ申請の結果はわかっていないのですが、手続きという意味では一通り紹介できていると思うので、この段階でいったん公開とします。なお、ここで申請した加盟店登録が通った先では、このサンプルアプリを応用したウェブアプリケーションで使う予定です:
http://dotnsf.blog.jp/archives/1080925187.html




【2022/09/07 追記】
申請時に記載した「店舗サイトの URL」に不備があったようで、個別メールで連絡が来てました。私が記載した URL はアカウント ID とパスワードがないと先に進めないものだったのですが「それだと内容が確認できない」とのこと。ん-、でもアカウントを持ってないと入れない仕様を変えたくはないんだよな。。

という事情も含めて返答してみました。さてどうなることやら。


【2022/09/09 追記】
(アプリケーションがまだ開発中だったという背景もあるのですが)私が申請したアプリケーション URL では商品の内容確認ができなかった、との返答が再度ありました。ん-、まあとはいえアプリができる前に認証外したくはないんだよな。。

というわけで、まだ URL が存在していない場合店舗向けに別途提供されている「販売事業者名と取り扱い商材の確認」をするためのエクセルフォームを送付いただき、ファイルに記入して申請する形で再度申請してみました。今度は「この内容で審査を継続する」との返答まではいただいています。

さて申請結果はどうなることか・・・


【2022/09/12 追記】
無事審査を通過できたようです。サービスの URL がまだ開発中であるか、サービスそのものを非公開(会員でないと中が見れない)ようにする場合は、上述のエクセルフォームを使った申請を使った方がよさそうです:
20220912




自分は多くのウェブサービスやウェブアプリを開発/公開していますが、そのほとんどが無料です。中には「有償でもいいかな?」と思えるものもあったりしますが、無料で公開している最大の理由は「課金管理の仕組みが難しい」からというのが大きいです。

自分で作ったサービスを有料公開しようとすると、いくつかの問題点が出てきます。まずそもそも「どうやって支払ってもらうのか?」を解決する必要があります。理想的には月額制サブスクにして、クレジットカードで・・みたいな感じになりますが、クレジットカードと連動する仕組みを個人で用意するのはかなり大変です。クレジットカード情報は自サービスに記録しないとしても、サービスと連動させるための情報は記録する必要があり、場合によっては個人情報保護も考慮する必要が出てきます。 個人情報を取得しなかった場合でも自サービスのユーザーの情報は自サービス内で管理する必要があります。ログインとかオンラインサインアップとか、パスワードを忘れてしまった場合のリセットなどです。これらの仕組みを提供してユーザーを管理した上で、どのユーザーが有償サービスに移行して、どのユーザーは無料ユーザーのままで、そして有償サービスに移行したユーザーはどういうプランで・・・といった情報をすべて管理する必要があるのでした。これらを解決するための仕組みづくりがサービス本体と比べてもかなり面倒なのでした。多くの個人開発者が共通に悩む点だと思っています。

そんな中で一念発起して、この「ユーザー管理&課金管理」に挑戦してみました。今回はユーザー管理機能として Auth0 を、課金部分は LINE Pay を使ってみました。いずれも Node.js 向けの外部連携ウェブ API (SDK) が提供されていて、普段の自分が開発している環境で比較的容易に実現できるものでした。ユーザー管理機能は Auth0 である必要はありませんが、他の IDaaS を使う場合はその IDaaS 向けにログインやログアウト、オンラインサインアップ等を実装する必要があります。ユーザー毎の課金管理はこのアプリ内のデータベースで管理しますが、その際に使うユーザーの ID をどのように用意するかをあらかじめ考慮しておく点がある点に注意ください。例えば後述のサンプルでは Auth0 のユーザーIDをそのまま使っています。これを見た目でよりわかりやすくするために、ユーザーのメールアドレスを ID として利用することも可能ですが、その場合は個人情報をデータベースに記録することになる、という点に留意が必要です(それが問題ないケースであれば、メールアドレスをユーザー ID とするのがリーズナブルだと思っています。今回は個人情報取得を避ける目的でユーザーを特定しにくい ID を使っています)。

以下にサンプルアプリの使い方と、そのサンプルアプリを利用するための準備作業を記載していきます。なお実際に動かす場合(実際の支払いは発生しませんが、一連の手順を確認する場合)、本アプリでは支払いに LINE Pay を使うので、LINE のアカウントと LINE のインストールされたスマートフォンが必要になります。こちらは事前に用意してください(※後述のサンプルは実際に料金を支払うわけではないのですが、LINE Pay の仕組みを使って支払い処理を行うことにはなるので LINE のインストールされたスマホが必要です)。

【PostgreSQL データベースの準備】
本サンプルアプリケーションでは(Auth0 の)ユーザーと、そのトランザクションを PostgreSQL データベースを使って紐づけて管理します。そのため PostgreSQL データベースが必要です。

クラウド環境でも、ローカルへのインストールでも、Docker コンテナなどでも構わないので、PostgreSQL データベースを1つ用意してください。以下では
 postgres://user:pass@xx.xx.xx.xx:5432/db  
(ユーザー名=user、パスワード=pass で利用可能なデータベース db が xx.xx.xx.xx:5432 で動いている)

という URL でアクセスできる PostgreSQL データベースが存在している想定で説明を続けます。


【IDaaS (Auth0)側の準備】
本サンプルではユーザー管理機能として Auth0 を使います。そのため Auth0 のアカウントを取得した上で、アプリ連携するための準備が必要です。Auth0 のアカウントを未取得の場合はこちらからサインアップしてください(開発用の無料アカウントでかまいません):
https://auth0.com/signup

アカウント取得後にログインし、ダッシュボード画面で「アプリケーション」を1つ作成します。ログイン後のダッシュボード画面左で "Applications" - "Applications" を選び、画面右上に表示される "Create Applications" ボタンをクリックします:
2022090501


"Create application" ダイアログが表示されるので、アプリケーション名(下図では "LINE Pay with IDaaS")を適当に入力後、"Regular Web Applications" を選択してから "Create" ボタンをクリックします:
2022090502


アプリケーション作成後に "Settings" タブを選択します。そして Domain, Client ID, Client Secret とそれぞれ書かれた3つのフィールドに値が設定された値を確認します(これらの値は後で必要になります):
2022090503


そのまま下にスクロールして、"Application URLs" を探します。ここには "Application Login URLs", "Application Callback URLs", "Allowed Logout URLs", ・・といった設定項目が並んでいます。最初の "Application Login URLs" は空のままでいいのですが、次の2つにはそれぞれ以下を入力します(※1):
 ・"Application Callback URLs": "http://localhost:8080/auth0/callback"
 ・"Allowed Logout URLs": "http://localhost:8080"
2022090601


※1 これらは localhost 上で動かす場合の指定です。このアプリをインターネット上の公開サーバーで実行する場合は、そのホスト名や IP アドレスも URL 形式で指定する必要があります。複数の URL を指定する場合は半角カンマで区切って指定します。


ここまで指定できたら画面の最下部までスクロールして "Save Changes" ボタンをクリックして内容を保存します。これで Auth0 の(最低限の)準備は完了です:
2022090602



この後でサンプルアプリケーションを動かします。その際に利用するユーザーは(そのユーザーのメールアドレスを使って)オンラインサインアップすることもできるのですが、この時点で直接作成しておくこともできます。ここではユーザーの作成方法を紹介するので、この方法でアプリケーションで利用するユーザーを作るか、あるいは後ほどアプリケーション実行時にオンラインサインアップしてユーザー登録を行ってください。

Auth0 のユーザーをダッシュボードから作成する場合は、左メニューで "User Management" - "Users" を選び、画面右上の "Create User" ボタンをクリックします:
2022090603


"Create user" ダイアログが表示されるので、上からメールアドレス、パスワード、パスワード確認を入力します。また "Connection" は "Username-Password-Authentication" を選択したままにします。最後に右下の "Create" ボタンをクリックするとユーザーを直接登録することができます:
2022090604


作成されたユーザーは Users 画面に(ダッシュボードから作成したユーザーと、オンラインサインアップしたユーザー両方が)一覧表示されます:
2022090605


Auth0 側の事前準備はこれで終わりです。


【LINE Pay 側の準備】
続いて課金管理を行う LINE Pay 側の事前準備作業を紹介します。具体的にはアプリケーションを LINE Pay 連携させる際に必要な Channel ID と Channel Secret と呼ばれるキー値が必要になるので、これらを取得します。

最終的に作成したアプリで本当にユーザー課金を求める(実際のお金で決済する)場合は LINE Pay に加盟店登録が必要になります。が、今回は試験的に動作確認できればよいレベルで動かしたくて、(開発途中で)試験的に動かした際に課金してほしくもない状態です。 そのような場合向けにサンドボックスと呼ばれる開発者向け環境が用意されているので、そのサンドボックスを使って Channel ID と Channel Secret を取得し、動作確認させてみます(サンドボックス環境での決済はあくまで動作確認のための決済処理であり、実際に支払われることはありません)。

サンドボックスを使うには以下のアドレスからサンドボックス生成申請を行います:
https://pay.line.me/jp/developers/techsupport/sandbox/creation?locale=ja_JP

国(JP(日本), TW(台湾),TH(タイ)から選択)、サービスタイプ(Online)、利用通貨(JPY(日本円)かUSD(アメリカドル)から選択)、そしてメールアドレスを入力し、最後に "Submit" ボタンをクリックします:
2022090606


すると指定したメールアドレスに以下のようなメールが届きます:
2022090607


メールに記載されているテスト ID とパスワードを使って LINE Pay の加盟店 My Page にアクセス/ログインしてみます。以下のページを開いてテスト ID とパスワードを入力し、最後に「ログイン」ボタンをクリックします:
https://pay.line.me/portal/jp/auth/login

2022090608


ログイン直後は以下のような画面が表示されます。サンドボックスに移動するには画面右上の "Sandbox" と書かれたメニューをクリックします:
2022090601


サンドボックスが表示されたら、画面左のメニューから「決済連動管理」- 「連動キー管理」を選択します。連動キー管理画面でパスワードチェックの画面が表示されたら、(上述のサンドボックス申請をした時にメールで送られてきた)パスワードを入力して「確認」ボタンをクリックします:
2022090602


すると連動キー管理画面内に "Channel ID" と "Channel Secret Key" が表示されます。これらはアプリケーションを動かす際に必要になるものです:
2022090603


LINE Pay 側の事前準備もこれで終わりです。ここまでできていれば実際にサンプルアプリを動かすことができます。


【サンプルアプリの準備】
では、ここまで準備してきた
 ・PostgreSQL データベース
 ・Auth0 によるユーザー管理
 ・LINE Pay によるオンライン支払い処理
が連動する Node.js サンプルアプリケーションを実際に動かしてみます。

まずサンプルアプリケーションは Node.js 前提で作っているので、 Node.js の導入がまだであれば最初に自分の環境向けのモジュールをインストールしておいてください:
https://nodejs.org/ja/


次にソースコードを入手します。以下のリポジトリから git clone するか zip & download & unzip でソースコードを入手してください:
https://github.com/dotnsf/linepay-idaas

2022090604


このソースコードのルートフォルダに linepay-idaas.ddl というファイルがあります。この DDL ファイル(の内容)で PostgreSQL データベースのテーブル定義を行います。psql などを使って PostgreSQL に接続し、この DDL ファイルと同じ内容を実行してテーブルを定義してください(psql を使う場合は接続語に "\t linepay-idaas.ddl" コマンドで実行できます):
> \i linepay-idaas.ddl
> \q

また、このアプリケーションはいくつかの環境変数を参照して動きます。その環境変数を指定できるよう、ソースコードのルートフォルダ(app.js と同じフォルダ)内に .env というファイルを作り、以下のような内容に編集して保存してください:
LINE_PAY_CHANNEL_ID=XXXXXXXX(LINE Pay Channel ID の値)
LINE_PAY_CHANNEL_SECRET=XXXXXXXX(LINE Pay Channel Secret の値)
LINE_PAY_CONFIRM_URL=http://localhost:8080/pay/confirm(このままの値を指定)
DATABASE_URL=postgres://user:pass@xx.xx.xx.xx:5432/db(PostgreSQL データベースのアクセスURL)
PGSSLMODE=no-verify(PostgreSQL データベースにアクセスする際の SSL モードを指定、SSL を使わない場合は disable を指定)
AUTH0_CALLBACK_URL=http://localhost:8080/auth0/callback(このままの値を指定)
AUTH0_CLIENT_ID=XXXXXXXX(Auth0 Client ID の値)
AUTH0_CLIENT_SECRET=XXXXXXXX(Auth0 Client Secret の値)
AUTH0_DOMAIN=dev-xxxxxxxx.us.auth0.com(Auth0 Domain の値)

↑上で説明した PostgreSQL や Auth0、 LINE Pay で取得した値を多く使っています。設定時に取得した値を正しく入力してください。

またこちらは編集必須ではないのですが、実際にオンラインで購入する(LINE Pay で支払う)商品の情報を item.json ファイルに記載しています。この中身を編集することで、この後の動作確認時に購入する商品の名称や価格を変更することができます(デフォルト状態では以下のようになっていて、この場合は「サービス利用料金」という商品を 「100 円」で購入することになります)。必要に応じて編集して使ってください:
{
  "productName": "サービス利用料金",
  "amount": 100,
  "currency": "JPY"
}


.env ファイルと item.json ファイルの準備ができたら、後はアプリケーションの実行に必要なライブラリをインストールします。以下のコマンドを実行して、依存ライブラリをインストールします:
$ cd linepay-idaas
$ npm install

【サンプルアプリの実行】
では実際にサンプルアプリケーションを起動して、実際にログイン&支払い処理の稼働確認をしてみましょう。まずは以下のコマンドでアプリケーションサーバーを起動します(ちなみにアプリケーションサーバーを止める場合は Ctrl +C を押します):
$ npm start

アプリケーションが起動すると 8080 番ポートで待ち受けるので、ウェブブラウザから http://localhost:8080 を指定してアクセスします(実際の運用ではスマートフォンのブラウザからアクセスすることもあると思っていますが、今回は PC ブラウザを使っています)。このアプリケーションは未ログインの状態でアクセスすると、強制的にログインページに遷移するように作られているので、Auth0 のログイン画面に移動します。ここで(ダッシュボードからユーザーを作成済みであれば)メールアドレスとパスワードを指定してログインします。または一番下のリンクからオンラインサインアップすることも可能です。いずれかの方法でログインします:
2022090605


ログインに成功すると、以下のような画面が表示されます:
2022090606


画面右上にはログインしたユーザーの情報が表示されています。鍵のマークがついたユーザーは「(まだ支払い処理を行っていない)無料ユーザー」であることを示しています。またその右には Auth0 のユーザーアイコン(特に指定していない場合はデフォルトアイコン)が表示されます。なお、この部分をクリックすることでログアウトも可能です:
2022090607


また画面中央にはそのユーザー(今の状態であれば無料ユーザー)向けの内容が表示されています。現在は無料ユーザーなので、無料ユーザー向けのコンテンツと、有料ユーザーになるための支払いを行うアイコンボタン(緑の "LINE Pay" ボタン)が表示されています。後で有料ユーザーになると、この画面が変わるので確認しておいてください:
2022090608


ではこの無料ユーザーが支払い処理を行うことにします。"LINE Pay" と書かれた緑のボタンをクリックします。すると以下のような画面に切り替わります。LINE Pay での支払い処理に移るため、LINE がインストールされたスマホを使って、LINE アカウントを指定してログインするか、画面の QR コードをスキャンしてログインしてください:
2022090601


するとスマホ側には以下のような画面が表示されます。item.json ファイルで指定した内容の商品名と価格が表示され、"PAY NOW" というボタンが表示されています。この "PAY NOW" ボタンをクリックして購入します(サンドボックス環境で実行しているので、実際の決済や支払いは行われません):
2022090601


購入すると、"PAY NOW" ボタンは「決済が完了しました」というメッセージに切り替わります:
2022090602


購入処理と同時に Auth0 にログインしていたウェブブラウザの画面が自動的に更新され、以下のような内容になります:
2022090606


変わった点として、まず画面右上のアイコンから鍵マークが消えています。これは「有料ユーザー」のアイコンで、無料ユーザーから有料ユーザーへ切り替わり、そのことをアプリケーションでも認識できたことを意味しています:
2022090607


また画面中央の内容が無料ユーザー向けコンテンツから有償ユーザー向けコンテンツに変わりました。入金によってユーザー属性が切り変わったことで有償ユーザー向けの画面を表示しています:
2022090608


↑なお、この画面内には「(動作確認検証用)フリーユーザーに戻る」というリンクが表示されています。実際のアプリケーションでは有償ユーザーがわざわざ無料ユーザーに戻る、というアクションを起こしたり、そのためのリンクを用意することはないと思うのですが、今回のアプリケーションでは何度も動作確認できるよう(一度有償ユーザーになった後も、無料ユーザーに戻って実行したくなることもあると思うので)意図的にこのようなリンクを用意しています。 このリンクをクリックすると確認メッセージ後に支払いデータの削除が実行され、無料ユーザーに戻ることができます(繰り返しますが、あくまで動作確認用の機能であり、実際のアプリケーションではこのようなリンクを付けることはないと思っています):
2022090606


なお、上述の「無料ユーザー向け画面」「有償ユーザー向け画面」は、ソースコード内の views/index.ejs 内で以下のように定義しています。この部分を変更して再実行することで無料ユーザーおよび有償ユーザー向けの画面をカスタマイズすることができます。興味ある方はカスタマイズにも挑戦してみてください:
  :
  :
<div class="container">
<% if( user.type == 0 ){ %>
フリーユーザー向けコンテンツ部分<br/>
<a href="/pay/reserve"><img src="/pay_btn.png"/></a>
<% }else{ %>
有償ユーザー向けコンテンツ部分<br/>
<a href="#" onClick="userDeleteType();">(動作確認検証用)フリーユーザーに戻る</a>
<% } %>
</div>
  :
  :

緑のタグに囲まれた赤字部分が無料ユーザー向け画面青字部分が有償ユーザー向け画面として表示されます

サンプルアプリ内でログインしたユーザーが課金しているかどうかの判断を含めて実現できていると思っています。


決済処理をした後で LINE Pay 加盟店 My Page にアクセスすると、取引管理や売上管理メニューから決済内容やその ID(=トランザクションID)を参照することができます(ただこの時点では、あくまで LINE 内の取引としてしか参照できないので、「誰が」決済したかを確認することはできません):
2022090609


このアプリケーションを使って「誰が」決済したのかを参照するには、アプリケーションの PostgreSQL データベース内を参照する必要があります。PostgreSQL データベースに接続して transactions テーブル内を参照すると、トランザクション ID とユーザーID、注文 ID などが紐づけられて管理されていることが確認できます:
2022090602


ユーザーIDは(このアプリケーションの場合は)Auth0 のユーザー ID なので、ユーザーを特定したい場合は Auth0 のユーザー一覧から、この ID をキーに検索することでユーザーを特定することができます。


なお、本サンプルアプリケーションでは IDaaS として Auth0 を使っていますが、他の IDaaS でも同様に使うこともできると思います。ログインやコールバックといった処理部分は書き換えが必要だと思っていますが、ユーザーを一意に特定する ID さえ取得できれば、その ID を PostgreSQL データ内の user.id として使うことになるだけなので、比較的容易に移植できると思っています。

いかがでしょう? とりあえずこのアプリをベースに改良することで(または同等のアプリを実装することで)個人開発サービスに組み込めるレベルで Auth0 と LINE Pay を使ったウェブサービスを開発できそうな目途は立ったように感じています。


【(サンドボックス環境ではなく)実際に取引する場合の注意】
とりあえず開発環境内で実際に取引できることは確認できたと思っています。これを(画面を変えたり、商品や値段を変えたり、決済方法を変えたり、など)カスタマイズして組み込むことで、個人の作ったウェブサービスに課金機能を組み込むこともできると思っています。が、そのためには3つの課題を意識する必要があります。

1つ目は「サンドボックスではなく、正式な取引をするには LINE Pay に加盟店登録が必要になる」ことです。私自身もここは実際に試したことはなく、どのくらい大変なのか/よゆーなのか、よくわかっていません。ちょっと調べた範囲で(2022/09/06 時点の)現状では PayPay への加盟店登録も必要そうで、ちと面倒そうな印象もあります・・・ 詳しい手続きについてはこちらを参照ください:
https://pay.line.me/merchant-apply/jp/selection/login-v2

(2022/09/11 追記)
実際に加盟店登録に挑戦してみました:
http://dotnsf.blog.jp/archives/1080934049.html


2つ目は支払い方法の問題です。例えば有償で提供するサービスが1回ごとの課金であったり、初回まとめて課金後はずっと使える、というものであれば実装にも大きな問題はないと思うのですが、例えば「月額サブスクリプション」のような支払いサービスだと LINE Pay 側が未対応のように思っています(違っていたらごめんなさい)。例えば支払いのタイミングを記録しておいて、過去の同一月に支払いの記録があればその月は有償ユーザーとして扱い、支払い記録がない場合は無料ユーザーとして扱う、などの工夫をアプリケーション側で行う必要があるように思えます。


3つ目は決済手数料の問題です。おそらくこの情報が最新だと思っているのですが、デジタルコンテンツの決済手数料は 5.5% です。つまり実際に1万円売り上げた場合 550 円を手数料として LINE Pay に支払う必要がある、またこの割合はいつか変わる可能性がある、という点に留意ください。
https://linecorp.com/ja/pr/news/ja/2021/3876



(こちらを参考にさせていただきました)
https://qiita.com/nkjm/items/b4f70b4daaf343a2bedc



このページのトップヘ