noteと同じような機能を持たせた独自コンテンツ販売用コードファイル『GateLock LP』のご紹介

noteのようなプラットフォームでコンテンツ販売を行う場合は、購入者のメールアドレスや詳細なユーザー情報を取得することが難しいほか、運営側の都合による制限や、一方的な凍結を受けるリスクもあります。

そのようなリスクを避けたい場合には、noteと同じような販売サイトを自作することが一つの解決策といえるでしょう。

このときオススメしたいのが、GateLock LP（ゲートロック LP）です。

GateLock LPを利用すると、誰からの制限を受けることもなく、独自のコンテンツ販売サイトをいくつでも展開することが出来ます。

◆GateLock LPを使って作成した販売サイトの例↓↓↓

サンプルサイト：https://sl.as-sfplan.com/

GateLock LPの機能説明

こちらはGateLock LPのデフォルト画面になります。

ここには文章や画像はもちろん、動画でもSNSカードでもscriptタグでも何でも、どのようなコンテンツでも自由に掲載することができます。

掲載内容にしろカスタマイズにしろ、他所からの制限を受けることは何一つありません（法的な制限を除く）。

購入ボタン

ページトップから下にスクロールすると「購入はこちら」の追尾型ボタンが表示されます。

この追尾型ボタンを押すと、「ユーザー名」と「パスワード」の入力用モーダル画面が現れます。
※ユーザー名は20文字までとし、それを超えた場合はフォーム内にメッセージが表示されるように設定しています

ここで任意のユーザー名とメールアドレスを入力して「購入手続き」のボタンを押すと、モーダルの表示が下記のように切り替わります。

※本番環境では決済フォームに遷移することなどが想定されますが、本サンプルではボタンを押した時点で購入完了としています。購入ボタンのロジックにつきましては、各自にて設定をお願いします。

このとき、メールボックスにはログイン用のパスワードが届きます。

ログイン機能

メールで届いたパスワードとユーザー名を、ページ上部のフォーム内に入力すると、下記のように画面が切り替わります。

ログイン前には無かったコンテンツが、ログイン後には表示されます。

GateLock LPはレスポンシブ対応済みです。使用するデバイスに応じて適正な表示に切り替わります。

複数箇所での同時ログイン防止機能

別の場所で同じユーザー名とパスワードを使ってログインすると、最後にログインしたウェブページ以外はすべて強制ログアウトされるようになっています。
この機能によって、購入したパスワードの使い回しなどの不正を防止できます。

ダウンロードファイル＆フォルダの利用方法

GateLock LP（ゲートロック LP）のコードファイルは、シンプルなHTML、CSS、およびJavaScriptで構築しており、サーバーサイドではNode.jsとMySQL/MariaDBデータベースを使用しています。

インターネット上に公開する際には、ご自身の環境に合わせてサーバーにデプロイ（≒アップロードおよび設定）してください。

具体的な手順はのちほど案内するとして、まずはローカル環境で試行する方法について説明します。

ローカル環境（PC上）で試行する方法

はじめに下記教材を参考にしながら、ご自身のパソコンにXAMPP（ザンプ）というソフトウェアをインストールしてください。

初日 ～サーバーの環境を用意する～｜SFP Business

XAMPPを立ち上げることで、ご自身のパソコンをウェブサーバーとして利用できるようになります。

次に、Node.jsの公式ウェブサイト（https://nodejs.org/en）からインストーラーをダウンロードして、ご自身のパソコンにNode.jsソフトウェアをインストールしてください。
Node.jsインストール時の案内は英語表記ですが、「Next（次へ）」や「OK」ボタンを押して、指示に従って進めるだけで大丈夫です。
特別な操作は不要ですので、安心してインストールを進めてください。

これにより、あなたのパソコン上でGateLock LP（ゲートロック LP）を試行する環境が整います。

ターミナルで必要なコマンドを実行する

このあとダウンロードできるGateLock LPのZIPフォルダを展開し、右クリックからターミナル（≒コマンドプロンプト）を立ち上げてください。

もし、右クリックからターミナルを開けない場合は、デスクトップの検索窓にcmdと入力してコマンドプロンプトを開き、「cd "C:\Users\〇〇〇\デスクトップ\GateLock LP"」または「cd "C:\Users\〇〇〇\OneDrive\デスクトップ\GateLock LP"」といったコマンドを実行して、GateLock LPのあるディレクトリに移動してください（〇〇〇にはユーザー名を入力します）。
上記のコマンドでエラーになるようなら、そのエラー文をコピーしてAIに質問すると正しいコマンドを案内してくれます。

そして、ターミナルの黒い画面上で「npm install」コマンドを実行すると

npm install

GateLock LPフォルダ内に必要なNode.jsパッケージ（モジュール）がインストールされます。

↓　↓　↓

次に、http://localhost/phpmyadminを開いて、下記のSQLコマンドを実行し、仮のデータベースを作成します。

（注）コマンド内にある’user_management’というデータベース名は、お好きな半角英数字に変更できます。データベース名を変更した際には、後ほど案内する.envファイルのDB_NAMEもそれに合わせて変更してください。

-- データベースの作成
CREATE DATABASE IF NOT EXISTS user_management;

-- データベースの使用
USE user_management;

-- ユーザー権限の設定
CREATE USER 'myuser'@'localhost' IDENTIFIED BY 'mypassword';
GRANT SELECT, INSERT, UPDATE, DELETE ON user_management.* TO 'myuser'@'localhost';
FLUSH PRIVILEGES;

そして、仮のデータベースを選択し、そこにGateLock LPフォルダの中にある’user_management.sqlファイル’をインポートしてください。

最後に、GateLock LPフォルダ内にある.envファイルの中身を、あなたの実際に使用する内容に書き換えます。
※データベースのホスト名（DB_HOST=localhost）は変更不要です

あとはターミナルで「node app.js」コマンドを実行し、

node app.js

ブラウザでhttp://localhost:3003/を開けば、あなたのパソコン上でGateLock LPの詳細を確認できます。

なお、ここまでの説明が少し早く感じられた方もいらっしゃるかもしれません。プログラミング初心者の方には難しい部分もあったかと思います。

その場合は、生成AIプログラミングの教科書『大蔵～TAIZO～』の初日から4日目までの無料コンテンツを参考にしてみてください。理解の助けになるはずです。

生成AIプログラミングの教科書『大蔵~taizo~』｜SFP Business

GateLock LPのファイルをダウンロードする

GateLock LPを構成するファイルは、ZIP形式で圧縮されています。圧縮ファイルの内容は以下の通りです。

では、さっそくGateLock LPのファイルコードをダウンロードしましょう。