記事編集画面で利用できる埋め込みコンテンツ（HTML）について説明します。
埋め込みコンテンツは、「ペイウォール外にあるコンテンツへ認証を引き継ぐ」ための機能です。2021年６月現在はHTMLとMatterportの２種類の埋め込みコンテンツがサポートされています。本機能は有償サービスである codoc pro により提供されておりますので利用には契約が必要となります。
これは何？
この機能を使うと、ページ全体や特定箇所に対しペイウォールでの認証を利用したコンテンツ保護が行えます。認証をおこないたいHTML内で埋め込みコンテンツ(HTML)のタグを貼り付けてください。
いつ使うか？
運営するサイト内にて特定ページを有料化したい場合にご利用いただけます。codocのペイウォールではJavascript等の動作やサイトレイアウトに支障が出る、コンテンツの管理をサイト内にとどめたい場合等の課題に対応できます。
どうやって使うか？
埋め込みコンテンツは記事の新規投稿時には登録できないため、いったん下書きにした後、編集画面より以下の作業をおこなってください。
- 有料化したいHTMLを用意します。
- 記事の価格を指定します。単体ではなくサブスク販売にする場合は適宜サブスクリプションを指定します。
- 埋め込みコンテンツの登録をおこないます。コンテンツタイプはHTMLとし、適宜ラベルを指定し、HTMLに適当な文字列をいれて登録（URLとHTMLについては後述します）。
- 一覧に指定したラベル名で表示されるので登録した埋め込みコンテンツ（HTML）のタグを取得します。
- 取得したタグを有料化したいHTMLに貼り付けます。
タグのコピーボタンから以下のようなタグがコピーバッファーにはいるので適宜作成したHTMLに貼り付けてください。
<html>
test.html
<head>
<title>サンプル</title>
<!– codocのスクリプトタグ –>
<script src=”https://codoc.jp/js/cms.js” data-usercode=”” charset=”UTF-8″ defer”>
</head>
<body>
<div>hello world!</div>
<!– 埋め込みコンテンツのタグ –>
<div id=”codoc-element-記事コード” class=”codoc-elements” data-auth-mode=”modal” data-auth-redirect-url=”” data-external-content-code=”埋め込みコンテンツ毎にランダムな文字列”>
</body>
</html>
上記のように埋め込みコンテンツ（HTML）タグを含んだHTMLを作成し、アクセスすると以下のようにペイウォールの購入フォームがモーダルで表示されます。このタグを貼らない場合はモーダルは表示される「hello world!」という出力がおこなわれます。アクセスしたユーザーはコンテンツの購入を行わないと本来表示される内容が閲覧できない仕組みが実現できます。
埋め込みコンテンツ（HTML）によって保護されるコンテンツ内容について注意することがあります。張付け先のHTMLの内容についてユーザーインターフェース上、閲覧をすることは困難ですが、ブラウザのソース閲覧機能などをつかった場合、ペイウォールを介さないで内容が把握できてしまいます。このため、確実に保護したいコンテンツについては埋め込みコンテンツで指定できるHTML、もしくはURL内に配置するようにします。上記、購入後のスクリーンショットでは「認証成功時に出るテキスト」という内容が表示されています。これは管理画面で指定した内容で、埋め込みコンテンツのタグの位置に置き換わって表示される仕様となっています。当然ながらこの部分は動的に出力されるもののため、ブラウザのソース閲覧では確認できないものとなります。埋め込みコンテンツ（HTML）の設定画面ではタグと置き換わるコンテンツの指定方法として前述で利用した「HTML」の他に「URL」があります。
上記の設定をおこなうと、購入時にURIで指定されたHTMLファイルを取得し、タグがその内容と置き換わります。上記の場合は相対パス指定となるため、設置するHTMLとおなじディレクトリ上に「test.content.html」というファイル名でHTMLを設置してください。ファイルの内容を「test.content.html 内に記述したテキスト」とし、有料化したいページ上で認証をおこなうと以下のように表示されます。
認証前は別ページに遷移させる
埋め込みコンテンツ（HTML）では購入前にページへアクセスした場合、別ページに遷移させることも可能です。
貼付けタグの取得時にモーダルではなく、「リダイレクト」でタグを取得します。モーダルと違うのは“data-auth-mode”属性が”redirect”と指定されるだけですのでご自身で属性を変更いただくことでも問題はありません。また、手動で指定する属性がもうひとつあります。“data-auth-redirect-url” に遷移先のURLを指定してください。遷移先のページではコンテンツを購入するためのペイウォールが必要なことから、記事一覧で取得できる当該記事のcodocタグを取得し貼付けをおこないます。
<div id=”codoc-element-記事毎にランダムな文字列” class=”codoc-elements” data-auth-mode=”redirect” data-auth-redirect-url=”authorize.html” data-external-content-code=”埋め込みコンテンツ毎にランダムな文字列”>
<html>
authorize.html
<head>
<title>サンプル</title>
<!– codocのスクリプトタグ –>
<script src=”https://codoc.jp/js/cms.js” data-usercode=”” charset=”UTF-8″ defer”>
</head>
<body>
<div>コンテンツを閲覧するには購入をお願いします。</div>
<!– codocの記事タグ –>
<div id=”codoc-entry-記事ごとにランダムな文字列” class=”codoc-entries” data-show-pay-without-account-button=”0″>この続きはcodocで購読</div></body>
</html>
上記は遷移先を authorize.html とし、authorize.htmlにはcodocの記事のタグを組み込んで設置します。購入前に埋め込みコンテンツで保護されたHTMLページにアクセスするとauthorize.htmlに遷移します。埋め込みコンテンツ（HTML）を利用する場合、codocアカウントは必須となるため、data-show-pay-without-account-button=”0″を貼付けタグの属性に追加し、「アカウント登録しないで購入」ボタンを非表示としています。モーダルでは購入ページをカスタマイズが十分におこなえないため、より詳細に購入についての説明をしたい場合などはリダイレクトを利用することをお勧めします。
まとめ
今回は埋め込みコンテンツ（HTML）について説明をしました。codocの有料記事情報をもとにペイウォールの外にあるコンテンツに対しての認証が可能になることがおわかりいただけたと思います。この機能を利用することによりcodocのCMSに依存しないでコンテンツ運用できることも場合によってはメリットとなるのではないでしょうか。サイト内でのコンテンツ販売時において本機能をご検討いただければ幸いです。