サイトに訪れた人が codoc でコンテンツを購入しているか確認する方法を紹介します。今回はモデルケースとして月額制のサブスクを販売し、そのサブスクを購入している場合はサイト内で広告の非表示をおこなう、といったことを実装してみます。
必要となる作業
- 拡張機能の有効化
- サブスクとそれに紐づく記事作成
- タグを取得してHTMLを作成
- APIによる購入状態の確認と広告の非表示化
拡張機能の有効化
独自にAPI利用をおこなうため、codoc pro の契約と、拡張機能を有効化します。手順についてはこちらから確認してください。
サブスクリプションと記事作成
codoc の管理画面にて月額制のサブスクを作ります。価格は100円、期間は月間とします。
サブスクの作成後、それが紐づけられた記事を作成します。購入状態を確認するために、 codoc が提供する記事の所有権を確認するAPIを利用するためです。記事作成時には単体販売しない、サポート販売は無効化しておきしょう。確認用の記事なるため、codoc のサイト内で一覧されると困るため公開ステータスは「限定」として作成します。
タグを取得してHTMLを作成
広告エリアとコンテンツを有するHTMLのサンプルを作成します。今回は拡張機能が提供するログインウィジェットを設置し、サイト内で codoc のログイン管理をおこなえるようにします。
<html>
<head>
<!-- codoc 用のスクリプトタグ ウィジェット→拡張機能から取得可能 -->
<script src="https://localhost/js/cms-connect.js" data-css="blue-square" charset="UTF-8" data-usercode="*****" data-connect-code="*****" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 50vh;
}
.contents {
width: 300px;
margin-bottom: 20px;
text-align: center;
}
</style>
</head>
<body>
<!-- サンプルコード(ペイウォールの表示方法と、購入済かのチェック方法) -->
<div class="container">
<div class="contents">
<p>コンテンツ</p>
<p>コンテンツ</p>
<p>コンテンツ</p>
<p class="ads">広告</p>
<!-- ログイン・ウィジェット -->
<div id="codoc-connect-login-*****" class="codoc-connect-login"></div>
</div>
</div>
</body>
</html>APIによる購入状態の確認と広告の非表示化
記事の所有権を確認するAPIを用いて購入状態を把握します。使うAPIはおなじですがフロントエンド・サーバーサイドいずれでも利用できます。
記事の所有権を確認するAPI仕様（予告なく変更される場合もあります）
curl -X GET -H "" "https://$CODOC_HOST/api/v1/paywall/$SITE_USER_CODE/entries/$ENTRY_CODE"
params:
check_owned: 記事の所有状態を確認- フロントエンドの場合
codoc が提供する javascript API codocCMS の関数を利用し、ログインしたユーザーが記事を所有しているか確認をおこないます。記事の所有＝サブスクの加入が確認できた場合は広告を非表示化します。
<script type="text/javascript">
// サブスクに紐づけした記事の記事コード
let codocEntryCode = '*****';
window.onload = function codocCMSIsReady() {
// codocCMSが使えない場合は抜ける
if (window.codocCMS.noCore) {
return;
}
// codocCMSが使えるようになるまで待つ
if (window.codocCMS.ready) {
// トークンがある場合は契約状態を確認
if (codocCMS.hasToken()) {
// 購読状況の確認 apiGetEntriesに当該サブスクに紐付けられた記事コードを指定
let res = codocCMS.apiGetEntries(codocEntryCode,{ "checkOwned": 1 });
res.then(response => {
console.log('購読状況の確認')
if (response.status == 200 || response.status == 304 || response.status == 403) {
console.log('契約中なので広告を非表示');
if ( response.data.status) {
let ads = document.getElementsByClassName('ads');
for (let i = 0; i < ads.length; i++) {
ads[i].style.display = 'none';
}
} else {
console.log('契約してないので広告を表示');
}
} else {
console.log( 'API Call Failed: ' + response.statusText );
}
});
} else {
console.log('契約状態が不明のため広告を表示');
}
return;
}
setTimeout(codocCMSIsReady, 100);
}
</script>- サーバーサイドでも実装可能
WordPress をご利用の場合は codoc プラグインが提供する関数を利用することが可能です。それ以外は記事の所有権を確認する上記APIを適宜利用してください。
外観→テーマエディターにて functions.php に以下を追加 (テーマ毎に追加が必要です)
function codocCheckLogin() {
global $_CODOC;
$ret = 0;
if (isset($_CODOC)) {
if ($_CODOC->util->check_login()) {
$ret = 1;
if ($_CODOC->util->check_owned('記事コード')) {
$ret = 2;
}
}
}
return $ret;
}広告非表示の分岐を自身のテーマ内で実装します。
codocCheckLoginの戻り値が１の場合はログインしている状態、２の場合はログインしていてサブスクを購入している状態です。
<?php
if (codocCheckLogin() == 1) {
echo ('ログイン済');
} elseif (codocCheckLogin() == 2) {
echo ('サブスク購入者');
}
?>まとめ
いかがでしたでしょうか。codoc が提供するAPIを利用し、当該ユーザーが課金ユーザーかそうでないかを見分ける方法を紹介させていただきました。広告非表示化のほか、課金ユーザーにはcodoc のペイウォールを経由せずにコンテンツを表示するといったことも実現できることがおわかりいただけたと思います。